Build for Gutenberg: Bagaimana Plugin dan Tema Penulis Mengatasi Transisi ke Gutenberg

Build for Gutenberg: Bagaimana Plugin dan Tema Penulis Mengatasi Transisi


Di WordCamp Europe 2018, Matt Mullenweg menyusun peta jalan kasar untuk Gutenberg selama beberapa bulan ke depan. Pada bulan Juli, akan ada dorongan besar untuk meningkatkan adopsi Gutenberg, dengan versi beta 5 dalam permainan untuk bulan Agustus (atau lebih; ​​sebenarnya, mungkin di luar). Integrasi yang akan datang mungkin membuat Anda bertanya-tanya bagaimana pengembang WordPress berencana membangun untuk Gutenberg.

Artinya, apa saja berbagai cara di mana pengembang mempersiapkan penawaran mereka untuk Gutenberg? Dan apakah orang melakukan sesuatu yang baru dan menarik untuk Gutenberg?

Di pos ini, kami akan memberi Anda beberapa contoh nyata dan nyata tentang bagaimana pengembang plugin dan tema dapat membangun untuk Gutenberg dengan menunjukkan kepada Anda apa yang sudah ada di sana.

Dengan melihat beberapa contoh kehidupan nyata tentang bagaimana pengembang menggunakan blok dan gaya untuk menciptakan pengalaman pengeditan yang lebih terintegrasi, kami berharap Anda:

  • Pahami bagaimana Gutenberg dapat memberi manfaat bagi Anda sebagai pengguna akhir.
  • Dapatkan beberapa ide untuk dibuat untuk Gutenberg untuk proyek WordPress Anda sendiri.

Jika Anda masih tidak yakin apa itu editor Gutenberg, Anda mungkin ingin memeriksa tutorial editor Gutenberg lengkap kami terlebih dahulu..

Enam contoh bagaimana plugin yang ada menangani pengalihan ke Gutenberg

Cara pembuat plugin membangun untuk Gutenberg tergantung terutama pada fungsi plugin.

Di satu sisi, Anda memiliki plugin yang berfokus pada penambahan konten front-end. Ini terutama hal-hal yang sebelumnya akan dilakukan dengan menambahkan kode pendek.

Contoh yang baik adalah plugin formulir. Cukup banyak setiap plugin formulir memberi Anda antarmuka terpisah untuk membangun formulir Anda dan kemudian kode pendek untuk benar-benar menanamkan formulir itu di ujung depan.

Jenis-jenis plugin ini biasanya akan ditujukan ke Gutenberg dengan a blok ubahsuaian untuk memudahkan memasukkan konten. Anda akan melihat beberapa contoh di bagian ini dari:

  • Bentuk Ninja
  • Memberikan
  • WooCommerce

Kemudian, Anda memiliki plugin lain yang membantu Anda mengontrol detail di belakang layar. Biasanya, plugin ini menggunakan kotak meta.

Contoh paling terkenal adalah sesuatu seperti Yoast SEO. Anda tidak menambahkan konten, tetapi semua informasi kotak meta itu penting.

Kotak meta sekarang bekerja dengan Gutenberg, tetapi masih ada peluang bagi plugin itu untuk mengubah fungsinya untuk mengambil keuntungan dari Gutenberg. Saya akan menunjukkan kepada Anda beberapa cara di mana Yoast SEO dapat mengatasi masalah ini, serta bagaimana kami memilih untuk melakukan sesuatu dengan beberapa plugin kami sendiri.

1. Formulir Ninja menambahkan blok Gutenberg baru

Bentuk Ninja adalah salah satu plugin bentuk paling populer di repo WordPress.org. Sejauh ini, ini menangani Gutenberg dengan menambahkan yang sederhana Bentuk Ninja blok.

Anda memasukkan blok seperti blok Gutenberg lainnya:

bagaimana bentuk ninja dev membangun untuk Gutenberg

Kemudian, Anda dapat memilih formulir Anda dari drop-down:

ninja membentuk blok

Dan begitu Anda memilih formulir, Anda akan melihat pratinjau langsung tepat di editor:

pratinjau langsung formulir

Saat ini, hanya itu yang ada. Tetapi ini adalah pendekatan dasar yang solid karena:

  • Ini menghilangkan kebutuhan untuk bekerja secara langsung dengan kode pendek
  • Anda dapat melihat pratinjau langsung dari desain Anda saat Anda masih mengedit halaman Anda

Dua plugin berikutnya akan membangun ini dengan beberapa opsi styling / kontrol yang lebih dalam.

2. Beri tambah dua blok Gutenberg dengan opsi tata letak

Memberikan adalah plugin donasi populer dengan tim pengembang yang sangat proaktif dalam mengintegrasikan Give dengan editor Gutenberg (jika Anda menyukai topik posting ini, Anda akan menikmati seri #PlayingWithBlocks di Berikan blog, di mana tim Give merinci rencana mereka untuk membangun untuk Gutenberg).

Give memiliki salah satu pengalaman Gutenberg paling sederhana yang pernah saya coba. Anda tidak hanya dapat membawa formulir donasi lewat dua blok Give, Anda juga dapat menata mereka menggunakan antarmuka Gutenberg.

Beri dua blok agar Anda menanamkan:

  • Bentuk sumbangan tunggal
  • Kotak donasi

givewp gutenberg blok

Seperti Formulir Ninja, Anda mendapatkan pratinjau langsung formulir Anda. Tapi kamu juga bisa Blok opsi pengeditan yang memungkinkan Anda:

  • Pilih formatnya
  • Aktifkan / nonaktifkan sasaran donasi
  • Pilih tempat untuk memposisikan konten

blokir opsi tata letak

Dan jika Anda mengarahkan kursor ke formulir Anda, Anda akan mendapatkan tautan langsung untuk mengedit formulir itu:

blokir pengeditan

Jadi ada yang melihat bagaimana blok bisa sedikit lebih dalam dari implementasi Ninja Forms saat ini. Tapi WooCommerce selangkah lebih maju …

3. WooCommerce menambahkan blok produk dengan kontrol kolom

Sementara WooCommerce mungkin akan menambahkan lebih banyak integrasi Gutenberg ketika WordPress 5.0 bergerak lebih dekat (beberapa ide cara menambahkan produk di sini), tim sudah mencelupkan jari kaki mereka ke Gutenberg dengan resmi Plugin Blokir Produk WooCommerce Gutenberg.

Ya – sekarang ini adalah plugin yang terpisah. Tapi begitu Anda menginstalnya, Anda dapat memasukkan produk WooCommerce yang ada sebagai blok di konten Gutenberg Anda.

Ketika Anda menambahkan Produk blok, Anda dapat memilih produk mana yang akan ditampilkan:

blok woocommerce gutenberg

Kemudian, Anda dapat menggunakan opsi pengeditan blok untuk mengubah tata letak:

mengubah tata letak woocommerce di gutenberg

Yang ini membuat saya sangat bersemangat karena ini adalah contoh yang bagus tentang bagaimana Gutenberg membuatnya lebih mudah diakses untuk mengatur / mengkonfigurasi konten yang tidak standar.

4. Beaver Builder menambahkan a "Konversikan ke Beaver Builder" pilihan

Ada banyak pembicaraan tentang bagaimana pembuat laman akan membahas Gutenberg. Belum banyak yang konkret, tetapi Beaver Builder telah menambahkan fitur di Beaver Builder 2.1 yang memungkinkan Anda mengonversi tata letak Gutenberg ke Beaver Builder:

pembangun berang-berang Gutenberg

Saat ini, proses konversi tidak sempurna. Tetapi gagasan untuk dapat beralih antara Gutenberg dan pembuat halaman menarik jika konversi itu mulus.

5. Kotak meta harus tetap berfungsi – Yoast SEO adalah contoh yang bagus

Saya tidak berpikir Yoast SEO telah merilis perubahan apa pun untuk mengatasi Gutenberg, jadi saat ini ini lebih merupakan contoh bagaimana kotak meta yang ada bekerja dengan Gutenberg (jika Anda belum mengikuti Gutenberg dengan cermat – ia telah mendukung kotak meta sekarang, meskipun begitu lebih banyak untuk kompatibilitas mundur daripada solusi jangka panjang).

Seperti yang Anda lihat, kotak meta Yoast SEO utama muncul tanpa cedera dengan Gutenberg:

gutenberg yoast seo meta box

Tapi Anda kehilangan skor SEO dan analisis konten yang digunakan di bilah samping.

Jadi bagaimana mungkin Yoast membangun untuk Gutenberg untuk mengatasinya? Berikut ini beberapa maket untuk kemungkinan cara yang Yoast dapat mengintegrasikan analisisnya ke antarmuka Gutenberg yang sebenarnya:

Mockup Bperingatan seo yoast
Mockup CAnalisis konten dalam seoast

6. Bagaimana kami menangani kotak meta di Tinjauan Produk WP

Kami Plugin WP Product Review adalah salah satu plugin yang menggunakan kotak meta untuk mengontrol output di front-end (kotak ulasan dalam kasus ini).

Inilah cara kami berupaya mengintegrasikan WP Product Review ke dalam editor Gutenberg:

ulasan produk wp gutenberg

Ketika pengguna menunjukkan bahwa posting tersebut adalah ulasan dengan toggle sidebar, mereka akan dapat mengonfigurasi segala sesuatu tentang kotak ulasan mereka dari opsi di atas:

wp mengulas toggle pro gutenberg

Pengembang – ini sumber yang bagus untuk menyiapkan plugin Anda untuk Gutenberg

Jika Anda seorang pengembang plugin yang sebenarnya, Anda mungkin bertanya-tanya bagaimana Anda membangun untuk Gutenberg untuk plugin spesifik Anda. Yah … aku tidak bisa memberitahumu itu. Tapi saya bisa mengarahkan Anda ke pos yang luar biasa ini oleh Hardeep Asrani kami sendiri. Hardeep memberikan beberapa tips untuk menyiapkan plugin Anda untuk Gutenberg.

Pengembang dapat membangun untuk Gutenberg dengan plugin baru juga

Pengembang tidak hanya fokus membuat plugin yang ada kompatibel dengan Gutenberg, mereka juga berencana membangun untuk Gutenberg dengan plugin baru.

Blok Gutenberg baru berlimpah

Di satu sisi, Anda memiliki banyak plugin umum yang hanya menambah tipe baru blok konten. Ini memberi Gutenberg lebih banyak perasaan pembangun halaman. Anda dapat menemukan blok untuk:

  • Tabel penetapan harga
  • Testimoni
  • Anggota tim
  • Dll.

Misalnya, inilah blok tabel penetapan harga dari Stackable – Ultimate Gutenberg Blocks plugin. Lihat seberapa rinci opsi pengeditan blok ini:

blok gutenberg baru

Sudah ada banyak plugin ini di WordPress.org. Tetapi di luar plugin Stackable yang disebutkan di atas, penawaran populer lainnya tampaknya adalah:

Ada juga penawaran yang disebut CoBlocks yang memasarkan dirinya sebagai "Blok Gutenberg untuk Pemasar Konten".

Saya pikir pendekatan niche ini sangat menarik. Mungkin di masa depan kita akan melihat set blok Gutenberg khusus untuk:

Itu Blok Ulasan Buku plugin adalah contoh mini lain tentang bagaimana blok Gutenberg bisa menjadi sesuatu.

Contoh bagaimana bidang khusus dapat bekerja dengan Gutenberg

Bidang Kustom Gutenberg adalah plugin lain yang menarik yang tampaknya mendapatkan daya tarik.

Itu membuatnya mudah untuk mengatur bidang khusus atau grup bidang yang dikaitkan dengan jenis pos khusus:

bidang khusus editor gutenberg

Lalu, ketika Anda pergi ke editor Gutenberg, bidang khusus tersebut telah diisi sebelumnya sebagai blok:

Contoh bidang khusus gutenberg

Banyak orang bertanya-tanya bagaimana bidang kustom akan bekerja dengan Gutenberg – ini adalah salah satu contoh yang menjanjikan yang sudah keluar di alam liar. Kamu bisa pelajari lebih lanjut di sini.

Tiga contoh bagaimana pengembang tema menangani transisi ke Gutenberg

Anda baru saja melihat beberapa contoh bagaimana pengembang plugin dapat membangun untuk Gutenberg, tetapi bagaimana dengan tema?

Pengembang tema tampaknya mengikuti dua jalan utama untuk mengatasi transisi:

  • Membuat tema siap Gutenberg dengan menambahkan gaya untuk blok dan mendukung opsi tata letak Gutenberg
  • Menggunakan blok Gutenberg untuk membangun konten tema

Berikut adalah beberapa contoh untuk melukis gambar …

1. Menambahkan gaya khusus ke editor Gutenberg

Satu hal yang sangat rapi yang kami lihat dilakukan oleh pengembang adalah menambahkan gaya tema ke antarmuka Gutenberg yang sebenarnya. Ini membuka pintu untuk menciptakan pengalaman WYSIWYG yang sesungguhnya, meskipun Spencer dari BigBox WooCommerce merinci beberapa masalah dengan penataan blok pihak ketiga.

Misalnya, lihat bagaimana tema Ohana ThemeShaper sepenuhnya mengubah semua konten Gutenberg, termasuk judul posting:

Gutenberg dalam gaya dashboard

Jika Anda ingin melihatnya beraksi, unduh tema Ohana dari GitHub. Dan ThemeShaper juga menjelaskan bagaimana mereka mencapai efek ini dalam posting blog ini.

2. Menambahkan opsi penyelarasan lebar penuh baru

Tweak kompatibilitas tema keren lain yang akan Anda lihat adalah penambahan Alignment Lebar dukung. Pada dasarnya, ini memungkinkan Anda membuat blok tertentu dengan lebar penuh. Contoh paling umum adalah menyisipkan gambar dengan lebar penuh.

Sekali lagi, Anda dapat melihat ini berlaku dengan tema Ohana:

tata letak gutenberg yang luas

Agar penyelarasan ini berfungsi, penulis tema harus secara eksplisit menyatakan dukungan.

3. Membuat konten demo tema dengan blok – mis. Tema Blok

Akhirnya, pendekatan dari Tema Organik ini cukup keren:

Tema Blokir konten demo dibangun seluruhnya dengan blok Gutenberg.

Ini adalah sesuatu yang tidak diragukan lagi akan terus kita tumbuhkan, seperti yang Matt katakan secara eksplisit dalam peta jalan Gutenberg bahwa bulan Juli akan mencakup penjelajahan. "memperluas Gutenberg di luar pos ke kustomisasi situs."

Tema Beyond The Block, Array Themes juga memiliki Tema Blok Atom yang dirancang khusus untuk berintegrasi dengan plugin Blok Atom yang disebutkan di atas.

Pengembang – inilah cara menyiapkan tema Anda untuk Gutenberg

Jika Anda seorang pengembang tema yang bertanya-tanya bagaimana membuat tema yang ada kompatibel dengan Gutenberg, Bill Erickson memiliki panduan hebat ke poin tinggi. Dan itu Dukungan Tema bagian dari buku pegangan Gutenberg adalah sumber yang bagus.

Pasti akan ada hal-hal keren yang akan datang

Dari contoh di atas, saya harap Anda memiliki pemahaman yang lebih baik tentang bagaimana pengembang plugin dan tema berencana untuk membangun untuk Gutenberg.

Pada catatan pribadi, saya tahu bahwa menulis posting ini telah membuat saya lebih bersemangat tentang kemungkinan dengan Gutenberg.

Di bagian depan plugin, menggunakan blok untuk mengganti semua hal yang sebelumnya telah dilakukan dengan kode pendek adalah peningkatan besar bagi kegunaan, terutama bagi pengguna biasa.

Dan cara pengembang tema dapat menerapkan gaya mereka sendiri dan menggabungkan blok juga menarik – terutama karena Gutenberg memperluas lebih banyak ke penyesuaian situs.

Sekarang terserah Anda – sudahkah Anda menemukan contoh hebat plugin atau penulis tema menemukan cara menarik untuk dibuat untuk Gutenberg? Beri tahu kami di komentar!

Jangan lupa untuk bergabung dengan kursus kilat kami tentang mempercepat situs WordPress Anda. Dengan beberapa perbaikan sederhana, Anda dapat mengurangi waktu loading hingga 50-80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map