Ridandi Bintang Pamungkas Bintang is an avid learner with years of experience in Marketing and Business Management subjects. Aside from writing, Bintang loves reading books and collecting movies.

Cara Menggunakan Editor Gutenberg [Terlengkap!]

8 min read

Panduan Menggunakan Editor Guttenberg Terbaru-01

Sejak versi 5.0, WordPress menjadikan Gutenberg sebagai default editor. Sehingga, semua pengguna WordPress tentu perlu tahu cara menggunakan editor Gutenberg. 

Gutenberg sendiri menawarkan fitur yang lebih modern dari editor sebelumnya (classic editor). Contohnya seperti fitur block yang memudahkan pengguna untuk memasukkan berbagai jenis konten ke dalam artikel.

Ingin tahu lebih dalam tentang cara menggunakan editor Gutenberg? Tak usah khawatir, di artikel ini Anda akan mempelajari berbagai fiturnya serta cara memanfaatkannya. Mari kita mulai!

Apa itu Editor Gutenberg?

logo plugin gutenberg

Gutenberg adalah editor WordPress dengan konsep Block Based User Interface (UI). Jadi pembuatan konten di editor ini menggunakan sistem blok

Editor ini dirilis pada bulan Desember 2018, bertepatan dengan peluncuran WordPress versi terbaru. Jika Anda menggunakan WordPress dari sebelum tahun 2018, tentu Anda perlu beradaptasi dengan fitur-fitur editor yang baru ini.

Sebelum membahas lebih dalam mengenai Gutenberg, mari lihat terlebih dahulu perbandingan tampilan Classic Editor dengan Gutenberg Block Editor. 

Berikut adalah tampilan Classic Editor:

wordpress classic editor

Setelah melakukan update ke versi terbaru WordPress, editornya akan berubah menjadi Gutenberg.

tampilan interface gutenberg

Kita bisa lihat bahwa ada perbedaan yang cukup signifikan antara kedua editor ini.

Tampilan classic editor terlihat seperti Microsoft Word atau LibreOffice. Namun, editor Gutenberg menggunakan pendekatan berbeda yang mengandalkan elemen “block”.

Melalui blok, Anda bisa memasukkan berbagai jenis konten. Mulai dari gambar dan paragraf, hingga kode HTML. Anda juga dapat mengatur posisi setiap blok dengan cara menggesernya (drag & drop). 

Lalu, apakah Anda sudah tidak bisa menggunakan classic editor lagi?

Tenang, Anda masih bisa menggunakan classic editor kok. Anda hanya perlu menonaktifkan Gutenberg.

Tapi tunggu dulu. Sebelum mempelajari cara menggunakan editor Gutenberg, Anda perlu berkenalan dulu dengan berbagai fitur menarik editor Gutenberg yang akan kita bahas di artikel ini.

Tampilan Dasar Editor Gutenberg

Pertama-tama, tentu Anda harus berkenalan dengan tampilannya terlebih dahulu. Jadi, tampilan Gutenberg terdiri dari tiga bagian utama:

tampilan editor gutenberg
  1. Kolom konten – Di sinilah tempat Anda membuat konten. Mulai dari judul, tulisan, gambar, hingga video Anda akan dimasukkan di sini.
  2. Sidebar – Di kotak ini Anda bisa melakukan penyesuaian terhadap konten Anda secara keseluruhan, atau melakukan penyesuaian pada masing-masing blok.
  3. Toolbar – Bagian ini berisi beberapa opsi, seperti tombol undo dan redo, navigasi blok, dan tombol publish.

Agar lebih jelas, yuk lihat bagiannya satu per satu!

Kolom Konten

kolom konten gutenberg

Sesuai dengan namanya, kolom ini berfungsi untuk menampung konten yang Anda buat. Pada bagian paling atas, ada kotak bertuliskan Add title yang bisa Anda isi dengan judul kontennya.

Lalu, tepat di bagian bawahnya, ada tulisan Start writing or type/to choose a block. Di sini Anda dapat langsung mengisi blok kontennya dengan apapun. Baik itu tulisan, gambar, atau video.

Saat membuat konten, sebagian besar waktu Anda akan dihabiskan di sini. Tapi bukan berarti sidebar dan toolbar tidak penting. Karena, masing-masing bagian punya fitur yang pasti Anda butuhkan. Nah, selanjutnya kita akan bahas tentang sidebar dan toolbar.

Sidebar

sidebar gutenberg

Seperti yang Anda lihat, ada dua tab yang bisa Anda pilih di sidebar, yaitu Document dan Block.

Pada tab document, Anda bisa mengatur berbagai informasi terkait konten Anda secara keseluruhan. Contohnya, pada opsi Permalink, Anda bisa mengubah URL konten Anda. Pada opsi Categories dan Tag, Anda juga bisa mengubah kategori dan tag kontennya.

Opsi lain di tab document yang perlu Anda perhatikan adalah:

  • Featured Image – Di sini Anda bisa mengunggah gambar untuk dijadikan “cover” konten Anda.
  • Excerpt – Pada bagian ini, Anda dapat menuliskan rangkuman singkat konten Anda yang nantinya bisa muncul di home page website Anda.
  • Discussion – Di sini Anda bisa mengaktifkan atau menonaktifkan kolom komentar di konten Anda.
  • Post Settings – Pada bagian ini, Anda bisa melakukan beberapa hal, seperti menentukan lokasi sidebar, hingga menonaktifkan header dan footer.

Isi dari tab document akan selalu sama, tidak seperti tab block. Karena, isi tab block akan berubah mengikuti blok yang Anda pilih. Contohnya, berikut adalah isi tab block jika Anda sedang mengklik blok paragraph:

tab block paragraph

Sedangkan ini adalah isi tab block jika Anda sedang mengklik blok image:

tab block image

Bisa dilihat, opsi pengaturan yang muncul berbeda. Hal ini berlaku juga jika Anda mengklik jenis block yang lain.

Toolbar

toolbar gutenberg

Pada bagian toolbar, opsi-opsi yang ditampilkan cukup sederhana. Berikut penjelasannya:

  • Add block – Dengan mengklik tombol ini, Anda bisa menambah blok pada kolom konten.
  • Undo –  Tombol ini berfungsi untuk mengembalikan tulisan atau konten yang terhapus.
  • Redo –  Kebalikan dari Undo. Tombol ini berfungsi untuk mengembalikan versi terbaru konten Anda.
  • Content structure – Tombol ini akan menampilkan jumlah kata, heading, paragraf, dan blok yang ada di konten Anda.
  • Block navigation –  Tombol ini akan menampilkan “daftar isi” konten Anda berdasarkan blok.
  • Edit – Pada bagian ini, Anda bisa mengubah mode kursor Anda menjadi mode edit atau mode select. Mode edit berguna untuk mengedit konten, sedangkan mode select berfungsi untuk mengatur posisi blok.
  • Save draft – Tombol ini berfungsi untuk menyimpan konten Anda dalam bentuk draft.
  • Preview – Fungsi tombol ini adalah untuk melihat pratinjau konten Anda.
  • Publish – Tombol ini berfungsi untuk mempublikasikan konten Anda.

Cara Menggunakan Editor Gutenberg 

Sebenarnya cara menggunakan editor Gutenberg cukup sederhana. Untuk mengaksesnya, Anda cukup membuat artikel atau halaman baru dengan klik Post > Add New atau Pages > Add New

Setelah tiba di halaman editor, Anda tinggal mengikuti langkah-langkah di bawah:

1. Menambah Blok Baru 

blok konten

Klik tombol “+” untuk menambah blok baru. Lalu, pilih tipe blok yang Anda inginkan. Contohnya seperti paragraph, image, html, table, code, embed, widgets, layout elements, dan lain-lain.

Cara lain untuk menambah blok adalah dengan mengetik “/nama blok”. Contohnya, misalkan Anda ingin menambah blok gambar, maka Anda bisa coba mengetik /image.

contoh block name

Untuk mempermudah pencarian jenis blok, Gutenberg membagi blok-bloknya ke dalam beberapa kategori, seperti common blocks, formatting, layout elements, widgets, embeds, dan reusable.

Anda juga bisa mencari bloknya secara manual melalui kolom Search for a block.

kategori blok gutenberg

Kesulitan mencari blok-blok yang sering Anda gunakan? Tenang, blok-blok tersebut akan masuk ke dalam kategori Most used.

Oke, sekarang Anda sudah tahu cara menambah blok. Selanjutnya, kita akan membahas tentang blok-blok yang paling umum digunakan, seperti paragraph, image, button, dan HTML

2. Membuat Tulisan

Ketika Anda ingin membuat tulisan, Anda hanya perlu membuat blok paragraph:

blok paragraph

Lalu Anda bisa langsung mengisinya dengan berbagai tulisan. Sederhana sekali, bukan?

Di bagian atas blok terdapat beberapa tombol formatting. Contohnya seperti alignment (mengatur posisi teks), bold (memberi cetak tebal pada teks), italic (membuat teks menjadi miring), dan link (memasukkan link pada teks).

Tepat di sebelah tombol link, ada tombol drop down yang menampilkan beberapa tombol tambahan:

drop down blok paragraph

Tombol-tombol tersebut juga berfungsi untuk formatting, seperti highlight (menyorot kata atau kalimat tertentu), strikethrough (mencoret teks), dan underline (menggaris bawahi teks).

Lalu, bagaimana jika Anda ingin menulis heading?

Nah, jenis blok yang digunakan berbeda. Jadi, Anda tidak menggunakan blok paragraph, tapi blok heading.

blok heading

Sama seperti blok paragraph, Anda bisa menemukan blok heading di kategori Common Blocks. Tombol-tombol yang ditampilkan pun kurang lebih sama seperti blok paragraph.

Bedanya, di blok heading Anda bisa memilih tingkatan heading yang Anda buat. Mulai dari heading 2 hingga heading 4. 

Untuk mengatur tingkatan heading 1 hingga heading 6, Anda bisa masuk ke tab block sidebar.

sidebar blok heading gutenberg

3. Memasukkan Gambar

Blok lain yang bisa Anda pilih di kategori Common Blocks adalah Image, alias blok gambar. 

blok image gutenberg

Saat memilih blok image, Anda akan dihadapkan pada tiga pilihan, yaitu

  • Upload – Gambar yang diambil berasal dari komputer Anda.
  • Media Library – Anda mengambil gambar yang sebelumnya pernah Anda upload.
  • Insert from URL – Anda mengambil gambar dari internet dengan memasukkan URLnya.

Ini adalah contoh blok gambar yang sudah terisi:

contoh blok image

Di bagian atas bloknya, ada tiga tombol yang bisa Anda gunakan:

  • Alignment – Mengatur posisi gambarnya. 
  • Replace – Mengganti gambarnya dengan gambar lain (baik melalui upload, media library, atau insert from URL)
  • Link – Memasukkan link ke dalam gambarnya.

Di tab block sidebar, Anda bisa menemukan beberapa opsi tambahan, seperti:

  • Styles – Anda bisa mengatur format gambarnya menjadi kotak atau bulat.
  • Image settings – Di sini Anda bisa mengatur berbagai aspek gambarnya, mulai dari alt text dan ukuran gambar, hingga dimensi gambarnya.
sidebar blok image

4. Menambah Tombol

Ini adalah salah satu fitur yang tidak akan Anda temukan di classic editor, yaitu menambah tombol (Buttons). 

Blok buttons bisa Anda temukan di kategori Layout Elements. Berikut adalah contohnya:

blok button gutenberg

Untuk mengubah posisinya, Anda jangan mengklik tombolnya, tapi klik lah bloknya. Baru kemudian opsi untuk mengubah posisi tombolnya akan muncul:

alignment blok button

Jika Anda ingin mengatur style, warna, dan link tombolnya, Anda bisa ubah konfigurasinya di tab block sidebar.

sidebar blok button

5. Menggunakan Kode HTML

Apakah Anda sudah terbiasa mengedit konten dalam bentuk kode HTML? Tidak usah khawatir, Anda masih bisa melakukannya kok di Gutenberg.

Anda tinggal menggunakan blok Custom HTML yang ada di kategori Formatting.

blok html gutenberg

Masukkan kode HTML ke dalam kolom bertuliskan Write HTML. Lalu klik tombol Preview untuk melihat hasil akhirnya.

Contohnya, misalkan Anda memasukkan kode ini ke dalam kolomnya:

contoh raw code gutenberg

Maka hasil inilah yang akan muncul jika Anda mengklik tombol Preview:

contoh preview code

Baca Juga: Panduan Shortcode WordPress: Kustomisasi Situs Lebih Mudah

6. Melampirkan Konten dari Platform Lain

Anda juga bisa melampirkan konten dari platform lain. Contohnya seperti video dari YouTube, postingan dari Instagram, atau bahkan lagu dari Spotify.

Anda hanya perlu memilih blok yang ada di kategori Embeds

blok embeds gutenberg

Contohnya, jika Anda ingin melampirkan sebuah postingan dari Instagram, maka akan muncul blok seperti ini:

blok instagram gutenberg

Nah, sekarang Anda tinggal memasukkan URL postingannya, lalu klik Embed. Begini contoh hasilnya:

contoh blok instagram

7. Membuat Tabel

Untuk membuat tabel di Gutenberg, cukup klik blok Table yang ada di kategori Formatting.

blok tabel gutenberg

Masukkan jumlah tabel dan kolom yang Anda inginkan, lalu klik Create Table. Inilah contoh hasilnya:

contoh blok tabel

Jika Anda ingin mengatur tampilan tabelnya, ada beberapa opsi yang bisa Anda gunakan di tab block sidebar. Contohnya seperti menambah bagian header di opsi Table settings atau mengganti warna tabelnya di opsi Color settings.

8. Menyesuaikan Susunan Blok

Jika Anda ingin menyesuaikan susunan setiap blok, caranya sangat mudah. Anda cukup pilih blok yang ingin Anda ubah posisinya, lalu tombol bertitik 6 yang ada di sebelah kiri blok. Setelah itu Anda bisa menggeser bloknya kemanapun Anda mau.

Untuk memperjelas caranya, berikut ilustrasinya:

menyesuaikan susunan blok gutenberg

7+ Ekstra Tips untuk Menggunakan Editor Gutenberg

Setelah memahami dasar-dasar penggunaan Gutenberg, sekarang waktunya mempelajari fungsi Gutenberg yang lebih kompleks.

Tapi, jangan khawatir, sebetulnya cara pengaplikasian tips-tips di bawah cukup mudah kok. Yuk disimak satu per satu!

1. Memberi Kolom Tambahan

Anda mungkin ingin memasukkan dua jenis konten yang berbeda di satu baris yang sama. Contohnya, gambar di sebelah kiri dan tulisan di sebelah kanan:

contoh multi column gutenberg

Cara membuatnya gampang kok. Saat menambah blok baru, pilihlah blok Columns yang ada di kategori Layout Elements.

blok columns gutenberg

Setelah itu, Anda perlu memilih tipe kolom bloknya. Ini akan menentukan posisi dan jumlah kolom.

tipe tipe kolom

Misalkan Anda memilih opsi paling kiri, berarti bloknya akan terbagi menjadi dua kolom. Pada masing-masing kolom, Anda bisa langsung menambahkan konten dengan mengklik tombol “+”

finished blok columns

2. Melakukan Kustomisasi Blok

Saat mempelajari tampilan dasar editor Gutenberg, Anda sudah tahu bahwa Anda bisa melakukan kustomisasi blok melalui tab block sidebar.

Tapi, bagaimana cara menggunakannya?

Mari kita ambil contoh. Misalkan Anda baru membuat satu blok paragraph dengan isi seperti ini:

contoh blok paragraph

Agar blok paragraph-nya berbeda, Anda ingin membuatnya terlihat gelap. Oleh karena itu, Anda masuk ke tab block sidebar, mengklik tombol Color Settings, lalu mengubah background color nya menjadi hitam dan text color nya menjadi putih.

blok paragraph color settings

Beginilah hasilnya:

blok paragraph dark

Bloknya jadi terlihat lebih unik bukan? 

Tapi, kemudian Anda ingin membuat bloknya terlihat lebih menarik lagi. Jadi Anda memberi animasi pada bloknya dengan cara masuk ke tab block sidebar, lalu menambahkan animasi pada opsi Animation. Inilah hasil akhirnya:

contoh animasi blok paragraph

3. Mengedit Konten dalam Bentuk Kode

Apakah Anda lebih senang mengedit konten Anda dalam bentuk kode? Atau mungkin Anda ingin mengecek source code konten Anda? Tenang, Gutenberg punya opsi untuk itu. 

Anda hanya perlu klik tombol tiga titik yang ada di pojok kanan atas layar, lalu klik Code editor:

code editor gutenberg

Hasilnya, sekarang Anda akan melihat seluruh kontennya berubah menjadi kode:

hasil code editor

4. Merapikan Blok dengan Block Manager

Ada banyak sekali blok yang bisa Anda gunakan di Gutenberg. Saking banyaknya, Anda mungkin kesulitan untuk menemukan blok-blok penting yang paling sering Anda gunakan.

Nah, mungkin Anda ingin menonaktifkan blok-blok tertentu yang sangat jarang Anda gunakan. Anda bisa melakukannya dengan mengakses block manager.

Caranya mudah sekali. Anda tinggal klik tombol tiga titik yang ada di pojok kanan atas layar. Lalu, klik Block Manager:

block manager gutenberg

Anda akan melihat daftar block yang tersedia. Kemudian, hilangkan ceklis di blok yang ingin Anda nonaktifkan.

contoh ceklis block manager

5. Mengaktifkan Mode yang Berbeda

Ada tiga mode yang bisa Anda aktifkan di Gutenberg. Ketiga mode ini dapat mempengaruhi tampilan dasar Gutenberg Anda:

  • Top toolbar – Memindahkan opsi editing blok ke bagian toolbar.
  • Spotlight mode – Membuat Anda lebih fokus saat mengedit blok. Karena warna blok yang Anda pilih akan menjadi lebih terang dibanding blok di sekitarnya.
  • Fullscreen mode – Melihat kolom konten secara layar penuh.

Untuk mengaktifkan ketiga mode ini, Anda perlu klik tombol tiga titik di pojok kanan atas layar, lalu beri centang pada mode yang ingin Anda aktifkan.

aktivasi mode di gutenberg

6. Menggunakan Gutenberg Keyboard Shortcuts

Jika Anda tidak ingin direpotkan dengan tombol-tombol di tampilan editor Gutenberg, Anda bisa memanfaatkan keyboard shortcuts.

Sesuai dengan namanya, keyboard shortcut memungkinkan Anda untuk melakukan perintah hanya dengan menekan tombol di keyboard. Contoh sederhananya, Anda bisa menyimpan konten Anda dengan menekan tombol “Ctrl + S” tanpa harus menekan tombol Save.

Nah, untuk melihat daftar lengkap keyboard shortcut di Gutenberg, Anda tinggal menekan “Shift + Alt + H” pada keyboard Anda:

keyboard shortcuts gutenberg

7. Menggunakan Reusable Blocks

Reusable blocks adalah suatu fitur yang memungkinkan Anda untuk menyimpan blok yang Anda buat. Sehingga, Anda bisa menggunakannya lagi kedepannya.

Contohnya, misalkan Anda ingin menggunakan blok Anda di postingan lain. Untuk membuat blok tersebut menjadi reusable block, Anda perlu klik tombol More options pada bloknya, lalu klik Add to reusable block.

add to reusable block

Setelah itu, beri nama pada reusable block-nya dan klik Save.

Jika Anda ingin menggunakan blok itu lagi, Anda tinggal tambah blok baru. Lalu, di kategori Reusable, pilih reusable block yang baru saja Anda simpan.

contoh pakai reusable block

8. Menambah Variasi Blok

Variasi blok yang bisa Anda pilih memang banyak. Tapi, mungkin Anda ingin menambah varian bloknya lagi. Nah, Anda bisa menggunakan plugin untuk mendapat lebih banyak variasi blok.

Plugin blok yang paling populer untuk Gutenberg adalah Otter Blocks. Dengan plugin ini, Anda bisa menggunakan blok-blok baru, seperti slider block, pricing block, testimonial block, dan Google Maps block.

banner otter templates

Selain Otter Blocks, Anda juga bisa coba menggunakan plugin blok lain, seperti Advanced Gutenberg atau Stackable. Kabar baiknya, plugin-plugin ini bisa Anda gunakan secara gratis!

Baca Juga: 5+ Cara Membuat Recent Post Blog WordPress Terbaru

Yuk Buat Konten Dengan Gutenberg!

Cara menggunakan editor Gutenberg tidak sulit, bukan? Anda tinggal membiasakannya saja. Jika ingin menguasainya dengan cepat, mulailah dengan membuat konten di Gutenberg

Jangan lupa untuk mencoba berbagai fitur yang ada di dalamnya. Sehingga Anda dapat memahami fungsi fiturnya satu per satu.

Masih mempunyai pertanyaan mengenai Gutenberg? Silakan untuk menanyakannya melalui kolom komentar, atau Anda juga bisa subscribe untuk mendapatkan informasi terbaru dari kami.

3
Ridandi Bintang Pamungkas Bintang is an avid learner with years of experience in Marketing and Business Management subjects. Aside from writing, Bintang loves reading books and collecting movies.

3 Replies to “Cara Menggunakan Editor Gutenberg [Terlengkap!]”

    1. Iya bapak, wordpress editor akan terus berkembang jadi tetap terus belajar supaya dapat mengetahui perkembangannya 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

[{"code":""
[{"code":""
"label":"Coba Lagi"
"label":"Coba Lagi"
"win":false}
"win":false}
{"code":"HOSTING50"
{"code":"HOSTING50"
"label":"Extra Diskon 50rb "
"label":"Extra Diskon 50rb "
"win":true}
"win":true}
{"code":"HOSTING20"
{"code":"HOSTING20"
"label":"Extra Diskon 20rb "
"label":"Extra Diskon 20rb "
"win":true}
"win":true}
{"code":"HOSTING100"
{"code":"HOSTING100"
"label":"Extra Diskon 100rb "
"label":"Extra Diskon 100rb "
"win":true}
"win":true}
{"code":""
{"code":""
"label":"Belum Beruntung"
"label":"Belum Beruntung"
"win":false}
"win":false}
{"code":"HOSTING20"
{"code":"HOSTING20"
"label":"Extra Diskon 20rb "
"label":"Extra Diskon 20rb "
"win":true}
"win":true}
{"code":""
{"code":""
"label":"Coba Lagi"
"label":"Coba Lagi"
"win":false}
"win":false}
{"code":"HOSTING50"
{"code":"HOSTING50"
"label":"Extra Diskon 50rb "
"label":"Extra Diskon 50rb "
"win":true}
"win":true}
{"code":"HOSTING20"
{"code":"HOSTING20"
"label":"Extra Diskon 20rb "
"label":"Extra Diskon 20rb "
"win":true}
"win":true}
{"code":"FREESHIPPING"
{"code":"FREESHIPPING"
"label":"Coba Lagi"
"label":"Coba Lagi"
"win":false}
"win":false}
{"code":""
{"code":""
"label":"Sedikit Lagi! "
"label":"Sedikit Lagi! "
"win":false}
"win":false}
{"code":"HOSTING50"
{"code":"HOSTING50"
"label":"Extra Diskon 50rb "
"label":"Extra Diskon 50rb "
"win":true}]
"win":true}]