Memperkenalkan Jembatan React-Gutenberg: Dukungan Blok Tanpa Kepala untuk Pengalaman Pengeditan yang Lebih Baik

Anda senang dengan peluang yang ditawarkan WordPress tanpa kepala, tetapi tim pemasaran klien Anda terikat dengan editor WYSIWYG Gutenberg.

Lihat bagaimana dukungan blok Gutenberg baru dari Faust untuk proyek tanpa kepala menyatukan keduanya untuk memodernisasi pengembangan Anda sambil memberdayakan pemasar Anda.

Pembicara:

• Teresa Gobble, Insinyur Perangkat Lunak di WP Engine
• Blake Wilson, Insinyur Perangkat Lunak Senior di WP Engine

Slide Sesi:

Salinan:

TERESA GOBBLE: Hai teman-teman. Nama saya Teresa Gobble. Saya seorang insinyur perangkat lunak dengan WP Engine yang bekerja di tim Faust.

Dan saya di sini bersama Blake Wilson, seorang insinyur perangkat lunak senior, untuk memperkenalkan Anda pada React-Gutenberg Bridge– dukungan blok tanpa kepala untuk pengalaman pengeditan yang lebih baik. Selamat datang. Mari kita mulai.

Jadi hari ini, kita punya banyak hal untuk dibahas. Pertama-tama, saya akan membahas beberapa hal terkait masalah dan solusi yang kami miliki untuk Anda, serta nilai React-Gutenberg Bridge. Kemudian kita akan pergi ke Blake, yang akan memberi kita demo dari React-Gutenberg Bridge yang sedang beraksi. Setelah itu, kita akan membicarakan beberapa detail teknis. Dan kami juga akan mengunjungi peta jalan masa depan dari apa yang kami miliki untuk ini.

Jadi inilah masalahnya. Tidak ada cara yang efisien untuk menerjemahkan blok Gutenberg dari WordPress ke ujung depan tanpa kepala. Solusi di luar sana yang ada belum dapat diskalakan atau intuitif untuk memberikan pengalaman pengembang yang dapat diharapkan oleh pengembang tanpa kepala.

Decoupling merusak kemampuan untuk menggunakan konten blok Gutenberg di editor secara alami. Dan agensi dibiarkan bertanya-tanya bagaimana mereka membuatnya dengan cara mereka sendiri atau dari awal dengan sedikit panduan. Dan masih banyak pertanyaan yang belum terjawab untuk orang-orang.

Bagaimana dengan gaya? Bagaimana dengan penggunaan kembali, blok dinamis, InnerBlocks? Nah, di sinilah React-Gutenberg Bridge berperan. Ini adalah solusi dalam dua bagian– pertama, cara untuk mengekspos blok Gutenberg secara terprogram sehingga dapat diurai dan dibaca di ujung depan tanpa kepala. Bagian ini disebut Blok Konten WPGraphQL.

Kedua, kami memiliki konektor untuk memfasilitasi penyiapan dan rendering blok tersebut di ujung depan tanpa kepala. Dan ini adalah paket yang disebut Faust WP Blocks. Di sini Anda akan melihat langkah-langkah tentang cara kerjanya dengan kedua bagian solusi ini.

Backend berbasis React situs web Anda memiliki Gutenberg Blocks, yang diekspos oleh plugin WPGraphQL Content Blocks. Itu memaparkan konten block.json ke WPGraphQL. Ini menyediakannya ke plugin, yang disebut WPGraphQL.

Dan kemudian beralih ke paket konektor, yang memungkinkan kustomisasi, penemuan, dan rendering blok. Dan ini sebenarnya akan dibahas lebih banyak saat kita membahas diskusi teknis dan demo hari ini. Jadi, nilai apa yang diberikan hal ini kepada tim Anda?

Nah, ini adalah solusi pendapat end-to-end, yang mengurangi kompleksitas dan ambiguitas. Ini menghemat waktu pengembangan dengan mengikuti konvensi tertentu. Ini memungkinkan blok dan pola blok untuk digunakan dalam kombinasi. Dan dapat digunakan kembali berulang kali. Sekarang setelah Anda memiliki gambaran tentang cara kerja React-Gutenberg Bridge, mari kita pergi ke Blake untuk melihat demo-nya.

BLAKE WILSON: Terima kasih, Teresa. Halo semuanya. Saya Blake Wilson. Saya seorang insinyur perangkat lunak senior di WP Engine.

Dan saya di Faust JS membangun tim Faust. Saya punya demo yang sangat bagus untuk Anda hari ini memamerkan dua komponen yang telah kami buat untuk membantu mengatur Jembatan React-Gutenberg ini. Jadi mari kita langsung ke dalamnya.

Untuk memulai, saya akan menunjukkan kepada Anda apa yang saya miliki di sini untuk penyiapan saya. Dan kemudian kita bisa masuk ke kode sebenarnya dan melihat apa yang kita dapatkan di sana. Jadi sebagai permulaan, saya punya situs WordPress di sini yang berjalan di Lokal.

Saya sudah menginstal beberapa plugin. Jadi saya punya plugin Faust. Ini membantu memfasilitasi pratinjau dan semua hal bagus semacam itu di situs Faust JS Anda. Saya memiliki WPGraphQL, yang diperlukan untuk mengubah situs WordPress Anda menjadi titik akhir GraphQL.

Dan kemudian saya mendapatkan Blok Konten WPGraphQL. Jadi ini adalah salah satu plugin yang kami buat untuk membantu memfasilitasi React-Gutenberg Bridge ini. Solusi ini ada dalam dua bagian utama.

Jadi kami memiliki salah satu bagian untuk benar-benar mengekspos data Blok Gutenberg secara terprogram melalui WPGraphQL, dan kemudian bagian lain untuk menggunakannya di bagian depan Faust JS Anda. Mari kita mulai dengan melihat Blok Konten WPGraphQL dan cara kerjanya.

Jadi kita akan masuk ke IDE grafis kita. Dan saya menyiapkan kueri ini di sini untuk mengambil data halaman. Jadi dalam hal ini, kita hanya mendapatkan judul halaman.

Jadi apa yang dilakukan GraphQL Content Blocks adalah mengekspos tipe blok konten dalam skema GraphQL Anda. Jadi jika kami mengetik blok konten, Anda dapat melihat di sini, kami mendapatkan informasi untuk halaman yang diberikan ini dan semua blok di halaman ini. Mari kita pergi dan mengedit halaman ini dan menambahkan beberapa konten.

Jadi kita akan masuk ke halaman sampel. Dan Anda bisa lihat di sini kita punya batu tulis kosong. Jadi mari kita lanjutkan dan buat beberapa blok. Mari buat beberapa kolom di sini.

Dan kami akan membuat kolom 50/50. Mari tambahkan paragraf di bagian ini, lalu di gambar di bagian ini. Jadi saya punya gambar di sini di perpustakaan media saya. Mari kita lanjutkan dan masukkan ini.

Dan Anda bisa lihat di sini, kami memiliki dua kolom. Sekali lagi, sebuah paragraf di sebelah kiri, dan sebuah gambar di sebelah kanan. Jadi mari kita perbarui ini. Dan mari kita kembali ke Blok Konten WPGraphQL dan lihat apa yang kita dapatkan sebagai hasilnya.

Jadi Anda bisa lihat di sini, sekarang kami memiliki dua blok konten. Yang pertama di sini adalah kolom inti, kolom inti. Dan kemudian kita merender HTML di dalamnya.

Jadi hal hebat tentang Blok Konten WPGraphQL adalah kami juga menangani InnerBlocks. Jadi Anda dapat melihat di sini jika kami menambahkan param ke blok konten yang disebut flat true, Anda dapat melihat sekarang kami mendapatkan semua blok yang bahkan ada di kolom tersebut. Jadi kami menangani kasus itu untuk Anda juga.

Kami mendapatkan kolom inti, kolom inti, paragraf inti, gambar inti. Jadi semua itu dilakukan secara terprogram untuk Anda. Dan sekarang, Anda dapat menggunakan data blok ini di front end Anda. Jadi mari kita gali lebih dalam di sini.

Katakanlah kita ingin beberapa atribut itu. Kita bisa menggunakannya menggunakan gabungan di GraphQL. Jadi kita akan lakukan pada gambar inti, dapatkan atributnya. Dan katakanlah kita ingin judulnya, misalnya.

Jadi Anda bisa lihat di sini tidak ada keterangan. Mari kembali ke halaman contoh kita. Kami akan melanjutkan dan menambahkan keterangan di sini. Keterangan saya. Perbarui itu.

Dan jika kami menyegarkan kueri ini, kami dapat melihat sekarang, kami mendapatkan teks saya sebagai atribut yang sesuai di Blok Konten WPGraphQL. Jadi ini adalah bagian 1 dari solusi. Sekarang, kita benar-benar bisa mendapatkan semua data Gutenberg Block kita dan menggunakannya untuk menggunakannya di bagian depan kita.

Jadi mari kita buka VS Code, dan kita akan melihat bagaimana kita menangani bagian itu. Jadi ini adalah proyek contoh Faust JS yang saya kumpulkan. Ini sangat sederhana. Ini didasarkan pada Faust Scaffold Blueprint, tetapi dengan beberapa konfigurasi tambahan untuk menangani blok ini.

Jadi jika kita melihat paket JSON, Anda dapat melihat di sini kita memiliki beberapa dependensi di sini, beberapa paket Faust biasa, seperti core dan CLI. Kami juga memiliki Blok VP Faust. Jadi ini adalah salah satu paket yang menyediakan semua fungsi pembantu kami.

Kami juga memiliki beberapa dependensi di WordPress untuk menangani gaya dan sebagainya. Anda juga akan melihat di sini bahwa kami memiliki direktori Blok WP ini. Jadi di sinilah semua blok kami untuk ujung depan kami hidup, dan bertindak sebagai registri untuk semua blok yang kami gunakan di ujung depan kami.

Anda dapat melihat kami memiliki file index.js. Dan ini pada dasarnya adalah objek yang menentukan semua blok yang kita gunakan di ujung depan kita. Jadi Anda bisa lihat di sini, kami memiliki paragraf inti, kolom inti, kolom inti, dan gambar inti.

Dalam hal pengaturan ini, ada dua bagian utama yang akan kita bicarakan. Jadi salah satunya adalah penyedia Blok WordPress, dan penampil Blok WordPress. Jadi mari kita lihat seperti apa aksinya. Pertama mari kita lihat penyedia Blok WordPress.

Dan ini akan tersedia di pages_app. Jadi Anda bisa lihat di sini kami memiliki komponen ini, penyedia ini, penyedia Blok WordPress. Dan itu menerima prop config yang menerima blok. Jadi Anda dapat melihat di sini kami mengimpor blok dari Blok WP, indeks direktori ini, dan kami meneruskannya ke objek konfigurasi.

Jadi intinya, apa yang dikatakan ini adalah penyedia Blok WordPress membungkus seluruh aplikasi Anda dan memberikan konteks untuk semua blok ini ke seluruh aplikasi Anda. Sekarang, mari masuk ke Template WP ke dalam template tunggal kita. Dan Anda dapat melihat di sini kami memanggil penampil Blok WordPress dengan penyangga blok konten. Jadi ini adalah data blok yang kami dapatkan kembali dari WPGraphQL.

Baiklah, cukup tentang pengaturannya. Mari putar ini dan lihat seperti apa aksinya. Jadi saya akan menjalankan NPM run dev, yang akan menyiapkan lingkungan dev di localhost 3000. Dan halaman yang sedang kita kerjakan sebelumnya adalah halaman sampel slash, jadi saya akan mengunjungi halaman sampel slash localhost 3000 untuk melihat Gutenberg itu Blok yang kami siapkan sebelumnya.

Jadi Anda bisa lihat di sini, kami memiliki blok yang sama di editor Gutenberg kami. Jadi mari kita kembali ke editor Gutenberg kita untuk halaman contoh. Dan Anda dapat melihat kami memiliki dua kolom kami di sini, ini adalah paragraf saya, dan kemudian gambar kami, yang sesuai dengan apa yang kami miliki di ujung depan kami di sini.

Jadi Anda mungkin berkata, itu terlihat bagus dan semuanya, tetapi bisakah kita mengubah gaya? Bisakah kita mengubah ukuran font? Anda pasti bisa.

Jadi mari kita kembali ke editor Gutenberg kita dan membuat beberapa modifikasi pada blok ini. Jadi mari tambahkan warna latar belakang ke paragraf kita. Mari kita ubah juga ukurannya menjadi besar. Untuk gambar ini di sini, mari kita buat membulat.

Mari kita keluarkan keterangannya. Dan kami akan memperbaruinya. Dan Anda dapat melihat di sini gaya tersebut sekarang diterapkan. Dan Anda dapat melihatnya di ujung depan Anda.

Jadi kami benar-benar mengembalikan pengalaman penerbit yang tidak Anda harapkan di WordPress ke situs WordPress headless Anda. Hal hebat lainnya tentang ini adalah sekarang Anda mendapatkan data programatik untuk blok-blok ini, Anda dapat membuat komponen React Anda dengan fitur khusus kerangka kerja, seperti gambar berikutnya. Sekarang, alih-alih hanya merender HTML yang Anda dapatkan kembali dari WPGraphQL, sekarang kita dapat menggunakan data terprogram tersebut untuk membuat komponen yang merender semua gambar kita di Gutenberg dengan gambar berikutnya, memberi kita pemuatan yang lambat, kinerja yang lebih baik, dan gambar yang dioptimalkan dengan lebih baik secara keseluruhan, menciptakan pengalaman pengguna yang lebih baik bagi pengguna kami.

Jadi ini bagus. Kami melihat dengan tepat apa yang kami harapkan di editor Gutenberg kami, tetapi katakanlah kami menambahkan komponen yang mungkin belum didukung, atau yang belum kami konfigurasikan di situs Faust kami. Jadi mari lanjutkan dan buat komponen baru di sini. Kami akan menggunakan tabel.

Dan kita akan melakukan dua baris– baris 1, baris 2. Buka dan perbarui itu. Dan jika kita melihat kembali kode kita di sini, kita dapat melihat bahwa kita telah menetapkan empat blok– paragraf inti, kolom inti, kolom inti, dan gambar inti. Kami tidak memiliki tabel inti di sini.

Jadi apa yang akan terjadi ketika kita melihat halaman ini? Mari lihat. Jadi kita akan kembali ke halaman contoh di front end Faust kita. Dan Anda bisa lihat kami masih mendapatkan tabel di sini dengan baris 1 dan baris 2.

Itu karena jika blok belum ditentukan dalam proyek Faust JS Anda, kami akan melakukan fallback pintar yang masuk akal ke HTML yang dirender. Dengan begitu, Anda tidak melihat konten yang tidak terdefinisi, nol, atau tidak ada sama sekali. Paling tidak, Anda mendapatkan kembali HTML asli yang dirender.

Dengan semua pemikiran ini, mari kita lihat apa yang sebenarnya diperlukan untuk membuat sebuah blok– seperti apa tampilannya sebenarnya. Jadi kita akan kembali ke VS Code di sini. Dan mari kita pilih gambar inti misalnya.

Jadi Anda bisa lihat di sini, ini hanyalah komponen React tradisional. Kami menyebutnya gambar inti. Dan ia menerima props, sama seperti komponen React lainnya.

Pada dasarnya ada dua bagian untuk satu blok di sini. Jadi kita memiliki komponen React yang sebenarnya, yaitu lapisan presentasi. Dan kemudian kita mendapatkan block.fragments, yang merupakan data yang diperlukan untuk menjalankan blok ini.

Jadi Anda bisa lihat di sini kita sedang membuat sebuah fragmen, core image fragment pada core image. Dan kita mendapatkan atribut ini– atribut yang kita perlukan untuk merender blok ini. Jadi Anda bisa melihat kami mendapatkan teks alternatif, sumber, keterangan, nama kelas, lebar, tinggi, dan sebagainya.

Dan kemudian yang bisa kita lakukan adalah menerapkan atribut tersebut ke dalam logika React kita yang sebenarnya. Jadi semua bidang yang diminta di sini kemudian tersedia di alat peraga. Jadi Anda bisa melihat props.attributes keluar, yang merupakan atribut yang kami minta di sini, atribut.alt, atribut.sumber, dan sebagainya. Jadi ini adalah cara yang bagus untuk menempatkan semua persyaratan data untuk blok Anda di dalam file yang sama.

Ini memastikan bahwa Anda hanya meminta data yang Anda butuhkan, dan memastikan permintaan Anda bagus dan berkinerja. Kami juga memiliki beberapa fungsi pembantu dalam proyek contoh ini. Anda dapat melihat ada beberapa di sini– dapatkan gaya dan dapatkan alat peraga berukuran gambar.

Jadi ini pada dasarnya hanya mengambil gaya ini dari WordPress, dan menggabungkannya menjadi objek gaya aktual yang dapat digunakan React. Saat ini, gaya didukung untuk gaya sebaris. Anda juga bisa mendapatkan lembar gaya global, tetapi saat ini kami sedang berupaya menyediakan dukungan untuk theme.json.

Jadi Teresa akan membicarakan sedikit tentang ini di peta jalan kita di masa depan. Tapi idealnya, akan tiba saatnya kita bisa mendapatkan semua gaya dan padding, margin, dan sebagainya dari theme.json dan menerapkannya di sini di front end tanpa kepala. Dengan mengingat semua itu, mari kita masuk ke diskusi teknis singkat dengan Teresa dan saya untuk membahas tentang posisi kita hari ini dengan fitur ini, dan ke mana kita berencana untuk pergi di masa mendatang.

GOBBLE TERESA: Terima kasih untuk demo itu, Blake. Tadi sangat menyenangkan. Mari kita lanjutkan dan membahas beberapa detail teknis sekarang, dan mengobrol tentang cara kerjanya. Jadi yang pertama saya punya untuk Anda adalah, apa persyaratan untuk menggunakan Blok Konten WPGraphQL?

BLAKE WILSON: Ya, ya. Pertanyaan bagus, Teresa. Jadi satu-satunya persyaratan untuk menggunakan plugin ini adalah menginstal WPGraphQL juga. Jelas, jika Anda ingin situs Anda berinteraksi dengan Faust JS, Anda dapat menginstal paket blok Faust JS, yang akan membantu memfasilitasi rendering dan semua hal bagus di ujung depan tanpa kepala. Tetapi untuk benar-benar mengekspos data blok, yang Anda butuhkan hanyalah WPGraphQL dan plugin WP GraphQL Content Blocks.

GOBBLE TERESA: Luar biasa. Bagaimana data blok dikumpulkan juga?

BLAKE WILSON: Ya, jadi semua data blok dikumpulkan oleh blok mana pun di WordPress yang menggunakan fungsi tipe blok register. Hampir semua blok yang Anda gunakan dengan antarmuka dengan fungsi itu akan muncul di blok konten. Dan hal hebat tentang itu adalah ia menyampaikan dengan file block.json dan secara otomatis mendeskripsikan sendiri dan mendokumentasikan sendiri semua bidang tersebut. Jadi, Anda memiliki dokumentasi semuanya dalam satu.

GOBBLE TERESA: Oh, luar biasa. Benar-benar menghemat waktu. Hal lain yang saya ingin Anda bicarakan sedikit lebih banyak adalah apa yang terjadi dengan blok yang tidak didukung? Apa yang terjadi jika blok yang tidak didukung ditanyakan?

BLAKE WILSON: Ya, itu pertanyaan bagus lainnya. Ada dua skenario nyata yang bisa terjadi di sini. Jadi mungkin ada contoh di mana katakanlah Anda memiliki blok di data posting Anda yang telah dihapus dari WordPress.

Mungkin itu adalah blok pihak ketiga yang telah dihapus. Jadi itu adalah salah satu kasus blok yang tidak didukung yang tidak didukung baik di bagian depan Faust maupun di registri WordPress. Dalam hal ini, kami benar-benar mengembalikan blok ke blok konten yang disebut blok tidak terdefinisi atau blok tidak dikenal sehingga Anda dapat mengetiknya dengan tepat di ujung depan tanpa kepala Anda. Dan kemudian bagian kedua adalah jika blok di registri WordPress didukung, tetapi belum didukung di front end Faust JS Anda, dalam hal ini, yang kami lakukan adalah kembali ke HTML yang dirender. Dengan begitu, paling tidak, Anda telah merender HTML yang muncul, bukan nol, atau tidak terdefinisi, atau nilai apa pun seperti itu.

GOBBLE TERESA: Oh, luar biasa. Dan ini sebenarnya membawa saya ke pertanyaan saya berikutnya. Sejauh plugin pihak ketiga di situs web terpisah tanpa kepala, dapatkah Anda menggunakan plugin pihak ketiga dengan menggunakan plugin WPGraphQL Content Blocks? Bagaimana semua itu bekerja sama?

BLAKE WILSON: Ya, ya. Jadi untuk plugin pihak ketiga mana pun, kembali ke pertanyaan pertama atau kedua, selama mereka berinteraksi dengan fungsi tipe blok terdaftar di WordPress, blok itu akan secara otomatis diekspos ke Blok Konten WPGraphQL. Jadi selama data itu sedang dirender, Anda kemudian dapat membuat blok di bagian depan Faust JS Anda. Dan hal hebat tentang itu adalah katakanlah Anda memiliki blok pihak ketiga untuk korsel. Setelah Anda membuatnya sekali di ujung depan Faust JS Anda, Anda kemudian dapat menggunakannya kembali di proyek lain yang akan datang.

GOBBLE TERESA: Oh, bagus. Di situlah bagian reusability masuk. Dan dengan plugin ini, Anda benar-benar dapat menjembatani beberapa celah itu dengan plugin pihak ketiga yang tidak berfungsi dengan baik dengan situs web yang dipisahkan.

Juga, jika Anda melihat di obrolan sekarang, kami sebenarnya memiliki tutorial yang dibuat untuk membantu orang membuat blok dari plugin pihak ketiga. Jadi Anda melihat obrolan sekarang, Anda akan dapat melihatnya dan mengkliknya. Beri bookmark.

Jadi bagaimana Anda menangani blok di dalam blok? Itu bisa sangat rumit. Bisakah Anda berbicara dengan kami sedikit seperti apa kelihatannya?

BLAKE WILSON: Tentu, ya. Jadi kami memiliki tanda ini atau parameter ini saat Anda meminta blok konten yang disebut datar. Dan itu menerima nilai benar atau salah. Jadi ketika ini diberikan sebagai benar, Anda akan benar-benar mendapatkan larik datar atau daftar datar dari semua blok di halaman itu, apakah itu kolom, atau gambar, atau paragraf.

Anda akan memiliki daftar lengkap semua blok yang diminta di halaman itu dengan dua properti tambahan. Salah satunya adalah node ID. Jadi itulah ID sebenarnya dari blok itu. Dan kemudian Anda juga akan memiliki ID induk, yang merupakan induk dari blok itu. Jadi yang dapat Anda lakukan kemudian adalah merekonstruksinya menjadi daftar hierarki aktual di bagian depan Anda, cukup banyak memecahkan teka-teki blok dalam seperti yang telah kita lihat di Gutenberg sebelumnya.

GOBBLE TERESA: Luar biasa. Jadi sebenarnya, ada opsi, saat mengambil blok konten, yang dapat Anda tentukan untuk mengembalikan daftar datar blok dalam ID induk anak yang sesuai?

BLAKE WILSON: Ya, ya, persis.

GOBBLE TERESA: Hebat. Kami juga sebenarnya memiliki tutorial lain di sini di obrolan, sekali lagi, untuk Blok Konten WPGraphQL untuk melihat fungsi khusus itu juga. Jadi saya ingin mengajukan pertanyaan lain tentang potongan penataan– jadi penataan dengan lembar gaya global, sebaris, apa pendekatannya di sana? Bagaimana gaya ditangani?

BLAKE WILSON: Ya, ya. Jadi gaya mungkin adalah salah satu dorongan terbesar yang sedang kami coba teliti saat ini. Dalam contoh yang baru saja saya tunjukkan, itu menggunakan gaya sebaris.

Gaya global, lembar gaya global juga didukung. Dan saya pikir Anda akan menyentuh ini selanjutnya di peta jalan. Tapi idealnya, kita juga ingin mendukung dukungan theme.json, di mana kita bisa mendapatkan margin, padding, warna, dan semua informasi bagus dari theme.json, lalu menerapkannya. Jadi kami akan mengerjakannya di fase pengembangan berikutnya.

GOBBLE TERESA: Luar biasa. Terima kasih telah memandu kami melalui itu. Saya tahu banyak orang sangat bersemangat tentang itu. Jadi bagaimana kita membatasi penerbit untuk menggunakan pemblokiran yang tidak didukung?

BLAKE WILSON: Ya, ya. Jadi ada plugin di luar sana. Tergantung. Jika Anda menggunakan blokir pihak ketiga, beberapa di antaranya sudah memiliki fitur bawaan ini.

Namun jika tidak, ada plugin di luar sana yang disebut visibilitas blok, yang sebenarnya dapat Anda alihkan blok tertentu dari perspektif penerbit. Jadi katakanlah Anda memiliki blok carousel yang belum diterapkan di situs Faust Anda. Anda dapat menginstal blokir visibilitas, dan hapus centang sehingga penerbit tidak menggunakannya saat masih tidak didukung atau dalam pengembangan.

GOBBLE TERESA: Oh, luar biasa. Sehingga visibilitas blok plugin benar-benar dapat mengaktifkan, menyembunyikan, menampilkan blok tertentu?

BLAKE WILSON: Ya, ya, persis. Jadi dengan begitu, Anda memiliki jumlah blok terbatas yang telah Anda dukung, baik di sisi WordPress maupun situs headless Anda sehingga penerbit tahu, oke, kami dapat menggunakan ini dengan pasti bahwa ini akan didukung di paling depan.

TERESA GOBBLE: Oh, kedengarannya seperti pengiriman yang lebih bersih. OK keren. Pertanyaan terakhir untuk Anda. Apakah blok ujung depan ini sesuai dengan editor penerbit?

BLAKE WILSON: Ya, seruan yang bagus. Jadi belum. Itu adalah sesuatu yang akan kami kerjakan di masa mendatang, tetapi untuk saat ini, blok ini didukung untuk ujung depan tanpa kepala.

Jika Anda memiliki blok khusus yang telah Anda buat di WordPress, jika Anda menggunakan perintah NPX create block, Anda masih perlu mendukung tampilan tersebut di sisi WordPress. Tapi itu adalah sesuatu yang sedang kami kerjakan. Kami sudah mendapatkannya di peta jalan kami.

GOBBLE TERESA: Oh, luar biasa. OKE. Terima kasih telah membicarakan poin-poin itu dengan kami, Blake. Itu sangat membantu, dan demonya juga.

Mari kita lanjutkan dan pindah persneling dan benar-benar berbicara tentang peta jalan proyek itu sedikit lebih banyak. Kami sebenarnya memiliki lima fase, dua di antaranya sudah selesai– fase 1 dan fase 2. Fase 1, kami melihat penerapan metode untuk mendekonstruksi dan kemudian merekonstruksi blok secara efisien.

Setelah itu, kami beralih ke fase 2, yang berfokus pada integrasi Faust yang lebih erat dengan Blok Gutenberg untuk memastikan bahwa semua orang memiliki semua akses ke berbagai utilitas dan fungsi pembantu yang ada di sana. Fase berikutnya yang sebenarnya sedang kami jalani saat ini, fase 3, kami berfokus pada penyediaan dukungan theme.json dan pustaka blok yang dapat digunakan kembali, seperti yang disebutkan Blake selama diskusi teknis kami.

Setelah kita menyelesaikannya, fase 4 dan 5 akan terjadi. Fase 4 adalah fokus untuk meningkatkan pengalaman pengembangan dan pengeditan yang ada, serta fase 5, yang merupakan fokus untuk mendukung ekosistem yang lebih luas di luar inti WordPress. Kami sangat bersemangat untuk fase-fase yang akan datang ini, dan kami harap Anda berhubungan dengan kami dan melihat posting blog kami juga untuk tetap mengetahui di mana peta jalannya berada.

Anda dapat melihat tautan dalam obrolan di bawah ini ke entri blog kami jika Anda melihatnya. Lanjutkan dan tandai itu. Terima kasih semuanya, telah bergabung dengan kami untuk diskusi kami tentang Jembatan React-Gutenberg. Saya ingin membawa Blake kembali ke layar di sini sehingga dia dapat mengucapkan terima kasih juga dan memberi kami sedikit lebih banyak info tentang ke mana Anda dapat pergi jika Anda memiliki pertanyaan yang tersisa setelah ini.

BLAKE WILSON: Ya, terima kasih, Teresa, dan terima kasih untuk semua orang yang mengikuti sesi ini hari ini dan menonton. Kami sangat senang mendapatkan umpan balik komunitas seputar fitur ini agar Anda semua dapat mulai mencobanya.

Jadi jika Anda menyukainya, kami sudah mendapatkan proyek contoh di tautan di obrolan. Kami juga memiliki tautan dalam obrolan untuk Discord headless kami, jadi hanya tempat di mana Anda dan pengembang headless lainnya dapat bergabung dan mengobrol tentang fitur dan rilis yang akan datang di ruang headless. Jadi terima kasih sekali lagi. Kami sangat menghargainya.