Membangun Perpustakaan Pola blok Gutenberg

Gutenberg mewakili perubahan besar menuju desain web berbasis pola. Dalam artikel ini saya akan membahas pendekatan yang kami ambil saat membuat perpustakaan fleksibel blok Gutenberg kustom kami sendiri.

Latar Belakang

Rilis Gutenberg Desember 2018 mewakili perubahan terbesar di WordPress sejak awal. Antarmuka 'seret & lepas' berbasis blok baru mengubah cara pengembang membuat tema, cara desainer mempertimbangkan untuk memecah situs menjadi bagian-bagian komponen, dan cara editor konten mengelola dan merencanakan pembuatan konten.

Ini adalah perubahan mendasar menuju desain situs web berbasis pola; sistem elemen yang dapat digunakan kembali yang dapat diterapkan secara konsisten di seluruh situs web, untuk menciptakan pengalaman pengguna terbaik dan merampingkan alur kerja. Sementara banyak dari kita sudah bekerja dengan pola, Gutenberg mendorong perubahan ini dengan kecepatan yang dipercepat. Karena WordPress mendukung sepertiga situs web di seluruh dunia, dampak dari perubahan ini tidak dapat dilebih-lebihkan.

Artikel ini menyoroti beberapa masalah yang kami hadapi sebagai pengembang ketika mulai merencanakan dan membangun pustaka pola, bagaimana kami mengatasi keterbatasan yang melekat pada Gutenberg dan pendekatan yang kami ambil untuk membuat sistem blok khusus kami yang fleksibel.

Tujuan kita

Sebagai pembuat spesialis situs web WordPress yang dipesan lebih dahulu, Gutenberg telah memberi kami kesempatan sempurna untuk membuat perpustakaan pola terpadu; satu set blok yang dapat disesuaikan untuk digunakan dengan banyak pembuatan situs web kustom kami.

Kami tidak hanya ingin merangkul pengalaman pengeditan baru ini, kami ingin dapat menawarkan solusi menggunakan sistem kami sendiri tanpa bergantung pada serangkaian blok inti Gutenberg yang terbatas, atau tambal sulam solusi pihak ketiga yang tersedia.

Kumpulan blok yang lengkap di ujung jari kami juga berarti bahwa kami tidak perlu membuat setiap blok dari awal untuk pembuatan situs web Gutenberg yang baru. Ini akan memungkinkan kami menghabiskan lebih banyak waktu untuk menyempurnakan estetika situs dan menambahkan jenis sentuhan akhir dan pengoptimalan yang membantu memisahkan situs web dari pesaingnya.

Tantangan

Fleksibilitas desain

Kami membutuhkan sistem desain serbaguna dengan beberapa pola yang akan memberi kami fleksibilitas dalam menciptakan berbagai tema yang dipesan lebih dahulu.

Mencapai keseimbangan yang baik antara mampu mempertahankan jumlah pola yang terbatas dan realistis, tanpa mengorbankan desain tema akan menjadi tantangan.

Pergeseran dalam pengembangan tema

Sebelum Gutenberg, kami mengambil sejumlah pendekatan berbeda untuk pengembangan tema. Yang paling umum adalah membuat templat halaman individual untuk bagian situs yang terpisah. Template akan sangat menentukan dan menyertakan bidang khusus untuk setiap bagian yang dirancang. Template 'Studi Kasus', misalnya, dapat menyertakan bidang untuk editor teks, galeri gambar, testimonial, dll. Namun, setelah disertakan dalam template, mereka tidak dapat dengan mudah diubah.

Pendekatan ini tidak hanya membatasi dalam hal tata letak halaman, tetapi biasanya berarti upaya berulang diperlukan dengan setiap situs berbasis template baru; bidang perlu dibuat, template diatur dan komponen terpisah dikodekan untuk ditampilkan di ujung depan.

Untuk beradaptasi dengan Gutenberg, kami perlu mengubah pendekatan pengembangan kami, memahami bagaimana kami dapat membuat komponen yang dapat digunakan kembali dan merangkul fleksibilitas yang sekarang ditawarkan Gutenberg kepada kami untuk pembuatan situs web baru.

Gutenberg tidak begitu fleksibel

Di luar kotak, Gutenberg memiliki lebih dari 30 blok inti yang tersedia. Semuanya, mulai dari komponen konten dasar seperti paragraf, judul, dan elemen daftar hingga widget dan penyematan yang lebih kompleks.

Untuk banyak pembuatan situs web kami, sejumlah besar blok inti ini tidak relevan atau tidak memiliki tingkat fungsionalitas yang diminta oleh tema kami dari mereka. Kami membutuhkan cara untuk membuat kumpulan pola kami sendiri yang menjalankan fungsi yang sangat spesifik sesuai dengan desain tema.

Masalah lain yang segera kami temukan dengan Gutenberg adalah tidak mudah atau intuitif untuk membuat tata letak yang lebih kompleks menggunakan blok inti.

Pola untuk blok "konten dan gambar" misalnya mungkin memerlukan judul, paragraf, daftar, dan tombol untuk muncul di samping gambar dan dengan opsi untuk menampilkan gambar ke kiri atau kanan konten itu, dan agar elemen ini menjadi ditampilkan dalam tata letak yang konsisten.

Tingkat kebebasan ini tidak datang dengan mudah dengan Gutenberg. Sementara ada beberapa blok yang dapat menambahkan teks, gambar dan tombol, ini cukup atom di alam dan ketika ditambahkan secara individual muncul sebagai blok bertumpuk yang terpisah. Menjadi jelas sejak awal bahwa Gutenberg tidak cukup fleksibel dan kami harus dapat membuat blok kustom kami sendiri.

Solusi kami

Sistem desain serbaguna

Sebelum rilis Gutenberg, kami telah menginvestasikan banyak waktu dalam penelitian dan visualisasi pola untuk perpustakaan pola kami.

Ini melibatkan audit beberapa situs web dan prototipe kami yang ada untuk mengkompilasi pustaka gambar rangka elemen yang umum digunakan.

Perancang dan pengembang kami terus bekerja sama untuk memahami bagaimana elemen-elemen ini dapat digabungkan ke dalam blok Gutenberg dan bagaimana jenis blok tertentu dapat dibuat sehingga dengan opsi penyesuaian terbatas, satu blok dapat dibuat agar terlihat sangat berbeda dari satu tema ke tema lainnya.

Setelah kami mengkategorikan pola kami ke dalam blok, kami siap untuk mulai membangun.

Blok bangunan dengan Bidang Kustom Tingkat Lanjut

Setiap pengembang tema hampir pasti menemukan Bidang Kustom Lanjutan (ACF) di beberapa titik. Melalui antarmuka yang intuitif, banyak jenis bidang yang berbeda dapat dibuat; apa pun mulai dari bidang teks dasar dan editor konten hingga pemilih tanggal, penyematan peta, dan bidang galeri. Ini dapat dengan mudah ditetapkan ke berbagai area situs seperti jenis posting, templat halaman, kategori, dan halaman pengguna.

Versi terbaru ACF, blok ACF, memperluas semua fungsi yang sudah dikenal ini ke Gutenberg. Grup bidang dapat dibuat dan ditetapkan ke blok berbasis ACF yang berbeda dengan cara yang sama seperti area situs lainnya.

Dengan beberapa baris kode yang diperlukan untuk mendaftarkan blok dan bidang keluaran, dimungkinkan untuk membuat blok kustom dasar dalam hitungan menit. Kemudahan pembuatan blok dengan pendekatan ini memungkinkan kami untuk fokus pada konfigurasi blok, keluaran, dan gaya.

Kami sekarang dapat membuat rangkaian blok khusus yang memberikan semua fleksibilitas Gutenberg tetapi terbatas pada desain tema yang akan membantu dengan tata letak yang konsisten.

Plugin Pustaka Pola

Setelah membuat beberapa contoh blok, kami memutuskan untuk mengemas blok kami dalam plugin khusus dengan bantuan tim teknik.

Plugin berbasis blok ini memungkinkan penyebaran cepat pola kustom untuk pembuatan situs web baru. Ini kemudian disesuaikan lebih lanjut di tingkat tema.

Plugin Pattern Library kami menyertakan beberapa fitur berguna:

1. File template blok dasar untuk memungkinkan kami menambahkan blok baru dengan cepat;
2. Fungsi untuk memungkinkan blok inti dan blok khusus diinisialisasi dan dimasukkan dalam kategori khusus;
3. Layar pengaturan admin di mana setiap blok dapat diaktifkan atau dinonaktifkan;
4. Kemampuan untuk mengesampingkan tata letak dan struktur blok dalam tema;
5. Kemampuan untuk mengganti gaya blok pada tingkat tema;
6. Memuat lembar gaya tingkat tema di dalam Gutenberg sehingga pratinjau blok admin terlihat sama dengan blok ujung depan. Penggunaan grid CSS membantu kami memaksimalkan fleksibilitas dalam estetika dan tata letak, sekaligus meminimalkan perubahan struktural;
7. Blok tertentu dapat dibatasi pada jenis posting tertentu untuk menjaga konsistensi.

Pengembangan plugin Pattern Library akan menjadi evolusi yang berkelanjutan tetapi kami sekarang memiliki lebih dari 15 blok yang dapat digunakan untuk membangun proporsi yang signifikan dari desain tema fleksibel kami.

Rangkaian blok kami mencakup konten dan pola gambar, testimonial, artikel terkait, dan blok tim bersama dengan lebih banyak pola gaya 'pameran' termasuk galeri, statistik, dan bilah geser.

Ringkasan

Kami sangat senang dengan peluang yang dibuka Gutenberg dan Pustaka Pola kustom kami.

Kami tidak hanya dapat terus mendorong penawaran situs web pesanan kami menggunakan pengalaman pengeditan terbaru, kami juga dapat menghasilkan situs web yang sangat fleksibel dengan pendekatan pengembangan terpadu yang membantu kami menciptakan pengalaman yang kaya bagi pengguna akhir.

Sudah hampir 2 bulan sejak kami pertama kali mulai menggunakan Pustaka Pola blok Gutenberg yang sekarang kami gunakan di banyak pembuatan situs baru. Klien sangat ingin menggunakan Gutenberg dan sejauh ini umpan balik klien sangat positif.

“Matt dan Pammy menyampaikan tutorial tentang elemen situs yang telah Anda buat dan itu luar biasa!! Fleksibilitas dan profesionalismenya luar biasa dan saya sangat berterima kasih atas semua pekerjaan luar biasa Anda sejauh ini .. Sangat bersemangat tentang situs web sekarang. Terima kasih"

– Rachel Smith, YMCA Nottingham

Kami akan terus memperluas perpustakaan pola blok khusus kami dan menyempurnakan dengan peningkatan lebih lanjut saat kami menghabiskan lebih banyak waktu dengan Gutenberg. Saat ini kami sedang mengerjakan situs kami yang berbasis di Gutenberg ke-5, jadi carilah studi kasus segera!

Jika Anda memerlukan bantuan dengan Pengembangan WordPress Anda, jangan ragu untuk menghubungi kami.