Block merupakan elemen penting dalam pengembangan sebuah website WordPress. Elemen ini berfungsi untuk mempermudah pengguna menambahkan komponen di setiap halaman, seperti teks, gambar, video, section, dsb. WordPress sendiri memiliki block bawaan yang terdiri dari berbagai komponen-komponen dasar seperti yang sudah disebutkan di atas. Block-block tersebut langsung dapat digunakan di editor Gutenberg tepat setelah kita menginstal WordPress di website kita. Jika nantinya block bawaan tidak dirasa cukup, repository WordPress juga menyediakan plugin-plugin gratis yang memuat berbagai elemen block.
Permasalahan akan muncul ketika kita membuat sebuah website custom yang elemen-elemennya tidak dapat dipenuhi kebutuhannya oleh block-block yang ada di WordPress, baik itu bawaan langsung maupun dari plugin di repository-nya. Kita ingin memiliki block-block yang benar-benar sesuai dengan website yang kita bangun. Tidak kurang, tidak lebih. Disinilah kebutuhan untuk membuat plugin custom block muncul.
Artikel ini akan membahas mengenai inisiasi pengembangan plugin custom block dan menautkannya ke Github. Pembahasan dibatasi hanya pada tahap inisiasi karena untuk pembahasan pengembangan keseluruhan tentu saja akan membutuhkan artikel yang lebih mendalam, atau bisa langsung kunjungi WordPress Block Editor Handbook. Langkah-langkah yang ada pada artikel berikut dikutip dari WordPress Developer Blog, sehingga informasinya bisa dipertanggungjawabkan.
Sebelum memulai, ada beberapa tools yang perlu diinstal di perangkat kita, yakni WordPress local environment (kami menggunakan Docker), Git, Github Desktop, Node.js, dan tentu saja code editor (kami menggunakan VSCode).
Berikut adalah langkah-langkahnya :
1. Setup Plugin
- Buka folder plugin website WordPress Anda menggunakan code editor. Tidak masalah jika sudah ada plugin di dalamnya atau belum, yang penting nantinya kita bisa menjalankan command pada terminal folder tersebut.
- Buka terminal melalui code editor. Jika menggunakan VSCode, maka bisa klik Terminal -> New Terminal.
- Pastikan terminal mengarah ke folder plugin.
- Jalankan command berikut di terminal :
npx @wordpress/create-block@latest nama-plugin
Sesuaikan nama-plugin dengan nama yang diinginkan. Jika sudah berhasil maka folder plugin tersebut akan terisi dengan berbagai macam folder dan file seperti src, build, dan nama-plugin.php.
2. Inisiasi Git
Setelah berhasil melakukan setup plugin, kita perlu menginisiasi git untuk membuat repository-nya. Pada terminal, arahkan ke directory plugin dengan menjalankan command berikut :
cd nama-pluginSetelah terminal mengarah ke directory plugin, jalankan command berikut untuk menginisiasi git :
git init3. Pilih Repositori
Langkah selanjutnya setelah berhasil menginisiasi Git adalah membuka Github Desktop. Pastikan bahwa Github Desktop telah terhubung dengan akun Github kalian. Klik pada bagian Current Repository -> Add -> Add Existing Repository. Lalu pilih folder nama-plugin yang sudah dibuat.
4. Commit Git
Setelah muncul repository plugin di Github Desktop, maka langkah selanjutnya adalah melakukan commit. Isi summary field kemduian klik tombol Commit to Main.
Setelah langkah-langkah di atas dilakukan, maka kita siap untuk mengembangkan plugin custom block WordPress. Dalam pengembangannya, plugin ini memerlukan beberapa bahasa pemrograman diantaranya PHP, CSS, Javascript, dan React. Selamat bereksplorasi!
