Dasar-dasar Builder: Cara Membuat Pola Blok

Dalam artikel Dasar-dasar Builder bulan lalu, kami menjelajahi pola blok: apa itu dan bagaimana Anda dapat menggunakannya. Kami belajar bahwa pola blok hanyalah kumpulan blok yang telah ditentukan sebelumnya yang membentuk tata letak tertentu. Kami memamerkan kekuatan pola dan mendiskusikan bagaimana pola tersebut menjadi landasan pengembangan tema WordPress modern. Hari ini kita akan belajar bagaimana mendesain, membagikan, dan mendaftarkan pola kita sendiri!

Harap dicatat bahwa artikel ini menggunakan tema Dua Puluh Dua Puluh Dua dalam semua contohnya. Tema berbasis blok ini dirilis bersama WordPress 5.9 dan merupakan sumber daya fantastis yang menampilkan lebih dari 60 pola blok.

Desain Pola

Bagian tersulit tentang membuat pola blok adalah memutuskan bagaimana tampilannya. Mari kita mulai dengan sesuatu yang relatif sederhana: kotak item, dua baris tiga. Kami dapat menggunakan desain ini untuk menampilkan layanan bisnis atau fitur produk yang berbeda.

Tip Singkat: Pola dapat dibuat dari blok mana pun, termasuk blok pihak ketiga. Namun, jika Anda bermaksud mendistribusikan pola Anda ke khalayak luas, coba dan gunakan hanya blok inti WordPress—dengan begitu, pengguna tidak perlu memasang plugin tambahan untuk menggunakan desain Anda.

Bagi saya, desain pola dimulai di Editor. Sementara pola dapat dikodekan secara manual, jauh lebih mudah untuk melakukan sesuatu secara visual. Saya akan mulai dengan menambahkan blok Kolom dengan tiga kolom untuk baris pertama kisi. Selanjutnya, tambahkan blok Heading, Paragraph, dan Buttons ke setiap kolom. Gandakan blok Kolom untuk membuat baris kisi kedua. Terakhir, saya akan menerapkan beberapa konfigurasi gaya dan membungkus kedua blok Kolom dalam blok Grup dengan warna latar belakang. Hasilnya terlihat seperti ini:

Anda dapat melihat 33 blok yang membentuk desain ini pada tangkapan layar di atas!

Jika saya ingin membuat versi grid "gelap" alternatif, saya hanya perlu menduplikasi desain aslinya dan mengubah gayanya.

Meskipun kedua desain relatif sederhana, membuatnya dari awal bisa jadi membosankan. Mampu berbagi dan/atau menyimpan pola blok ini akan menghemat banyak waktu.

Berbagi Desain

Berbagi desain pola itu mudah! Katakanlah Anda ingin memindahkan desain ke halaman lain di situs web Anda, atau mungkin situs web lain sepenuhnya. Ini sesederhana menyalin dan menempelkan markup blok. Ada beberapa cara untuk mencapai ini.

Jika desain pola terdapat dalam blok "wadah", seperti blok Grup, Sampul, atau Kolom, pilih wadah terluar dan gunakan menu alat untuk memilih "Salin." Markup blok disalin ke clipboard dan Anda dapat menempelkannya di mana pun Anda suka.

Opsi kedua adalah menggunakan Editor Kode, yang dapat Anda akses dari panel Opsi.

Editor Kode menyediakan representasi visual dari semua markup blok pada halaman atau postingan saat ini. Saya lebih suka metode ini karena mudah untuk melihat dengan tepat kode apa yang sedang disalin.

Mendaftarkan Pola

Menyalin dan menempel markup blok mungkin mudah, tetapi kita sering menginginkan versi yang lebih permanen dari desain pola kita. Untuk melakukannya, kami akan menggunakan Patterns API untuk "mendaftarkan" pola blok khusus. Ini membuat desain kami tersedia di Inserter dan Pattern Explorer di WordPress.

Untuk mendaftarkan suatu pola, kita menggunakan fungsi PHP register_block_pattern(). Fungsi ini menerima dua parameter, judul dan larik properti. Sebelum membahas masing-masing, mari kita lihat sebuah contoh.

daftar_blok_pola(

'contoh/fitur-grid-light',

Himpunan(

'title' => __( 'Fitur Grid – Light', 'textdomain' ),

'description' => __( 'Tampilkan enam item unggulan dalam kotak dengan latar belakang terang.', 'textdomain' ),

'kategori' => array( 'unggulan', 'kolom'),

'kata kunci' => array( 'fitur', 'kisi' ),

'viewportWidth' => 1400,

'blockTypes' => array( 'inti/kolom'),

'konten' => 'KONTEN POLA'

)

);

Di sini kita mendaftarkan pola Feature Grid yang telah kita desain sebelumnya. Judul mengikuti konvensi penamaan namespace/title. Saat mendaftarkan beberapa pola dalam proyek yang sama, praktik terbaiknya adalah menjaga namespace tetap konsisten.

Hanya parameter judul dan konten dalam larik properti yang secara teknis diperlukan. Untuk singkatnya, konten pola dikecualikan dalam contoh di atas. Namun, ini adalah kode yang sama yang kita salin dan tempel di bagian sebelumnya. Kategori diatur menggunakan bidang kategori, dan sebuah pola dapat memiliki beberapa. Di Editor, pola diatur menurut kategori. Untuk properti yang tersisa, perincian fantastis disediakan di Buku Pegangan Editor Blok.

Untuk mendaftarkan pola Feature Grid dengan latar belakang gelap, cukup duplikat kode registrasi dan perbarui yang sesuai. Terakhir, kami membungkus kedua fungsi seperti itu dan menempatkan semuanya di file functions.php dari tema kami.

fungsi my_pattern_library_register_block_patterns() {

daftar_blok_pola(

'contoh/fitur-grid-light',

Himpunan( … )

);

daftar_blok_pola(

'contoh/fitur-grid-dark,

Himpunan( … )

);

}

add_action( 'init', 'example_register_block_patterns' );

Kode lengkapnya tersedia di Gist di GitHub.

Setelah kode ditambahkan, pola yang baru didaftarkan sekarang akan ditampilkan di Inserter dan Pattern Explorer.

Mendaftarkan Kategori Pola

Saat bekerja dengan pola khusus, sering kali membantu untuk menempatkannya dalam kategori khusus. WordPress membuatnya sederhana dengan register_block_pattern_category(). Fungsi ini mirip dengan yang kita gunakan untuk mendaftarkan pola. Yang perlu Anda lakukan adalah memberikan judul kategori dan array properti. Pada WordPress 5.9, label adalah satu-satunya properti yang didukung, tetapi kami mengharapkan lebih banyak lagi di masa mendatang.

Contoh berikut mendaftarkan kategori "Kustom" dengan kustom judul. Tempatkan kode ini di file functions.php tema Anda di samping contoh pendaftaran pola.

fungsi example_register_block_pattern_categories() {

register_block_pattern_category(

'kebiasaan',

array( 'label' => __( 'Kustom', 'textdomain' ) )

);

}

add_action( 'init', 'example_register_block_pattern_categories' );

Kategori pola hanya akan ditampilkan di Editor jika ada pola yang terkait dengannya. Oleh karena itu, jika kita menambahkan kustom ke dua pola kisi fitur yang kita daftarkan sebelumnya, kategori "Kustom" akan muncul seperti ini:

Buat Plugin Pustaka Pola

Di bagian sebelumnya, kita mendaftarkan pola dan kategori pola dengan menempatkan kode di file functions.php dari tema kita. Meskipun ini berhasil, itu tidak ideal untuk jangka panjang. Misalkan kita perlu memperbarui tema kita? Mungkin kami ingin menggunakan pola di situs web lain?

WordPress belum memberikan solusi asli untuk manajemen pola kustom, jadi kita harus mencari solusi alternatif. Selain itu, memiliki pola dalam format yang lebih portabel seringkali lebih disukai.

Pendekatan terbaik yang saya temukan adalah membuat plugin WordPress sederhana untuk menyimpan koleksi pola kustom saya. Plugin memberikan keserbagunaan maksimum dan tema agnostik. Saya akan menunjukkan kepada Anda cara membuat plugin pustaka pola Anda sendiri dalam langkah-langkah berikut.

Tip Singkat: Jika Anda ingin melewati langkah-langkah berikut, saya telah menyiapkan plugin "Perpustakaan Pola Saya" lengkap yang akan memberikan titik awal yang bagus untuk perpustakaan Anda sendiri. Kode ini tersedia sebagai Gist di GitHub.

Langkah 1: Mendapatkan Pengaturan

Sebelum Anda mulai membuat plugin, Anda memerlukan versi WordPress yang berfungsi dan editor teks dengan berbagai variasi. Saya sangat merekomendasikan Lokal untuk membuat instalasi WordPress lokal dan telah menggunakannya secara eksklusif selama bertahun-tahun. Saya menggunakan Atom untuk mengedit teks, tetapi ada banyak pilihan bagus. Bahkan editor teks dasar yang disertakan dengan sistem operasi Anda akan melakukannya.

Siapkan situs WordPress lokal menggunakan Lokal atau aplikasi serupa. Pastikan WordPress diperbarui ke versi 5.9 atau lebih tinggi. Pola akan bekerja pada 5.5+, tetapi selalu yang terbaik adalah menggunakan versi terbaru WordPress bila memungkinkan.

Langkah 2: Buat Plugin

Hal berikutnya yang perlu Anda lakukan adalah membuat "dasar" plugin. Jika Anda baru mengenal pengembangan plugin, jangan takut. Kedengarannya lebih menakutkan daripada itu.

Arahkan ke direktori wp-content → plugins di instalasi WordPress lokal Anda dan buat direktori baru berjudul my-pattern-library. Anda dapat memberi nama direktori apa pun yang Anda suka. Cukup ganti "my-pattern-library" dengan nama khusus Anda di semua langkah selanjutnya.

Di dalam direktori wp-content baru → plugins → my-pattern-library , buat file PHP berjudul my-pattern-library.php. Buka file di editor teks Anda dan tambahkan komentar header plugin berikut ke bagian atas file. Jangan lupa <?php. Perhatikan bahwa saya menyederhanakan header untuk tutorial ini.

<?php

/**

* Nama Plugin: Perpustakaan Pola Saya

* Deskripsi: Pustaka pola blok sederhana.

* Versi: 0.1.0

* Membutuhkan setidaknya: 5.8

* Membutuhkan PHP: 7.0

* Penulis: Nama Anda

* Lisensi: GPL v2 atau lebih baru

* Domain Teks: perpustakaan pola-saya

*/

Jangan ragu untuk mengubah informasi header sesuai keinginan Anda. Kemudian simpan filenya. Anda sekarang memiliki plugin WordPress yang berfungsi penuh. Konfirmasikan itu terlihat di halaman Plugin admin dan klik "Aktifkan." Seharusnya terlihat seperti ini.

Meskipun Anda sekarang memiliki plugin yang berfungsi, itu sebenarnya tidak melakukan apa-apa. Mari kita ubah itu.

Langkah 3: Daftarkan Pola dan Kategori

Pada langkah terakhir ini, yang perlu Anda lakukan hanyalah menyalin kode registrasi kategori pola dan pola dari sebelumnya di artikel ini ke dalam plugin baru. Kami sebelumnya menempatkan kode ini di file functions.php tema. Sekarang, cukup tempel di bawah komentar header di file my-pattern-library.php Anda.

Simpan file dan kemudian arahkan ke Editor di WordPress. Buka Inserter, klik pada tab Patterns dan pilih kategori Custom. Anda akan melihat dua pola yang didaftarkan oleh plugin.

Pustaka pola Anda sekarang beroperasi! Saat ada kebutuhan untuk pola atau kategori kustom baru, cukup tambahkan ke plugin. Contoh kode lengkap tersedia sebagai Gist di GitHub.

Sebelum kita mengakhiri, penting untuk disebutkan bahwa contoh ini ditujukan untuk penggunaan pribadi. Anda mungkin ingin memasukkan lebih banyak fungsionalitas jika plugin didistribusikan secara publik. Lokalisasi datang ke pikiran. Karena itu, tutorial ini menunjukkan betapa mudahnya membuat plugin sederhana yang menyimpan pola blok khusus.

Membungkus

Dalam artikel ini, Anda mempelajari cara mendesain, membagikan, dan mendaftarkan pola blok. Anda bahkan telah belajar cara membuat plugin WordPress sederhana untuk menampung pustaka pola Anda sendiri. Saya sangat percaya bahwa pola blok merupakan bagian integral dari pengembangan tema modern, dan saya bersemangat untuk melihat apa yang akan terjadi di masa depan. Jika Anda belum mulai menjelajahi pola, saya harap artikel ini mendorong Anda untuk melakukannya. Learn WordPress adalah sumber yang fantastis untuk pembelajaran tambahan dan jika Anda memiliki pertanyaan, beri tahu saya di komentar.