Gutenberg 8.3 Memperbarui Kategori Blok, Termasuk Pemilih Blok Induk, dan Menambahkan Kontrol Desain Baru

Kemarin, tim Gutenberg merilis versi 8.3 dari plugin yang sedang berjalan di belakang editor blok. Sementara sebagian besar fokus tim adalah pada pengeditan situs lengkap yang akan datang, pembaruan ini mencakup beberapa fitur yang dihadapi pengguna, seperti kumpulan kategori blok yang ditata ulang, pemilih blok induk, kontrol spasi, dan opsi warna tautan.

Satu peningkatan yang lebih kecil mencakup kemampuan untuk memfilter blok Posting Terbaru oleh penulis. Kontrol level untuk blok Heading juga telah berubah. Alih-alih memilih level di bilah sisi opsi blok, pemilih level sekarang terletak di bilah alat editor.

Di Gutenberg 8.2, menekan tombol Enter di dalam bidang teks untuk blok gambar membuat paragraf baru. Di 8.3, fitur itu telah diperluas ke semua blok dengan teks.

Tim memperbaiki lebih dari 20 perbaikan bug dalam rilis terbaru. Secara keseluruhan, pembaruan plugin baru tampak solid setelah seharian digunakan. Namun, beberapa tambahan eksperimental, seperti kontrol padding baru, mungkin perlu diperhatikan. Penulis tema harus mulai menguji ini, memberikan umpan balik, dan memastikan pengembangan menuju ke arah yang benar.

Kategori Blok Baru

Tim Gutenberg telah mengganti nama dan mengatur ulang kategori blok. Daftar baru tampaknya lebih masuk akal dan lebih baik dikonsolidasikan ke dalam grup yang tepat:

• Teks
• Media
• Desain
• Widget
• Sematkan

Sementara saya penggemar nama kategori baru, saya menemukan kategori tidak berguna untuk tujuan praktis pada saat ini. Sejak Gutenberg menjatuhkan antarmuka tab di penyisipan blok, itu terasa seperti dinding blok yang besar. Mata saya secara alami melompati nama kategori saat saya menggulir dan menggulir dan menggulir daftar blok yang tersedia untuk menemukan blok tertentu yang saya butuhkan. Saya hampir selalu menggunakan perintah slash keyboard untuk memasukkan blok. Dalam kasus di mana saya tidak melakukannya, itu bukan pengalaman pengguna yang ideal, dan kategori baru tidak banyak membantu.

Pilih Blok Induk

Salah satu pengalaman yang lebih membuat frustrasi di Gutenberg adalah mencoba memilih blok induk dalam skenario blok bersarang. Terlalu sering, pengguna merasa seperti mereka mengklik secara acak dengan harapan mereka mencapai sweet spot di mana mereka benar-benar dapat menavigasi ke blok yang perlu mereka edit. Ini adalah latihan frustrasi di saat-saat terbaik.

Tim Gutenberg mengambil langkah – langkah kecil – untuk mengurangi rasa sakit ini. Saat mengarahkan kursor ke tombol "ubah jenis atau gaya blok" di bilah alat editor, tombol baru muncul untuk memilih blok induk.

Saya tidak yakin apakah ini cara yang tepat untuk menangani masalah. Saya ingin melihat beberapa eksperimen dengan semacam tombol panah yang muncul tanpa melayang. Untuk saat ini, saya puas bahwa tim berusaha memecahkan masalah dan berharap iterasi di masa mendatang meningkatkan navigasi dalam blok bersarang.

Fitur ini sepertinya tidak berfungsi saat mode bilah alat atas diaktifkan. Bagi mereka yang menggunakan mode ini, cara terbaik untuk memilih blok induk adalah melalui navigasi remah roti di bagian bawah editor.

Kontrol Spasi/Padding Eksperimental

Penulis tema sekarang dapat menambahkan dukungan untuk kontrol padding eksperimental melalui add_theme_support( 'experimental-custom-spacing' ) . Jika didukung, pengguna akhir akan melihat tab Spasi baru di bawah bilah samping opsi blok untuk blok Sampul, yang akan tersedia untuk blok lain di masa mendatang. Secara default, pengguna dapat mengontrol padding untuk keempat sisi blok dengan satu nilai. Mereka juga dapat "membatalkan tautan" padding dan mengontrol nilai atas, bawah, kiri, dan kanan satu per satu.

Agaknya, tim Gutenberg akan memperluas fitur spasi ini untuk menyertakan kontrol margin juga. Ini akan menjadi langkah alami dan yang saya harap akan mengarah pada kematian blok Spacer yang harus dijalani pengguna selama beberapa tahun terakhir.

Namun, saya tidak setuju dengan mengizinkan pengguna akhir untuk mengontrol padding dengan nilai eksplisit. Mengubah nilai padding secara serampangan akan mematahkan ritme vertikal yang oleh banyak penulis tema meluangkan waktu untuk menghitung dengan cermat. Saat menggunakan nilai piksel (default), pengguna pasti akan mengalami masalah dengan ukuran layar tablet dan ponsel. Pada dasarnya, itu akan menciptakan kekacauan spasi yang lengkap.

Saya tidak menentang gagasan itu. Saya ingin itu dilakukan tepat sebelum ini mendarat di WordPress. Penulis tema harus dapat mendaftarkan kelas bernama yang ditangani melalui lembar gaya. Ini kembali ke gagasan WordPress memiliki kerangka kerja desain. Buat satu set kelas utilitas untuk spasi (oh, halo, Tailwind). Biarkan penulis tema menentukan jarak berdasarkan desain mereka. Biarkan pengguna memilih dari itu. Kemudian, berikan opsi khusus untuk saat-saat di mana pengguna ingin mengambil tindakan sendiri. Pada saat itu, mereka telah membuat keputusan eksplisit untuk melepaskan diri dari aliran desain yang dipilih oleh penulis tema.

Warna Tautan

Salah satu rintangan terberat yang harus dihadapi penulis tema saat menata gaya untuk editor blok adalah mencari tahu apa yang harus dilakukan dengan warna tautan saat pengguna mengubah warna latar belakang blok. Pengguna telah lama memiliki kendali atas warna teks dalam skenario itu. Namun, warna tautan bisa dengan cepat menjadi tidak dapat diakses atau benar-benar jelek. Penulis tema yang berpikiran maju akan menata warna tautan tersebut sehingga mereka mewarisi warna teks, tetapi itu tidak selalu merupakan solusi yang ideal.

Di situlah warna tautan yang dikontrol pengguna masuk. Untuk menambahkan dukungan untuk warna tautan khusus, pembuat tema harus memilih fitur melalui add_theme_support( 'experimental-link-color' ) . Ini akan menambahkan pemilih warna baru untuk blok Paragraph, Heading, Group, Columns, dan Media & Text.

Tidak dapat membuat fitur ini berfungsi dengan panggilan fungsi dukungan tema, saya harus sedikit menggali kode untuk menemukan masalahnya. Agar pembuat tema dapat menambahkan dukungan untuk warna tautan, mereka juga harus menentukan tautan default mereka seperti yang ditunjukkan dalam cuplikan kode CSS berikut:

 a { color: var( --wp--style--color--link, #000 ); }

WordPress akan secara otomatis mengatur --wp--style--color--link . Untuk kekhususan lebih lanjut, penulis tema juga dapat menargetkan .has-link-color a .