Gutenberg Editor saat ini sudah menjadi bagian tak terpisahkan dari WordPress. Sejak versi WordPress 5.0, secara resmi Gutenberg dijadikan sebagai editor default menggantikan Classic Editor.

Sehingga pengembangan ekosistem WordPress kedepan, mau tidak mau harus menyesuaikan dengan Gutenberg. Maka tidak mengherankan jika sekarang ini banyak pengembang theme maupun plugin mulai menonjolkan sisi kompatibilitas dengan Gutenberg editor.

Perhatian! Tulisan ini cukup panjang. Untuk mengakses tutorial cara menggunakan Gutenberg Editor silakan angsung menuju ke bagian paling bawah dari halaman ini. Ada video tutorial dan Anda bisa melihat live demonya di sana.

Menurut saya, Gutenberg adalah masa depan. Kita memang masih bisa menggunakan Classic Editor, namun pertanyaannya sampai kapan kah kita akan menggunakannya? Sedangkan arah pengembangan WordPress akan selalu berfokus pada Gutenberg, bukan pada Classic Editor.

Saya jadi teringat kebijakan konversi dari minyak tanah ke gas di era pemerintahan Pak SBY dulu. Awal mulanya banyak yang menolak, banyak yang tidak setuju, termasuk keluarga saya pada saat itu.

Tapi kemudian pada akhirnya saat ini banyak yang suka pakai gas daripada minyak tanah. Dari terpaksa lalu terbiasa dan muncul-lah cinta. Namun begitu bukan berarti minyak tanah hilang dari peredaran dan tidak ada yang menggunakannya sama sekali.

Begitu pula dengan konversi dari Classic Editor ke Gutenberg ini. Pada awalnya sayapun juga menolaknya. Kesannya Gutenberg ribet, berat, tidak praktis kalau butuh copy paste dan susah penggunaannya. Lebih baik pakai page builder sekalian daripada pakai Gutenberg.

Ternyata itu hanya persepsi awal yang saya rasakan karena memang belum terbiasa menggunakan Gutenberg. Selain itu juga karena dulu masih tahap pengenalan Gutenberg sehingga masih belum sempurna baik fitur maupun performanya.

Namun kini saya mulai membuka diri dengan Gutenberg. Saya paksa diri saya untuk menggunakan Gutenberg setiap kali menulis konten. Dari beberapa website yang saya miliki dan kelola, hanya tinggal 2 saja yang masih pakai Classic Editor. Itupun karena websitenya perusahaan dan yang satu lagi theme nya belum support Gutenberg. Tapi website yang lainnya sudah saya konversikan ke Gutenberg editor.

Ternyata pengalaman menggunakan Gutenberg itu sangat seru dan bikin ketagihan. Saya tipe orang yang suka aneh-aneh dan Gutenberg bisa memfasilitasi saya untuk melakukannya di konten yang saya tulis.

Maka dari itu melalui tulisan ini saya ingin mengajak Anda yang masih pakai Classic Editor untuk berpindah ke Gutenberg Editor.

Mungkin Anda butuh waktu untuk menyesuaiakannya. Sehingga saya tidak hanya mengajak saja, tetapi juga menyediakan tutorial cara menggunakan Gutenberg Editor nya juga untuk Anda.

Mudah-mudahan apa yang saya sampaikan ini nanti bisa menginspirasi dan menjadikan Anda segera berpindah ke Gutenberg Editor, bersama saya dan ribuan pengguna lainnya. Baik, kita mulai ya materinya.

Apa itu Gutenberg?

Berdasarkan pengertian dari situs WordPress Developer, Gutenberg adalah sebuah nama proyek untuk menciptakan pengalaman baru pada WordPress editor.

Selama ini WordPress editor lebih mirip dengan tampilan aplikasi word processor seperti Google Docs atau Microsoft Word. Dengan Gutenberg, WordPress ingin menciptakan editor yang sama sekali baru, yaitu editor yang berbasiskan blok.

Silakan perhatikan gambar di bawah ini untuk melihat perbedaan antar Classic Editor dengan Gutenberg Editor.

tampilan Classic Editor WordPress

tampilan Classic Editor WordPress

tampilan Gutenberg Editor WordPress

tampilan Gutenberg Editor WordPress

Tentang Block di Guntenberg

Untuk memberikan pengalaman yang baru, WordPress melalui Gutenberg menawarkan konsep yang bernama Block. Block ini merupakan sebuah fitur yang mempunyai fungsi tertentu di dalam membuat konten.

Pada gambar di atas Anda bisa melihat serangkaian Block yang ada di dalam kategori Most Used.

  • Ada Block Paragraf yang berfungsi untuk menambah dan mengatur konten berupa teks.
  • Ada Block Heading yang berfungsi untuk membuat dan mengatur Heading pada konten.
  • Ada juga Image yang berfunsing untuk menambahkan gambar ke dalam konten.
  • Dan lain sebagainya.

Untuk penjelasan lebih detil tentang Block ini Anda bisa menyimaknya di bawah. Yang ingin saya sampaikan di sini adalah bahwa konsep Block ini membuat pengalaman bikin konten menjadi lebih enak, lebih fokus dan lebih personalized. Dengan kata lain, setiap paragraf yang ditulis dengan Gutenberg bisa mempunyai format yang unik.

Mengapa harus pakai Gutenberg Editor mulai sekarang?

Seperti yang saya bilang di atas bahwa pengembangan WordPress di masa depan tidak akan jauh-jauh dari Gutenberg. Sudah cukup banyak developer yang menyesuaikan produk mereka dengan Gutenberg. Jadi ini hanya masalah waktu saja sebelum semuanya mengadopsi Gutenberg.

Sekarang atau nanti sebanarnya tidak masalah. Hanya saja kalau Anda menggunakan Gutenberg sejak sekarang, Anda bisa menguasainya lebih awal dibandingkan dengan pengguna lain. Jadi ketika nanti pengguna lain baru proses belajar atau proses migrasi, Anda sudah menguasai Gutenberg secara mendalam.

Selain itu, ketika ada sesuatu yang baru, biasanya para pengembang memberikan akses gratis untuk fitur premium mereka. Hal ini sudah terjadi di page builder Elementor.

Sebelum Elementor ada, page builder yang populer adalah Divi, Visual Composser dan Site Origin. Namun begitu Elementor datang, saya masih ingat betul hanya beberapa pengembang yang kompatibel dengan Elementor, salah satunya adalah WP Astra. Namun kini, kalau Anda cermati 20 theme populer di WordPress.org hampir semunya menonjolkan kompatibiltasnya dengan Elementor.

Waktu itu WP Astra sempat memberikan lisense pro secara gratis pada orang-orang yang mau mencoba theme mereka. Dan saya adalah salah satu orang yang mendapatkan lisensi pro tersebut.

Hal yang sama bukan tidak mungkin terjadi juga di Gutenberg. Kita tunggu saja perkembangannya.

Bagaimana cara konversi dari Classic Editor ke Gutenberg?

Sekarang kita masuk ke pembahasan yang lebih teknis. Terkait konversi dari Classic Editor ke Gutenberg sebenarnya ini sudah berjalan secara otomatis ketika Anda melakukan update WordPress 5.0 dan setelahnya. Jadi Anda tidak perlu melakukan apa-apa lagi untuk mulai menggunakan Gutenberg.

Akan tetapi jika Anda sudah menggunakan WordPress 5.0 dan ternyata Classic Editornya masih aktif, itu berarti ada plugin Classic Editor yang Anda instal.

Maka dari itu Anda perlu menonaktifkan dulu plugin Classic Editornya. Jika perlu hapus dari daftar plugin Anda.

Konversi konten

Dengan mengkonversi editor dari Classic ke Gutenber sudah tentu ada konsekuensinya. Konsekuensinya adalah konten yang sudah Anda buat sebelumnya dengan Classic Editor, akan secara otomatis menjadi 1 block panjang di Gutenberg Editor.

Untuk lebih jelasnya silakan perhatikan gambar di bawah ini.

1 block panjang

1 block panjang

Gambar di atas itu adalah contoh konten yang saya buat menggunakan Classic Editor. Setelah dikonversi ke Gutenberg Editor maka konten tersebut, dari paragraf pertama hingga paragram terakhir menjadi 1 block yang panjang. Dan itu masih menjadi satu kesatuan.

Artinya, kita tidak bisa melakukan personalisasi pada Block tersebut. Misalkan kita ingin berikan background warna merah pada paragraf pertama, maka itu tidak bisa dilakukan.

Block tidak bisa dipersonalisasi

Block tidak bisa dipersonalisasi

Supaya bisa dilakukan maka harus dikonversi kontennya.

Untuk konversinya caranya sangat mudah, Anda cukup klik 3 titik di bagian Block, lalu klik menu Convert to Blocks.

Convert to Blocks

Convert to Blocks

Maka hasilnya setiap paragraf, heading, list ataupun gambar akan secara otomatis menjadi Block yang berdiri sendiri.

Block heading

Block heading

Dari sini, kita bisa melakukan personalisasi pada setiap Block nya. Misalkan kita akan memberikan background merah pada paragraf pertama. Sehingga bagian yang lain tidak ikut terpengaruh. Maka hasilnya adalah sebagai berikut.

background merah pada block paragraf pertama

background merah pada block paragraf pertama.

Tutorial Cara Menggunakan Gutenberg Editor WordPress

Sekarang tibalah kita pada materi utama cara menggunakan Gutenberg Editor WordPress ini. Supaya lebih mudah memahami, pada tutorial ini saya bagi menjadi beberapa bagian, diantaranya :

  1. Membuat posting baru
  2. Mengenal anatomi Gutenberg Editor
  3. Mengenal macam-macam Block yang ada di Gutenberg
  4. Praktek membuat konten dengan Gutenberg

Untuk itu langsung saja berikut materinya.

#1 Membuat posting baru

Untuk membuat posting atau konten baru dengan Gutenberg caranya sangat mudah. Caranya silakan ikuti langkah-langkah berikut ini :

  1. Login ke WordPress Anda.
  2. Pada halaman dashboard, arahkan kursor ke menu Post lalu klik sub menu Add New.
    membuat posting baru
  3. Setelah itu Anda akan masuk ke halaman seperti berikut ini. Itu berarti posting baru siap untuk Anda tambahkan.
    gutenber editor

#2 Mengenal anatomi Gutenberg Editor

Sebelum mulai menggunakan Gutenberg Editor ada baiknya kita mengenal dulu anatominya. Dengan mengenai anatomi maka kita bisa dengan cepat melakukan tindakan yang diperlukan.

Secara umum Gutenberg Editor mempunyai 3 bagian utama, diantaranya :

  1. Top Bar
  2. Canvas
  3. Page Settings

 

anatomi Gutenberg Editor

anatomi Gutenberg Editor

Mari kita bahas satu per satu.

#Top Bar

top bar Gutenberg editor

top bar Gutenberg editor

Pada bagian Top Bar ini ada beberapa fitur, diantaranya :

  • Add Block : Berfungsi untuk menambahkan Block baru di Gutenberg editor.
  • Undo : Berfungsi mengembalikan tampilan atau pengaturan sebelumnya.
  • Redo : Berfungsi untuk mengembalikan tampilan atau pengaturan setelah kita aktifkan Undo.
  • Content Structure : Berfungsi untuk mengetahui jumlah kata, jumlah Block, jumlah paragraf dan jumlah heading. Selain itu bagian ini juga menampilkan block mana yang sedang aktif.
  • Block Navigation : Berfungsi untuk pindah Block dari yang satu ke Block yang lain.
  • Save Draft : Berfungsi untuk menyimpan konten dalam bentuk Draft.
  • Preview : Berfungsi untuk melihat hasil jadi atau hasil akhir dari konten Anda.
  • Publish : Berfungsi untuk mempublish konten Anda.
  • Settings : Berfungsi untuk menampilkan Page Settings.
  • More Tools & option (tiga titik vertikal) : Berfungsi untuk menampilkan pengaturan tambahan.

#Canvas

Pada bagian Canvas ini hanya ada 2 bagian utama saja, diantaranya :

  • Title : Berfungsi untuk menambahkan judul pada konten Anda.
  • Blocks Canvas: Berfunsi untuk menulis konten menggunakan Block yang tersedia.

#Page Settings

Pada bagian ini berisi pengaturan halaman dan juga pengaturan Block. Pada pengaturan halaman (tab Document) ada banyak pilihan seperti :

  • Status & Visibility
  • Permalink
  • Categories
  • Tags
  • Featured Image
  • Excerp
  • Discussion
  • dan Post Attributes.

Sedangkan pada tab Block, itu hanya akan aktif ketika ada Block di bagian canvas yang sedang kita gunakan.

#3 Mengenal macam-macam Blocks yang ada di Gutenberg

Secara default ada 5 kategori utama Block di Gutenberg, diantaranya :

  1. Common Blocks
  2. Formatting
  3. Layout Elements
  4. Widget
  5. Embeds

# Commons Block

Pada kategori Common Blocks ini terdiri dari 10 Block yang diantaranya :

  1. Paragraph
  2. Heading
  3. List
  4. Image
  5. Gallery
  6. Quote
  7. Audio
  8. Cover
  9. File
  10. Video.

#Formatting

Pada kategori Formatting ini terdiri dari 7 Block yang diantaranya :

  • Code
  • Classic
  • Custom HTML
  • Preformatted
  • Pullquote
  • Table
  • Verse.

#Layout Elements

Pada kategori Layout Elements ini terdiri dari 8 Block yang diantaranya :

  • Columns
  • Button
  • Group
  • Media & Text
  • More
  • Page Break
  • Separator
  • Spacer.

#Widgets

Pada kategori Widgets ini terdiri dari 10 Block yang diantaranya :

  • Latest Posts
  • Archives
  • Mailchimp for WordPress Form
  • Shortcode
  • Calendar
  • Categories
  • Lates Comments
  • RSS
  • Search
  • Tag Cloud.

#Embeds

Pada kategori Embeds ini terdiri dari 12+ Block yang diantaranya :

  • Embed
  • Twitter
  • Youtube
  • Facebook
  • Instagram
  • Soundcloud
  • Spotify
  • Flickr
  • Vimeo
  • dll.

Praktek membuat konten dengan Gutenberg

Sekarang kita masuk ke praktek cara menggunakan Gutenberg Editor dengan membuat konten secara langsung. Untuk itu saya sudah menyiapkan sebuah video untuk Anda. Dengan video ini saya berharap Anda bisa mendapatkan gambaran menyeluruh tentang bagaimana membuat konten dengan menggunakan Gutenberg Editor ini.

Silakan saksikan videonya berikut ini :

Ternyata mudah kan cara menggunakan Gutenberg Editor WordPress ini? Akhirnya saya hanya bisa mengajak Anda, keputusan pindah atau tidak itu tetap ada di Anda. Saya ucapkan terima kasih sudah menyimak tulisan saya dan sampai jumpai di artikel berikutnya.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.