Gutenberg WordPress [Bagian 2]: Cara Menggunakan Editor Blok untuk Pemula

Setelah memahami apa itu Gutenberg WordPress dan fitur-fitur unggulannya, kini saatnya Anda mencoba menggunakan block editor Gutenberg untuk memaksimalkannya.

Dengan memahami fungsi masing-masing fitur, Anda akan lebih mudah dalam membuat postingan di WordPress. Selain itu, Anda juga dapat membuat tema WordPress dengan lebih rapi.

Lantas, bagaimana cara menggunakan editor blok Gutenberg WordPress sebagai pemula? Ikuti panduan ini dari awal hingga akhir. Anda juga dapat menggunakan daftar isi di bawah ini untuk melompat ke topik yang diinginkan.

Cara Menggunakan Editor Blok WordPress Gutenberg

Bagi Anda yang sudah terbiasa dengan Classic Editor, mungkin Anda berpikir bahwa editor versi Gutenberg lebih rumit. Namun, pada kenyataannya, fitur-fiturnya cukup mudah digunakan setelah Anda memahami fungsi dan cara menggunakannya.

Untuk mulai menggunakan Gutenberg, Anda perlu menginstal WordPress versi 5.0 atau lebih tinggi. Jika Anda sudah menggunakan versi tersebut, cukup buat Post atau Page baru seperti biasa melalui interface WP Admin.

Jika Anda sudah melakukannya, silakan ikuti instruksi di bawah ini!

1. Membuat Blok Teks

Blok Teks adalah fitur yang memungkinkan Anda mengedit konten teks di postingan atau halaman Anda. Ini mencakup elemen seperti Judul, Subjudul, Paragraf, dan Kutipan.

Secara default, Blok Teks sudah tersedia untuk membuat Judul dan Paragraf saat Anda pertama kali membuat postingan atau halaman. Namun, Anda dapat menambahkan dan/atau memodifikasinya sesuai kebutuhan.

Pada contoh berikut, kita telah menambahkan Judul dan Paragraf pertama. Sekarang, ikuti langkah-langkah berikut untuk memanfaatkan fitur Blok Teks Gutenberg:

1. Klik tanda [+] di pojok kiri atas.
   
2. Pada grup Blok Teks, Anda dapat memilih blok sesuai kebutuhan. Di sini, kami memberikan contoh memilih blok Heading untuk membuat subjudul.
   
3. Setelah blok yang dipilih muncul, Anda dapat mengisinya.
4. Untuk melakukan penyesuaian, silakan gunakan toolbar yang muncul di atas blok.
5. Selain itu, Anda juga dapat melakukan penyesuaian lebih lanjut melalui tombol Settings di bagian kanan atas. Kemudian lanjutkan dengan mengedit melalui panel pengaturan yang muncul.
   

Nah, jika Anda sudah memahami cara mengakses fitur text block dan cara melakukan pengaturan, pahami juga masing-masing fungsinya. Berikut ini adalah fitur-fitur Text Block beserta fungsinya:

Blok Teks di Gutenberg.

• Paragraf: Ini adalah blok dasar yang paling umum digunakan. Blok ini digunakan untuk menyisipkan teks biasa (paragraf) ke dalam konten Anda.
• Judul: Blok ini digunakan untuk menyisipkan judul atau subjudul ke dalam konten Anda. Anda dapat memilih dari enam level (H1-H6), yang dapat membantu struktur dan pengoptimalan SEO konten Anda.
• Daftar: Blok ini memungkinkan Anda untuk membuat daftar berurutan (bernomor) atau daftar tidak berurutan (berpoin).
• Kutipan: Blok ini digunakan untuk menyisipkan kutipan ke dalam konten Anda, memungkinkan Anda memformat teks secara berbeda untuk menyoroti kutipan.
• Classic: Blok ini menyediakan alat pengeditan WordPress klasik yang dapat membuat Anda merasa lebih akrab jika Anda terbiasa dengan editor WordPress sebelumnya atau Editor Klasik.
• Kode: Blok ini digunakan untuk menampilkan cuplikan kode program dalam format teks satu spasi, sehingga dapat mempertahankan format dan spasi aslinya.
• Preformat (preformatted): Blok ini memungkinkan Anda untuk menampilkan teks dengan spasi dan baris yang dipertahankan persis seperti yang Anda ketik. Hal ini berguna untuk menulis teks dengan format khusus.
• Kutipan (Pullquote): Blok ini mirip dengan blok Kutipan tetapi biasanya lebih besar dan lebih menonjol. Blok ini dapat digunakan untuk menyorot kutipan atau bagian penting dari teks Anda.
• Tabel: Blok ini memungkinkan Anda untuk membuat tabel di dalam konten Anda. Anda dapat menyesuaikan jumlah baris dan kolom serta memasukkan teks di setiap sel tabel.
• Ayat: Blok ini digunakan untuk menyisipkan puisi, lagu, atau jenis teks berbasis baris apa pun yang memerlukan pengaturan spasi dan tabulasi khusus.

2. Membuat Blok Media

Media Block atau Blok Media adalah sekumpulan fitur untuk menambahkan dan mengelola konten berbasis media di WordPress, seperti gambar, video, dan audio. Cara mengakses fitur ini sama seperti sebelumnya. Berikut langkah-langkahnya:

1. Klik [+] di bagian kiri atas.
2. Gulir ke bawah ke grup Media block, dan Anda dapat memilih block yang diinginkan. Di sini, kami memberikan contoh memilih Image untuk menambahkan gambar.
   
3. Setelah blok yang dipilih muncul, Anda dapat menyisipkan media yang ingin Anda gunakan.
   Untuk melakukan penyesuaian, gunakan toolbar yang muncul di atas blok.
   
4. Jika Anda ingin melakukan penyesuaian lebih lanjut, Anda juga dapat mengklik tombol Setting di bagian kanan atas. Kemudian, silakan edit blok yang sesuai.

Setelah Anda dapat mengakses fitur Media Block di Gutenberg, penting untuk memahami fungsi masing-masing fiturnya. Berikut ini penjelasan lengkapnya:

Fitur-fitur Media Block di Gutenberg.

• Gambar: Blok ini memungkinkan Anda untuk menambahkan gambar ke konten Anda. Anda dapat memilih gambar dari pustaka media, mengunggahnya dari perangkat Anda, atau menggunakan URL.
• Galeri: Blok ini digunakan untuk menampilkan beberapa gambar dalam format galeri. Anda dapat menyesuaikan jumlah kolom dan ukuran gambar.
• Audio: Blok ini memungkinkan Anda menambahkan file audio ke konten Anda. Ini dapat digunakan untuk menampilkan podcast, musik, atau file audio lainnya.
• Cover: Blok ini memungkinkan Anda menambahkan gambar latar belakang atau video dengan teks hamparan. Blok ini sering digunakan untuk membuat header atau pengantar yang menarik pada halaman atau postingan.
• File: Blok ini memungkinkan Anda menambahkan tautan ke file yang dapat diunduh. Pengguna dapat mengeklik tautan untuk mengunduh file.
• Media & Teks: Blok ini menggabungkan teks dan media dalam satu blok. Biasanya, media (gambar, video) ditempatkan di samping teks, sehingga membantu menciptakan tata letak yang lebih dinamis.
• Video: Blok ini memungkinkan Anda menambahkan video ke konten Anda. Anda dapat mengunggah video secara langsung atau menambahkan tautan ke video dari platform eksternal seperti YouTube.

3. Membuat Blok Desain

Selanjutnya, Anda juga dapat memanfaatkan blok desain untuk mendesain tampilan postingan atau halaman Anda, seperti membuat tombol, kolom, dan lainnya. Berikut ini langkah-langkahnya:

1. Klik [+] di bagian kiri atas.
2. Gulir ke bawah ke grup blok Desain, dan Anda dapat memilih blok yang diinginkan. Di sini, kami memberikan contoh memilih blok Button untuk membuat tombol.
   
3. Setelah blok yang dipilih muncul, Anda dapat menyisipkan media yang ingin Anda gunakan.
4. Untuk melakukan penyesuaian, gunakan toolbar yang muncul di atas blok.
   
5. Jika Anda ingin melakukan penyesuaian lebih lanjut, Anda juga dapat mengklik tombol Setting di bagian kanan atas. Kemudian, silakan edit blok yang sesuai.
   

Setelah Anda memahami cara mengakses fitur Design Block dan cara melakukan penyesuaian, maka, penting untuk memahami masing-masing fungsinya. Berikut ini adalah berbagai fitur Design Block beserta fungsinya masing-masing:

Blok desain di Gutenberg.

• Tombol (button): Blok ini digunakan untuk menambahkan tombol ke konten Anda. Anda dapat menyesuaikan teks, warna, dan tautan tombol.
• Kolom: Blok ini memungkinkan Anda untuk membagi konten Anda ke dalam beberapa kolom. Hal ini berguna untuk membuat tata letak yang lebih kompleks dan terorganisir.
• Grup: Blok ini digunakan untuk mengelompokkan beberapa blok menjadi satu. Ini sangat membantu ketika Anda ingin menerapkan gaya atau latar belakang yang sama ke beberapa blok.
• Baris: Ini biasanya merupakan fitur plugin Gutenberg tertentu, yang memungkinkan pengguna untuk membuat baris horizontal blok dalam kolom.
• Tumpukan (stack): Meskipun tidak standar dalam editor Gutenberg pada batas waktu pengetahuan saya (September 2021), ‘Stack’ biasanya mengacu pada penumpukan blok di atas satu sama lain dalam pengaturan vertikal.
• Lainnya (more): Blok ini memungkinkan Anda untuk membatasi jumlah konten yang ditampilkan pada halaman blog atau arsip. Pengunjung dapat mengeklik “Baca Selengkapnya” untuk melihat seluruh konten.
• Hentian Halaman (Page Break): Blok ini digunakan untuk membagi konten Anda menjadi beberapa halaman. Hal ini berguna untuk membuat artikel multi-halaman atau memecah konten yang panjang menjadi beberapa halaman.
• Pemisah: Blok ini memungkinkan Anda untuk menambahkan garis pemisah horizontal untuk memisahkan bagian-bagian konten Anda.
• Pengatur jarak (spacer): Blok ini memungkinkan Anda menambahkan ruang kosong vertikal di antara blok, yang membantu menyesuaikan tata letak dan jarak antara elemen konten.

4. Menggunakan Blok Widget

Widget Block adalah fitur untuk menambahkan widget atau aplikasi eksternal ke dalam website Anda. Proses penambahan blok Widget mirip dengan penambahan blok lainnya. Berikut adalah langkah-langkahnya:

1. Klik [+] di bagian kiri atas.
2. Gulir ke bawah ke grup blok Widget, dan Anda dapat memilih blok yang diinginkan. Di sini, kami memberikan contoh penambahan Search widget untuk membuat kolom pencarian.
   
3. Setelah blok yang dipilih muncul, Anda dapat mengisi blok tersebut.
4. Untuk melakukan penyesuaian, gunakan toolbar yang muncul di atas blok.
   
5. Jika Anda ingin melakukan penyesuaian lebih lanjut, Anda juga dapat mengklik tombol Settings di pojok kanan atas. Selanjutnya, silakan edit blok tersebut.
   

Ada lebih dari 10 fitur blok Widget yang dapat Anda gunakan. Berikut adalah daftar fitur Widget Block beserta fungsinya:

Blok widget di Gutenberg.

• Arsip (Archives): Blok ini menampilkan daftar postingan bulanan Anda, sehingga pengunjung dapat melihat konten lama berdasarkan tanggal publikasi.
• Kalender: Blok ini menampilkan kalender dengan tautan ke postingan Anda berdasarkan tanggal publikasi.
• Daftar Kategori: Blok ini menampilkan daftar kategori postingan Anda. Pengunjung dapat mengeklik salah satu kategori untuk melihat semua postingan dalam kategori tersebut.
• HTML Khusus: Blok ini memungkinkan Anda untuk menulis dan menyisipkan kode HTML khusus ke dalam konten Anda.
• Komentar Terbaru: Blok ini menampilkan komentar terbaru dari seluruh situs Anda.
• Postingan Terbaru: Blok ini menampilkan daftar postingan terbaru Anda.
• Daftar Halaman: Blok ini menampilkan daftar semua halaman di situs Anda.
• RSS: Blok ini memungkinkan Anda menampilkan entri dari umpan RSS (RDF Site Summary).
• Pencarian (search): Blok ini menambahkan kotak pencarian ke situs Anda, sehingga pengunjung dapat mencari konten di situs Anda.
• Kode Pendek (shortcode): Blok ini memungkinkan Anda untuk menambahkan kode pendek, yang merupakan potongan kode khusus yang memungkinkan Anda untuk menampilkan konten tertentu, seperti formulir atau galeri.
• Ikon Media Sosial: Blok ini memungkinkan Anda untuk menambahkan ikon yang terhubung ke profil media sosial Anda.
• Tag Cloud: Blok ini menampilkan tag cloud, atau daftar tag yang digunakan di situs Anda. Ukuran tag di awan menunjukkan seberapa sering tag tersebut digunakan.

5. Membuat Embed

Terakhir, ada fitur untuk membuat embed atau menambahkan konten dari platform lain untuk ditampilkan di website Anda. Misalnya, konten dari YouTube, Twitter, Facebook, dan lainnya. Berikut langkah-langkahnya:

1. Klik [+] di bagian kiri atas.
2. Gulir ke bawah ke grup blok Embeds, dan Anda dapat memilih blok yang diinginkan. Di sini, kami memberikan contoh memilih embed Twitter untuk menyisipkan konten tertentu dari Twitter ke dalam situs web WordPress Anda.
   
3. Setelah blok yang dipilih muncul, Anda dapat memasukkan tautan media yang ingin disematkan.
   menyematkan blok di Gutenberg
4. Untuk melakukan penyesuaian, gunakan toolbar yang muncul di atas blok.
   
5. Jika Anda ingin melakukan penyesuaian lebih lanjut, Anda juga dapat mengklik tombol Setting di pojok kanan atas. Kemudian, silakan edit blok tersebut.

Berikut ini adalah embeds yang dapat Anda buat di WordPress, yang dapat Anda gunakan dengan mudah berkat Gutenberg.

• Sematkan
• Twitter
• YouTube
• WordPress
• SoundCloud
• Spotify
• Flickr
• Vimeo
• Animoto
• Cloudup
• Crowdsignal
• Dailymotion
• Imgur
• Issuu
• Kickstarter
• Mixcloud
• Pemeran Saku
• Reddit
• ReverbNation
• Tayangan layar
• Scribd
• Berbagi Slide
• SmugMug
• Dek Pembicara
• TikTok
• TED
• Tumblr
• VideoPress
• WordPress.tv
• Amazon Kindle
• Pinterest
• Wolfram

Apakah Anda Siap Menggunakan Block Editor?

Demikianlah penjelasan mengenai cara menggunakan block editor Gutenberg, mulai dari menggunakan Text Block, Media Block, Design Block, hingga Embeds Block.

Memang, untuk memulai membuat website sendiri menggunakan Gutenberg WordPress membutuhkan waktu untuk mempelajarinya terlebih dahulu.

Anda dapat mempertimbangkan Team Tonjoo, pengembang website profesional dengan pengalaman lebih dari 10 tahun dalam membangun website korporat hingga startup, jika Anda ingin lebih fokus untuk mengembangkan bisnis Anda.

Mari bicarakan konsep website impian Anda melalui Kontak Tonjoo, dan kami akan membantu mewujudkannya!

---

Baca artikel serupa oleh Moch. Nasikhun Amin di blog Tonjoo mengenai WordPress, WooCommerce, plugin, dan topik-topik pengembangan web lainnya.

---

 

Updated on January 22, 2024 by Hanif Mufid