Cara Menggunakan Editor Blok Gutenberg WordPress

0
194

Mulai WordPress 5.0, editor konten klasik diganti dengan editor blok baru, yang dikenal sebagai Gutenberg. Karena ini editor baru yang berbeda jauh dengan editor klasik, banyak pengguna WordPress yang belum paham cara penggunaanya.

Dalam tutorial ini, kita akan mempelajari bagaimana menggunakan editor blok WordPress baru untuk membuat postingan dan halaman blog.

Apa Perbedaan Antara Editor Blok (Gutenberg) dan Editor Klasik?

Sebelum kita masuk ke editor baru, pertama-tama mari kita bandingkan dan pahami perbedaan antara Editor Blok Gutenberg dan Editor Klasik.

Seperti inilah tampilan editor klasik di WordPress:

Jika Anda upgrade ke WordPress 5.0, maka seperti inilah tampilan editor blok baru:

Seperti yang Anda lihat, kedua editor ini sangat berbeda untuk membuat konten di WordPress.

Editor klasik lama adalah editor teks dengan tombol pemformatan yang sangat mirip dengan Microsoft Word.

Editor baru menggunakan cara yang berbeda dalam membuat konten, yang disebut ‘Blok’ (karenanya, disebut Editor Blok).

Blok adalah elemen konten yang Anda tambahkan ke layar edit untuk membuat tata letak konten. Setiap item yang Anda tambahkan ke posting atau halaman adalah satu blok.

Anda harus menambahkan blok untuk setiap paragraf, gambar, video, galeri, audio, daftar, dan lainnya. Gutenberg memiliki semua elemen untuk pembuatan konten umum dan lebih banyak lagi yang dapat ditambahkan dengan plugin WordPress.

Apakah editor blok WordPress baru lebih baik daripada editor klasik?

Editor blok WordPress baru menawarkan cara sederhana untuk menambahkan berbagai jenis konten ke postingan dan halaman Anda.

Misalnya, sebelumnya jika Anda ingin menambahkan tabel, maka Anda membutuhkan plugin tabel yang harus diinstall terpisah dari editor.

Dengan editor baru, Anda cukup memilih blok tabel, menentukan jumlah kolom dan baris, lalu sisipkan ke dalam konten.

Anda dapat memindahkan elemen konten ke atas dan ke bawah, mengeditnya sebagai blok tunggal, atau blok dengan konten banyak media.

Yang terpenting, editor blok WordPress yang baru mudah digunakan dan dipelajari.

Jadi, mari kita lihat cara menggunakan editor blok WordPress baru untuk membuat konten yang keren.

Menggunakan Gutenberg – Editor Blok WordPress Baru

Meskipun terlihat berbeda dibanding editor WordPress lama, editor dapat melakukan semua hal yang dapat Anda lakukan di editor klasik.

Mari kita mulai dengan membahas hal-hal dasar yang Anda lakukan di editor klasik, dan bagaimana melakukannya di editor blok.

Membuat Posting atau Halaman Blog Baru Menggunakan Editor Blok

Untuk membuat postingan atau halaman blog baru, caranya sama seperti biasa. Cukup klik menu Post » Tambah Baru di admin area WordPress.

Jika Anda ingin membuat halaman baru, buka menu Halaman » Tambah Baru.

Editor blok baru akan muncul secara otomatis.

Cara Menambahkan Blok di Gutenberg

Blok pertama dari setiap postingan atau halaman adalah judulnya.

Setelah menulis judul, untuk menulis isi konten, Anda dapat menggunakan mouse untuk bergerak ke bawah judul atau menekan tombol tab pada keyboard untuk turun dan mulai menulis.

Secara default, blok berikutnya adalah blok paragraf. Ini memungkinkan pengguna untuk langsung mulai menulis.

Namun, jika Anda ingin menambahkan sesuatu yang berbeda, misalnya gambar, Anda dapat mengklik tombol tambahkan blok baru di pojok kiri atas editor, atau di sisi kiri blok.

Mengklik tombol tersebut akan menampilkan menu tambahkan blok dengan kolom pencarian di atas dan blok yang umum digunakan di bawah.

Anda dapat mengklik tab untuk menelusuri kategori blok atau mengetikkan kata kunci untuk mencari blok dengan cepat.

Jika Anda tidak ingin menggunakan mouse untuk mengklik tombol, Anda dapat menggunakan pintasan keyboard dengan mengetik / untuk menelusuri dan menambahkan blok.

Bekerja dengan Blok di Editor Baru

Setiap blok dilengkapi dengan fitu sendiri yang muncul di atas blok. Tombol-tombol pada fitur akan berubah bergantung pada blok yang Anda edit.

Misalnya, pada gambar di atas, kita bekerja di blok paragraf yang menunjukkan tombol pemformatan dasar seperti: perataan teks, tebal, miring, sisipkan tautan, dan tombol coret.

Selain dari fitur, setiap blok juga dapat memiliki pengaturan blok sendiri yang akan muncul di kolom kanan layar edit Anda.

Anda dapat memindahkan blok ke atas dan ke bawah dengan drag dan drop atau dengan mengklik tombol atas dan bawah di samping setiap blok.

Menyimpan dan Menggunakan Kembali Blok di Gutenberg

Fitur terbaik dari blok adalah blok dapat disimpan dan digunakan kembali. Ini sangat membantu bagi blogger yang sering menggunakan blok yang sama untuk konten tertentu ke dalam artikel.

Cukup klik tombol menu yang terletak di sudut kanan setiap fitur blok. Dari menu, pilih ‘Add to Reusable Blocks’.

Anda akan diminta untuk memberikan nama blok yang dapat digunakan kembali ini. Masukkan nama untuk blok Anda, kemudian klik tombol simpan.

Editor blok akan menyimpan blok sebagai blok yang dapat digunakan kembali.

Sekarang setelah Anda menyimpan satu blok, mari kita lihat cara menambahkan blok yang dapat digunakan kembali ke postingan dan halaman WordPress lainnya di website Anda.

Silahkan edit postingan atau halaman di mana Anda ingin menambahkan blok yang dapat digunakan kembali.

Dari layar edit posting, klik tombol tambahkan blok.

Anda akan menemukan blok tersimpan di bawah tab ‘Reusable’.

Anda dapat mengarahkan mouse ke atas blok untuk melihat pratinjau cepat blok tersebut. Cukup klik blok untuk menyisipkkanya ke dalam postingan atau halaman Anda.

Semua blok yang dapat digunakan kembali disimpan di database WordPress Anda, dan Anda dapat mengelolanya dengan mengklik tautan ‘Manage all reusable blocks’.

Anda akan masuk ke halaman manajer blok. Dari sini, Anda dapat mengedit atau menghapus blok yang dapat digunakan kembali.

Anda juga dapat mengekspor blok yang dapat digunakan kembali dan menggunakannya di website WordPress lainnya.

Penerbitan dan Pilihan Pengelolaan di Editor Blok Gutenberg

Setiap postingan WordPress mengandung banyak metadata.

Ini termasuk informasi seperti tanggal penerbitan, kategori dan tag, gambar unggulan, dan banyak lagi.

Semua pilihan ini berada di kolom kanan pada layar editor.

Pilihan Plugin di Gutenberg

Plugin WordPress dapat memanfaatkan API editor blok untuk mengintegrasikan pengaturannya sendiri dalam layar edit.

Beberapa plugin populer memiliki bloknya sendiri.

Misalnya, plugin SEO Yoast. Yoast SEO memungkinkan Anda untuk mengedit pengaturan SEO di editor baru:

WooCommerce juga dilengkapi dengan blok widget yang dapat Anda tambahkan dengan mudah ke setiap postingan dan halaman WordPress.

Menambahkan Beberapa Blok Umum di Editor Baru

Pada dasarnya, editor baru dapat melakukan semua yang dilakukan editor klasik. Kelebihannya, Anda dapat membuat konten dengan lebih cepat dan tampilannya lebih keren.

  1. Menambahkan gambar di editor WordPress baru

Ada blok gambar yang siap digunakan di editor WordPress baru. Cukup tambahkan blok dan kemudian unggah file gambar atau pilih dari perpustakaan media.

Anda juga dapat langsung menarik dan melepas gambar dari komputer, editor secara otomatis akan membuat blok gambar.

Setelah menambahkan gambar, Anda akan dapat melihat pengaturan blok, di mana Anda dapat menambahkan metadata untuk gambar seperti teks alt, ukuran, dan menambahkan tautan ke gambar.

  1. Menambahkan Tautan di Editor blok baru

Editor blok hadir dengan beberapa blok tempat Anda dapat menambahkan teks. Yang paling umum digunakan adalah blok paragraf yang dilengkapi dengan tombol sisipkan tautan di fitur blok.

Semua blok teks lain juga menyertakan tombol tautan di fitur bloknya.

Anda juga dapat menyisipkan tautan menggunakan shortcut keyboard, yaitu Command + K untuk Mac dan CTRL + K di komputer Windows.

  1. Menambahkan galeri gambar di Gutenberg

Ingin membuat gallery dalam konten ? Gunakan blok gallery.

Blok galeri berfungsi seperti blok gambar. Anda dapat menambahkan lebih dari 1 gambar kemudian mengunggah atau memilih file gambar.

  1. Menambahkan shortcode pada postingan WordPress menggunakan Gutenberg

Semua shortcode Anda akan berfungsi sama seperti di editor klasik.  Silahkan sisipkan shortcide dalam blok paragraf, atau Anda dapat menggunakan blok shortcode.

Menjelajahi Beberapa Blok Konten Baru di Gutenberg

Editor Gutenberg selalu melakukan perbaikan dengan memperkenalkan beberapa blok baru.

Berikut adalah beberapa blok keren yang sangat membantu pengguna.

  1. Menambahkan gambar di samping beberapa teks di WordPress

Jika Anda menggunakan editor lama, maka Anda tidak akan dapat menempatkan gambar di sebelah teks. Dengan Gutenberg, Anda dapat melakukannya lewat blok Media & Teks.

Blok sederhana ini hadir dengan dua blok yang ditempatkan berdampingan, membantu Anda untuk menambahkan gambar dan menambahkan beberapa teks di sebelahnya.

  1. Menambahkan tombol di postingan dan halaman WordPress

Menambahkan tombol ke postingan atau halaman blog adalah hal yang tidak mungkin di di editor klasik. Anda harus menggunakan plugin, lalu membuat shortcode untuk tombol tersebut, atau Anda harus pindah ke mode HTML dan menulis kode.

Gutenberg hadir dengan blok tombol yang membantu membuat tombol ke postingan atau halaman apa pun.

Anda dapat menambahkan tautan untuk tombol, mengubah warna, dan memilih dari 3 gaya tombol.

  1. Menambahkan cover gambar di postingan blog dan landing page

Fitur keren lainnya yang mungkin ingin Anda coba adalah blok ‘Cover’, yang membantu Anda untuk menambahkan cover gambar ke postingan dan halaman.

Cover gambar adalah gambar yang lebih luas yang sering digunakan sebagai sampul untuk bagian baru di halaman atau awal cerita.

Cover terlihat cantik dan memungkinkan Anda membuat tata letak konten yang menarik.

Cukup tambahkan blok cover lalu unggah gambar yang ingin Anda gunakan. Anda dapat memilih warna overlay untuk sampul atau menjadikannya gambar latar belakang untuk menciptakan efek paralaks saat pengunjung menggulir ke bawah halaman.

  1. Membuat tabel di dalam artikel

Editor klasik tidak memiliki tombol untuk menambahkan tabel ke dalam postingan WordPress. Anda harus menggunakan plugin atau membuat tabel yang menulis CSS dan HTML khusus.

Editor Gutenberg baru hadir dengan blok Tabel default. Cukup tambahkan blok lalu pilih jumlah kolom dan baris yang ingin Anda sisipkan.

Sekarang Anda dapat melanjutkan menambahkan data ke baris tabel. Anda dapat menambahkan lebih banyak baris dan kolom jika perlu. Ada juga 2 pilihan gaya dasar yang tersedia.

  1. Membuat konten multi-kolom

Membuat konten multi-kolom adalah masalah lain yang tidak dapat ditangani oleh editor klasik.

Editor blok membantu Anda menambahkan blok kolom.

Blok kolom ini cukup fleksibel. Anda dapat menambahkan hingga 6 kolom berturut-turut, bahkan menyisipkan blok lain di dalam setiap kolom.

Tips Mempercepat Pekerjaan Menggunakan Gutenberg

Untuk pengguna yang mahir, berikut beberapa tips untuk membantu Anda bekerja lebih cepat dengan editor WordPress baru.

  1. Pindahkan toolbar blok ke atas.

Bila Anda memperhatikan pada setiap screenshoot, ada toolbar yang yang muncul dalam setiap blok.

Anda dapat memindahkan toolbar ini ke atas editor.

Cukup klik tombol 3 titik di sudut kanan atas layar dan kemudian pilih Top Toolbar.

  1. Gunakan shortcut keyboard

Gutenberg dilengkapi dengan shortcut praktis yang akan membuat alur kerja Anda menjadi lebih baik. Pilihan pertama yang bisa Anda gunakan adalah ‘/’.

Cukup ketik,’/’ dan kemudian ketik kat kunci blok, system akan menampilkan kepada Anda blok yang cocok yang dapat ditambahkan secara instan.

Untuk pintasan lainnya, klik menu 3 titik di pojok kanan atas layar Anda, lalu pilih ‘Keyboard Shortcuts’.

Ini akan memunculkan jendela popup dengan daftar semua shortcut keyboard yang dapat Anda gunakan. Daftar tersebut akan memiliki pintasan yang berbeda untuk pengguna Windows dan Mac.

  1. Seret dan lepas media untuk membuat blok media secara otomatis

Gutenberg memungkinkan Anda untuk menarik dan melepas file di mana saja di layar dan secara otomatis akan membuat blok untuk Anda.

Anda dapat menyeret 1 file gambar atau video, dan system akan membuat blok secara otomatis. Anda juga dapat menyeret lebih dari 1 file gambar untuk membuat blok galeri.

  1. Menambahkan YouTube, Twitter, Facebook, Vimeo, dan embed lainnya

Gutenberg memperkenalkan blok penyematan baru ke editor blok. Ada blok untuk semua jenis sematan termasuk YouTube, Twitter, Facebook, dan lainnya.

Anda juga bisa menyalin dan menempelkan URL sematan kapan saja, dan secara otomatis akan membuat blok untuk Anda.

Misalnya, jika Anda menambahkan URL video YouTube, system secara otomatis akan membuat blok penyematan YouTube dan menampilkan video.

Menambahkan Lebih Banyak Blok ke Editor Blok Gutenberg di WordPress

Editor blok baru di WordPress memungkinkan pengembang membuat blok mereka sendiri. Ada beberapa plugin WordPress yang menawarkan bundel blok untuk editor baru.

Berikut ini beberapa di antaranya:

  1. Advanced Gutenberg

Advanced Gutenberg hadir dengan beberapa blok untuk elemen konten populer seperti slider produk WooCommerce, testimonial, peta, penghitung, tab, akordeon, dan banyak lagi.

Ini juga memberi Anda kontrol lanjutan di mana pengguna dapat mengakses blok berdasarkan peran pengguna. Anda dapat membuat profil pengguna dan memilih blok mana yang dapat mereka tambahkan.

  1. Stackable – Blok Gutenberg

Stackable – Gutenberg Blocks adalah kumpulan blok Gutenberg yang dirancang dengan keren yang dapat digunakan di web Anda.

Ini termasuk blok untuk wadah, posting, kisi fitur, akordeon, kotak gambar, daftar ikon, call to action, dan banyak lagi.

  1. Editor Block

Block Editor adalah koleksi blok Gutenberg lainnya yang dapat Anda gunakan. Plugin ini dilengkapi dengan 12 blok tambahan seperti, call to action, tabel harga, testimoni, tim dll.

Tanya Jawab tentang Gutenberg – Editor Blok Baru di WordPress

Berikut adalah jawaban dari beberapa pertanyaan umum tentang Gutenberg.

  1. Apa yang terjadi pada posting dan halaman lama saya? Apakah saya masih dapat mengeditnya?

Posting dan halaman lama Anda sepenuhnya aman dan tidak terpengaruh oleh Gutenberg. Anda masih dapat mengeditnya, dan Gutenberg akan secara otomatis membukanya di blok yang berisi editor klasik.

Anda dapat mengeditnya di dalam editor lama, atau Anda dapat mengubah artikel lama menjadi blok dan menggunakan editor blok baru.

  1. Apakah saya tetap dapat menggunakan editor lama?

Ya, Anda tetap dapat menggunakan editor lama. Cukup instal dan aktifkan plugin Editor Klasik.

Setelah aktivasi, editor blok akan nonaktif, dan Anda akan dapat terus menggunakan editor klasik.

Harap diperhatikan bahwa Editor Klasik hanya mendapat dukungan sampai tahun 2022.

  1. Apa yang harus dilakukan jika editor baru tidak berfungsi dengan plugin atau tema yang saya gunakan?

Proyek Gutenberg sedang dalam pengembangan untuk waktu yang lama. Ini memberi waktu bagi pengembang plugin dan tema banyak waktu untuk menguji kompatibilitas kode mereka.

Namun, masih ada kemungkinan bahwa beberapa plugin dan tema tidak berfungsi dengan baik dengan editor baru.

Jika demikian, Anda dapat menginstal plugin editor klasik.

  1. Bagaimana cara mempelajari lebih banyak tip dan trik Gutenberg?

Mbah WP akan menerbitkan artikel baru dan memperbarui tutorial lama untuk membantu Anda menguasai editor blok baru.

Semoga tutorial Gutenberg ini membantu Anda mempelajari cara menggunakan editor blok Gutenberg WordPress yang baru.

Masih ingin belajar lebih jauh menggunakan gutenberg editor ? Baca artikel ini, 16 Tips Menguasai Editor Konten WordPress.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.