Panduan Lengkap Pola Blok Gutenberg (II)

Posting ini adalah bagian kedua dari Panduan Lengkap Pola Blok Gutenberg, yang mencakup poin-poin 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 mengonversi blok yang dapat digunakan kembali menjadi pola blok
8. Topik 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, cara menyisipkan pola yang telah ditentukan sebelumnya di halaman Anda, dan di mana menemukan dan cara menyalin pola yang tersedia di beberapa direktori. Di sana kami melihat bahwa kami dapat menempelkan pola pada halaman yang sedang kami edit, tetapi itu tidak akan disimpan di perpustakaan pola kami untuk digunakan di masa mendatang.

Jika kita ingin menambahkan pola baru ke pustaka pola Gutenberg, kita harus membuat dan mendaftarkan pola tersebut. Ini cukup mudah, meskipun Anda memerlukan beberapa keterampilan pengkodean dasar. Jika ini bukan kasus Anda, jangan khawatir, karena nanti kita akan belajar bagaimana mencapai hasil yang sama tanpa memerlukan pengkodean apa pun.

5. Buat Pola Baru

Untuk membuat pola blok, Anda harus menggunakan API Pola Blok. Secara khusus, fungsi PHP register_block_pattern() . Mari kita lihat secara singkat langkah-langkah berbeda yang harus kita ikuti dengan contoh sederhana.

Tapi sebelum kita mulai, izinkan saya menambahkan catatan tambahan. Saat menyesuaikan WordPress menggunakan cuplikan kode, Anda harus selalu bertanya pada diri sendiri di mana Anda harus menulis cuplikan tersebut. Sebagian besar tutorial merekomendasikan file functions.php dari tema aktif Anda, karena ini adalah solusi termudah untuk menyelesaikan pekerjaan, tetapi David menulis posting ini tentang cara membuat plugin untuk melacak semua penyesuaian Anda dan berpendapat bahwa ini adalah solusi yang lebih baik .

Sekarang, bagaimana dengan pola blok? Anda dapat menambahkan definisi pola blok baru di tema Anda (beberapa tema, seperti Twenty Twenty-One, sudah menyertakannya sendiri), atau Anda dapat menambahkannya di plugin khusus. Saya yakin Anda akan menemukan pembela dan pencela dari kedua solusi, jadi pilih saja yang lebih sesuai dengan kebutuhan Anda.

#1 Rancang Balok Yang Akan Membentuk Pola Anda

Seperti yang sudah saya sebutkan di posting sebelumnya, pola adalah sekumpulan blok yang dikelompokkan sesuka Anda. Misalkan saya ingin membuat pola blok yang dapat saya gunakan untuk membuat bagian yang menjelaskan fitur dasar suatu produk.

Untuk melakukan ini, pada halaman yang saya beri judul "Membuat Pola", saya mulai dengan membuat blok judul, "6 Fitur Bagian," dan kemudian saya memasukkan blok 3-kolom.

Di blok pertama saya menambahkan gambar dan, di bawahnya, judul dan deskripsi fitur.

Saya menyalin gambar, judul, dan deskripsi di dua blok berikutnya. Dan akhirnya, saya menggandakan baris ini sehingga saya memiliki bagian yang akan menyertakan deskripsi enam fitur.

Tentu saja, masuk akal untuk membuat pola blok jika Anda berpikir Anda akan menggunakannya lebih dari sekali.

#2 Salin Isi Blok

Setelah kita mendefinisikan kumpulan blok, kita hanya perlu memilihnya dengan mouse dan di toolbar klik Copy .

#3 Keluar dari konten HTML yang disalin

Untuk menghindari masalah, kita perlu keluar dari teks yang baru saja kita salin, sehingga karakter utama seperti jeda baris, karakter tab, dan sebagainya dapat dipahami oleh komputer. Anda dapat dengan mudah menghindari teks menggunakan alat online seperti onlinestringtools.com atau JSON Escape/Unescape: cukup tempel kode yang telah Anda salin sebelumnya dan Anda akan mendapatkan teks yang lolos dengan benar.

#4 Daftarkan Polanya

Pada titik ini, satu-satunya yang tersisa adalah menggunakan fungsi register_block_pattern() . Fungsi ini menerima dua argumen: nama pola dan larik properti. Di akhir posting ini saya memberi Anda lebih banyak detail tentang properti yang dapat Anda definisikan dalam suatu pola, tetapi pertama-tama mari kita lihat langkah-langkah yang diperlukan untuk membuatnya.

Ini adalah contoh kami:

 register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "<!-- wp:heading {\"textAlign\":\"center\"} -->\n<h2 class=\"has-text-align-center\">6 Features Section</h2>\n<!-- /wp:heading -->\n\n<!-- wp:columns {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-columns are-vertically-aligned-center\"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:columns {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-columns are-vertically-aligned-center\"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"center\",\"id\":44,\"sizeSlug\":\"large\",\"linkDestination\":\"none\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img src=\"http://testsite.local/wp-content/uploads/2020/12/wordpress.png\" alt=\"\" class=\"wp-image-44\"/></figure></div>\n<!-- /wp:image -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Feature Heading</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Feature description</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->", ) );

Seperti yang Anda lihat di cuplikan sebelumnya, pertama-tama kita tentukan nama unik untuk mengidentifikasi pola kita ( ruth-gutenberg-blocks-patterns/section-with-six-features ), lalu kita tentukan array dengan beberapa properti: title ("Bagian dengan 6 fitur") yang akan dilihat oleh pengguna pola dan content itu sendiri. content adalah teks yang kita loloskan pada langkah sebelumnya.

#5 Buat Plugin Dengan Pola Terdaftar

Agar pola terdaftar di editor kami, kami dapat membuat plugin atau kami dapat memasukkannya ke dalam tema aktif kami. Jika Anda membuat plugin, inilah yang Anda butuhkan:

 <?php /** * Plugin Name: Ruth's Block Patterns * Description: My personal block patterns * Version: 1.0.0 */ defined( 'ABSPATH' ) or die(); function ruth_patterns_register_block_patterns() { if ( ! class_exists( 'WP_Block_Patterns_Registry' ) ) { return; } register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "…", ) ); } add_action( 'init', 'ruth_patterns_register_block_patterns' );

Dan voila! Jika sekarang kami menyegarkan editor kami (tentu saja dengan asumsi Anda telah mengaktifkan plugin), Anda akan melihat pola baru:

tetapi, sayangnya, itu terdaftar di bawah Uncathegorized . Ini karena kami belum menunjukkan apakah blok kami termasuk dalam salah satu kategori yang ada atau yang baru.

#6 Tambahkan Kategori Pola Baru

Anda dapat menambahkan pola blok baru ke dalam kategori yang ada, atau membuat kategori yang sama sekali baru menggunakan fungsi register_block_pattern_category . Fungsi ini juga membutuhkan dua argumen: nama kategori dan larik opsi. Kedengarannya akrab?

Berikut ini contohnya:

 function ruth_patterns_register_block_pattern_category() { if ( ! class_exists( 'WP_Block_Patterns_Registry') ) { return; } register_block_pattern_category ( 'ruth-features', array( 'label' => _x( 'Features', 'Block pattern category', 'nelio' ) ) ); } add_action( 'init', 'ruth_patterns_register_block_pattern_category' );

Setelah kategori baru siap, jangan lupa untuk memperbarui pola blok Anda sehingga secara eksplisit menentukan bahwa itu harus terdaftar di bawah kategori baru ini:

 function ruth_patterns_register_block_patterns() { if ( ! class_exists( 'WP_Block_Patterns_Registry' ) ) { return; } register_block_pattern( 'ruth-gutenberg-blocks-patterns/section-with-six-features', array( 'title' => __( 'Section with 6 features', 'nelio' ), 'content' => "…", 'categories' => [ 'ruth-features' ], ) ); } add_action( 'init', 'ruth_patterns_register_block_patterns' );

Dan di sana Anda memilikinya:

Kami sekarang dapat menambahkannya ke halaman baru yang kami buat dan kemudian membuat modifikasi yang kami rasa sesuai, seperti yang Anda lihat di bagian yang dibuat di halaman baru untuk peluncuran produk baru kami:

Blok Pola Properti

Dalam contoh kami, kami telah mendefinisikan properti title , content , dan categories dari pola blok, tetapi ada lebih banyak lagi. Anda akan menemukan detail dalam dokumentasi yang menjelaskan fungsi register_block_pattern , tetapi berikut ringkasannya:

• title (wajib): judul pola.
• content (wajib): isi pola.
• description : teks yang tersembunyi secara visual yang digunakan untuk menggambarkan pola di penyisipan. Deskripsi bersifat opsional, tetapi sangat disarankan jika judul tidak sepenuhnya menggambarkan apa yang dilakukan pola.
• categories : serangkaian kategori pola yang digunakan untuk mengelompokkan pola blok. Pola blok dapat ditampilkan dalam beberapa kategori.
• keywords : sekumpulan alias atau kata kunci yang membantu pengguna menemukan pola saat menelusuri.
• viewportWidth : bilangan bulat yang menentukan lebar pola di penyisipan.

Dalam kasus pendaftaran kategori, kita hanya perlu mendefinisikan properti label , karena tidak ada lagi props.

Hari ini kita telah melihat bahwa membuat pola blok agar selalu tersedia di situs web Anda cukup mudah. Di postingan berikutnya kita akan melihat bagaimana kita bisa membuat pola tanpa mengetahui apa-apa tentang kode. Jangan sampai ketinggalan!

Gambar unggulan John Cameron di Unsplash.