Panduan Lengkap Pola Blok Gutenberg (I)

Minggu lalu, Matt Mullenweg, seperti tradisi setiap tahun, memberikan presentasinya (dalam hal ini, virtual), State of The Word , di mana ia menyajikan ringkasan singkat tentang status terkini dan fitur baru WordPress.

Matt lebih dari sebelumnya berfokus untuk membuat kita jatuh cinta dengan pengalaman yang diberikan oleh editor blok Gutenberg. Salah satu fitur baru yang disorot Matt, yang disertakan dengan WordPress versi 5.5, adalah pola blok . Saya pikir akan menarik untuk membuat panduan lengkap ini tentang mereka.

Panduan ini dibagi menjadi tiga posting dan kita akan melihat 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 mengonversi blok yang dapat digunakan kembali menjadi pola blok
8. Topik menggunakan pola blok
9. Dokumentasi resmi.

Jadi, tanpa penundaan lebih lanjut, mari kita mulai!

1. Pengantar Pola Blok

Ketika Gutenberg tiba, perubahan besar sehubungan dengan editor klasik yang biasa kami miliki di WordPress adalah pengenalan konsep "blok". Semuanya seharusnya menjadi blok: judul posting, paragraf, daftar, gambar… masing-masing adalah blok, dengan properti kustomisasinya sendiri untuk mengatur ukuran font, judul, perataan, dan sebagainya.

Blok dengan cepat menjadi lebih canggih dan sekarang kami memiliki galeri gambar, blok media/teks atau bahkan blok yang berisi blok lain.

Secara bersamaan, banyak pengembang juga telah menyediakan satu set besar blok dengan fitur unik sehingga Anda dapat meningkatkan desain halaman Anda. Misalnya, di Nelio kami mengembangkan Nelio Bandingkan Gambar untuk membandingkan dua gambar dengan penggeser sederhana:

Tidak hanya ledakan blok yang dapat ditemukan di plugin dan tema, kemampuan mereka juga berkembang dengan versi WordPress yang berbeda. Dengan demikian, saat ini Anda dapat membuat blok yang dapat digunakan kembali dan, dengan blok tersebut, bahkan membuat halaman atau templat posting.

Melanjutkan gagasan memiliki desain yang telah ditentukan sebelumnya yang dapat digunakan kembali dengan cepat dan mudah, dengan WordPress versi 5.5 pola blok telah tiba. Ide pola blok sangat sederhana: mereka adalah bagian atau fragmen yang telah ditentukan sebelumnya yang dibentuk oleh sekelompok blok yang dapat Anda gunakan dalam pembuatan halaman dan posting. Pola-pola ini dapat berupa sesuatu yang sederhana seperti bagian yang menunjukkan dua tombol atau bagian harga dengan desain yang menarik dan rumit.

2. Menyisipkan Pola pada Halaman

Mari kita mulai dengan dasar-dasarnya, bagaimana cara menyisipkan pola baru pada halaman? Sangat mudah! Seperti blok, untuk menyisipkan pola Anda hanya perlu mengklik tombol + di kiri atas editor Anda dan, alih-alih menambahkan blok, pilih tab Pola . Di sana Anda akan melihat drop-down kecil dengan jenis pola yang dapat Anda pilih, yang telah ditentukan sebelumnya dari WordPress, tema yang telah Anda instal dan lainnya yang telah Anda instal dengan plugin.

Pilih pola yang paling Anda sukai dan lihat bagaimana kumpulan blok yang menyusunnya dimasukkan ke halaman Anda:

Setelah memasukkan pola, Anda dapat memodifikasi setiap blok seperti yang telah Anda lakukan selama ini. Juga jika blok dari pola itu dikelompokkan, Anda juga dapat mengubah properti grup secara keseluruhan. Sederhana, bukan?

3. Pola Default dan Lebih Banyak Pola dari Direktori Pihak Ketiga

Versi WordPress 5.5 telah hadir dengan serangkaian pola blok yang telah ditentukan sebelumnya yang sekarang dapat Anda gunakan untuk membuat halaman Anda. Anda hanya perlu mengklik tombol + yang saya sebutkan di atas untuk melihat pola yang tersedia di situs Anda.

Selain itu, tema aktif Anda mungkin juga menentukan pola bloknya sendiri. Misalnya, tema WordPress Twenty Seventeen atau Twenty Twenty-One menyertakan beberapa pola blok, dan begitu juga dengan GoDaddy's dan Genesis Blocks', untuk menyebutkan beberapa contoh.

Setelah rilis WordPress 5.0 kami mengalami ledakan blok, dan kami sekarang melihat hasil yang sama jika pola blok: Anda dapat mengunduh dan menginstal blok dan pola di situs web Anda dengan sangat mudah, seperti yang akan saya jelaskan nanti. Di sini Anda memiliki dua jaring balok dan pola yang Anda inginkan, meskipun saya yakin akan segera ada lebih banyak lagi:

• Shareablock Patterns oleh Jeffrey Carandang – Situs web fantastis tempat Anda dapat berbagi dan mendapatkan banyak blok, templat, dan pola untuk diunduh dan dipasang di situs Anda.

• Hub Gutenberg Munir Kamal – di mana Anda juga akan menemukan banyak blok, templat, dan pola.

Ada juga plugin Redux Framework , yang menawarkan perpustakaan dengan lebih dari 1000 blok, templat, dan pola pihak ketiga (termasuk yang tersedia di direktori di atas) untuk dimasukkan ke halaman Anda. Plugin ini memungkinkan Anda mengunduh hingga 5 pola gratis dan kemudian Anda dapat meningkatkan ke versi berbayar.

4. Tambahkan Pola yang Tersedia di Direktori ke Situs Anda

Seperti yang telah saya sebutkan, Anda dapat menggunakan plugin Redux Framework untuk menambahkan pola dari Shareablock dan GutenbergHub dengan mudah. Jika Anda seorang desainer situs web WordPress profesional, tentunya ini adalah pilihan yang baik untuk selalu menemukan pola sebanyak yang Anda inginkan dengan sangat cepat. Tetapi Anda juga dapat menggunakan pola blok baru tanpa memerlukan plugin premium. Mari kita lihat bagaimana.

Tambahkan Pola Shareablock

Dalam kasus Shareablock, untuk menginstal pola (dan tentu saja, blok atau template), Anda hanya perlu memilihnya dari web dan klik tombol Unduh Sekarang .

Pertama kali Anda akan dimintai alamat email sehingga Anda bisa mendapatkan username dan password.

Di email ada link untuk login ke website mereka; masuk dan Anda sekarang dapat mengunduh pola yang Anda minati. Cukup pilih dan klik Unduh Sekarang lagi, sehingga Anda menerima pola blokir di email Anda.

Setelah mengklik tautan yang disediakan dalam email, Anda dapat mengakses web untuk mengunduh file .json dari pola tersebut. Setelah diunduh, cukup seret ke editor blok WordPress dan Anda akan secara otomatis melihat semua blok yang membentuk pola.

Ini adalah proses yang rumit, tetapi itu menyelesaikan pekerjaan. Sayangnya, Anda akan melihat pola blok tidak muncul di perpustakaan Anda…

Tambahkan Pola Hub Gutenberg

Menambahkan pola dari Gutenberg Hub lebih mudah. Seperti sebelumnya, pilih dulu pola yang ingin Anda salin.

Di sebelah kanan pola, Anda akan melihat tombol Salin Kode . Klik tombol untuk menyalinnya ke clipboard Anda dan kemudian menempelkannya di editor Gutenberg Anda. Ini akan menempelkan blok di editor Anda, tetapi akan melewati perpustakaan.

Tapi tunggu! Tidak begitu cepat. Jika Anda ingin sepenuhnya menyesuaikan blok yang dihasilkan, Munir Kamal menyarankan Anda menginstal plugin gratis mereka, EditorPlus, yang menambahkan blok baru ke editor dan memperluas Gutenberg dengan kontrol desain lanjutan, font, ikon, pembagi, animasi, dan banyak lagi fitur.

Jika ya, Anda akan melihat di bilah sisi kanan editor Anda memiliki kontrol lanjutan untuk mengubah desain pola yang disalin.

Sekarang Anda tahu apa itu pola blok, di mana menemukannya, dan cara memasukkannya ke situs web Anda untuk membuat desain yang hebat. Jangan lewatkan posting berikutnya di mana Anda akan belajar cara membuat pola Anda sendiri!

Gambar unggulan oleh Raul Cacho Oses di Unsplash .