Dasar-dasar Builder: Menjelajahi Pola Blok

Versi terbaru WordPress akan tiba di akhir bulan pada tanggal 25 Januari. Mungkin saat Anda membaca ini, versi 5.9 telah dirilis ke seluruh dunia. Saya tidak bisa lebih bersemangat. Ada banyak peningkatan dan fitur baru, banyak di antaranya akan kami bahas di artikel mendatang, tetapi topik hari ini adalah "pola" blok.

Meskipun bukan hal baru di WordPress, pola menerima banyak perhatian baru karena fungsionalitas yang diaktifkan oleh versi 5.9, terutama tema berbasis blok. Pola dengan cepat menjadi komponen mendasar dari WordPress itu sendiri dan tampaknya siap untuk membentuk kembali cara kita mendesain dan membangun situs web. Jadi, kapan waktu yang lebih baik untuk menjelajahi pola blok yang sebenarnya dan bagaimana Anda dapat menggunakannya?

Dasar

Sebelum kita menyelami pola blok, mari kita mulai dengan dasar-dasar dan menetapkan beberapa terminologi. WordPress telah berubah sedikit dalam beberapa tahun terakhir. Ada baiknya untuk memastikan kita semua berada di halaman yang sama.

Memblokir

Blok adalah "unit" dasar konten di WordPress. Dari paragraf teks ke galeri gambar, blok dapat mengambil hampir semua bentuk. Saya suka membayangkan sepotong LEGO . Meskipun setiap blok mungkin terlihat berbeda atau memiliki fungsi yang unik, semuanya cocok untuk membuat konten halaman web.

Pola

Pola blok hanyalah kumpulan blok yang telah ditentukan sebelumnya yang membentuk tata letak tertentu. Sebuah pola bisa menjadi satu blok atau terdiri dari beberapa. Seperti yang akan kita lihat nanti, pola membuat pembuatan tata letak halaman yang kompleks menjadi mudah dan menyenangkan.

Editor

Editor adalah antarmuka pengguna yang kami gunakan untuk membuat halaman dan posting dari blok. Sejak diperkenalkan di WordPress 5.0 sepanjang tahun 2018, Editor telah dipanggil dengan banyak nama. Ini termasuk Gutenberg, Editor Gutenberg, Editor Blok, dan lainnya. Untuk keperluan artikel ini, kami hanya akan menggunakan istilah "Editor".

penyisip

Di dalam Editor, Inserter digunakan untuk menambahkan blok dan pola ke halaman. Anda dapat mengakses Inserter dengan mengklik tanda biru (+) di sudut kiri atas Editor.

Tangkapan layar di bawah mengilustrasikan istilah yang kami definisikan.

Mengapa Pola Blok?

Editor memberdayakan kami untuk membuat hampir semua desain dari blok, baik itu posting blog sederhana atau halaman arahan yang rumit. Mari kita gunakan artikel ini sebagai contoh. Apa yang Anda baca sekarang adalah blok Paragraf. Judul di atas adalah blok Judul dan tangkapan layar hanyalah blok Gambar. Menambahkan elemen konten ini ke halaman itu mudah. Saya membuka Inserter, menemukan blok yang sesuai dan mengklik untuk memasukkan.

Tip Singkat: Tahukah Anda bahwa blok juga dapat disisipkan menggunakan perintah slash? Mulailah paragraf baru dengan tombol “/” dan daftar blok yang tersedia akan muncul. Mengetik huruf tambahan akan menyempurnakan hasil pencarian. Cobalah!

Bagaimana dengan sesuatu yang sedikit lebih rumit? Perhatikan tabel harga berikut, desain yang biasa digunakan untuk menampilkan produk atau layanan di situs web.

Perhatikan baik-baik dan Anda mungkin dapat mengenali blok individual yang digunakan untuk membuat tata letak ini. Basisnya adalah balok Kolom dengan tiga kolom yang berjarak sama. Di dalam setiap blok Kolom terdapat blok Separator, Heading, Paragraph, Buttons, dan Spacer. Berapa banyak yang bisa Anda temukan?

Faktanya, tabel harga ini terdiri dari 25 blok individu. Terlepas dari tingkat keahlian Anda dengan WordPress, mereplikasi tata letak ini dari awal akan membosankan dan sedikit menantang.

Sekarang bayangkan jika grup yang terdiri dari 25 blok ini sudah dikonfigurasikan untuk Anda. Dengan satu klik, Anda dapat memasukkan tabel harga lengkap dan menyesuaikannya agar sesuai dengan kebutuhan pribadi Anda. Lebih baik lagi, bagaimana jika ada banyak koleksi desain di ujung jari Anda, masing-masing sesuai dengan estetika tema Anda? Pikirkan tata letak gambar dan teks yang kreatif, ajakan bertindak, header, footer, dan bahkan tata letak halaman penuh. Memiliki jenis "konten pemula" ini akan menghemat banyak waktu dan bahkan membuat Editor lebih mudah diakses oleh pengguna WordPress yang lebih baru.

Di sinilah pola blok masuk. Tabel harga di atas sebenarnya adalah pola yang disertakan dalam tema Twenty Twenty-Two mendatang, yang akan dirilis bersama WordPress 5.9!

Semoga latihan kecil ini telah mengilustrasikan mengapa saya begitu bersemangat tentang potensi pola blok, tetapi bagaimana kita benar-benar menggunakannya?

Cara Menggunakan Pola

Sama seperti blok, pola dapat ditambahkan ke halaman menggunakan Inserter. Dengan Inserter terbuka, navigasikan ke tab "Pola" yang mengungkapkan semua pola yang tersedia yang disegmentasikan berdasarkan kategori. Pilih tata letak yang tepat untuk Anda dan klik untuk menyisipkan. Anda kemudian dapat mengedit blok individu yang membentuk pola, seperti yang Anda lakukan pada blok lainnya. Tidak ada batasan jumlah pola yang dapat Anda masukkan. Padu padan untuk membuat desain halaman yang unik.

Sementara Inserter menyediakan akses mudah untuk memblokir pola, Anda akan melihat pratinjau setiap pola cukup kecil dan semuanya ditumpuk dalam satu kolom. Mungkin sulit untuk memvisualisasikan dan membandingkan tata letak sehingga sulit untuk memilih yang tepat.

Untuk mengatasi masalah ini, WordPress 5.9 menyertakan Pattern Explorer. Fitur baru yang menarik ini dapat diakses dengan mengklik tombol "Jelajahi" di sebelah dropdown kategori pada tab "Pola".

Explorer membuka jendela modal yang memberikan pengalaman penelusuran yang disempurnakan dengan pola yang ditampilkan dalam kotak. Mereka juga dapat dengan mudah dicari atau disaring berdasarkan kategori.

Tangkapan layar di atas adalah iterasi pertama dari Pattern Explorer. Rilis WordPress mendatang diharapkan dapat memperluas fungsionalitas Explorer. Eksperimen saat ini menambahkan pratinjau seluler/tablet dan opsi untuk mendemonstrasikan pola satu per satu sebagai lawan dari tata letak kisi. Meskipun tidak ada yang dikonfirmasi, perhatikan peningkatan tambahan di WordPress 6.0 menjelang pertengahan tahun 2022.

Dengan semua diskusi tentang pola ini, Anda mungkin bertanya-tanya, dari mana asalnya?

Dimana Menemukannya?

Pola untuk didaftarkan dengan salah satu dari tiga cara, baik melalui tema Anda saat ini, plugin pihak ketiga, atau WordPress sendiri melalui Direktori Pola. Mari kita telusuri setiap metode.

Tema

Tema Anda kemungkinan akan menjadi cara paling langsung agar pola tersedia di situs web Anda. Seperti yang kita lihat dengan tabel harga di atas, banyak tema berbasis blok menyertakan koleksi pola pesanan mereka sendiri. Ini hanyalah cara lain bagi tema untuk membedakan diri mereka sendiri dan serangkaian opsi tata letak yang kuat akan menjadi manfaat besar bagi pengguna. Pada saat penulisan, tema Dua Puluh Dua Puluh Dua akan dikirimkan dengan lebih dari 60!

Direktori Pola (WordPress)

Dimulai dengan rilis WordPress 5.9, WordPress akan memberikan pola sendiri melalui Direktori Pola.

Direktori Pola adalah repositori pola berbasis komunitas, seperti plugin WordPress dan repositori tema, dan akan terbuka untuk pengiriman publik pada rilis 5.9. Semua pola yang diajukan dan disetujui akan tersedia untuk Anda telusuri dan sisipkan langsung dari Pattern Explorer. Ini berarti bahwa pengguna WordPress akan memiliki akses ke ratusan, bahkan ribuan, pola blok.

Tip Singkat: Beberapa tema dapat menonaktifkan pola yang disertakan oleh WordPress dari Direktori Pola. Ini sering dilakukan ketika pengembang tema menyertakan koleksi pola mereka sendiri dan ingin memberikan pengalaman pengguna yang lebih terkurasi.

Plugin Pihak Ketiga

Akhirnya kami memiliki plugin. Karena pola telah ada selama beberapa tahun, banyak plugin pihak ketiga, seperti Genesis Blocks dan Redux, telah membuat pustaka pola yang ekstensif. Seringkali perpustakaan ini tidak terintegrasi secara langsung dengan fitur seperti Pattern Explorer dan fitur blok khusus yang tidak ditemukan di inti WordPress. Mereka juga cenderung menggunakan metode mereka sendiri untuk menyisipkan pola, tetapi seiring waktu saya berharap banyak yang akan mulai menyesuaikan diri dengan pendekatan standar baru WordPress.

Jika Anda mencari blok dan tata letak khusus sementara Direktori Pola terus berkembang, atau Anda tidak menggunakan tema dengan polanya sendiri, saya sangat merekomendasikan untuk menjelajahi apa yang ditawarkan plugin pihak ketiga.

Masa Depan Pola

WordPress 5.9 akan membawa banyak peningkatan untuk memblokir pola. Seperti yang telah kita bahas, Penjelajah Pola akan mempermudah memilih desain yang tepat untuk situs web Anda. Direktori Pola akan memberi Anda akses ke banyak koleksi pola yang dibangun komunitas yang akan terintegrasi dengan mulus ke dalam tema Anda.

Meskipun Anda akan selalu dapat membuat desain unik dari blok individu, saya yakin sebagian besar dari kita akan langsung menuju ke Pattern Explorer. Kami akan memilih tata letak, baik yang disediakan oleh tema kami atau dari Direktori, dan kemudian mengubah sesuai kebutuhan. Saya tahu saya akan melakukannya.

Selanjutnya, kita dapat mengharapkan tema berbasis blok baru untuk dinilai dari seberapa luas koleksi pola blok bawaan mereka. Tema dengan lebih dari seratus pola, semuanya dikategorikan dengan rapi dan mencakup berbagai kasus penggunaan, kemungkinan akan menjadi norma. Sementara estetika tema itu penting, menyediakan pengguna dengan alat yang mereka butuhkan untuk membuat halaman web yang indah dengan mudah adalah yang terpenting.

Pola adalah masa depan WordPress, dan masa depan cerah.

Membungkus

Dalam artikel ini kami mengulas apa itu pola blok, bagaimana Anda dapat menggunakannya, dan mengapa pola blok tersebut secara mendasar akan mengubah cara kami membangun situs web WordPress. Dalam artikel Dasar-Dasar Pembangun berikutnya, kita akan menyelam lebih dalam dan mengajari Anda cara membuat pola sendiri!

Jadi apa pendapat Anda tentang pola? Apakah Anda menggunakannya di situs web Anda? Apakah Anda memiliki pertanyaan yang tidak tercakup dalam artikel ini? Beri tahu kami di komentar.