WordPress gutenberg adalah editor WYSIWYG (what you see is what you get) terbaru milik wordpress yang berfungsi untuk mengganti tampilan visual dari ‘classic’ editor sebelumnya. Saat ini Gutenberg masih tersedia dalam bentuk plugin dan sedang terus dikembangkan. Tapi, ini nantinya akan resmi diluncurkan sebagai default editor pada  wordpress versi 5.0.

Sejak rilis pertama kali pada tanggal 27 Maret 2003, WordPress 0.7 (versi pertama wordpress) telah banyak mengalami perubahan yang signifikan dalam berbagai hal. Terutama yang berkaitan dengan persoalan desain, keamanan, dan upgrade fitur terbaru. Akan tetapi, jika kita menengok perkembangan editor-nya selama kurun waktu 15 tahun terakhir, it’s just pretty much the same.

Alias minim perubahan.

Sementara belakangan ini kita tahu mulai banyak bermunculan sejumlah platform untuk menulis (baca: blogging) yang menawarkan gaya, kemudahan, dan pengalaman baru bagi para penulis dalam menerbitkan karya mereka. Website seperti medium dan ghost adalah contohnya.

Oleh karena itu, untuk mengikuti perkembangan yang sedang terjadi, kini WordPress pun menghadirkan Gutenberg.

Lantas apa itu Gutenberg? dan apa sajakah kelebihan yang ditawarkan? Simak penjelasannya dibawah ini.

Apa itu Gutenberg?

Johannes Gutenberg
sumber: Biography

Seperti yang dijelaskan pada paragraf pertama artikel ini, Gutenberg sejatinya adalah bakal editor default terbaru bagi wordpress. Istilah Gutenberg diambil dari nama Johannes Gutenberg , seorang pria berkebangsaan Jerman yang pertama kali menemukan mesin cetak. Gutenberg timbul sebagai respon dari sang co-founder WordPress, Matt Mullenweg, terhadap sejumlah tantangan yang ia hadapi. Salah satunya yang berkaitan dengan kesulitan yang dialami sebagian pengguna dalam melakukan penyesuaian tertentu pada tulisan yang akan di-publikasikan. Teruntuk bagi mereka yang awam dengan html, css, dan sejenisnya. 

Maka dari itu, hadirlah Gutenberg. The new upgrade yang bakalan bikin siapa saja mampu mengkustomisasi tulisannya sesuai dengan yang diinginkan. Dan tanpa harus mengunduh plugin tertentu, apalagi belajar bahasa pemrograman terlebih dahulu. 

Dengan kata lain, Gutenberg adalah editor baru yang lebih ramah pengguna. Berorientasi blok. Sehingga kurang lebih pengalamannya akan sama seperti saat menulis di IDNTimes dan medium.

Tidak percaya? lihat gambar dibawah ini:

Wordpress Gutenberg
Perbedaan antara classic editor (kiri) dan Gutenberg (kanan).
sumber: gutenberghub
wordpress gutenberg
Tampilan editor Gutenberg.
sumber: ithemes

Jelajah Fitur WordPress Gutenberg

Berhubung Gutenberg saat ini masih merupakan sebuah plugin. Alias belum masuk ke dalam bagian inti (core) dari WordPress itu sendiri, maka beberapa fitur Gutenberg yang akan saya jelaskan dibawah ini bisa saja mengalami sejumlah perubahan atau bahkan dihilangkan. Dan itu semua tergantung dari keputusan Matt Mullenweg dan beberapa teman developernya yang ikut bersama menangani projek ini.

Gutenberg will ship with WordPress 5.0, but the release will come out when Gutenberg is ready, not vice versa. We still have target dates to help us think about scope and plan for all the supporting documentation, translation, and marketing efforts, but we’re not going to release anything until Gutenberg is something the team working on it agrees is ready.

Matt Mullenweg

Intinya, sebelum wordpress 5.0 diluncurkan, Gutenberg masih sangat rentan dengan perubahan. So, make sure you keep updated.

Namun…. untuk sementara, kamu bisa melihat beberapa tampilan fitur terbaru yang ditawarkan oleh Gutenberg saat ini. Btw, disini saya tidak  mengcover semua fitur yang tersedia, namun hanya beberapa saja yang merupakan favorit saya pribadi.

Blocks

Gutenberg pada dasarnya merupakan visual editor dengan konsep blocks. Pengalamannya kurang lebih sama seperti saat kamu menulis di medium. Gutenberg sendiri mempunyai beragam jenis blocks yang bisa kita gunakan. Dan masing-masing memiliki fasilitas penyuntingan tersendiri. Contoh seperti pada blocks Cover Image dimana kita bisa langsung menaruh tulisan di atas gambar tanpa harus mengeditnya terlebih dahulu di corel, photoshop, atau canva.

Wordpress Gutenberg
sumber: wordpress

Drop Cap

Lihat huruf “W” besar pada paragraf pertama artikel ini? Itulah yang disebut dengan Drop Cap. Fitur ini berfungsi untuk membuat huruf awal pada suatu paragraf menjadi berukuran besar beberapa baris daripada ukuran huruf lainnya.

Sebelumnya pada classic editor, kita sama sekali tidak bisa menggunakan fitur ini dengan mudah. Jika kita ingin menaruh drop cap pada tulisan yang akan kita publikasikan, maka kita harus menginstall plugin
terlebih dahulu; misal simple drop cap. Atau bisa dengan cara mengoprek-oprek bagian php dan css pada file tema WordPress yang sedang digunakan. <<<< opsi yang kedua jelas membutuhkan pengetahuan teknis yang mana tidak semua orang punya.

Gutenberg
Install plugin Simple Drop Cap
sumber: greengeeks

Dulu repotnya memang seperti itu.
Tapi sekarang… sudah beda. 

Asalkan plugin gutenberg-nya sudah terinstall, kita jadi tinggal main click saja. Lihat gambar dibawah:

Drop Cap Gutenberg
Dok. Pribadi

Anchor Support

Fitur kedua yang saya sukai dari wordpress gutenberg adalah kemudahan dalam menyisipkan anchor link pada bagian heading tulisan. Tidak seperti pada classic editor dimana kita harus menyisipkannya lewat html. Misal jika saya ingin menyisipkan anchor link pada bagian heading = “Apa itu Gutenberg?” dan saya menggunakan label “anchor2“, maka saya harus terlebih dahulu mengoprek html-nya menjadi seperti yang tampak dibawah ini:

<h2 id=”anchor2″> Apa itu Gutenberg? </h2>

Setelah itu baru saya bisa menaruh link pada bagian teks yang mana saja. Misal jika saya ingin menaruh link-nya pada teks “Click Me” , maka pada bagian html-nya nanti akan terlihat seperti berikut ini:

<a href=”#anchor2″> Click Me </a> 

Tip: kalimat Click Me diatas disebut dengan anchor text

Kalau dipikir-pikir lumayan ribet juga kan?

Yaa.. itu sih dulu…

Kalau sekarang, gampang! Apabila kita hendak menyisipkan anchor link pada bagian heading , cukup ketikkan saja labelnya pada kolom HTML Anchor yang sudah tersedia di bagian samping kanan editor-nya. (lihat gambar)

Anchor text wordpress Gutenberg
sumber: kinsta

Thanks to WordPress Gutenberg.

Button

Selanjutnya ada fitur tombol sederhana. Atau yang lebih dikenal dengan sebutan bahasa inggrisnya, Button. Pada classic editor, saat kita ingin menyisipkan button ke dalam tulisan, kita masih harus mengandalkan  pihak ketiga, yaitu plugin. Atau melalui html. Itupun kalau kita paham.

Namun, dengan hadirnya gutenberg, kini melakukan hal tersebut jadi lebih mudah. Bahkan, mengubah warna background dan text -nya pun jadi jauh lebih gampang.

Wordpress gutenberg
Dok. Pribadi

Background Color

Ini adalah contoh implementasi fitur background text pada wordpress gutenberg. Tampilannya sama seperti saat menggunakan content box pada tema Genesis Studiopress. Yang mana fungsinya itu harus diatur dulu dengan cara mengoprek-oprek file style.css pada temanya. Plus pengaplikasiannya juga masih harus lewat html pada classic editor.

Sementara di gutenberg, setiap blok paragraph bisa diatur background color -nya. Dan tampilannya akan sama persis dengan tampilan content box pada tema genesis. Bahkan lebih baik. Di gutenberg, kita juga bebas mengatur warna teksnya.

seperti berikut ini.

Table of Contents

Atau istilahnya daftar isi. Fitur ini tersedia secara otomatis tanpa harus kita aktifkan terlebih dahulu. Cukup dengan mengklik simbol “i” yang ada pada bagian pojok atas, fitur ini akan langsung terlihat dengan jelas lewat jendela pop-up. Melalui fitur daftar isi kita bisa menjadi lebih mudah dalam menagivasi konten panjang yang kita buat.

Selain menampilkan table of contents, kita juga bisa melihat beberapa informasi dasar seperti jumlah kata yang sudah tertulis, jumlah blok yang digunakan, dan total heading yang terdapat pada tulisan kita.

sumber: kinsta

Full Width Image

Terakhir ada fitur menampilkan gambar dengan lebar yang penuh. Fitur ini sama persis seperti yang kita temukan pada situs medium. Namun sayang, sejauh ini hanya beberapa tema saja yang bisa menggunakan fitur full width image yang disediakan oleh wordpress gutenberg. Alasannya karena beberapa tema wordpress yang lain belum atau tidak mendukung fitur tampilan gambar lebar penuh. Salah satunya tema genesis Essence Pro yang sedang saya gunakan saat ini. 

full width imaga gutenberg
sumber: smashingmagazina

Note: Kamu bisa melihat dan mempelajari lebih lanjut tentang  sejumlah fitur yang ada pada wordpress gutenberg dengan cara mengunjungi laman resmi wordpress.


Cara Menginstall Gutenberg

Seperti halnya pada plugin yang lain, cara menginstall wordpress gutenberg pun kurang lebih sama saja.

  1. Pertama, klik pilihan Add New pada bagian menu plugin
  2. Kemudian lanjutkan dengan mengetik kata kunci gutenberg pada kolom pencarian
  3. Setelah muncul plugin Gutenberg, klik Install Now.
cara menginstall wordpress gutenberg
cara menginstall wordpress gutenberg.
sumber: kinsta

Selain dengan cara diatas, kamu juga bisa menginstall plugin melalui tombol Upload Plugin yang terlihat pada gambar ditas. Tapi syaratnya kamu harus sudah memiliki file gutenbergnya terlebih dahulu. Dan itu bisa kamu download secara manual dengan mengunjungi laman wordpress.org.


Kelebihan Gutenberg

Bagi saya ada empat kelebihan yang mencolok dari wordpress gutenberg, yaitu:

  1. Cara penggunaannya terbilang mudah dan relatif bisa dipahami oleh siapa saja. Bahkan anak tk sekalipun.
  2. Kaya dengan fitur . Pun pengguna juga tidak lagi harus paham dasar-dasar pemrograman atau mengandalkan plugin untuk menyisipkan penyesuaian tertentu pada konten yang ingin dipublikasikan.
  3. Fiturnya tetap bekerja dengan baik bahkan saat diakses melalui smartphone.
  4. Punya tampilan desain yang menarik dan lebih sederhana. Lebih banyak whitespace.
Tampilan saat mengakses gutenberg lewat smartphone.
sumber: kinsta

The editor will create a new page- and post-building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery. 

– Matt Mullenweg

Kekurangan Gutenberg

Sejauh ini saya melihat hanya ada dua kekurangan dari gutenberg, yaitu:

  1. Belum mendukung (support) markdown. Ini penting bagi mereka yang sering nulis dengan mode markdown.
  2. Tidak semua fitur yang ada pada gutenberg sudah kompatibel atau connect dengan seluruh tema dan plugin wordpress. Sehingga kadangkala menciptakan bug.

Cepat atau lambat gutenberg pada akhirnya akan menjadi bagian inti dari cms wordpress. Meski masih ditemukan sejumlah kekurangan serta kerap mendapatkan review yang buruk, kita sama-sama berharap semoga pada rilis resminya nanti, gutenberg sudah jauh lebih baik dari sekarang.

Sudahkah kamu mencoba Gutenberg?

Author

Freelance Writer, Blogger, and Finance enthusiast. Blog ini saya buat untuk berbagi tips finansial, investasi, dan berbagai cara menghasilkan uang dari internet. Hubungi halo@zaipad.com untuk perihal pertanyaan dan kerjasama.

3 Comments

  1. Masih banyak bug-nya dan itu sama sekali MENYEBALKAN. Bayangin ya, udah ngetik banyak2, udah dicek dan ricek, dipublish, begitu dibaca lagi ada yang teks yang hilang. Nggak tahu tuh sudah berapa kali ngalamin kayak gini dan kesel banget.

    • Zai Z Reply

      Ya emang sih masih sering muncul bug. Namanya juga masih dalam tahap pengembangan. Hehe.

  2. Hooo ada gutenberg juga disini 😀
    Iya bener, kayanya butuh beberapa posting lagi baru bisa ‘menyatu’ dengan kebiasaan ya. Semoga saja nanti update WP terbaru makin josss

Write A Comment

Do NOT follow this link or you will be banned from the site!