Sejak WordPress 5.0, kita disambut dengan editor blok baru yang revolusioner bernama Gutenberg (sekarang secara resmi disebut “WordPress Block Editor”). Jika Anda terbiasa dengan editor klasik WordPress, Gutenberg mungkin terasa berbeda, bahkan sedikit membingungkan pada awalnya. Namun, jangan salah, Gutenberg hadir untuk merevolusi cara kita membuat konten di WordPress, menawarkan fleksibilitas dan kekuatan desain yang sebelumnya hanya bisa dicapai dengan page builder kompleks atau coding.

Gutenberg memungkinkan Anda membangun halaman dan pos menggunakan “blok” — semacam modul konten mandiri yang bisa Anda atur, kustomisasi, dan pindahkan dengan mudah. Artikel ini akan menjadi panduan lengkap Anda untuk memahami dan memaksimalkan Gutenberg editor, membuka potensi kreativitas konten Anda di WordPress.

Apa itu Gutenberg (WordPress Block Editor)?

Gutenberg adalah editor konten bawaan WordPress yang menggunakan pendekatan “blok”. Daripada satu area teks besar seperti editor klasik, setiap elemen konten Anda (paragraf, gambar, judul, daftar, tombol, embed video) adalah blok terpisah. Ini memberi Anda kontrol yang lebih granular dan visual atas layout dan desain konten Anda.

Analoginya: Jika editor klasik seperti menulis di mesin tik, Gutenberg seperti bermain dengan balok LEGO. Setiap balok memiliki fungsi spesifik, dan Anda bisa menyusunnya dalam berbagai kombinasi untuk membuat bangunan (konten) yang unik.

Mengapa Menggunakan Gutenberg?

• Desain Visual yang Intuitif: Anda bisa melihat bagaimana konten Anda akan terlihat secara real-time saat Anda membuatnya.
• Fleksibilitas Layout: Lebih mudah membuat layout kolom, memisahkan bagian, dan mengatur elemen secara visual tanpa perlu coding HTML atau CSS.
• Fitur Kaya: Menyediakan blok untuk hampir semua jenis konten yang Anda butuhkan, mengurangi ketergantungan pada shortcode atau plugin terpisah untuk fungsionalitas dasar.
• Pengalaman Konsisten: Bertujuan untuk menyatukan pengalaman pengeditan di seluruh situs WordPress (dari pos, halaman, hingga widget di masa depan).
• Ramah Seluler: Konten yang dibuat dengan Gutenberg secara otomatis lebih responsif di berbagai perangkat.

Mengenal Antarmuka Gutenberg Editor

Mari kita bedah tampilan Gutenberg saat Anda membuat Pos atau Halaman baru (Posts > Add New atau Pages > Add New).

1. Area Judul (Title Area): Di bagian atas, ini adalah tempat Anda menulis judul pos atau halaman Anda.
2. Area Konten (Content Area): Ini adalah kanvas utama Anda, tempat Anda menambahkan dan menyusun blok-blok. Anda akan melihat tulisan “Start writing or type / to choose a block”.
3. Toolbar Blok (Block Toolbar): Ketika Anda memilih sebuah blok, toolbar kecil akan muncul di atas atau dekat blok tersebut. Isinya ikon untuk memindahkan blok, mengubah tipe blok, perataan, dan opsi khusus blok tersebut.
4. Sidebar Pengaturan (Settings Sidebar): Di sisi kanan, terbagi menjadi dua tab:
   • Post/Page Tab: Pengaturan umum untuk seluruh pos/halaman Anda (status, visibilitas, permalink, kategori, tag, gambar unggulan, diskusi).
   • Block Tab: Pengaturan spesifik untuk blok yang sedang Anda pilih. Ini akan berubah tergantung pada jenis blok (misalnya, ukuran font untuk paragraf, gaya tombol untuk blok tombol, atau pengaturan dimensi untuk gambar).
5. Tombol ‘Toggle Block Inserter’ (+): Ikon plus di pojok kiri atas toolbar. Klik ini untuk membuka panel “Block Inserter” yang berisi semua blok yang tersedia.
6. Tombol ‘List View’ (Outline/List View): Ikon tiga garis di samping tombol (+). Ini menampilkan struktur konten Anda dalam bentuk daftar bersarang (blok di dalam blok), memudahkan Anda menavigasi, memilih, dan memindahkan blok, terutama untuk layout yang kompleks.
7. Tombol ‘Tools’ (Mode Editor): Ikon tiga titik vertikal di pojok kanan atas. Ini memungkinkan Anda beralih antara mode “Top Toolbar” (toolbar blok selalu di bagian atas layar) atau “Spotlight Mode” (hanya blok yang sedang diedit yang disorot).
8. Tombol ‘Preview’ dan ‘Publish/Update’: Untuk melihat pratinjau bagaimana konten akan terlihat di situs Anda, atau untuk menyimpan dan memublikasikan/memperbarui pos/halaman.

Menggunakan Blok: Panduan Langkah demi Langkah

Sekarang, mari kita mulai membuat konten dengan blok!

1. Menambahkan Blok Baru

Ada beberapa cara untuk menambahkan blok:

• Klik Ikon Plus (+):
  • Klik ikon plus biru di pojok kiri atas toolbar untuk membuka panel “Block Inserter”. Di sini Anda bisa mencari blok berdasarkan nama atau menelusuri kategori.
  • Arahkan kursor ke area konten, Anda akan melihat ikon plus (+) kecil. Klik ini untuk menambahkan blok di posisi tersebut.
  • Di bagian bawah blok yang ada, akan ada ikon plus (+) besar. Klik ini untuk menambahkan blok di bawahnya.
• Ketik / (Slash Command): Ini cara tercepat bagi banyak pengguna. Cukup ketik / diikuti dengan nama blok (misalnya, /image untuk blok gambar, /heading untuk blok judul) dan pilih dari daftar yang muncul.
• Tekan Enter: Ketika Anda selesai mengetik di blok paragraf dan menekan Enter, secara otomatis akan membuat blok paragraf baru di bawahnya.

2. Jenis-jenis Blok Dasar yang Wajib Anda Tahu

Gutenberg menawarkan banyak jenis blok, dan setiap plugin juga bisa menambahkan blok kustomnya sendiri. Berikut adalah beberapa yang paling sering Anda gunakan:

• Paragraph: Untuk teks biasa. Ini adalah blok default saat Anda mulai menulis.
• Heading: Untuk judul (H1, H2, H3, dst.). Pilih level judul yang tepat dari toolbar blok.
• Image: Untuk mengunggah gambar, memilih dari Media Library, atau memasukkan dari URL.
• Gallery: Untuk membuat galeri foto.
• List: Untuk membuat daftar berpoin atau bernomor.
• Quote: Untuk kutipan blok.
• Columns: Untuk membuat layout kolom, memungkinkan Anda menempatkan beberapa blok secara berdampingan. Sangat berguna untuk desain!
• Button: Untuk menambahkan tombol yang bisa diklik. Anda bisa mengubah teks, link, dan gaya tombol.
• Spacer: Untuk menambahkan ruang kosong vertikal di antara blok.
• Separator: Untuk menambahkan garis pemisah horizontal.
• Video / YouTube / Vimeo: Untuk menyematkan video dari YouTube, Vimeo, atau mengunggah video.
• Code: Untuk menampilkan kode program.
• Table: Untuk membuat tabel sederhana.
• Group: Blok yang memungkinkan Anda mengelompokkan beberapa blok menjadi satu unit. Ini berguna untuk menerapkan pengaturan layout atau gaya ke seluruh grup.
• Reusable Blocks: Blok yang sudah Anda simpan dan bisa digunakan kembali di pos atau halaman lain. Hemat waktu!

3. Memindahkan dan Mengatur Ulang Blok

• Drag-and-Drop: Pilih blok, lalu klik dan seret ikon enam titik (handle) yang muncul di toolbar blok. Seret ke atas atau ke bawah ke posisi yang diinginkan.
• Tombol Panah: Di toolbar blok, Anda akan melihat ikon panah atas dan bawah. Klik ini untuk memindahkan blok satu posisi ke atas atau ke bawah.
• List View: Gunakan mode “List View” (ikon tiga garis di toolbar atas) untuk melihat semua blok dalam daftar. Anda bisa menyeret dan melepas blok dari sana juga, yang sangat berguna untuk layout yang kompleks atau nested blocks.

4. Menghapus Blok

Pilih blok yang ingin Anda hapus, lalu klik ikon tiga titik vertikal (Opsi Lainnya) di toolbar blok, dan pilih “Remove block“.

5. Kustomisasi Blok Melalui Sidebar Pengaturan

Ini adalah inti dari kustomisasi Gutenberg. Setiap kali Anda memilih sebuah blok, tab “Block” di sidebar kanan akan menampilkan pengaturan khusus untuk blok tersebut.

• Paragraf: Anda bisa mengubah ukuran font, warna teks, warna latar belakang, dan pengaturan typography lainnya.
• Gambar: Anda bisa mengubah ukuran gambar, menambahkan caption, mengatur perataan, atau menambahkan link.
• Tombol: Ubah gaya tombol (solid, outline), warna, ukuran, radius sudut, dan tambahkan link.
• Kolom: Atur jumlah kolom, lebar setiap kolom, dan perataan vertikal.

Luangkan waktu untuk menjelajahi pengaturan di sidebar untuk setiap jenis blok yang Anda gunakan. Anda akan terkejut dengan banyaknya opsi kustomisasi yang tersedia.

Tips dan Trik untuk Memaksimalkan Gutenberg Editor

• Manfaatkan Reusable Blocks: Jika Anda sering menggunakan kombinasi blok yang sama (misalnya, call-to-action, profil penulis, atau bagian testimoni), simpan sebagai “Reusable Block”. Klik ikon tiga titik pada blok atau grup blok, lalu pilih “Add to Reusable blocks”. Ini akan menghemat waktu dan menjaga konsistensi desain.
• Gunakan Template / Pattern Bawaan: Gutenberg menyediakan “Patterns” atau “Template” yang merupakan kumpulan blok pra-desain. Ini sangat membantu untuk memulai desain layout yang menarik dengan cepat. Cari di tab “Patterns” di “Block Inserter”.
• Explore Blok dari Plugin Pihak Ketiga: Banyak plugin (terutama page builder seperti Elementor atau Kadence Blocks) menambahkan blok kustom mereka sendiri yang jauh lebih canggih, memperluas kemampuan Gutenberg.
• Pelajari Keyboard Shortcuts:
  • Enter: Membuat blok paragraf baru.
  • /: Membuka slash command untuk menambahkan blok.
  • Ctrl/Cmd + Shift + D: Menduplikasi blok.
  • Ctrl/Cmd + Alt + Z: Undo (batalkan).
  • Ctrl/Cmd + Alt + Y: Redo (ulangi).
  • Pelajari lebih banyak shortcut dari menu “Tools” (ikon tiga titik di pojok kanan atas) > “Keyboard shortcuts”.
• Mode Fullscreen: Jika Anda merasa dashboard WordPress mengganggu, Anda bisa mengaktifkan “Fullscreen mode” dari menu “Tools” (ikon tiga titik). Ini akan memberikan kanvas yang lebih bersih untuk fokus pada konten Anda.
• Preview Secara Berkala: Selalu gunakan tombol “Preview” untuk melihat bagaimana konten Anda akan ditampilkan di situs yang sebenarnya. Ini membantu menangkap masalah layout atau styling lebih awal.
• Jangan Takut Bereksperimen: Cara terbaik untuk menguasai Gutenberg adalah dengan mencoba semua jenis blok dan pengaturan yang berbeda. Anda tidak akan merusak situs Anda hanya dengan bereksperimen di editor.

Kesimpulan

Gutenberg editor mungkin memerlukan sedikit waktu adaptasi, terutama jika Anda sudah terbiasa dengan editor klasik. Namun, potensi yang ditawarkannya untuk menciptakan konten yang menarik secara visual dan terstruktur dengan baik sangatlah besar. Dengan memahami konsep blok, mengenali antarmuka, dan melatih diri untuk menggunakan berbagai jenis blok serta pengaturannya, Anda akan segera mampu memaksimalkan kreativitas konten Anda di WordPress.

Selamat menjelajahi dunia Gutenberg, dan selamat berkreasi dengan konten yang lebih dinamis dan profesional!