Cara Membuat Custom Block Gutenberg di WordPress

Apakah anda ingin membuat custom block Gutenberg di WordPress? Sejak update WordPress 5.0, di perkenalkan blok editor baru untuk membuat konten di situs WordPress.

WordPress juga dibekali dengan beberap blok berguna yang dapat anda gunakan saat membuat konten. Bahkan tidak sedikit pula plugin WordPress yang sudah terdapat fitur blok sendiri.

Namun terlepas dari semua itu, anda mungkin ingin membuat blok custom sendiri untuk melakukan sesuatu yang spesifik.

Pada tutorial ini, kami akan menunjukkan cara membuat block Gutenberg custom di WordPress.

Daftar Isi

Langkah 1. Mulai

Agar bisa membuat blok custom di WordPress, yang harus anda lakukan pertama kali adalah menginstal dan mengaktifkan plugin yang bernama Block Lab. Untuk detail lebih lanjut, anda bisa melihat artikel kami tentang cara memasang plugin WordPress.

Ini merupakan plugin WordPress gratis yang memungkinkan anda membuat block custom dari panel admin dengan mudah.

Setelah plugin berhasil di aktifkan, anda dapat melanjutkan ke langkah berikutnya untuk membuat custom blok pertama anda.

Langkah 2. Membuat Custom Block Baru

Pada panduan ini, kami akan membuat block baru yang bernama ‘Testimoni’.

Pertama anda harus membuka Block Lab > Add New dari menu samping kiri admin WordPress.

Di halaman ini anda perlu memberi nama pada block yang akan di buat. Anda dapat memberi nama apapun yang di inginkan.

Di sisi kanan halaman, anda akan melihat properti block. Perhatikan, anda dapat memilih ikon untuk blok dan memilih kategori blok dari menu dropdown.

Untuk slug akan terisi otomatis berdasarkan nama block yang anda gunakan, jadi anda tidak perlu mengubahnya. Namun, anda dapat menulis hingga 3 kata kunci di bagian Keyword, sehingga blok yang anda buat dapat ditemukan dengan mudah.

Sekarang mari kita tambahkan beberapa bidang ke block kita. Anda dapat menambahkan berbagai jenis bidang seperti teks, angka, email, URL, warna, gambar, checkbox, radio button, dan banyak lagi.

Disini kami akan menambahkan 3 bidang ke blok testimoni custom yaitu bidang Image untuk gambar pengulas, kolom teks untuk nama pengulas, dan textarea untuk pesan testimoni.

Klik + Add Field untuk menyisipkan bidang pertama anda.

Ini akan membuka beberapa opsi untuk bidang tersebut. Mari kita bahas masing-masing opsi yang ada.

Field Label : Anda dapat menentukan nama untuk label bidang. Disini kami memberi nama dengan Gambar Pengulas.
Field Name : Bagian ini akan secara otomatis terisi berdasarkan label bidang yang anda gunakan.
Field Type : Disini anda dapat memilih jenis bidang. Kami ingin bidang pertama penjadi gambar, jadi kami memilih Image dari menu dropdown.
Field Location : Anda dapat memutuskan apakah ingin menambahkan bidang ke editor atau inspector.
Field Width : Pada bagian ini, anda bisa menentukan panjang bidang yang akan tampil nantinya.
Help Text : Tambahkan beberapa teks untuk menjelaskan bidang tersebut pada bagian ini. Namun, tidak diperlukan jika anda membuat block hanya untuk penggunaan pribadi.

Anda juga bisa menambahkan beberapa opsi tambahan berdasarkan jenis bidang yang anda pilih. Misalnya, jika memilih teks anda akan mendapatkan opsi tambahan seperti teks placeholder dan batas karakter.

Anda dapat mengklik tombol Close Field setelah selesai menyesuaikan bidang gambar ini.

Dengan proses yang sama, mari kita tambahkan dua bidang lagi untuk blok testimoni dengan cara mengklik tombol + Add Field.

Jika ingin menyusun ulang bidang, anda dapat melakukannya dengan menyeretnya menggunakan tanda + disisi kiri sebelum label bidang.

Untuk menghapus bidang, anda bisa mengarahkan kursor ke bidang tertentu, setelah itu klik tautan Delete di bawah label bidang.

Setelah selesai, klik tombol Publish di sebelah kanan layar untuk menyimpan custom block gutenberg anda.

Langkah 3. Buat Template Block

Meskipun anda telah membuat custom block WordPress. tetapi itu tidak akan berfungsi sampai anda membuat template blok bernama ‘block-testimoni.php’ dan mengunggahnya ke folder tema yang anda gunakan.

Nantinya file template block ini akan memberi tahu plugin cara menampilkan bidang block di dalam editor. Plugin akan mencari file template dan kemudian menggunakannya untuk menampilkan konten block.

Jika anda tidak memiliki file ini, maka akan muncul pesan error ‘Template file blocks/block-testimoni.php not found’.

Mari kita buat file template block terlebih dahulu.

Pertama buat folder baru di komputer anda dan beri nama blocks. Anda akan membuat file template di dalam folder ini, kemudian mengunggahnya ke direktori tema WordPress.

Untuk membuat file template, gunakan teks editor seperti Notepad.

Setiap kali anda menambahkan bidang baru ke custom blok, maka anda perlu menambahkan kode PHP berikut ke file template:

1	<?php block_field( 'tambahkan-nama-bidang-anda' ); ?>

Jangan lupa untuk mengganti tambahkan-nama-bidang-anda dengan yang anda miliki.

Misalnya, nama bidang pertama kami adalah gambar-pengulas, jadi kami akan menambahkan baris berikut ke dalam file template.

1	<?php block_field( 'gambar-pengulas' ); ?>

Cukup sederhana kan? Mari kita lakukan hal yang sama untuk bidang lainnya:

<?php block_field( 'gambar-pengulas' ); ?>

<?php block_field( 'nama-pengulas' ); ?>

<?php block_field( 'pesan-testimoni' ); ?>

Selanjutnya, kita akan menambahkan beberapa tag HTML ke kode di atas untuk penataan.

Misalnya saja, anda dapat membungkus gambar pengulas di dalam tag ‘img’ untuk menampilkan gambar. Jika tidak, WordPress akan menampilkan URL gambar yang tidak anda inginkan.

Anda juga dapat menambahkan class name ke tag HTML dan membungkus kode di dalam div untuk menata konten blok.

Maka kode yang akan kami gunakan pada template akan terlihat seperti ini:

</div>

</div>

Terakhir, beri nama file tersebut sebagai ‘block-testimoni.php’ dan simpan di dalam folder blocks.

Langkah 4. Sesuaikan Tampilan Custom Block

Anda juga bisa menata tampilan dari block custom yang anda buat menggunakan bantuan CSS.

Pertama buka teks editor seperti Notepad dan tambahkan kode berikut:

.testimoni-block {

width: 100%;

margin-bottom: 25px;

}

.testimoni-gambar {

float: left;

width: 25%;

padding-right: 15px;

}

.testimoni-box {

float: left;

width: 75%;

}

.clearfix::after {

content: "";

clear: both;

display: table;

}

Setelah selesai, simpan file tersebut dengan nama block-testimoni.css dan taruh di dalam folder blocks.

Langkah 5. Unggah File Template Block ke Folder Tema

Sekarang mari kita unggah folder blocks yang berisi file template custom block kita ke dalam folder tema WordPress.

Untuk melakukannya anda harus terhubung ke folder root WordPress terlebih dahulu. Anda bisa menggunakan klien FTP atau File Manager di cPanel.

Baca Juga : Cara menggunakan FTP

Setelah terhubung, buka folder /wp-content/themes/. Dari sini anda perlu membuka folder tema.

Sekarang unggah folder blocks yang berisi file template block dan file CSS ke direktori tema yang sedang aktif.

Jika sudah selesai, anda dapat melanjutkan ke langkah terakhir untuk menguji custom block.

Catatan : Plugin Block Lab memungkinkan anda membuat block tema custom. Jika anda mengganti tema, maka anda harus menyalin folder blocks ke direktori tema yang baru.

Langkah 6. Menguji Custom Block

Sekarang saatnya untuk menguji block testimoni yang anda buat. Anda dapat melakukannya dengan mengunjungi Pages > Add New untuk membuat halaman baru.

Selanjutnya, klik Add Block dan cari block yang bernama ‘Testimoni’. Setelah anda berhasil menemukannya, klik block tersebut untuk menambahkannya ke halaman editor.

Anda sekarang dapat menambahkan testimoni ke halaman ini menggunakan custom block. Untuk menambahkan lebih banyak testimoni, anda selalu dapat memasukkan block testimoni baru.

Setelah selesai, anda dapat mempublishnya dan mempratinjau halaman untuk memeriksa apakah block testimoni sudah berfungsi dengan baik atau tidak.

Itu saja, anda sudah berhasil membuat block custom di WordPress. Jika masih ada pertanyaan terkait panduan ini, silahkan tinggalkan komentar pada kolom di bawah.