Panduan Lengkap Antarmuka WordPress Block Editor Versi 6.9

Sejak hadirnya Gutenberg, banyak pengguna merasa tampilan baru editor WordPress jauh berbeda dibanding Classic Editor lama. User interface (UI) atau Antarmuka WordPress Block Editor dirancang berbasis blok sehingga setiap paragraf, gambar, tombol, hingga kolom adalah elemen terpisah yang bisa diatur dengan lebih fleksibel.​

Memahami antarmuka ini sangat penting agar proses menulis, mengedit, dan mempublikasikan konten menjadi lebih cepat dan rapi, terutama jika blog menjadi aset utama bisnis atau personal branding Anda. Dengan menguasai dasar tampilan editor blok WordPress, Anda dapat fokus pada isi tulisan tanpa berkali-kali bingung mencari tombol atau pengaturan.​​

Dalam panduan ini kami akan membahas:

1. Bagian-bagian utama antarmuka WordPress Block Editor.
2. Penjelasan toolbar Gutenberg.
3. Cara menggunakan block editor langkah demi langkah.
4. Pengaturan blok WordPress yang penting.
5. Contoh praktik dan kesalahan umum yang perlu dihindari.​

Panduan ini juga sudah disesuaikan dengan versi WordPress 6.9 “Gene”, rilis terbaru yang berfokus pada kolaborasi, performa, serta pengalaman editing yang lebih cepat dan konsisten di seluruh antarmuka WordPress Block Editor.

Antarmuka WordPress Block Editor

Secara garis besar, workspace WordPress Block Editor terbagi menjadi tiga area utama:

1. Toolbar di bagian atas.
2. Area konten di tengah.
3. Sidebar pengaturan di sisi kanan.
4. List View dan Outline di sisi kiri.

Di dalam area ini, setiap blok juga memiliki toolbar konteks tersendiri yang muncul saat blok tersebut dipilih.​

Pada versi WordPress 6.9, ketiga area ini terasa lebih “smooth” digunakan berkat perbaikan drag-and-drop, indikator posisi blok yang lebih jelas, serta konsistensi panel pengaturan sehingga proses menyusun layout menjadi lebih intuitif bahkan bagi pemula.

Elemen-elemen Utama

Top toolbar Gutenberg (toolbar utama) di bagian paling atas layar berisi tombol mode editor/select, undo/redo, inserter blok (+), tampilan struktur konten, toggle sidebar pengaturan, serta tombol Preview dan Publish/Update.​

Pada antarmuka WordPress 6.9 menambahkan dan memperluas Command Palette yang bisa dipanggil dengan shortcut keyboard (Ctrl/Cmd + K), sehingga Anda dapat mencari postingan, membuat konten baru, berpindah ke Site Editor, atau membuka halaman pengaturan tanpa meninggalkan antarmuka editor yang sedang aktif.

Content area di tengah layar adalah area tempat Anda menulis judul, menambahkan paragraf, gambar, daftar, dan blok lain yang membentuk isi posting atau halaman.​​

Sidebar pengaturan (Settings sidebar) di sisi kanan berisi dua tab: tab Post/Page untuk pengaturan dokumen (status, visibility, kategori, tag, featured image, dsb.) dan tab Block untuk pengaturan khusus blok yang sedang dipilih.​​

Di sisi kiri Anda akan melihat daftar blok yang digunakan di bawah List View dan juga detail konten pada Outline.

Mulai versi WordPress 6.9, beberapa blok mendapatkan kontrol tambahan di sidebar seperti pengaturan visibilitas blok (misalnya menyembunyikan blok dari front-end) dan opsi tipografi baru termasuk Fit Text yang membuat teks menyesuaikan lebar kontainer secara otomatis, sangat berguna untuk heading dan elemen hero.

Toolbar Gutenberg

Toolbar Gutenberg di bagian atas menyediakan kontrol tingkat dokumen yang selalu tersedia ketika Anda mengedit konten.

Di sini Anda bisa beralih mode (Edit/Select), membatalkan (cancel) maupun mengulang perubahan (undo/redo), membuka Block Inserter untuk menambah blok baru, mengakses List View untuk melihat struktur blok, serta mengatur tampilan antara fullscreen, top toolbar, dan mode fokus.​

Mulai pada versi Gene, Command Palette menjadi “pusat perintah” tambahan yang terintegrasi dengan toolbar sehingga Anda tidak perlu mencari menu satu per satu; cukup ketik perintah atau nama halaman yang ingin dibuka, dan WordPress akan menampilkan opsi yang relevan secara instan.

Setiap blok yang dipilih juga menampilkan block toolbar tepat di atas blok tersebut (atau di bagian atas layar jika Anda mengaktifkan opsi “Top Toolbar”). Toolbar blok biasanya berisi ikon jenis blok, pengaturan alignment, opsi format (bold, italic, link), pengaturan cepat lain, dan menu opsi tambahan (titik tiga) untuk mengubah ke reusable block, menduplikasi, mengunci, hingga menghapus blok.​​

Di versi WordPress 6.9, kombinasi antara block toolbar, List View, dan Command Palette memungkinkan Anda memindahkan, mencari, dan mengelola blok tertentu dengan lebih cepat tanpa banyak scroll, yang sangat membantu ketika mengerjakan artikel panjang atau landing page yang kompleks.

Sidebar & Pengaturan Blok WordPress

Di tab Post/Page, Anda dapat mengatur status dan visibilitas konten (publish, draft, scheduled, public, private), memilih kategori dan tag, mengatur featured image, serta menentukan excerpt jika tema mendukung. Bagian ini adalah pusat pengaturan meta konten yang berpengaruh pada cara posting ditampilkan di situs dan arsip.​​

Di tab Block, pengaturan akan berubah sesuai jenis blok yang Anda pilih, misalnya untuk blok paragraf tersedia opsi tipografi, tinggi baris, dan warna teks/latarnya, sedangkan untuk gambar ada pengaturan ukuran, rasio, border, dan alt text. Inilah inti dari pengaturan blok WordPress yang memungkinkan Anda mengontrol tampilan tiap elemen tanpa menyentuh kode.​​

Versi 6.9 menambahkan beberapa opsi pada area ini dengan opsi seperti menyembunyikan blok dari pengunjung (hide on front-end) tanpa menghapusnya dari editor, serta pengaturan tipografi dan layout yang lebih detail. Dengan begitu, Anda bisa melakukan eksperimen desain, A/B section tertentu, atau menyimpan catatan internal tanpa mengacaukan tampilan live.

Manfaat Memahami UI Block Editor

Memahami antarmuka WordPress Block Editor membuat proses menulis dan mengatur layout jauh lebih efisien karena Anda tahu persis di mana harus mengatur dokumen, di mana mengatur blok, dan bagaimana memanfaatkan toolbar untuk aksi cepat.

Selain itu, pendekatan berbasis blok memudahkan Anda membangun layout kompleks seperti kolom, hero section sederhana, atau call-to-action tanpa perlu page builder tambahan di banyak kasus. Dengan memanfaatkan block patterns dan block inserter, Anda bisa menyusun susunan konten yang konsisten dan mudah dikustomisasi secara visual.​

Dari sisi kualitas konten, fitur seperti List View dan document overview (Outline) membantu memeriksa struktur heading dan jumlah kata sehingga artikel lebih terstruktur dan nyaman dibaca, yang pada akhirnya mendukung performa SEO on-page.​

WordPress 6.9 juga membawa peningkatan performa front-end seperti cara memuat CSS dan skrip blok yang lebih efisien, optimasi cron, dan perbaikan caching sehingga halaman menjadi lebih cepat dimuat dan lebih stabil untuk metrik Core Web Vitals seperti LCP dan CLS.

Ketika dikombinasikan dengan struktur konten yang rapi dan penggunaan blok yang tepat, manfaat ini akan terasa langsung pada pengalaman pengunjung maupun potensi ranking organik.

Untuk mendapatkan hasil yang maksimal, kami menggunakan FlyingPress dalam mengelola page caching. Plugin ini sangat membantu dalam memenuhi metrik Core Web Vitals.

Cara Menggunakan Block Editor

Bagian ini membahas cara menggunakan block editor secara praktis mulai dari membuat postingan baru hingga mempublikasikannya. Langkah-langkah ini relevan baik untuk posting (Posts) maupun halaman statis (Pages).​​

Di WordPress 6.9, langkah-langkah dasar ini bisa Anda kombinasikan dengan fitur tambahan seperti Notes, blok Time to Read, dan blok Accordion untuk membuat artikel lebih informatif, mudah dipindai, dan nyaman dibaca di berbagai perangkat.

Langkah Dasar Membuat Konten

1. Buka Editor dan Isi Judul

• Masuk ke Posts
• Add New atau Pages
• Add New untuk membuka WordPress Block Editor
• Di bagian paling atas, klik area “Add title” dan tulis judul konten Anda.​​

Saat menulis judul, sebaiknya sudah mempertimbangkan kata kunci utama dan struktur heading yang akan digunakan (H2, H3, dan seterusnya) agar alur artikel jelas sejak awal dan mudah dipahami oleh pembaca maupun mesin pencari.

2. Mulai Menulis di Area Konten

Setelah judul, klik di bawahnya lalu ketik paragraf pertama. Setiap kali Anda mengklik Enter, editor akan membuat blok paragraf baru secara otomatis. Ini adalah cara paling cepat memulai menulis tanpa harus menambah blok secara manual.​​

Untuk fokus menulis tanpa gangguan, aktifkan mode Fullscreen atau Distraction-free dari menu tampilan di toolbar sehingga elemen antarmuka lain diminimalkan dan Anda bisa berkonsentrasi pada isi teks.

3. Tambahkan Blok Lain (Image, Heading, List, Quote, dan Lainnya)

Untuk memasukkan elemen lain, klik tombol + di toolbar atas atau ikon + yang muncul di dalam area konten lalu pilih jenis blok yang dibutuhkan, seperti Paragraph, Heading, Image, List, Quote, atau Gallery. Panel Block Inserter menampilkan daftar lengkap blok dan pola (patterns) yang bisa Anda pilih.​

Sekarang, Anda juga dapat menambahkan blok “Time to Read” untuk menunjukkan estimasi waktu baca artikel, serta blok “Accordion” untuk menyusun FAQ atau ringkasan poin penting yang bisa dibuka-tutup. Kedua blok ini membantu meningkatkan keterlibatan pembaca dan membuat struktur artikel panjang tetap terasa ringan.

4. Atur Tampilan Setiap Blok Lewat Block Toolbar dan Sidebar

Saat sebuah blok disorot, gunakan block toolbar untuk mengatur alignment, menambahkan link, mengubah jenis blok, atau mengakses opsi lanjutan seperti menjadikannya reusable block. Untuk pengaturan yang lebih detail (tipografi, warna, jarak, border, dsb.), gunakan tab Block di sidebar kanan.​

Manfaatkan opsi tipografi seperti font size, line height, letter spacing, dan Fit Text (jika tersedia) untuk memastikan heading dan teks tetap terbaca nyaman di layar kecil maupun besar tanpa perlu menulis CSS manual. Pengaturan jarak (padding/margin) dan warna yang tepat juga akan membuat setiap section terlihat jelas dan mudah dipindai pembaca.

5. Susun Ulang Blok dengan Drag-and-Drop atau Tombol Panah

Anda dapat memindahkan blok ke atas atau ke bawah dengan tombol panah di block toolbar atau dengan drag-and-drop langsung di content area. Untuk halaman yang cukup panjang, gunakan List View di toolbar atas agar lebih mudah memilih dan memindahkan blok tertentu di dalam struktur konten.​

Perbaikan visual drag-and-drop pada antarmuka WordPress 6.9 membuat garis dan area target perpindahan blok lebih jelas, sehingga Anda bisa melihat secara akurat di mana sebuah blok akan ditempatkan sebelum melepas klik.

6. Atur Pengaturan Dokumen (Featured Image, Category, Tags, dan Lainnya)

Buka tab Post/Page di sidebar untuk memilih kategori, menambahkan tag, mengatur featured image, serta mengatur visibilitas dan jadwal publikasi. Pengaturan ini akan memengaruhi bagaimana artikel muncul di halaman arsip, homepage blog, dan daftar posting lain.​​

Untuk mendukung SEO, pastikan slug URL singkat dan mengandung kata kunci utama, pilih kategori dan tag yang relevan, dan isi featured image dengan alt text deskriptif yang sesuai konteks isi artikel.

7. Preview dan Publish

Gunakan tombol Preview untuk melihat tampilan konten di front-end dalam tab baru sebelum dipublikasikan. Jika sudah siap, klik Publish (atau Update untuk konten yang sudah terbit) dan ikuti konfirmasi yang muncul.​

Sebelum mempublikasikannya, biasakan memeriksa kembali struktur heading di List View, memastikan tidak ada blok penting yang tersembunyi (hide), serta mengecek link internal maupun eksternal agar tidak ada yang rusak.

Tips Tampilan Editor Blok WordPress Versi 6.9

Aktifkan opsi Top Toolbar di menu tiga titik di kanan atas jika Anda ingin semua block toolbar muncul di bagian atas layar, bukan di atas masing-masing blok, agar tampilan lebih bersih.​

Gunakan mode Fullscreen atau Distraction-free untuk mengurangi gangguan visual saat menulis artikel panjang.​

Di WordPress versi 6.9, biasakan juga memanfaatkan Command Palette (Ctrl/Cmd + K) untuk berpindah antar menu admin, membuka posting, atau menjalankan perintah tanpa harus mencari tombol atau opsi manual, sehingga alur kerja penulisan dan pengeditan menjadi lebih efisien.

Contoh dan Kesalahan Umum

Memahami beberapa skenario yang sering ditemui dalam praktik akan membantu Anda menerapkan UI Block Editor dengan lebih mudah dalam pekerjaan sehari-hari.​​

Contoh Skenario

1. Membuat artikel blog standar: gunakan kombinasi blok Heading, Paragraph, List, dan Image, lalu manfaatkan List View untuk memastikan struktur heading rapi dari H2 ke H3 tanpa melompat.​​
2. Membuat halaman layanan sederhana: gunakan blok Group atau Columns untuk membagi konten menjadi beberapa kolom, tambahkan blok Heading dan Paragraph di setiap kolom, lalu optimalkan tampilan lewat pengaturan blok di sidebar.​
3. Menambahkan informasi waktu baca dan FAQ: di WordPress versi 6.9 Anda dapat menempatkan blok Time to Read di dekat judul untuk memberi estimasi waktu baca, lalu memakai blok Accordion untuk menyajikan FAQ atau rangkuman poin penting secara ringkas dan mudah di-scan.
4. Kolaborasi penyuntingan dengan Notes: ketika bekerja dalam tim, gunakan fitur Notes untuk memberi komentar langsung di blok tertentu seperti paragraf pembuka, gambar utama, atau section CTA, sehingga proses review dan revisi bisa dilakukan tanpa keluar dari editor.

Kesalahan Umum yang Perlu Dihindari

1. Mengabaikan tab Block: Anda akan sangat rugi jika mengabaikan opsi ini karena dan hanya memakai pengaturan default, padahal banyak masalah tampilan (jarak terlalu sempit, warna kurang kontras) bisa diperbaiki dari pengaturan blok WordPress tersebut.
2. Menumpuk terlalu banyak blok tanpa memperhatikan struktur heading: ini merupakan penyebab umum yang membuat konten sulit dibaca dan kurang SEO friendly. Sebaiknya, Anda harus menggunakan heading level yang konsisten dan cek kembali lewat List View atau document overview.​
3. Mengandalkan plugin page builder: untuk layout sederhana Anda sebenarnya sudah bisa membuatnya dengan block editor, sehingga antarmuka menjadi penuh elemen dan lebih sulit dipelajari.​
4. Tidak memanfaatkan fitur visibilitas blok (hide di front-end) dan Notes di WordPress 6.9 saat melakukan review, sehingga catatan internal bercampur dengan konten publik dan menyulitkan proses staging konten.

Inti Pemikiran Antarmuka WordPress Versi 6.9

Memahami UI Block Editor bukan hanya soal mengetahui letak tombol, tetapi juga bagaimana memanfaatkan setiap bagian. Ini mencakup toolbar, sidebar, dan pengaturan blok, untuk menghasilkan konten yang rapi, konsisten, dan mudah dibaca.

Dengan menguasai cara menggunakan block editor, Anda dapat menghemat banyak waktu saat membuat dan mengedit postingan maupun halaman penting di website Anda.​​

Seiring berjalannya waktu, Anda akan semakin mahir memanfaatkan fitur-fitur seperti List View, block patterns, dan pengaturan tampilan blok untuk membangun layout yang profesional tanpa bantuan page builder tambahan. Hal ini membantu meningkatkan kualitas pengalaman pengunjung sekaligus mendukung performa SEO on-page website Anda.​

Di versi WordPress 6.9 “Gene”, menguasai UI Block Editor berarti memanfaatkan juga fitur kolaborasi Notes, Command Palette untuk navigasi cepat, serta blok-blok seperti Time to Read dan Accordion yang meningkatkan engagement pembaca.

Jika Anda merasa mulai nyaman dengan antarmuka WordPress Block Editor, langkah selanjutnya adalah memperdalam cara mengoptimasi konten dari sisi SEO, performa, keamanan, dan desain.

Silakan bagikan artikel ini kepada rekan atau klien Anda yang baru pertama kali beralih ke editor blok agar proses belajar mereka menjadi lebih cepat.