Yasin K Yasin K is a Technical Content Writer for Niagahoster Blog. Other words are unimportant things you will never need to know. Let the content speak for itself :)

Panduan Menggunakan Editor Gutenberg Terbaru

4 min read

Belum lama ini, WordPress, salah satu CMS populer di seluruh dunia, melakukan update ke versi terbaru. Pada update kali ini cukup banyak perubahan yang dilakukan tim pengembang untuk membuat WordPress lebih baik dan mampu mengikuti perkembangan jaman. Anda dapat melihat detail informasi terbaru versi WordPress ini melalui artikel update WordPress terbaru 5.0.

Salah satu perubahan besar yang dilakukan di versi ini adalah mengubah editor lama yang kental nuansa TinyMCE menjadi editor baru yang diberi nama Gutenberg. Meskipun mendapatkan banyak kritikan dan komentar negatif dari beberapa penggunanya, WordPress tetap menjadikan Gutenberg sebagai default editor pada versi 5.0 dan versi terbaru selanjutnya.

Jika Anda telah lama menjadi pengguna WordPress, tentu saja Anda perlu menyesuaikan dengan perubahan fitur editor yang baru ini. Meninggalkan yang lama dan mencoba untuk belajar menggunakan editor terbaru yang tentu saja sudah dikembangkan sesuai dengan teknologi saat ini.

Namun bagi Anda yang masih ingin menggunakan editor WordPress lama, jangan khawatir, Anda bisa mengikuti panduan di artikel cara menonaktifkan Gutenberg ini yang sudah kami terbitkan beberapa waktu lalu.

Gutenberg merupakan editor yang sangat berbeda dengan editor sebelumnya. Fitur yang ditawarkan lebih modern dan menarik. Bagi beberapa pengguna mungkin cukup membingungkan, tapi tenang saja di artikel ini kita akan membahas fitur-fitur Gutenberg beserta panduan menggunakan Gutenberg secara lengkap.

Editor WordPress Lama

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

Bagi Anda yang sudah lama menggunakan WordPress pasti tidak asing dengan tampilan Classic Editor di bawah ini.

cara menggunakan editor guternberg

Kemudian, setelah Anda melakukan update ke versi terbaru WordPress, maka editor akan berubah menjadi seperti ini.

cara menggunakan editor guternberg

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

Editor lama terlihat seperti tampilan program pengolahan kata seperti Ms. Word atau LibreOffice. Namun di editor baru Gutenberg, semua terlihat berbeda karena Gutenberg menggunakan pendekatan yang disebut dengan “Block”.

Block adalah elemen di konten yang bisa Anda edit untuk membuat layout. Jadi setiap konten yang ada di editor menjadi satu elemen: elemen gambar, paragraf, quote, dan lain sebagainya.

Supaya lebih jelas mari kita coba bahas lebih detail tentang editor Gutenberg.

Apa itu Editor Gutenberg WordPress?

Gutenberg adalah editor WordPress dengan interface baru berdasarkan Block Based User Interface (UI). Jadi di editor Gutenberg setiap konten terkotak-kotak ke dalam bentuk yang modular. Anda dapat memindahkan setiap blok konten dengan menyeretnya (drag & drop).

Gutenberg dirilis pada bulan Desember 2018, bertepatan dengan peluncuran WordPress versi terbaru. Editor ini lebih memberikan keleluasaan bagi penggunannya untuk menambahkan gambar, kode program, paragraf, dan beberapa konten lain secara fleksibel.

Cara Instal Gutenberg di WordPress

Secara default Gutenberg akan menjadi editor jika Anda telah upgrade WordPress Anda ke versi 5.x atau Anda membuat website berbasis WordPress baru menggunakan WordPress versi 5.0 ke atas. Namun jika Anda masih menggunakan WordPress 4.9.x, Anda perlu terlebih dahulu install plugin Gutenberg pada website WordPress Anda.

Untuk install plugin Gutenberg, Anda bisa langsung memasangnya melalui tab Plugins. Buka halaman Plugins » Add New. Di halaman ini, gunakan kolom search untuk mencari plugin Gutenberg.

editor gutenberg

Cukup klik “Install Now”. Setelah proses instalasi selesai, jangan lupa untuk klik “Active” untuk mengaktifkan plugin.

Jika dilihat memang plugin ini mempunyai peringkat (rating) yang kecil, karena beberapa pengguna mengeluhkan beberapa fungsi yang tidak bisa berjalan dengan baik. Namun Anda bisa mengesampingkan review ini dan mencoba menggunakannya sendiri.

Baca Juga : Text Editor Terbaik Untuk Pemrograman

Cara Menggunakan Editor Gutenberg WordPress Terbaru

Gutenberg merupakan editor yang mempunyai layout tampilan baru dan sebagian orang masih belum familiar dengan editor WordPress terbaru WordPress ini. Sebenarnya bagaimana menggunakan editor Gutenberg yang baru? Yuk kita lihat beberapa poin panduan menggunakan editor Gutenberg terbaru di bawah ini.

Untuk mengaksesnya, Anda cukup melakukan seperti membuat artikel atau halaman baru. Klik Post » Add New atau Pages » Add New. Secara otomatis langkah ini akan membuka editor Gutenberg WordPress terbaru.

1. Menulis dengan Editor Gutenberg WordPress

Bagaimana cara menulis menggunakan editor Gutenberg WordPress terbaru?

cara menggunakan editor guternberg

Gambar di atas adalah tampilan Gutenberg sekaligus fitur-fiturnya.

  • Anda bisa mengisi judul pada kolom ini.
  • Ini adalah bagian utama konten. Setiap konten terpisah oleh blok-blok yang kemudian menjadi satu bagian. Setiap blok dapat dipindahkan posisinya dengan cara ‘drag and drop’.
  • Anda bisa menambahkan Blok di setiap bagian menggunakan tombol ini atau tanda “+” di setiap blok.
  • Bagian ini dapat Anda gunakan untuk mengatur formatting konten.
  • Menu ‘Document’ berisi beberapa pengaturan terkait dengan permalinks, categories, feature images, dan sebagainya.
  • Menu ‘Block’ berisi pengaturan font dan additional CSS pada setiap blok. Jadi Anda bisa membedakan font maupun warna antar blok.

2. Menambahkan Blok Baru di Artikel

Anda bisa menggunakan tanda “+” untuk menambahkan blok baru di Gutenberg. Beberapa tipe blok yang bisa Anda tambahkan, seperti paragraf, html, quote, table, code, embed, widgets, layout elements, dan masih banyak lagi.

cara menggunakan editor guternberg

3. Menambahkan Gambar di Artikel

Anda bisa menambahkan gambar menggunakan beberapa cara di Gutenberg, seperti gambar tunggal atau gambar untuk galeri. Anda cukup klik Add Block » Image atau Add Block » Gallery.

cara menggunakan editor guternberg

4. Menambahkan Kolom dan Button

Menggunakan editor Gutenberg terbaru lebih mudah saat menambahkan button dan kolom. Anda cukup menggunakan opsi Add Block kemudian menambahkan button pada kolom Layout Elements.

cara menggunakan editor guternberg

Tidak hanya Button, Anda bisa menambahkan Columns, Media & Text, More, Page Break, Separator, dan Spacer pada bagian ini. Anda bisa menambahkan link pada button atau memilih warna teks maupun background sesuai dengan keinginan.

cara menggunakan editor guternberg

Pada blok kolom, Anda bisa menambahkan gambar sekaligus deskripsinya di dalam satu blok. Anda juga bisa menyesuaikan ukuran, link, deskripsi dan alt-image setiap gambar dengan mudah.

cara menggunakan editor guternberg

5. Menambahkan Kode HTML

Jika di editor lama Anda perlu menambahkan custom HTML menggunakan tab berbeda, Anda cukup menambahkan blok ketika menggunakan editor Gutenberg terbaru. Cukup klik Add Block » Formatting » Custom HTML dan masukkan kode kode HTML yang ingin ditambahkan.

cara menggunakan editor guternberg

6. Menambahkan URL Youtube dan Media Lainnya

Di pilihan blok Embeds, Anda bisa menambahkan beberapa media sosial dan script dari media lain untuk ditambahkan ke dalam artikel: Embed, Twitter, Youtube, Facebook, Instagram, WordPress, SoundCloud, dan lain sebagainya. Caranya pun cukup mudah, yaitu dengan memasukkan URL yang ingin di-embed.

cara menggunakan editor guternberg

7. Membuat Tabel yang Menarik di Gutenberg

Di Gutenberg Anda tinggal menambahkan blok Table dan langsung diminta untuk memasukkan jumlah kolom dan baris. Secara otomatis Gutenberg akan meng-generate tabel sesuai dengan yang Anda inginkan. Tentu fitur ini akan mempermudah kerja Anda yang berhubungan dengan tabel.

cara menggunakan editor guternberg

Cara ini jauh lebih mudah dibandingkan dengan editor lama yang mengharuskan Anda menggunakan plugin atau custom CSS atau HTML untuk menambahkan tabel di WordPress.

8. Menyesuaikan Susunan Blok

Anda dapat menyesuaikan susunan setiap blok hanya dengan ‘drag and drop’ dan menghapusnya dengan mudah. Arahkan kursor ke arah pojok kanan atas blok, akan terlihat tombol yang digunakan untuk menyesuaikan posisi blok.

cara menggunakan editor guternberg

Kesimpulan

Menggunakan editor Gutenberg ternyata tidak sulit. Pengguna tinggal membiasakannya saja, karena berbagai kemudahan ditawarkan di Gutenberg. Kemudahan yang dimaksud seperti pembuatan tabel dan menambahkan custom HTML yang lebih sederhana jika dibandingkan dengan editor lama (Classic Editor).

Tidak ada salahnya mencoba menggunakan plugin Gutenberg, karena tidak akan lama lagi editor lama tidak akan melakukan pembaruan dan semua akan menggunakan Gutenberg pada waktunya.

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

2
Yasin K Yasin K is a Technical Content Writer for Niagahoster Blog. Other words are unimportant things you will never need to know. Let the content speak for itself :)

2 Replies to “Panduan Menggunakan Editor Gutenberg Terbaru”

    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 *

four + 9 =