Gutenberg adalah nama proyek pembuatan penyunting (editor) WordPress yang lebih modern dari yang sebelumnya yaitu Classic Editor. Salah satu tujuan pengembangan Gutenberg adalah untuk lebih memudahkan pengguna membuat tata letak yang indah dengan variasi konten di dalam artikel atau halaman. Sebelumnya hal ini hanya dapat dilakukan dengan menggunakan shortcode, widget dengan bantuan plugin page builder, atau kode fungsi khusus pada tema turunan atau plugin. Proyek pengembangan Gutenberg dimulai pada awal tahun 2017, yaitu sebagai sebuah plugin. Pada Desember 2018 Gutenberg resmi menjadi bagian dari kode inti (core) WordPress; yakni pada versi 5.0. Meski mendapat banyak kritik, baik dari pengguna maupun pengembang, Gutenberg berkembang semakin baik.
Semua konten yang dimasukkan ke dalam penyunting (editor) Gutenberg disebut blok (block). Blok dasar (default) yang menjadi bagian dari kode inti WordPress antara lain: paragraf, gambar, audio, kutipan, galeri, dll. Jika Anda menginginkan blok khusus dengan fungsi tertentu, Anda dapat memilih plugin yang menyediakan beragam blok menarik. Anda dapat mencarinya pada direktori plugin WordPress. Jika Anda tidak menemukan plugin yang menyediakan blok seusai keinginan Anda, maka Anda dapat membuatnya sendiri. Tentunya Anda memerlukan keahlian menuliskan kode program — terutama pemrograman WordPress — dan membutuhkan pengetahuan dasar tentang PHP, HTML, JavaScript dan CSS.
Ada beberapa hal yang perlu Anda ketahui sebelum memulai membuat blok. Hal berikut penting untuk diketahui agar blok Anda tidak melenceng jauh dari prinsip dasar dan konsep yang dibangun oleh inisiator Gutenberg.
#1. Konsep Dasar Gutenberg
Konsep dasar Gutenberg didokumentasikan dengan sangat terperinci di dalam sebuah buku pedoman atau Handbook. Buku pedoman mencakup konsep dasar tentang: blok, pengkategorian blok, blok pakai ulang, template, dan lain sebagainya.
Salah satu konsep yang perlu diketahui adalah bahwa blok merupakan bentuk tingkat lanjut dari kode HTML. Artinya sebuah blok tidak akan berfungsi sebagai blok jika pengguna harus menuliskan kode HTML. Blok juga harus menunjukkan hasilnya langsung di dalam editor sebagaimana yang terlihat ketika artikel atau halaman dipublikasikan. Proses penyuntingan blok dibuat semudah mungkin, semudah menyunting sebuah kalimat.
#2. Prinsip-prinsip Gutenberg
Kemudahan yang dirasakan pengguna dengan menggunakan Gutenberg adalah:
- Pengguna hanya fokus untuk mencapai hasil akhir sesuai dengan yang dibayangkan tanpa harus memahami aspek teknis/kode semantik dibelakangnya.
- Pengguna dapat menambah dan menyunting fungsionalitas dengan lebih mudah melalui mekanisme terpadu yang ada di antar-muka (interface) blok.
- Pengguna dapat memanipulasi apa pun yang ada di situsnya secara langsung tanpa melalui navigasi yang kompleks dan pengaturan terpisah.
- Pengguna hanya perlu mempelajari interface tunggal — blok — dan cara menambahkan elemen baru. Sehingga tidak akan merasa kesulitan karena segala sesuatunya berlangsung konsisten.
Kemudahan penggunaan Gutenberg bagi pengembang (developer) dan desainer (designer):
- Toolkit yang lengkap sehingga sangat mudah dipahami karena proses desain dan pengembangan telah distandarisasi.
- Standarisasi memungkinkan sebuah proses inter-operabilitas — di mana para developer dapat berkolaborasi dalam membuat komponen.
- Pola dasar UX (user experience) yang konsisten; sehingga developer tidak perlu membuat polanya sendiri dan berfokus pada produk.
- Interface blok yang modern dan fleksibel. Sehingga developer dapat memperluas fungsi WordPress dengan berbagai cara.
Sumber: Handbook
#3. Anatomi Blok
Anatomi blok dapat Anda pelajari melalui gambar berikut:
#4. Pelajari Tutorial-Tutorial Berikut
- Cara menggunakan JavaScript di WordPress
- Cara membuat blok
- Cara baru dalam memperluas fungsi editor dan penggunaan meta data
- Cara menampilkan informasi pada bagian atas editor
- Cara membuat bilah sisi (sidebar) untuk memperbarui data dari tabel post_meta
- Cara menambahkan tombol khusus di bilah peralatan (toolbar)
#5. Pelajari Contoh-Contoh yang Tersedia
Berbagai contoh blok dari plugin dapat dicari di direktori plugin WordPress. Namun ada baiknya Anda mempelajari lebih dahulu contoh-contoh dasar yang telah dibuat oleh kontributor WordPress. Semua kode juga dapat diakses di repositori GitHub.
Editor: Devin Maeztri
