Tanyakan ke pengguna WordPress yang mulai belajar sebelum 2019 — banyak yang akan bilang hal yang sama: waktu Gutenberg pertama kali hadir, reaksi pertamanya adalah install ulang Classic Editor. Wajar. Tampilannya asing, alurnya berbeda, dan semuanya terasa seperti belajar dari nol lagi.
Tapi setelah beberapa tahun, ceritanya berubah. Gutenberg Block Editor kini bukan sekadar editor baru — ia adalah cara WordPress bekerja sekarang dan ke depannya. Dan yang lebih penting: sebagian besar penggunanya masih hanya memanfaatkan 20% dari kemampuannya. Jika Anda membaca tutorial kami cara membuat custom WordPress Theme dari awal maka apa yang kami tuliskan disitu merupakan membuat tema WordPress berjenis classic theme beda dengan yang sedang kita bahas disini.
Mereka tahu cara mengetik, menambah gambar, lalu klik publish. Tapi fitur yang bisa menghemat berjam-jam kerja? Belum disentuh. Artikel ini akan membahas bagian itu.
Apa yang Sebenarnya Dimaksud dengan Gutenberg Block Editor
Gutenberg Block Editor adalah editor konten bawaan WordPress yang bekerja dengan sistem berbasis blok (block-based editing). Setiap elemen konten — judul, paragraf, gambar, tombol, video, kolom — adalah sebuah blok tersendiri yang bisa dipindah, diatur, dikustomisasi, dan disimpan secara independen.
Nama “Gutenberg” bukan kebetulan. Ia diambil dari Johannes Gutenberg, penemu mesin cetak bergerak abad ke-15 yang mengubah cara manusia menyebarkan informasi. Filosofinya sama: membuat semua orang bisa menciptakan konten yang profesional, tanpa harus punya keahlian teknis khusus.
Berbeda dengan Classic Editor yang bekerja seperti dokumen Word biasa — Anda mengetik, lalu format teks — Gutenberg bekerja seperti menyusun komponen. Setiap blok punya pengaturannya sendiri: tipografi, warna, ukuran, padding, margin, bahkan animasi, semua bisa dikontrol langsung tanpa menyentuh CSS atau kode apapun.
Jujur kami sangat jarang bahkan nyaris tidak menggunakan Gutenberg editor karena beberapa hal. Satu diantaranya karena membuat post classic juga jadi akan lebih mudah bagi klien menggunannya dibanding menggunakan Gutenberg.
Mengapa WordPress Meninggalkan Editor Lama
Classic Editor bukan produk yang buruk. Untuk blogging sederhana, ia masih sangat fungsional. Tapi ada satu batasan besar yang tidak bisa diatasi: ia tidak dirancang untuk membangun layout yang kompleks.
Dulu, untuk membuat halaman dengan dua kolom atau section berlatarbelakang warna berbeda, pengguna harus mengandalkan plugin WordPress seperti Elementor atau Divi. Plugin-plugin itu powerful, tapi sering memperlambat website secara signifikan karena memuat banyak CSS dan JavaScript yang tidak semuanya terpakai.
Gutenberg hadir sebagai solusi native: kemampuan page builder langsung di dalam inti WordPress, tanpa plugin tambahan. WordPress juga tidak bisa mengabaikan tekanan dari platform lain — Squarespace dan Wix sudah duluan menawarkan pengalaman visual yang intuitif. Dengan pangsa pasar lebih dari 43% dari seluruh website di internet, WordPress perlu berevolusi.
Nah, hasilnya tidak berhenti di situ. Gutenberg bukan hanya pengganti editor — ia menjadi fondasi dari Full Site Editing, di mana header, footer, sidebar, dan seluruh tata letak situs bisa diedit menggunakan antarmuka blok yang sama persis.
Mengenal Interface Gutenberg: Lebih Sederhana dari yang Anda Kira
Kebingungan awal pengguna baru biasanya bukan karena Gutenberg sulit — tapi karena berbeda. Begitu Anda tahu fungsi masing-masing bagian, semuanya mulai masuk akal dalam hitungan jam.
Area Konten Utama
Di bagian tengah ada kanvas kosong — tempat Anda menyusun blok. Klik di mana saja untuk mulai. Tekan tombol + (tersedia di toolbar atas, di sisi kiri layar, atau di antara dua blok yang sudah ada) untuk membuka Block Inserter — panel yang menampilkan semua blok tersedia, termasuk blok kustom dari plugin yang terinstall.
Panel Pengaturan di Sebelah Kanan
Panel kanan punya dua tab penting. Document — untuk pengaturan post atau halaman secara keseluruhan: status publikasi, visibilitas, jadwal, kategori, tag, featured image. Dan Block — untuk pengaturan blok yang sedang dipilih: tipografi, warna, spacing, border, dan opsi lanjutan lainnya.
Yang sering terlewat: di paling bawah panel Block ada bagian Advanced. Di sana Anda bisa menambahkan CSS class kustom dan mengatur HTML anchor untuk keperluan navigasi dalam satu halaman.
Toolbar Blok
Klik sebuah blok, dan toolbar kecil akan muncul tepat di atasnya. Berisi opsi cepat: mengubah tipe blok, menggeser posisi, mengatur alignment, dan menu tiga titik untuk opsi lanjutan — duplikat, hapus, tambah ke Reusable Block, dan lainnya. Semua aksi yang paling sering dibutuhkan ada di sini, tanpa perlu membuka panel kanan.
Jenis Block yang Paling Sering Digunakan
WordPress mengelompokkan blok ke dalam beberapa kategori. Untuk pembuatan konten profesional, ini yang paling sering Anda butuhkan:
- Text blocks: Paragraph, Heading (H1–H6), List, Quote, Code, Preformatted
- Media blocks: Image, Gallery, Video, Audio, File, Media & Text (teks bersebelahan dengan media)
- Design blocks: Columns, Group, Cover, Separator, Spacer, Buttons
- Widget blocks: Shortcode, Custom HTML, Archives, Categories, Latest Posts
- Embed blocks: YouTube, Twitter/X, Instagram, TikTok, Spotify, dan lebih dari 30 platform lainnya
Yang sering diremehkan oleh pemula: blok Columns dan Group. Keduanya adalah kunci membangun layout rapi tanpa page builder tambahan. Columns membagi konten secara horizontal, sementara Group membungkus beberapa blok dalam satu container yang bisa diberi latar belakang, padding, atau border.
Kombinasi Group + Columns + Cover sudah cukup untuk membangun halaman landing yang terlihat profesional. Sepenuhnya.
Cara Menggunakan Gutenberg Secara Optimal
Tahu blok apa yang ada itu satu hal. Yang membedakan pengguna biasa dengan yang mahir adalah efisiensi kerja. Ini strategi yang menurut pengalaman kami paling berdampak:
Manfaatkan Block Patterns untuk Layout Cepat
Block Patterns adalah template layout siap pakai yang terdiri dari beberapa blok yang sudah disusun. Bayangkan Anda ingin membuat section “Fitur Produk” dengan tiga kolom, ikon, dan teks deskripsi. Alih-alih membangun dari nol, pilih pattern yang sudah ada, ganti kontennya, selesai.
Untuk mengakses: klik tombol + di toolbar atas, lalu pilih tab “Patterns”. Anda juga bisa menemukan ratusan pattern gratis di WordPress Pattern Library yang terus bertambah setiap minggu.
Simpan Blok Favorit sebagai Reusable Block
Ini fitur yang menghemat waktu paling banyak. Kalau Anda punya blok yang dipakai berulang kali — section call-to-action, blok kontak, atau promo banner — simpan sebagai Reusable Block.
Caranya mudah: klik kanan pada blok atau group of blocks, pilih “Create Reusable Block”, beri nama. Setelah itu blok ini bisa dipanggil di halaman manapun hanya dengan mengetik namanya di Block Inserter.
Yang lebih powerful: jika Anda mengedit Reusable Block di satu halaman, perubahan otomatis berlaku di semua halaman yang menggunakannya. Persis seperti komponen dalam framework JavaScript modern. Wah — fitur ini saja sudah bisa menggantikan banyak pekerjaan manual.
Gunakan Group Block untuk Kontrol Layout yang Presisi
Bungkus beberapa blok dalam Group Block, lalu atur padding dan background-nya. Ini cara paling bersih membuat section dengan latar belakang berbeda tanpa menyentuh CSS. Di dalam Group Block, Anda bisa menempatkan Columns Block untuk layout dua atau tiga kolom, lalu di dalam masing-masing kolom, susun blok konten sesuai kebutuhan.
Hasilnya: halaman dengan struktur visual yang kompleks, dibangun sepenuhnya dari antarmuka Gutenberg. Tanpa shortcode. Tanpa CSS kustom. Tanpa plugin page builder.
Kuasai Keyboard Shortcuts
Ini yang jarang disebut, tapi dampaknya besar bagi siapapun yang bekerja dengan konten dalam jumlah banyak:
/(garis miring) — langsung masuk ke pencarian blok tanpa harus klik tombol +Ctrl + Shift + Alt + M— toggle antara mode Visual Editor dan Code EditorCtrl + Z— undo hingga 100 langkah ke belakangAlt + Shift + Z— buka panel Keyboard Shortcuts lengkap (Windows)
Investasikan 30 menit untuk menghafal shortcut ini. Setelah seminggu, Anda tidak akan bisa kembali ke workflow lama.
Gutenberg dan Performa Website: Yang Perlu Anda Waspadai
Satu miskonsepsi yang perlu diluruskan: Gutenberg sendiri tidak memperlambat website. Yang jadi masalah adalah blok dari plugin pihak ketiga yang memuat CSS dan JavaScript berlebihan — bahkan di halaman yang tidak menggunakan blok tersebut.
Solusinya: gunakan plugin manajemen aset atau aktifkan fitur pemblokiran CSS per halaman di plugin caching yang Anda pakai. Prinsipnya sama dengan code splitting di front-end development — muat hanya yang betul-betul dibutuhkan.
Perhatikan juga blok Cover dan Media & Text yang menampilkan gambar berukuran besar. Gambar yang tidak dioptimasi tetap jadi penyebab utama penurunan kecepatan, tidak peduli seberapa ringan editor Anda. Gunakan format WebP dan pastikan ukuran file sudah dikompres sebelum diupload. Ini bagian dari rutinitas merawat situs WordPress yang sering terlupakan.
Keamanan Saat Menggunakan Plugin Block Tambahan
Ekosistem blok WordPress tumbuh cepat. Setiap minggu ada plugin baru menawarkan blok-blok menarik: slider interaktif, pricing table, form, timeline. Tapi di balik kemudahan itu ada risiko yang sering diabaikan.
Plugin blok yang tidak dirawat baik oleh developernya bisa jadi celah keamanan. Blok yang merender HTML kustom dari input pengguna, misalnya, rentan terhadap serangan Cross-Site Scripting (XSS) jika tidak divalidasi dengan benar. Dan kalau plugin tersebut tidak diperbarui selama setahun lebih? Risikonya berlipat ganda.
Kami selalu merekomendasikan hal yang sama: pilih plugin keamanan WordPress yang aktif diperbarui dan punya track record jelas. Cek tanggal pembaruan terakhir sebelum install plugin apapun. Lebih sedikit plugin yang terinstall, lebih kecil permukaan serangan yang harus dijaga.
Satu lagi: pilih tema WordPress yang secara eksplisit mendukung Gutenberg dan Full Site Editing. Tema yang tidak dioptimasi untuk block editor sering kali memunculkan konflik visual yang merepotkan — terutama saat menggunakan blok layout seperti Cover atau Columns.
Untuk Website Bisnis: Gutenberg Sudah Lebih dari Cukup
Gutenberg bukan hanya untuk blog. Ia sudah lama melampaui kebutuhan blogging sederhana.
Untuk website company profile, Gutenberg memungkinkan pembuatan halaman “Tentang Kami”, “Layanan”, atau “Tim” yang terstruktur rapi menggunakan block patterns dan reusable blocks. Konten mudah diedit oleh tim internal yang tidak punya latar belakang teknis — tanpa risiko merusak desain yang sudah jadi.
Tapi kenyataannya, manfaat ini baru benar-benar terasa kalau website dibangun dengan struktur yang benar dari awal. Tema yang kompatibel, konfigurasi blok yang rapi, dan hierarki konten yang sudah dipikirkan matang. Itulah yang membedakan website yang “ada” dengan website yang benar-benar bisa dikelola jangka panjang.
Jika Anda sedang merencanakan pembuatan website perusahaan, kami di Codefid bisa membantu dari awal — termasuk memastikan setup Gutenberg-nya tepat agar tim Anda bisa bekerja mandiri setelah website selesai. Untuk kebutuhan website bisnis profesional, Jasa Pembuatan Website kami mencakup perencanaan konten, desain, pengembangan, hingga konfigurasi editor yang sesuai dengan kebutuhan tim Anda.
Dan jika proyek Anda spesifik membutuhkan website company profile yang representatif, Jasa Pembuatan Web Company Profile kami sudah menangani banyak proyek dari berbagai industri — dengan pendekatan yang memprioritaskan kemudahan pengelolaan konten jangka panjang, bukan hanya tampilan awal yang mengesankan.
Mulai dari Mana?
Gutenberg tidak perlu dipelajari semua dalam satu hari. Kurva belajarnya ada, tapi tidak securam yang banyak orang ceritakan.
Langkah paling efektif: mulai dari proyek nyata, bukan tutorial abstrak. Buat satu halaman — halaman “Tentang” atau “Layanan” — menggunakan blok standar. Rasakan bagaimana Columns, Group, dan Cover bekerja bersama. Setelah itu, eksplorasi Block Patterns dan Reusable Blocks.
Gutenberg terus berkembang. Setiap update WordPress membawa fitur baru di editor — kadang fitur yang belum banyak dibahas di tutorial lama. Kalau Anda membutuhkan website WordPress yang dibangun dengan benar dari awal, dengan struktur yang bisa Anda kelola sendiri tanpa bergantung terus pada developer, pertimbangkan bekerja sama dengan Jasa Pembuatan Web WordPress yang sudah terbiasa menyerahkan website dalam kondisi siap pakai — bukan sekadar siap launch.
Tuh, sebetulnya itu saja yang perlu Anda pahami. Sisanya tinggal praktik.
