Gutenberg 12.9 Menambahkan UI Penguncian Blok, Registrasi Pola Otomatis, dan Ekspor Tema Lengkap

Diterbitkan: 2022-03-31

Gutenberg 12.9 mendarat di direktori plugin WordPress.org hari ini, dan ini adalah rilis yang gemuk, dikemas dengan sedikit sesuatu untuk semua orang. Bahkan setelah mengutak-atik fitur baru selama beberapa hari terakhir, saya belum menjelajahi semuanya sebanyak yang saya inginkan. Mengingat keterbatasan waktu yang praktis, saya tidak akan dapat menyelami semua yang ada di posting ini, tetapi saya akan mencoba memperkenalkan Anda semua pada beberapa hal yang menarik.

Berikut ini adalah beberapa item terpilih yang tidak dapat saya selami, tetapi saya tetap mendorong pembaca untuk memeriksanya:

  • Nama warna yang dipilih sekarang muncul di pemilih warna.
  • Pengguna sekarang dapat memilih dari daftar format tanggal yang disarankan atau menambahkan yang khusus untuk blok Tanggal Posting. Ini terinternasionalisasi, jadi sarannya akan spesifik lokal.
  • Tema dapat menambahkan blok ke blok penampung Tidak Ada Hasil saat Kueri tidak mengembalikan kiriman.
  • Blok Tag Cloud sekarang memiliki kontrol ukuran minimum dan maksimum.
  • Blok Pemisah mendukung kontrol warna yang lebih baru, memungkinkan pengguna untuk memilih warna transparan.

Blok Penguncian UI

Editor situs WordPress. Popover Block Lock terbuka dengan opsi yang dipilih untuk menonaktifkan gerakan dan mencegah penghapusan blok.
Menyesuaikan blok yang terkunci.

Gutenberg 12.9 memperkenalkan UI baru untuk mengunci blok. Di bawah dropdown "opsi lainnya" di bilah alat, pengguna dapat memilih opsi kunci, yang akan memunculkan layar dengan dua opsi:

  • Nonaktifkan gerakan: Melarang memindahkan blok itu sendiri. Namun, blok saudara dapat dipindahkan di sekitarnya.
  • Cegah penghapusan: Mencegah blok agar tidak dihapus.

Andrei Draganescu mencatat hal berikut di pos pengumuman 12.9:

Saat blok dikunci, pengguna tidak dapat memindahkannya, menghapusnya, atau keduanya. Ini sangat berguna dengan blok tingkat situs seperti Konten Posting yang ingin dikunci oleh banyak tema.

Namun, definisi itu tidak sepenuhnya menjelaskan penguncian tingkat blok. Ada peringatan: UI baru ini memberikan kunci kepada pengguna akhir. Secara teknis, mereka sudah memiliki kemampuan ini melalui editor kode, tetapi sekarang tersedia melalui antarmuka.

Dari perspektif pengembang tema, penguncian tingkat blok hanya memerlukan langkah tambahan dari pengguna untuk memindahkan dan/atau menghapus blok. Ini bukan kunci "paksa" atau "permanen". Ini adalah fitur yang disambut baik, tetapi tema harus memahami batasannya dan bahwa UI baru ini menawarkan lebih banyak kekuatan kepada pengguna, bukan lebih sedikit.

Pembaruan: ada pengait bagi pembuat situs untuk menimpa ini. Lihat lebih banyak di komentar.

Blokir Dukungan Celah untuk Galeri… Semacam

Editor posting WordPress dengan kumpulan gambar lima grup di blok Galeri.
Jarak blok untuk blok Galeri.

Salah satu fitur yang paling saya sukai dengan rilis ini adalah penambahan dukungan untuk jarak antar gambar Galeri. Penulis tema mengandalkan gaya blok khusus untuk memberikan pilihan kepada pengguna, biasanya terbatas pada opsi default dan "tanpa celah". Yang terakhir akan menghapus spasi di antara gambar.

Sayangnya, fitur tersebut rusak di 12.9 ketika pengguna mengatur celah secara manual. Memeriksa kode sumber, itu menghasilkan Array alih-alih CSS yang valid. Di ujung depan, peringatan berikut ditampilkan:

 Warning: preg_match() expects parameter 2 to be string, array given in ...wp-content/plugins/gutenberg/build/block-library/blocks/gallery.php on line 51

Saya yakin ini akan diperbaiki di 12.9.1. Sampai saat itu, saya sarankan untuk tidak menggunakan kontrol "Block Spacing".

Peringatan pembuat tema: Ini adalah perubahan besar untuk tema yang menargetkan --gallery-block--gutter-size untuk mengontrol celah default untuk galeri. Properti kustom CSS yang sebelumnya dapat diandalkan ini tidak ada lagi dalam kode. Tidak jelas mengapa variabel ini dihapus sama sekali, dan tidak disebutkan dalam tiket.

--wp--style--unstable-gallery-gap baru tampaknya melakukan pekerjaan yang serupa. Namun, seperti bagian yang unstable dari namanya, mungkin tidak selalu ada. Itu juga didefinisikan pada kelas .wp-container-* alih-alih galeri itu sendiri. Saya belum melakukan pengujian CSS yang cukup untuk mengetahui cara menimpanya untuk celah default. Jika ada yang punya solusi, silakan posting di komentar untuk yang lain.

Anak-anak Diciutkan Secara Default dalam Tampilan Daftar

Editor blok WordPress dengan panel tampilan daftar dibuka di sebelah kiri. Bloknya diciutkan secara default.
Membuka kumpulan blok bersarang yang diciutkan dalam tampilan daftar.

Saya sering menghindari tampilan daftar di editor untuk sebagian besar skenario dunia nyata, setidaknya untuk halaman dengan banyak blok bersarang. Dengan setiap level terbuka secara default, sedikit mimpi buruk untuk menelusuri dan menemukan blok tertentu. Lebih mudah untuk mengambil kesempatan saya mengklik di sekitar kanvas konten.

Namun, rilis Gutenberg terbaru mungkin hanya mengubah penggunaan saya. Versi 12.9 menciutkan semua blok anak secara default.

Registrasi Pola Otomatis untuk Tema

Penulis tema sekarang dapat membiarkan Gutenberg menangani pendaftaran pola untuk mereka. Mereka hanya perlu mengikuti beberapa aturan:

  • Tambahkan pola blok di dalam file PHP di folder /patterns .
  • Tambahkan data pola ke header file.
  • Tambahkan konten pola, tentu saja.

File pola individual akan terlihat seperti berikut:

 <?php /** * Title: A Pattern Title * Slug: namespace/slug * Description: A human-friendly description. * Viewport Width: 1024 * Categories: comma, separated, values * Keywords: comma, separated, values * Block Types: comma, separated, values * Inserter: yes|no */ ?> <!-- some-block-content /-->

Hanya bidang Title dan header Slug yang diperlukan. Setiap opsi cocok dengan argumen fungsi register_block_pattern() .

Penulis tema yang ingin menggunakan fitur ini sekarang tetapi menyediakan kompatibilitas mundur dengan WordPress 5.9 dapat memeriksa keberadaan fungsi gutenberg_register_theme_block_patterns() . Itulah nama fungsi untuk saat ini, setidaknya.

Perubahan ini selanjutnya dibangun di atas standar yang ada untuk tema blok. Penulis sekarang memiliki pedoman yang jelas tentang mendaftarkan sebagian besar fitur melalui file dan folder standar:

  • /parts – Blok bagian template
  • /patterns – Blok pola
  • /styles – Variasi gaya global
  • /templates – Blok template
  • theme.json – Pengaturan dan gaya global

Selain gaya dan variasi blok khusus (jangan dikelirukan dengan variasi gaya global), hampir semuanya tercakup. Kumpulan yang lengkap ini menurunkan hambatan masuk bagi penulis tema masa depan. Bahkan pengembang berpengalaman pun harus menghargai kesederhanaan dalam memberi nama sesuatu dan di mana meletakkannya. Ini adalah satu hal yang kurang perlu dikhawatirkan. Ini juga akan terus menyederhanakan sistem peninjauan tema WordPress.org.

Mengekspor Tema dan Membangun Template

Berbicara tentang menurunkan hambatan, pembuat sekarang dapat membangun seluruh tema dari editor situs. Nah, dengan asumsi mereka mulai dari tema blok yang ada.

Gutenberg 12.9 memperkenalkan dua fitur penting untuk proses pembangunan situs. Yang pertama memungkinkan pengguna untuk mengekspor salinan tema aktif mereka langsung dari editor:

Editor situs Gutenberg dengan opsi dropdown terbuka. Tombol ekspor dipilih.
Mengekspor tema aktif dengan penyesuaian.

File ZIP yang diunduh dari ekspor ini adalah tema yang berfungsi penuh. Ini mencakup semua penyesuaian pengguna di samping setiap file yang sudah ada di aslinya.

Masih ada beberapa hal yang belum mungkin dari editor, dan ini perlu disesuaikan secara manual sebelum rilis ke publik. Nama tema dan data lainnya di style.css akan tetap sama dengan tema aslinya. Juga tidak ada metode untuk mengambil tangkapan layar dari versi yang disesuaikan dan menggabungkannya dalam ZIP.

Ini adalah lompatan ke depan untuk mendemokratisasikan desain, tetapi aliran lain perlu dipertimbangkan. Pengguna harus dapat mengekspor sebagai tema anak hanya dengan penyesuaian mereka atau bahkan sebagai file *.json (variasi gaya global).

Tapi, ada kasus penggunaan yang lebih cepat dan praktis. Pengguna dapat mengunduh tema khusus mereka dan mengunggahnya ke situs lain.

Pembaruan penting kedua untuk pengembangan dalam editor situs adalah dukungan untuk lebih banyak template. Pengguna sekarang dapat membuat yang berikut dari panel manajemen template selain yang sudah ada;

  • Pengarang
  • Kategori
  • Tanggal
  • Menandai
  • Taksonomi
Panel template Gutenberg terbuka. Dropdown "tambah baru" terbuka dengan template Penulis disorot.
Menambahkan template Penulis baru.

Template baru adalah tambahan yang disambut baik, tetapi fitur pembuatan template masih memiliki batasan. Tidak ada cara untuk membuat variasi pada template tersebut melalui UI, seperti category-wordpress , taxonomy-genre , atau lusinan kemungkinan lainnya. Namun, itu akan terjadi suatu hari nanti.