Cara Membuat Plugin Blok Gutenberg Sederhana

Bukankah kita semua menyukai WordPress? Platform ini telah menikmati kesuksesan besar sejak awal, dengan pengembang menambahkan fitur baru secara konstan. Salah satu fitur yang paling menonjol belakangan ini adalah editor blok WordPress, dengan nama kode Gutenberg .

Gutenberg menawarkan kepada pengguna WordPress cara baru yang menarik untuk menerbitkan konten dan menyesuaikan situs Anda. Ini sangat mudah digunakan, yang merupakan berita bagus untuk pemula dan pengembang. Jika Anda menggunakan WordPress versi terbaru, Anda sudah sekeluarga dengan editor blok dan konsep blok.

Secara default, editor blok WordPress hadir dengan beberapa blok yang memungkinkan Anda memasukkan teks, gambar, kutipan, audio, video, penyematan, dan sebagainya. Selain itu, ada banyak sekali pengaya Gutenberg di luar sana yang memungkinkan Anda memperluas editor tanpa kesulitan.

Namun, Anda mungkin memiliki kebutuhan khusus yang meminta Anda untuk membuat blok kustom Anda sendiri. Di sinilah pos hari ini masuk. Dalam beberapa paragraf, Anda akan belajar dengan tepat cara membuat blok Gutenberg khusus yang sesuai dengan kebutuhan spesifik Anda.

Tanpa basa-basi lagi, mari kita mulai karena ada banyak hal yang harus dipelajari.

Apa Itu Blok?

Jika Anda seorang pemula yang sempurna, Anda mungkin bertanya-tanya tentang bisnis Gutenberg ini. Saya tahu, saya cukup bingung ketika Gutenberg diperkenalkan. Tapi tidak ada yang bisa disalahkan, kami semua terbiasa dengan Editor Klasik yang membuat perubahan itu tidak nyaman pada awalnya.

Tetap saja, editor blok WordPress ada di sini untuk tetap apakah kita suka atau tidak. Itulah mengapa Anda harus belajar sebanyak mungkin tentang Gutenberg (dan segala sesuatu yang menyertainya) untuk memanfaatkannya sebaik mungkin.

Blok memperlakukan Paragraf, Judul, Media, dan Sematan semua sebagai komponen yang, ketika dirangkai bersama, membentuk konten yang disimpan dalam database WordPress, menggantikan konsep tradisional teks bentuk bebas dengan media tertanam dan kode pendek. – Buku Pegangan Blok Editor

Di masa lalu, pengguna WordPress mengandalkan teks bentuk bebas dan kode pendek untuk menambahkan konten. Gutenberg menggunakan blok . Editor baru memungkinkan Anda menggunakan unit blok untuk membuat tata letak yang kaya dan fleksibel yang mudah dikelola. Saat ini, Anda dapat menggunakan editor blok untuk posting dan halaman tetapi ada rencana aktif untuk mendukung pengeditan situs lengkap di masa mendatang.

Editor Gutenberg menunjukkan beberapa blok

Bekerja dengan blok membuat membuat konten di WordPress cukup menyegarkan. Plus, banyak plugin yang ada mendukung editor baru dan dilengkapi dengan blok siap pakai yang membuat penambahan konten dari plugin tersebut menjadi mudah. Editor memungkinkan Anda untuk menarik dan melepaskan blok ke halaman sehingga Anda dapat menekan tombol terbitkan lebih cepat.

Sama seperti pembuat halaman yang dibangun langsung ke WordPress.

Jika Anda terbiasa dengan pembuat halaman visual seperti Elementor, Anda mungkin akrab dengan konsep pembuatan halaman drag-and-drop. Gutenberg adalah upaya untuk sepenuhnya memasukkan pembuatan situs drag-and-drop ke dalam inti WordPress. Jangan ragu untuk melihat Panduan Langkah demi Langkah kami untuk Gutenberg Builder untuk WordPress untuk mempelajari lebih lanjut.

Dengan itu, mari kita masuk ke bagian terbaik dari posting hari ini. Mari kita pelajari cara membuat blok sederhana. Anda dapat melakukannya secara manual atau menggunakan plugin seperti Genesis Custom Blocks (sebelumnya BlockLab), Lazy Blocks, atau ACF. Membuat blok khusus sedikit teknis, jadi untuk tujuan posting hari ini, kami akan menggunakan plugin.

Cara Membuat Custom Block (Menggunakan Genesis Custom Blocks)

Pergi ke rute plugin lebih mudah karena membuat blok Gutenberg khusus dari awal membutuhkan pemahaman yang baik tentang HTML, CSS, PHP, dan, yang lebih penting, JavaScript. Anda juga perlu memahami React, yang membuat pemula melempar bola melengkung.

Untuk bagian selanjutnya, kami akan menggunakan Genesis Custom Blocks, yang dipersembahkan oleh StudioPress dan WPEngine, di antara pengembang lainnya. Versi gratis dari Genesis Custom Blocks tersedia di repositori resmi WordPress, yang berarti kita dapat menginstalnya di dalam dasbor admin WordPress.

Instal Genesis Custom Blocks

Masuk ke dasbor admin WordPress Anda, dan arahkan ke Plugins > Add New , seperti yang ditunjukkan di bawah ini.

Selanjutnya, masukkan “Genesis Custom Blocks” ke dalam kotak pencarian kata kunci, dan tekan tombol Instal Sekarang :

Setelah itu, Aktifkan plugin untuk memulai pesta.

Kamu baik-baik saja

Selanjutnya, mari kita buat blok kustom baru. Untuk tujuan ilustrasi, mari kita buat Call-To-Action (CTA) kustom yang akan kita tambahkan di akhir setiap posting yang kita terbitkan. Bagian terbaiknya adalah Anda dapat menggunakan kembali blok untuk menghemat kesulitan membuat blok yang sama berulang-ulang.

Dari menu admin WordPress Anda, navigasikan ke Custom Blocks > Add New , seperti yang kami soroti di bawah ini.

Melakukannya akan membawa Anda ke halaman berikut tempat Anda menemukan semua opsi untuk membuat blok khusus kami (dalam kasus kami, CTA):

Berikut adalah beberapa kata untuk menjelaskan apa yang Anda lihat pada tangkapan layar di atas. Mulai dari atas, Anda punya.

Area Pengeditan Utama:

• Builder – Anda mungkin akan menghabiskan banyak waktu di sini merancang blok kustom Anda. Builder memungkinkan Anda untuk menambahkan judul, bidang, siput, kata kunci, kategori, dan melihat pratinjau blok khusus Anda. Anda akan belajar cara menambahkan bidang.
• Editor Template – Setelah mendesain blok kustom Anda (yaitu, menambahkan berbagai bidang), Anda perlu membuat template blok (baca, tambahkan sedikit kode) di Editor Template . Kita akan belajar lebih banyak ketika kita mendesain CTA.
• Pratinjau Editor – Ini memungkinkan Anda untuk melihat pratinjau blok khusus di dalam editor blok WordPress.
• Pratinjau Front-end – Di sini, Anda dapat melihat pratinjau tampilan blok khusus di situs Anda.
• Bidang Editor – Akan menampilkan bidang di area pengeditan utama dari sebuah posting atau halaman (Anda tahu, seperti bagaimana Anda melihat posting biasa Anda di dalam editor WordPress)
• Bidang Inspektur – Akan menampilkan bidang di bilah sisi kanan di bawah inspektur blok.

Opsi Bilah Sisi

• Slug – Slug diisi secara otomatis berdasarkan judul yang Anda berikan pada blok khusus Anda. Ini penting saat membuat template blok.
• Ikon – Opsi ini memungkinkan Anda untuk menambahkan ikon ke blok khusus Anda.
• Kategori – Ini memungkinkan Anda untuk menetapkan kategori ke blok khusus Anda. Anda dapat mengkategorikan blok khusus Anda menggunakan salah satu kategori bawaan, atau Anda dapat membuat kategori baru.
• Kata kunci – Tambahkan maksimal tiga kata kunci yang terkait dengan blok khusus Anda sehingga orang dapat menemukannya dengan mudah di pemilih blok.
• Buka bidang blok dalam modal alih-alih merender di tempat – Aktifkan jika Anda ingin membuka bidang dalam modal. Ini berguna jika Anda memiliki blok khusus dengan banyak bidang.
• Jenis Postingan – Centang kotak untuk memungkinkan blok khusus Anda ditampilkan pada setiap jenis posting. Misalnya, jika Anda menghapus centang pada Postingan, blokir tersebut tidak akan muncul sama sekali di postingan mana pun.

Membuat Blok Kustom

Sekarang setelah Anda memiliki pemahaman yang lebih baik tentang antarmuka pengguna, dan apa yang dilakukan setiap bagian, mari kita singsingkan lengan baju untuk mulai bekerja.

Di Builder , berikan blok khusus Anda judul yang sesuai. Saya akan menggunakan CTA untuk yang satu ini, seperti yang ditunjukkan di bawah ini.

Sebelum menambahkan bidang baru, mari kita tambahkan ikon, kata kunci, dan pilih kategori untuk blok khusus, seperti yang ditunjukkan di bawah ini.

Set itu, mari kita tambahkan beberapa bidang ke blok khusus kita. Untuk contoh blok CTA kami, kami hanya akan menambahkan tiga bidang dalam urutan berikut: gambar, beberapa teks, dan bidang file yang memungkinkan orang mengunduh ebook imajiner

Menambahkan Bidang Blok

Pada bagian Editor Fields , klik icon Plus (+) untuk menambahkan field pertama, seperti gambar di bawah ini.

Selanjutnya, mari kita tambahkan bidang gambar. Dari bilah sisi, atur Jenis Bidang ke Gambar dan tentukan opsi lainnya. Juga, perhatikan slug (saya atur milik saya ke image-field ) karena kita akan menggunakannya saat membuat templat blok. Lihat gambar di bawah ini.

Setelah itu, tambahkan bidang teks dan file dengan cara yang sama.

Jangan merayakannya, masih ada satu langkah lagi. Beralih ke Editor Template > Markup:

Milik saya sudah memiliki beberapa kode tetapi milik Anda akan kosong

Di sini, kami akan mendesain tampilan blok khusus Anda di situs Anda. Editor Template menerima HTML, CSS, dan siput bidang (yang harus Anda sertakan dalam 2 tanda kurung). Jika Anda perlu menggunakan PHP, Anda dapat membuat template menggunakan metode template PHP.

Jangan khawatir, itu mudah.

Di dalam Editor Template , di bawah tab Markup (lihat gambar di atas), tambahkan potongan markup HTML (kode):

 <div class="cta-block">
<div class="cta-image">
<img src ="{{bidang-gambar}}">
</div>
<div class="text-upload">
<h2>{{text-field}}</h2>
<a href="{{file-field}}">
<button type="button" class="dwnld">Unduh</button></a>
</div>
</div>

Saat Anda menulis markup HTML, Anda akan melihat bahwa Editor Template melengkapi secara otomatis siput bidang (mis. {{image-field}} ) untuk Anda

Selanjutnya, buka bagian CSS untuk menambahkan beberapa gaya sederhana.

Anda dapat menambahkan gaya yang Anda inginkan, tetapi inilah yang sedang saya kerjakan:

 .cta-blok {
perataan teks: tengah;
warna latar:oranye;
lebar: 100%;
tinggi: otomatis;
perbatasan: 2px oranye solid;
}

.dwnld {
warna latar: hitam;
perbatasan: 2px hitam pekat;
warna: hijau;
bantalan: 5px 10px;
perataan teks: tengah;
tampilan: blok sebaris;
ukuran font: 20px;
margin: 10px 30px;
kursor: penunjuk;
batas-radius:2px;

}

Dan Anda sudah siap! Klik Publikasikan :

Untuk melihat blok kustom baru Anda beraksi, kembali ke dasbor admin WordPress Anda dan navigasikan ke Posts > Add New (Ini juga berfungsi dengan halaman):

Buat posting seperti biasa, klik Plus (+) untuk menambahkan blok baru, dan pilih blok kustom mengkilap baru Anda, seperti yang kami soroti di bawah ini.

Selanjutnya, isi custom block Anda sesuai keinginan dan publikasikan postingan Anda:

Sekarang, jika saya memeriksa blok CTA kustom baru saya di front-end, saya melihat ini:

CTA kustom saya ada di sana! Tolong jangan pikirkan kemampuan desain saya – tentu saja dalam skenario kehidupan nyata Anda ingin meluangkan waktu ekstra untuk menata blok Anda. Tapi saya harap Anda belajar sesuatu di sini hari ini.

Membangun blok kustom tidak perlu menjadi tugas yang menantang dengan alat-alat seperti Genesis Custom Blocks dan Lazy Blocks, antara lain. Itu, plus Anda dapat membuat blok khusus Anda rumit atau sederhana tergantung pada kebutuhan Anda. Jika Anda harus membuat blok khusus secara manual, ambil beberapa pelajaran JavaScript. Itu akan membantu

Ada pemikiran atau pertanyaan? Beri tahu kami di komentar di bawah.