Panduan Lengkap Pola Blok Gutenberg (III)

Ini adalah bagian ketiga dan terakhir dari panduan lengkap tentang pola blok yang mencakup topik-topik berikut:

1. Pengantar pola blok
2. Menyisipkan pola pada halaman
3. Pola yang telah ditentukan sebelumnya dan lainnya tersedia di direktori
4. Tambahkan pola yang tersedia di direktori ke situs Anda
5. Cara membuat pola dari awal
6. Cara membuat pola jika Anda bukan pengembang
7. Bagaimana mengubah blok yang dapat digunakan kembali menjadi pola blok
8. Tema menggunakan pola blok
9. Dokumentasi resmi.

Pada bagian pertama kita melihat 4 poin pertama dari semua topik yang tercakup dalam panduan: apa itu pola blok, bagaimana menyisipkan pola yang telah ditentukan sebelumnya di halaman Anda dan di mana menemukan dan bagaimana menyalin pola yang tersedia di beberapa direktori . Di bagian kedua kita melihat poin 5 secara detail: bagaimana kita bisa membuat pola dari awal menggunakan kode. Dan dalam posting terakhir ini, kita akan melihat 4 poin terakhir: bagaimana kita dapat membuat pola tanpa menjadi pengembang, bagaimana kita dapat mengubah blok yang dapat digunakan kembali menjadi pola blok, tema apa yang menggunakan pola blok dan, terakhir, di mana Anda dapat menemukannya dokumentasi resmi tentang pola.

6. Cara Membuat Pola Jika Anda Bukan Pengembang

Meskipun kita sudah melihat di posting sebelumnya langkah-langkah yang harus Anda ikuti untuk membuat pola dengan kode, pada titik ini kita akan melihat bahwa Anda dapat membuat pola tanpa menjadi pengembang. Dan ya, kami akan melakukannya dengan plugin. Sebenarnya, ada lebih dari satu plugin untuk membuat pola:

• Block Patter Builder oleh Justin Tadlock,
• BlockMeister – Block Patter Builder oleh BlockMeister,
• Pembuat Halaman Gutenberg Blocks – CoBlocks oleh GoDaddy

Ketiganya bekerja dengan cara yang sama, dengan beberapa perbedaan kecil. Setelah menginstal salah satunya, opsi baru muncul di menu administrasi WordPress sehingga Anda dapat membuat pola baru dan mengelola daftar pola yang dibuat.

Dalam kasus plugin Block Patterns Builder (yaitu gambar di sebelah kiri), menu Block Patterns muncul memiliki dua opsi: satu untuk membuat pola baru dan satu lagi untuk membuat daftar dan mengedit pola yang ada. Dalam kasus plugin BlockMeister (digambarkan di gambar tengah), itu juga menambahkan opsi ketiga untuk mengelola kategori pola. Dan dalam kasus CoBlock (ditunjukkan pada gambar terakhir), menunya muncul di bawah Appearance .

Di ketiga plugin, membuat pola baru akan membuka editor yang sama yang Anda gunakan untuk mengedit halaman atau postingan apa pun. Cukup beri nama pola dan tentukan blok yang Anda inginkan. Saat pola Anda sudah siap, simpan saja.

Tangkapan layar sebelumnya menunjukkan editor pola blok seperti yang disediakan oleh plugin BlockMeister. Seperti yang Anda lihat, ia menawarkan banyak properti tambahan di bilah sisi kanan: nama, siput, deskripsi, lebar pola, dan kategori. Plugin Justin Tadlock, di sisi lain, tidak memungkinkan Anda untuk menambahkan kategori. Dan CoBlocks juga memungkinkan Anda untuk menambahkan properti tambahan dari pola.

Dengan salah satu dari tiga plugin, setelah menyimpan pola Anda, itu akan tersedia dengan mengklik tombol + di editor posting dan halaman sehingga Anda dapat memasukkannya saat Anda membutuhkannya.

Seperti yang Anda lihat, sangat mudah untuk membuat pola yang Anda inginkan tersedia di desain halaman Anda, asalkan Anda menggunakan plugin yang tepat untuk itu.

7. Cara Mengubah Blok yang Dapat Digunakan Kembali Menjadi Pola Blok

Jika Anda telah menggunakan Gutenberg selama beberapa waktu dan Anda telah mendesain halaman dengannya, saya yakin Anda juga telah membuat beberapa blok yang dapat digunakan kembali untuk mereplikasi desain tertentu pada beberapa halaman. Setidaknya aku melakukannya! Saya ingat bahwa pertama kali saya mendengar tentang pola, saya pikir mereka hampir sama dengan blok yang dapat digunakan kembali… tetapi sebenarnya tidak: ada beberapa perbedaan yang relevan antara kedua konsep tersebut.

Blok yang dapat digunakan kembali adalah blok (atau kelompok blok) yang dapat disisipkan pada halaman yang berbeda, isinya sama pada semua halaman. Artinya, jika Anda memodifikasinya nanti, semua instance-nya harus diperbarui. Oleh karena itu, jika Anda ingin blok yang dapat digunakan kembali berbeda dari yang lain, Anda harus mengubahnya menjadi blok normal terlebih dahulu.

Pola blok, di sisi lain, dirancang untuk disesuaikan – ini berfungsi sebagai desain dasar yang harus Anda sesuaikan setelah memasukkannya. Pilihannya tidak terbatas, tentu saja. Ide polanya adalah untuk memberikan titik awal tentang bagaimana Anda dapat menggabungkan balok agar terlihat menarik.

Jika Anda telah membuat blok yang dapat digunakan kembali dengan ide untuk mengubahnya menjadi blok normal dan kemudian menyesuaikannya dengan mudah, akan lebih masuk akal untuk mengubah blok ini menjadi pola blok. Bagaimana kita bisa melakukan ini?

Plugin Reusable Block Extended dari JB Audras memberi kami fungsi ini. Mari kita lihat bagaimana kita melakukannya.

Setelah menginstal plugin, opsi menu akan muncul untuk mengelola blok yang dapat digunakan kembali. Jika Anda mengklik Semua Blok yang Dapat Digunakan Kembali, Anda akan melihat daftar blok yang telah Anda tentukan.

Seperti yang Anda lihat pada gambar di atas, daftar blok yang dapat digunakan kembali menunjukkan dua blok dan, untuk masing-masing blok, ini memberi tahu Anda di mana blok tersebut digunakan, kode pendek dan fungsi PHP sehingga Anda dapat menggunakannya, dan sebuah tombol sehingga Anda dapat mengubahnya menjadi pola blok.

Setelah mengklik tombol Convert to block pattern , pola akan dibuat untuk Anda dan akan tersedia di editor Anda dalam kategori Converted from reusable blocks .

8. Tema Menggunakan Pola Blok

Pada saat penulisan ini, sudah ada 14 tema dengan pola blok khusus di direktori tema WordPress.org, dan daftarnya berkembang pesat.

• Dua Puluh Dua Puluh Satu Versi 1.0 oleh WordPress.org
• C9 Starter Versi 2.4.4 oleh covertnine
• C9 Work Versi 2.3.1 oleh covertnine
• Seedlet Versi 1.1.2 oleh Automattic
• ExS Versi 0.9.0 oleh exstheme
• Cordero Versi 1.2.2 oleh uxl
• Bigwigs Versi 0.7.1 oleh Dinev Dmitry
• emulsi Versi 1.6.9 oleh nobita
• Dua Puluh Dua Puluh Versi 1.6 oleh WordPress.org
• Pelatihan Kesehatan VW Versi 0.6.5 oleh VW TEMA
• Dua Puluh Sembilan Belas Versi 4.9.6 oleh WordPress.org
• Tulisan Versi 1.3.0 oleh Dinev Dmitry
• Twenty Seventeen Versi 2.5 oleh WordPress.org
• Dua Puluh Enam Belas Versi 2.3 oleh WordPress.org

Saya mengambil kesempatan ini untuk menyebutkan bahwa jika Anda adalah pengembang tema dan ingin menghilangkan blok yang telah ditentukan sebelumnya (pola blok inti) yang ada di WordPress 5.5, Anda dapat melakukannya dengan kode berikut:

 remove_theme_support( 'core-block-patterns' );

9. Dokumentasi Resmi

Akhirnya, di sini Anda memiliki beberapa tautan berguna tentang pola blok:

• Untuk Pengguna Akhir – Video pengantar untuk memblokir pola guna memahami pola apa itu, cara mengaksesnya, cara menambahkannya di pos dan halaman, serta memahami cara menyesuaikannya untuk konten Anda. Video ini adalah lokakarya yang diterbitkan oleh Tim Pelatihan WordPress.
• Untuk Pengguna Akhir – Dokumentasi Pola Blok dibuat oleh Tim Dokumentasi.
• Untuk Pengembang – Halaman Pola Blok di dokumentasi untuk Blokir API, diterbitkan oleh Tim Gutenberg dan yang sudah saya katakan di posting sebelumnya.

Dan itu saja! Saya harap Anda menemukan panduan ini bermanfaat. Jika Anda merasa ada informasi yang hilang, jangan ragu untuk memberi tahu saya di bagian komentar di bawah.

Gambar unggulan oleh Patrick Hendry di Unsplash .