Panduan Lengkap untuk Editor Blok WordPress

Jika saat ini Anda menjalankan situs web WordPress atau sedang mempertimbangkan untuk membuatnya, Anda mungkin pernah mendengar tentang editor blok. Alat canggih ini dibangun di inti WordPress, memberi pemilik dan pengembang situs web kemampuan untuk membangun seluruh situs mereka dari bawah ke atas tanpa perlu menggunakan kode.

Tapi masih banyak lagi yang bisa diungkap tentang editor blok! Mari kita lihat apa itu, pro dan kontra, dan bagaimana cara menggunakannya.

Apa itu editor blok?

Editor blok adalah editor situs web revolusioner yang dirilis sebagai bagian dari WordPress Versi 5.0, menggantikan Editor Klasik. Ini memungkinkan pengguna pemula dan lanjutan untuk membuat halaman, template, dan seluruh situs web dengan menyeret dan melepaskan elemen ke tempatnya — tidak perlu kode!

Setiap elemen disebut blok, dan dapat berupa apa saja mulai dari paragraf atau gambar hingga kolom, tabel harga, umpan media sosial, dan banyak lagi. Untuk mendesain halaman, posting, atau bagian situs web lainnya, pengguna hanya perlu menyeret dan melepaskan blok ke tempatnya, lalu mengatur gaya masing-masing menggunakan panel pengaturan langsung.

Ini lebih dari sekadar editor halaman standar. Pemilik dan pengembang situs web dapat menggunakan blok untuk menyesuaikan header, footer, sidebar, halaman arsip, halaman checkout dan keranjang, dan banyak lagi. Itu benar-benar membuat desain situs web dapat diakses oleh semua orang.

Sebelum kita menyelami, mari kita definisikan beberapa istilah:

• Blok . Elemen individual yang dapat ditambahkan ke konten. Misalnya gambar, paragraf, judul, video, kolom, dan lainnya.
• Pola blok . Grup blok yang dipilih sebelumnya yang dapat Anda gunakan untuk membuat seluruh bagian konten. Misalnya spanduk, desain posting, tata letak kolom, dan lainnya.
• Templat . Pada dasarnya, kerangka kerja yang menentukan desain dan tata letak jenis konten tertentu. Posting, produk, dan halaman kategori adalah contoh konten yang memiliki template sendiri.
• Bagian templat . Bagian dari situs Anda yang muncul di sebagian besar atau semua halaman Anda. Misalnya header, footer, dan komentar.
• Editor Situs . Alat WordPress yang menghadirkan fungsionalitas blok ke area tambahan situs Anda, termasuk templat dan bagian templat. Anda harus menginstal tema blok untuk menggunakan Editor Situs.

Pro dan kontra dari editor blok

Seperti semuanya, editor blok memiliki kelebihan dan kekurangan. Mari lihat.

Pro dari editor blok

1. Ini membantu Anda menjadi lebih cepat dan lebih efisien

Editor blok sangat kuat, dan memiliki banyak fitur bawaan yang dirancang khusus untuk meningkatkan alur kerja Anda. Berikut adalah beberapa fitur editor blok yang membuat perancangan, penerbitan, dan pengeditan jauh lebih cepat:

• Blok yang dapat digunakan kembali . Anda dapat menyimpan satu blok dan menggunakannya berulang kali di situs web Anda. Kemudian, saat Anda mengedit blok tersebut, itu akan diperbarui di semua instance. Misalnya, Anda dapat membuat ajakan bertindak yang dapat Anda sisipkan di semua halaman arahan saat Anda membuatnya. Dan jika Anda perlu mengubah tautan tombol, itu akan diperbarui di semua halaman.
• Pola blok . Pola blok adalah grup blok yang telah ditentukan yang tersedia secara default di WordPress atau melalui plugin pihak ketiga. Mereka memungkinkan Anda untuk dengan cepat menyisipkan seluruh bagian halaman sekaligus, seperti tajuk dan tata letak multi-kolom. Anda bisa menambahkan ini ke halaman, menyesuaikan warnanya, dan Anda siap melakukannya!
• Pintasan keyboard . Ini memungkinkan Anda untuk tetap menggunakan keyboard selama Anda menambahkan dan mengedit konten di situs Anda. Menavigasi melalui berbagai blok, menyimpan perubahan, menyisipkan blok, gaya teks, dan lainnya.
• Pembuatan posting blog yang mudah . Anda dapat menarik dan melepas konten langsung ke editor blok, dan itu akan secara otomatis mengubahnya menjadi blok yang sesuai. Ini dapat menghemat banyak waktu! Misalnya, jika Anda menulis posting di Google Docs, Anda dapat menempelkannya ke WordPress secara keseluruhan, dan itu akan menyimpan header, gambar, tautan, dan lainnya. Tidak perlu menambahkan grafik dan elemen lain satu per satu!
• Tetapkan gaya secara global . Tetapkan warna, font, spasi, dan spesifikasi desain lainnya yang berlaku untuk blok di seluruh situs Anda (jika menggunakan tema blok). Ini membuat Anda tidak perlu mengedit setiap halaman satu per satu dan mempermudah anggota tim atau klien yang menambahkan konten ke situs Anda.

2. Memungkinkan pemula untuk membuat situs yang rumit dan indah tanpa menulis kode

Antarmuka editor blok berbasis blok membuatnya dapat diakses untuk semua jenis pengguna, termasuk pemula yang lengkap. Seperti apa pun, ada kurva belajar kecil, tetapi Anda dapat memanfaatkan dokumentasi dan tutorial WordPress yang bermanfaat untuk memahami berbagai hal.

Kemudian Anda dapat menggunakan editor blok untuk menyeret elemen ke tempatnya, membuat pilihan desain seperti warna dan spasi dengan panel pengaturan sederhana. Tidak perlu mengedit kode atau bahkan menggunakan kode pendek yang dapat dengan cepat menjadi rumit.

Dan Anda dapat melangkah lebih jauh, menerapkan konsep yang sama ke template header, footer, sidebar, dan halaman Anda. Ini berarti bahwa pemula sekalipun dapat menyesuaikan sepenuhnya semua aspek situs mereka — halaman checkout, halaman pencarian, halaman arsip, dan banyak lagi.

Pola blok adalah fitur hebat lainnya untuk pemula. Ini adalah sekumpulan blok yang dapat Anda tambahkan dengan cepat untuk membuat seluruh bagian halaman, seperti tabel harga, bagian pahlawan, dan galeri gambar.

3. Ini memungkinkan penyesuaian situs penuh yang sebenarnya

Tidak seperti banyak solusi lainnya, editor blok WordPress benar-benar memungkinkan Anda menyesuaikan setiap aspek situs Anda menggunakan fitur-fiturnya. Melampaui desain halaman dan posting! Berikut adalah beberapa elemen situs yang dapat Anda buat dengan blok:

• Header
• Footer
• Halaman hasil pencarian
• Arsip (seperti kategori pos dan produk)
• 404 halaman
• Templat posting blog
• Templat produk
• Bagian komentar

Ini adalah peluang besar untuk membangun situs web yang benar-benar menonjol dengan desain dan fungsionalitas yang memenuhi kebutuhan spesifik Anda. Misalnya, Anda dapat memodifikasi template produk untuk menyertakan video tindakan produk Anda, bagan ukuran, atau pemberitahuan alergen yang muncul di semua item di toko Anda. Atau Anda dapat menambahkan ajakan bertindak yang secara otomatis ditambahkan ke bagian bawah semua postingan blog Anda. Kemungkinannya tidak terbatas!

4. Meningkatkan kinerja situs web

Menggunakan editor blok juga dapat meningkatkan kecepatan dan kinerja situs Anda. Tidak hanya memungkinkan Anda melewati pembuat halaman yang berat, ini juga mengurangi jumlah plugin yang perlu Anda instal untuk mengakses fungsionalitas tertentu. Misalnya, alih-alih memasang plugin untuk galeri gambar, Anda cukup memasukkan blok Galeri ke halaman Anda dan menatanya sesuai keinginan Anda.

Plus, keluaran kode dari editor blok lebih ringan dan lebih bersih daripada plugin pembuat halaman. Artinya, saat desain halaman yang sama dibuat dengan editor blok alih-alih pembuat halaman, halaman seharusnya memuat lebih cepat secara default.

5. Ada banyak integrasi dengan plugin pihak ketiga

Karena editor blok disertakan dengan WordPress secara default, ini berfungsi dengan tema dan plugin populer. Ini juga berarti bahwa pengembang pihak ketiga biasanya mengadaptasi solusi mereka untuk bekerja dengan editor blok.

Ada banyak plugin hebat yang menambahkan blok dan pola blok ke perpustakaan Anda. Misalnya, Jetpack menyertakan blok untuk formulir, pembayaran, umpan media sosial, tangkapan email, dan lainnya.

WooCommerce menambahkan blok untuk menampilkan produk, ulasan, filter, dan apa saja yang Anda perlukan untuk membuat toko ecommerce yang efektif.

6. Ini terus meningkat

Yang terbaik belum datang! Ada tim pengembang dan sukarelawan yang terus bekerja untuk merilis fitur dan peningkatan baru, juga memastikan bahwa WordPress aman dan dapat diakses.

Tetap up to date pada terbaru di sini.

Kontra dari editor blok

Tentu saja, editor blok mungkin bukan solusi yang tepat untuk setiap situs web. Berikut ini beberapa kerugiannya:

1. Anda mungkin perlu mengganti tema atau membangun kembali sebagian dari situs Anda yang sudah ada

Banyak pembuat halaman dan tema mendukung editor blok dan memudahkan Anda untuk beralih ke editor blok. Namun, itu tidak selalu terjadi. Anda mungkin perlu membangun kembali sebagian dari situs Anda untuk pindah ke sistem berbasis blok sepenuhnya.

Jika Anda ingin memanfaatkan Editor Situs, Anda juga harus menggunakan tema blok. Artinya, jika saat ini Anda tidak menggunakan tema blok, Anda harus beralih ke tema baru. Bergantung pada situasi Anda, ini membutuhkan sedikit usaha. Namun, dalam sebagian besar kasus, itu sangat berharga!

2. Mungkin ada kurva belajar

Setiap teknologi baru hadir dengan sedikit kurva pembelajaran, terlepas dari tingkat pengalaman Anda. Jadi, jika Anda berniat membangun situs baru dengan editor blok atau mengonversi situs Anda yang sudah ada menjadi blok, Anda perlu menjadwalkan waktu untuk mempelajari sistemnya.

Untungnya, ada banyak sumber daya bagus yang tersedia untuk membantu, termasuk:

• Pelajari WordPress: Penuh dengan tutorial dan kursus yang memandu Anda melalui semua detail editor blok
• Dokumentasi editor blok: Panduan dukungan dengan instruksi dan gambar
• Taman bermain WordPress: Situs kosong dan gratis tempat Anda dapat bermain-main dengan editor blok dan memahami berbagai hal sebelum membuat perubahan besar pada situs langsung Anda

Cara mengakses dan menggunakan editor blok

Sekarang setelah Anda memahami lebih banyak tentang editor blok, saatnya untuk masuk dan mempelajari cara menggunakannya.

Antarmuka editor blok

Mari kita mulai dengan memperkenalkan komponen editor blok. Inilah yang akan Anda lihat saat membuat halaman, postingan, atau elemen situs lainnya. Kami telah mengidentifikasi beberapa komponen utama dalam gambar berikut, yang akan segera kami bahas:

Berikut adalah rincian elemen-elemen tersebut:

• Block Inserter : Di sinilah Anda akan memilih dan menambahkan blok. Anda dapat melihat daftar blok dan pola yang tersedia, diatur menurut jenis blok, dan menyeretnya langsung dari panel ini. Buka dan tutup Block Inserter menggunakan tombol di kiri atas.
• Blok : Tab ini menampilkan semua blok yang tersedia.
• Pola : Tab ini menampilkan semua pola blok yang tersedia.
• Blokir bilah pencarian : Gunakan ini untuk mencari blok atau pola tertentu.
• Alat : Tombol ini memberikan interaksi berbeda untuk memilih, menavigasi, dan mengedit blok.
• Undo/Redo : Membatalkan tindakan yang dilakukan di editor blok, atau mengulangi tindakan yang sama.
• Detail : Ini memberikan informasi tentang halaman atau postingan, seperti jumlah kata dan karakter, waktu membaca, dan jumlah paragraf, judul, dan blok.
• Tampilan Daftar : Alat yang membantu Anda menavigasi blok dan konten. Lihat semua blok di halaman, pindahkan, dan bolak-balik dengan cepat dan mudah.
• Panel pengaturan : Akses pengaturan untuk halaman/pos atau setiap blok individu. Di sinilah Anda akan membuat perubahan pada elemen desain seperti spasi, warna, dan lainnya.
• Opsi tambahan : Ubah jenis tampilan Anda, alihkan ke editor kode untuk mengedit dalam HTML, dan sesuaikan aspek lain dari pengalaman editor blok Anda.
• Tambahkan blok baru: Klik ikon ini untuk menambahkan blok baru berdasarkan lokasi ikon di halaman.

Menggunakan blok

Sekarang setelah Anda mengetahui sedikit tentang letak elemen penting dalam editor blok, kami akan menunjukkan cara menambahkan dan mengedit blok. Dalam tutorial ini, kita akan membuat posting blog. Konsepnya akan serupa apakah Anda sedang mengerjakan posting, halaman, atau elemen lain dari situs Anda.

Dalam hal ini, Anda akan pergi ke Posts → Add New di dashboard WordPress Anda. Ini secara otomatis akan membuka editor blok untuk posting baru. Mulailah dengan menambahkan judul di bagian atas postingan.

Kemudian, klik ikon + biru di pojok kiri atas untuk membuka Block Inserter. Di sini, Anda akan melihat daftar blok yang tersedia. Ini dikategorikan berdasarkan jenis, tetapi Anda juga dapat menggunakan bilah pencarian untuk mencari yang spesifik. Jika Anda mengarahkan kursor ke sebuah blok, itu akan memberikan lebih banyak informasi dan menampilkan pratinjau seperti apa tampilan blok itu saat beraksi.

Mari kita mulai dengan menambahkan blok Paragraph. Anda dapat menemukannya di Block Inserter dan menyeretnya ke area konten utama di sebelah kanan atau mulai mengetik di tempat yang tertulis, "Ketik / untuk memilih blok."

Saat Anda menempatkan kursor di dalam teks, menu baru akan muncul di atasnya dengan opsi gaya. Dari kiri ke kanan, ini adalah:

• Paragraf: Klik ini untuk mengonversi blok menjadi jenis blok yang berbeda. Misalnya, Anda bisa mengubahnya menjadi heading.
• Seret: Pindahkan blok ke mana pun Anda suka sehubungan dengan blok lain di halaman.
• Pindah ke atas/bawah: Pindahkan blok ke atas atau ke bawah satu spasi di halaman.
• Ratakan: Meratakan teks ke kiri, tengah, atau kanan.
• Tebal: Tebalkan teks apa pun yang Anda pilih dalam paragraf.
• Miring: Memiringkan teks apa pun yang Anda pilih dalam paragraf.
• Tautan: Ubah teks apa pun yang Anda pilih menjadi tautan.
• Lainnya: Lihat opsi tambahan untuk menyorot atau mencoret teks, mengubah angka menjadi subskrip, dan lainnya.
• Opsi: Akses kemampuan tambahan, seperti membuat blok dapat digunakan kembali, menggandakannya, menguncinya, dan lainnya.

Buat penyesuaian apa pun yang Anda inginkan pada teks di dalam paragraf. Kemudian, pilih di mana saja di dalam blok dan klik ikon di kanan atas. Ini akan membuka panel Pengaturan.

Anda akan melihat tab untuk Posting dan Blokir di bagian atas panel ini. Untuk saat ini, mari fokus pada tab Blokir. Panel ini menampilkan opsi yang khusus untuk blok yang telah Anda pilih — dalam hal ini, blok Paragraf.

Di bagian Warna, Anda dapat mengatur warna untuk teks, latar belakang, dan tautan Anda, hanya untuk paragraf itu. Anda bahkan dapat membuat gradien sendiri jika mau. Misalnya, Anda dapat membuat paragraf menonjol dari postingan lainnya dengan menggunakan latar belakang hijau tua dan teks putih.

Di bagian Tipografi, Anda dapat mengatur opsi font. Meskipun ukuran muncul secara default, Anda dapat mengeklik tiga titik vertikal untuk membuka lebih banyak pilihan, seperti kumpulan font dan spasi huruf. Dalam contoh ini, kami memutuskan untuk mengubah teks menjadi font serif dan menambahkan lebih banyak spasi di antara baris teks (disebut tinggi garis).

Di bawah Dimensi, Anda dapat menyesuaikan padding dan margin di sekitar teks, menambah atau mengurangi ruang sesuai kebutuhan.

Dan di bawah Lanjutan, Anda dapat menambahkan jangkar HTML, sehingga Anda dapat menautkan ke bagian tersebut di titik lain dalam pos, atau menyetel kelas CSS untuk tujuan penataan.

Sekarang blok paragraf kita terlihat seperti yang kita inginkan, mari tambahkan dua kolom ke postingan kita — satu dengan gambar dan satu lagi dengan paragraf kedua. Tambahkan blok Kolom ke halaman Anda, lalu pilih tata letak kolom yang Anda inginkan. Kami akan menggunakan 33/66 kali ini, yang merupakan pembagian ⅓, ⅔.

Anda akan melihat bahwa Anda dapat memilih setiap kolom satu per satu untuk memberi gaya dan menambahkan blok.

Di kolom kiri, klik ikon + dan pilih blok Gambar.

Di sini, Anda dapat mengunggah gambar dari perangkat Anda, memilih gambar yang sudah ada dari Perpustakaan Media, atau memasukkan gambar dari URL. Kami memutuskan untuk menambahkan gambar kue black forest dari Perpustakaan Media. Saat Anda mengklik blok Gambar, Anda akan melihat bilah Pengaturan baru muncul, seperti pada blok Paragraf, tetapi dengan opsi yang sedikit berbeda. Misalnya, Anda akan mendapatkan pilihan untuk memangkas gambar, menambahkan teks di atasnya, menerapkan filter, dan lainnya.

Jika Anda mengklik ikon di kanan atas, Anda akan melihat panel pengaturan untuk blok Gambar. Di sana, Anda dapat menambahkan teks alt, membuat sudut membulat, mengubah ukuran gambar, menambahkan batas, dan lainnya. Di sini, kita membulatkan sudut gambar dengan radius 22 px.

Kami kemudian menambahkan blok Paragraf lain ke kanan, kolom ⅔. Perhatikan bahwa Anda dapat memilih masing-masing kolom untuk diedit atau seluruh blok dua kolom. Saat kedua kolom dipilih, keduanya akan diberi garis luar berwarna biru.

Ini memungkinkan Anda membuat keputusan untuk kedua kolom sekaligus menggunakan bilah alat yang muncul. Di sini, kami mengatur perataan vertikal ke "Align middle" sehingga teks dan gambar sejajar.

Dan itu saja! Anda dapat terus membuat pos sebanyak yang Anda suka, memilih dari beragam blok yang tersedia. Masing-masing akan hadir dengan pengaturan dan opsinya sendiri — jangan ragu untuk bermain-main dengan ini sampai Anda mendapatkan tampilan yang tepat seperti yang Anda inginkan.

Sebelum memublikasikan postingan, Anda mungkin ingin mempratinjaunya untuk melihat tampilannya di bagian depan situs Anda. Klik tombol Pratinjau di kanan atas, diikuti dengan Pratinjau di tab baru. Ini akan memberi Anda ide yang lebih akurat tentang tampilan kiriman saat Anda menerbitkannya.

Jika sudah siap, Anda sekarang dapat mengeklik Terbitkan untuk menayangkan postingan!

Menggunakan pola blok

Sebagai pengingat, pola adalah segmen halaman yang dibuat sebelumnya yang membuat pembuatan postingan atau halaman menjadi cepat dan mudah. Mari kembali ke pos yang kita buat di bagian sebelumnya dan jelajahi cara menambahkan pola.

Anda akan mengklik ikon + biru di kiri atas lagi untuk membuka Block Inserter. Tapi kali ini, klik pada tab Patterns . Secara default, ini akan membuka daftar pola unggulan.

Anda dapat menggunakan dropdown yang saat ini diatur ke Unggulan, dan memilih kategori pola lainnya, seperti Tombol, Kolom, dan WooCommerce. Atau Anda dapat menggunakan bilah Pencarian di bagian atas untuk mencari pola tertentu.

Dalam hal ini, mari pilih Galeri dan seret pola berjudul gambar Offset dengan deskripsi ke dalam postingan kita. Ini akan menambahkan fitur gambar yang rapi ke konten.

Anda akan melihat bahwa polanya terdiri dari beberapa blok: dua blok Image, dua blok Paragraph, dan satu blok Spacer. Sama seperti yang kita lakukan sebelumnya, Anda dapat mengedit setiap blok satu per satu atau mengedit polanya secara keseluruhan. Anda dapat mengedit semua detail pola untuk menjadikannya milik Anda sendiri, atau Anda dapat mengganti gambar dan teks dengan konten Anda sendiri.

Mulailah dengan memilih salah satu gambar. Kemudian klik Ganti. Di sini, Anda dapat memilih antara mengunggah gambar atau memilih dari Perpustakaan Media. Setelah Anda menambahkan gambar Anda, lakukan hal yang sama dengan placeholder lainnya.

Kemudian, klik salah satu blok Paragraf dan ganti teks dengan milik Anda. Anda dapat membuat perubahan sesuai keinginan, seperti yang Anda lakukan dengan blok Paragraf sebelumnya.

Dan itu saja! Anda sekarang memiliki bagian halaman yang indah yang hanya membutuhkan beberapa menit untuk Anda buat.

Menggunakan template dan bagian template

Sekali lagi, template adalah kerangka kerja yang menentukan tata letak dan desain untuk jenis konten seperti posting, halaman produk, dan arsip. Bagian template dapat digunakan kembali, elemen global seperti header dan footer. Anda dapat mengedit keduanya menggunakan Editor Situs.

Untuk menggunakan Editor Situs, Anda harus mengaktifkan tema blok di situs Anda. Di dasbor WordPress Anda, buka Penampilan → Editor. Ini akan membuka Editor Situs. Di sisi kiri, Anda akan melihat bilah sisi dengan opsi untuk Templat dan Bagian Templat. Klik Template. Di sini, Anda akan melihat daftar semua template di situs Anda, yang bervariasi berdasarkan tema tertentu yang Anda gunakan.

Dalam contoh ini, kami telah memilih template Tunggal, yang merupakan template untuk masing-masing posting blog. Anda akan melihat bahwa beberapa blok sudah ada di halaman ini, termasuk:

• Gambar unggulan
• Judul postingan
• Posting konten
• Posting meta
• Komentar

Anda dapat membuat perubahan pada blok yang ada ini sesuai keinginan Anda. Kami menambahkan latar belakang hijau muda di belakang judul posting, membuat judul lebar penuh, mengubah font konten posting, dan menghapus margin antara gambar dan judul unggulan. Anda dapat melihat tampilan pos dengan perubahan yang dibuat:

Anda juga dapat menambahkan blok baru ke templat Anda. Karena kita bekerja dengan template Tunggal, mari tambahkan ajakan untuk bertindak yang secara otomatis akan muncul di bagian bawah semua postingan blog kita. Ini akan menghemat banyak waktu karena Anda tidak perlu menambahkan CTA ke setiap posting satu per satu.

Mari tambahkan pola blok "Ajakan bertindak sederhana" ke template kita.

Sekarang, kami hanya akan menyesuaikan teks CTA agar sesuai dengan kebutuhan kami. Kami juga akan memperbarui desain tombol, yang dapat Anda lakukan dengan mengeklik blok Tombol, diikuti dengan ikon roda gigi di kanan atas. Di sana, Anda dapat mengedit pengaturan seperti warna, tipografi, padding, dan lainnya. Anda dapat mengubah teks tombol dan tautan dengan mengeklik langsung teks tombol dan menggunakan bilah alat yang muncul.

Lihatlah perubahan yang kami buat:

Klik Simpan di kanan atas untuk memperbarui template Anda. Sekarang, Anda akan melihat bahwa CTA ada di bagian bawah setiap postingan blog Anda.

Sekarang, mari kita kembali ke Editor Situs dan melihat bagian pengeditan Template. Buka Penampilan → Editor dan pilih Bagian Templat.

Di sini, Anda akan melihat daftar komponen template yang dapat Anda edit. Ingat, ini adalah elemen global dan setiap perubahan yang Anda buat akan tercermin di seluruh situs Anda. Mari klik Header untuk mengedit bagian template itu.

Anda akan melihat tajuk, dan blok saat ini yang tinggal di sana. Dalam hal ini, ada blok Judul Situs dan blok Navigasi.

Anda dapat membuat perubahan pada blok yang ada seperti yang Anda lakukan dengan editor blok sebelumnya di artikel ini. Cukup klik salah satu untuk mengeditnya, menggunakan menu yang muncul di atas blok atau panel Pengaturan di sisi kanan.

Mari tambahkan bilah pencarian ke menu utama. Jika Anda mengklik blok Navigasi, bilah alat yang sama akan muncul seperti yang Anda lihat di seluruh artikel ini. Tapi Anda juga akan melihat ikon + hitam di sebelah kanan item menu terakhir. Klik itu untuk menambahkan tautan atau blok baru ke menu Anda. Kami menambahkan blok Penelusuran, tetapi Anda juga dapat menyertakan tombol khusus, tautan baru, ikon media sosial — apa pun yang sesuai dengan kebutuhan Anda.

Kemudian, dengan menggunakan panel Pengaturan yang sudah Anda kenal, beri gaya sesuka Anda. Kami menambahkan teks placeholder dan mengubah warna tombol.

Anda juga dapat memilih seluruh tajuk dan memberi gaya, menggunakan panel Pengaturan di sebelah kanan untuk mengubah warna latar belakang, tipografi, padding, dan lainnya. Bayangkan semua cara Anda dapat menerapkan teknik ini di seluruh situs Anda!

10 kiat lanjutan untuk mendapatkan hasil maksimal dari editor blok

Sekarang setelah Anda mengetahui dasar-dasarnya, mari kita lihat beberapa tip untuk mendapatkan hasil maksimal dari editor blok.

1. Manfaatkan pintasan keyboard

Pintasan keyboard adalah cara yang sangat praktis untuk mempercepat proses pengeditan dan pembuatan halaman karena Anda tidak perlu mengangkat jari dari tombol. Dengan sedikit latihan, Anda bisa menjadi sangat cepat!

Ada banyak jalan pintas hebat yang dapat Anda jelajahi, tetapi kami telah mencantumkan beberapa di bawah ini. Perlu diingat bahwa ini akan bervariasi berdasarkan perangkat yang Anda gunakan. Untuk contoh ini, kami mencantumkan pintasan untuk komputer Windows:

• Tampilkan atau sembunyikan panel Pengaturan: Ctrl + Shift + ,
• Arahkan ke bagian Editor selanjutnya: Ctrl + `
• Simpan perubahan: Ctrl + S
• Membatalkan perubahan: Ctrl + Z
• Gandakan blok yang dipilih: Ctrl + Shift + D
• Masukkan blok baru sebelum blok yang dipilih: Ctrl + Alt + T
• Pindahkan blok yang dipilih ke atas: Ctrl + Shift + Alt + T

Lihat daftar lengkap pintasan keyboard, termasuk untuk sistem operasi yang berbeda, di dokumentasi WordPress.

2. Tetapkan gaya untuk situs dan blokir Anda

Jika Anda memiliki situs web dengan banyak pengguna atau pengembang yang menyerahkan situs ke klien, gaya global bisa menjadi sangat kuat. Anda dapat menggunakan ini untuk menyetel palet warna yang telah ditentukan sebelumnya dan gaya blok yang tersedia untuk pengguna. Ini membantu situs web Anda tetap pada merek, tidak peduli siapa yang mengerjakannya.

Untuk mengakses dan mengatur variasi gaya, buka Penampilan → Editor dan klik ikon Gaya di kanan atas.

Perhatikan bahwa setiap perubahan yang dilakukan di sini akan diterapkan ke seluruh situs, jadi edit dengan hati-hati! Klik Telusuri gaya untuk melihat daftar opsi bawaan. Anda dapat beralih melalui ini dan langsung mempratinjau bagaimana situs Anda akan terlihat di sisi kiri.

Atau, jika Anda menavigasi kembali ke panel Gaya, Anda dapat mengatur opsi tipografi, warna, dan tata letak. Misalnya, klik Tipografi, dan Anda akan melihat pilihan untuk teks, tautan, judul, dan tombol. Kami memilih Judul dan mengubah font, berat font, dan huruf besar-kecil.

Kembali ke panel Styles, Anda juga akan menemukan opsi Blocks . Buka ini, dan akan ada daftar blok di situs Anda. Dalam contoh ini, kita akan membuka blok Button. Opsi yang tersedia akan sedikit berbeda berdasarkan blok yang Anda pilih, tetapi untuk yang ini, Anda dapat mengedit tipografi, warna, dan tata letak. Klik Warna dan Anda dapat menyetel warna default untuk tombol di seluruh situs Anda.

Atau, Anda dapat mengklik Palet untuk menentukan opsi warna yang akan dilihat pengguna saat menambahkan tombol ke halaman dan postingan. Kami memilih untuk menambahkan warna khusus ke blok Tombol.

Kini, saat seseorang menambahkan tombol ke situs Anda, mereka dapat memilih dari warna kustom yang Anda tetapkan.

3. Buat blok yang dapat digunakan kembali

Blok yang dapat digunakan kembali sangat bagus karena Anda dapat menyimpannya, lalu menggunakannya di mana pun Anda suka di situs Anda. Dan ketika Anda membuat perubahan desain pada satu, itu akan diperbarui di mana-mana. Ini sempurna untuk ajakan bertindak yang mungkin sering Anda gunakan atau situasi serupa. Dalam contoh ini, kami akan membuat blok Produk Berperingkat Teratas yang dapat kami gunakan untuk mempromosikan produk populer di mana pun kami mau di situs.

Mari kita mulai dengan menambahkannya ke halaman kita dan menatanya.

Setelah selesai, klik blok, lalu pilih tiga titik vertikal di bilah alat yang muncul di atas blok. Kemudian, pilih Buat blok yang dapat digunakan kembali.

Ini akan meminta Anda untuk membuat nama untuk blok Anda, lalu menyimpannya ke perpustakaan Anda. Kemudian, saat Anda mengerjakan halaman atau postingan lain, Anda akan melihat tab baru yang Dapat Digunakan Kembali di Block Inserter. Ini akan menampilkan semua blok Anda yang dapat digunakan kembali dan memungkinkan Anda untuk menambahkannya ke konten Anda kapan saja.

Jika Anda mengeklik tautan di sana yang bertuliskan Kelola blok yang Dapat Digunakan Kembali , Anda dapat melihat daftar lengkap blok yang dapat digunakan kembali, dan mengedit, menambahkan, atau mengganti namanya.

4. Gunakan editor kode

Jika Anda seorang pengembang atau memiliki pengalaman pengkodean, Anda mungkin ingin dapat dengan cepat menerapkan perubahan yang tepat ke setiap halaman atau postingan. Yang perlu Anda lakukan untuk mengakses editor kode adalah membuka halaman atau postingan yang sedang Anda kerjakan dan klik tiga titik vertikal di kanan atas. Kemudian, pilih Editor Kode.

Sekarang, Anda akan melihat semua konten di halaman dalam bentuk HTML. Anda dapat mengedit kode ini dan membuat perubahan sesuai keinginan Anda, dan beralih antara dua editor.

Ingat, bagaimanapun, kode pengeditan itu bisa berbahaya dan bahkan bisa merusak situs Anda. Pastikan Anda mencadangkan situs WordPress Anda sebelum membuat perubahan kode besar.

5. Manfaatkan Tampilan Daftar

Tampilan Daftar adalah fitur rapi yang membantu Anda menavigasi antar blok dengan cepat dan mudah saat Anda sedang bekerja. Untuk mengakses alat ini, klik tiga garis vertikal di kanan atas editor blok. Di sana, Anda akan melihat daftar semua blok yang membentuk halaman atau postingan Anda.

Jika Anda melihat panah di sebelah kiri blok, Anda dapat mengeklik dan meluaskan item tersebut untuk melihat semua blok bersarang di bawahnya. Misalnya, blok Galeri memiliki tiga blok Gambar di dalamnya.

Ini adalah cara terbaik untuk mendapatkan gambaran umum tentang semua elemen yang membentuk halaman atau postingan Anda. Anda juga dapat menyeret blok di dalam Tampilan Daftar untuk memindahkannya dengan cepat tanpa harus menggulir halaman ke atas dan ke bawah. Dan jika Anda mengklik sebuah blok, Anda secara otomatis akan dibawa ke dalam Editor, yang sangat membantu jika Anda memiliki banyak konten.

Jika Anda mengeklik tiga titik vertikal yang muncul di sebelah kanan saat Anda mengarahkan kursor ke sebuah blok, Anda akan mendapatkan lebih banyak opsi. Anda dapat menyalin atau menduplikasi blok, menyisipkan blok sebelum atau sesudah yang Anda pilih, memindahkan, menghapus, atau mengunci blok, atau mengelompokkan beberapa blok menjadi satu.

Pelajari selengkapnya tentang Tampilan Daftar yang canggih.

6. Tambahkan lebih banyak blok dan pola ke pustaka Anda

Meskipun WordPress hadir dengan banyak blok dan pola yang bagus secara default, mungkin ada kalanya Anda memerlukan beberapa opsi tambahan. Ada beberapa cara untuk melakukannya:

Cara pertama adalah melalui tema Anda. Banyak tema blok menyertakan templatnya sendiri, pola blok, dan blok yang tersedia untuk Anda saat penginstalan. Misalnya, tema Wabi menyertakan pola untuk formulir berlangganan, proyek, dan berita utama. Dan Bricksy memiliki lusinan pola siap pakai yang membuat tata letak bangunan menjadi cepat dan mudah.

Plugin tertentu juga dapat menambahkan blok dan pola ke pustaka Anda. Misalnya, WooCommerce memperkenalkan blok untuk menampilkan produk dan filter, menampilkan keranjang, menambahkan ulasan, dan lainnya. Jetpack memperkenalkan sejumlah besar blok yang mencakup semuanya mulai dari kalender dan formulir hingga umpan media sosial dan opsi pembayaran. Dan Sensei LMS menambahkan blok untuk hal-hal seperti pertanyaan kuis dan hotspot gambar.

Tersedia juga plugin yang dirancang khusus untuk menambahkan blok ke perpustakaan Anda. Berikut beberapa contohnya:

• Blok Utama: Filter konten, ulasan, hitungan mundur, penggeser, dan lainnya
• Blok Berang-berang: Akordeon, tab, peta, bagian harga, dan lainnya
• CoBlocks: FAQ, acara, kartu media, opsi berbagi sosial, dan banyak lagi
• Blok Kadence: Ikon, kotak info, daftar isi, opsi baris lanjutan, dan lainnya

7. Tambahkan konten dengan mudah dari Google Docs atau komputer Anda

Jika Anda sering menulis konten di Google Docs, atau bekerja dengan seseorang yang melakukannya, editor blok akan sangat menghemat waktu Anda. Alih-alih harus menyalin dan menempelkan satu per satu setiap paragraf, gambar, tautan, dll. Anda cukup menempelkan seluruh Google Doc ke editor blok. WordPress akan secara otomatis mengonversi dokumen menjadi blok yang benar.

Jika Anda tidak menggunakan Google Documents, Anda masih dapat dengan mudah menambahkan konten seperti media ke editor blok. Cukup seret dan lepas gambar langsung dari komputer Anda ke editor dan WordPress akan mengubahnya menjadi blok Gambar.

8. Siapkan Kueri Loop

Blok Query Loop adalah alat khusus yang memungkinkan Anda untuk menampilkan daftar posting berdasarkan sekumpulan atribut tertentu yang Anda tetapkan. Misalnya, Anda dapat menampilkan kisi produk yang dikelompokkan berdasarkan harga. Atau Anda dapat membuat daftar perusahaan berdasarkan lokasi di direktori bisnis. Kemungkinannya tidak terbatas.

Yang harus Anda lakukan adalah mencari blok Query Loop di Block Inserter, lalu menambahkannya ke halaman atau postingan Anda. Anda kemudian akan melihat dua opsi: Pilih dan Mulai Kosong .

Meskipun Anda pasti dapat membuat loop kueri Anda sendiri dari awal, untuk contoh ini, kami akan memilih Pilih. We went with a simple list style feed, then clicked the gear icon in the top right to open the Query Loop block settings.

Toggle Inherit query from template to display further customization options. There, you can choose a post type to display (posts, products, etc.), set an order, and decide whether to include sticky posts. If you click the + next to Filters, you can add options for narrowing down the content display, such as categories, authors, and keywords. This allows you to create a truly custom list.

Read our full guide to the Query Loop Block.

9. Utilize the theme.json file

The theme.json file takes the concept of global styles that we discussed earlier one step further. If you're a developer, this gives you a huge level of control over blocks and user preferences. You can find this file inside your theme directory, which you'll want to access via file transfer protocol (FTP) or through your host's cPanel.

Here are a few ways you can use the theme.json file:

• Create a default color palette
• Configure custom font sizes
• Remove the option for custom colors in the block editor
• Enable or disable the controls and options that are available to users for blocks

As you can see, you can use this file to make it easier for users or clients to utilize their site within the boundaries of a brand or style. Instead of being overwhelmed by options, they can see just the controls that they need.

Learn more about the theme.json file and see code examples.

10. Lock blocks for consistency and protection

If you have multiple users on your site, you may want to lock certain blocks that you don't want edited or moved. Or, this may simply keep you from accidentally making changes yourself! Either way, this is a helpful, easy-to-use feature of the block editor.

All you have to do is select the block, then choose three vertical dots at the right of the toolbar that appears. In the new dropdown menu, select Lock.

A new menu will appear that allows you to either disable movement, prevent removal, or both. Configure these settings and click Apply.

When you save your page, this block will be locked!

The core list of blocks

We've talked a bit about how to add blocks to your library. But which blocks are available by default? Mari lihat.

Text blocks:

• Paragraph: Add standard, text-based paragraphs
• List: Create bulleted or numbered lists
• Heading: Separate your content with headings
• Table: Add a table with multiple columns and rows
• Quote: Highlight sections of text and add attribution
• Classic: Use the Classic Editor in block form
• Code: Include formatted code on your site
• Preformatted: Add text that's displayed exactly how you type it
• Pull quote: Emphasize text in a more styled way than the Quote block
• Verse: Write and style poetry on your site

Media blocks:

• Image: Include images in your content
• Gallery: Create beautiful galleries of images
• Audio: Embed audio files into your content
• Cover: Add content blocks on top of a visual background
• File: Link to downloadable files
• Media & Text: Place media beside a block of text
• Video: Embed a video into your content

Design blocks:

• Buttons: Add one or more calls to action in button form
• Columns: Create visual columns and insert blocks inside each one
• Group: Group blocks together and customize them as you see fit
• Row: Arrange blocks side by side
• Stack: Arrange blocks on top of one another
• More: Display a “read more” link on archive pages
• Page Break: Add pagination to pages or posts
• Separator: Add a line between two blocks for visual separation
• Spacer: Include blank space between blocks

Widgets blocks:

• Arsip: Menampilkan arsip posting Anda berdasarkan tanggal
• Kalender: Tampilkan posting Anda dalam format kalender
• Kategori: Mencantumkan postingan berdasarkan kategori
• HTML Kustom: Masukkan kode HTML ke halaman atau posting Anda
• Komentar Terbaru: Tampilkan komentar terbaru Anda dari pembaca
• Posting Terbaru: Menampilkan posting blog terbaru Anda
• Daftar Halaman: Cantumkan semua halaman Anda yang diterbitkan
• RSS: Tampilkan sendiri konten dari umpan RSS situs mana pun
• Cari: Tambahkan fitur pencarian di mana saja di situs Anda
• Kode pendek: Tambahkan kode pendek WordPress ke dalam konten Anda
• Ikon Sosial: Tautkan ke profil media sosial Anda
• Tag Cloud: Tambahkan cloud tag ke situs Anda

Blok tema:

• Navigasi: Edit menu navigasi situs Anda
• Logo Situs: Tambahkan logo Anda ke situs Anda
• Judul Situs: Tampilkan nama situs Anda
• Tagline Situs: Tampilkan tagline situs Anda
• Query Loop: Menampilkan postingan berdasarkan parameter tertentu
• Daftar Posting: Menampilkan posting menggunakan pola terintegrasi
• Avatar: Sertakan avatar pengguna
• Tautan Navigasi Posting: Menampilkan tautan ke posting berikutnya dan sebelumnya
• Komentar: Tampilkan komentar kiriman
• Posting Formulir Komentar: Menampilkan formulir komentar
• Masuk/keluar: Memungkinkan pengguna untuk mengeklik dan masuk atau keluar
• Deskripsi Istilah: Tampilkan deskripsi taksonomi di halaman arsipnya
• Judul Arsip: Menampilkan nama taksonomi pada halaman arsipnya
• Judul Hasil Pencarian: Menampilkan judul di atas hasil pencarian
• Bagian Template: Tambahkan bagian template ke halaman dan posting Anda

Editor blok WordPress juga menyertakan lusinan blok sematan yang memungkinkan Anda menyematkan umpan media sosial, video, podcast, musik, dan lainnya dengan mudah dari platform pihak ketiga. Lihat daftar lengkapnya, bersama dengan detail lebih lanjut tentang semua blok default, dari dokumentasi WordPress.

Pertanyaan yang sering diajukan

Masih ada pertanyaan? Mari kita jawab beberapa yang umum di bawah ini.

Apakah editor blok gratis di WordPress?

Ya! Karena editor blok disertakan dengan instalasi WordPress secara default, dan WordPress itu sendiri gratis, editor blok juga sepenuhnya gratis.

Apakah WordPress hadir dengan editor blok secara default?

Ya, semua instalasi WordPress menyertakan editor blok secara otomatis.

Apakah editor produk WooCommerce menggunakan editor blok?

Saat ini, editor produk WooCommerce tidak menggunakan editor blok. Namun, WooCommerce menyertakan sekumpulan blok yang dapat Anda gunakan di dalam postingan, halaman, dan konten lainnya. Anda juga dapat menggunakan Editor Situs untuk menyesuaikan template produk WooCommerce, mengarsipkan halaman, hasil pencarian, dan lainnya.

Apakah editor bock memiliki editor HTML?

Ya, editor blok memang memiliki editor HTML. Untuk mengaksesnya, cukup buka halaman atau postingan yang sedang Anda edit dan klik tiga titik vertikal di kanan atas. Kemudian, pilih Editor Kode . Sekarang Anda akan melihat konten halaman sebagai kode HTML dan dapat melakukan pengeditan yang sesuai.

Bagaimana editor blok dibandingkan dengan editor TinyMCE klasik?

Sebelum rilis editor blok, WordPress menggunakan editor TinyMCE, juga dikenal sebagai Editor Klasik. Tetapi editor blok dibuat dan dirancang agar lebih kuat dan lebih mudah digunakan daripada solusi sebelumnya.

Ini adalah editor visual yang jauh lebih banyak daripada TinyMCE, memungkinkan pemula dan pengembang untuk membuat halaman dan posting yang indah dan kompleks. Ini juga membuka kemampuan untuk mendesain dan menyesuaikan elemen seperti header, footer, dan template tanpa kode sama sekali.

Bagaimana editor blok WordPress dibandingkan dengan pembuat halaman?

Ada banyak manfaat menggunakan editor blok daripada pembuat halaman WordPress. Pertama-tama, editor blok benar-benar gratis, dan disertakan dengan WordPress secara default. Ini berarti Anda tidak perlu menginstal plugin tambahan apa pun untuk menggunakannya, Anda juga tidak perlu khawatir tentang masalah kompatibilitas dengan inti WordPress atau plugin utama.

Beberapa pembuat halaman terikat dengan tema tertentu, jadi jika Anda memutuskan untuk beralih, Anda harus membuat ulang sebagian besar, jika tidak semua, konten Anda. Ini tidak terjadi dengan editor blok. Selama Anda menggunakan tema yang mendukung editor blok, sebagian besar konten Anda akan tetap sama jika Anda beralih.

Ada banyak ekstensi dan plugin yang memperluas kemampuan editor blok, karena ini adalah fitur inti WordPress. Memiliki ini di ujung jari Anda memungkinkan Anda untuk benar-benar menciptakan sesuatu yang unik.

Terakhir, halaman yang dibuat dengan editor blok harus dimuat lebih cepat daripada halaman yang dibuat dengan pembuat halaman. Output kodenya lebih ringan dan bersih, dan tidak memerlukan plugin apa pun yang menghabiskan ruang di server dan database Anda. Anda dapat melihat informasi lebih lanjut di bagian Pro dan Kontra dari artikel ini.