Apa yang Baru di WordPress 5.9 — Pengeditan Situs Lengkap, Gaya Global, Blok, Pola, API, Peningkatan UI, dan Banyak Lagi

WordPress 5.9 Josephine telah hadir! Versi WordPress pertama tahun ini awalnya dijadwalkan untuk rilis pada 14 Desember 2021. Karena beberapa masalah terbuka dan bug yang belum terselesaikan, rilis final telah ditunda dan akhirnya dirilis pada 25 Januari 2022.

Jika Anda bertanya-tanya apa yang baru di WordPress 5.9, jawaban singkatnya adalah Full Site Editing (FSE).

Dan memang, banyak fitur 5.9 hanya tersedia jika Anda menggunakan tema yang mendukung Pengeditan Situs Lengkap, seperti tema default baru, Twenty Twenty-Two.

Dengan WordPress 5.9, kita masuk ke fase kedua dari peta jalan Gutenberg: fase Kustomisasi , yang sebagian besar berfokus pada pengeditan Situs Penuh, Pola Blok, Direktori Blok, dan tema berbasis Blok.

Dengan 5.9, yang akan keluar bulan depan, kami — saya akan mengatakan — di MVP, Produk yang Layak Minimum dari fase penyesuaian Gutenberg ini.

Kata-kata dari Matt Mullenweg di State of the Word 2021 ini merangkum fitur-fitur utama dari rilis WordPress baru.

Yang mengatakan, apa yang baru dengan rilis WordPress pertama tahun 2022?

Mari kita cari tahu!

Gaya Global: Antarmuka Grafis untuk theme.json

Dengan dirilisnya WordPress 5.8 pada tahun 2021, memanipulasi file theme.json menjadi cara standar bagi pengembang tema untuk menyesuaikan pengaturan dan gaya editor.

WordPress 5.9 membawa hal-hal ke tingkat berikutnya dengan memperkenalkan antarmuka grafis yang memungkinkan pengguna untuk menyesuaikan preset gaya untuk situs web mereka, baik secara global atau di tingkat blok, tanpa menulis satu baris kode pun.

Mekanisme Global Styles akan secara signifikan mengubah cara Anda menyesuaikan tampilan situs web Anda, karena Global Styles memengaruhi beberapa aspek desain situs WordPress.

Pertama, antarmuka Global Styles menggantikan Customizer dan sekarang satu-satunya cara untuk menyesuaikan pengaturan dan gaya dengan tema blok. Demikian pula, halaman admin opsi tema kompleks tidak lagi diperlukan. Ini memberikan cara standar baru untuk mengonfigurasi pengaturan dan gaya tema dan, pada saat yang sama, harus merampingkan alur kerja pengembangan tema.

Dengan Global Styles, pengguna WordPress mendapatkan kontrol lebih besar atas presentasi situs web mereka, baik secara global maupun per jenis blok, di luar konteks halaman atau postingan individual.

Bilah sisi baru sekarang tersedia di editor situs, di atasnya Anda akan menemukan panel pratinjau kecil dan empat komponen dalam urutan berikut:

• Tipografi
• warna
• tata letak
• Blok

Kita dapat mengharapkan komponen baru ditambahkan dari waktu ke waktu.

Mari kita lihat lebih dekat antarmuka baru.

Itu disini! Semua yang perlu Anda ketahui tentang WordPress 5.9, semuanya dalam satu postingan besar Klik untuk Tweet
[CTA]

Pratinjau Gaya

Elemen pertama di sidebar Global Styles adalah panel pratinjau. Panel ini memungkinkan Anda untuk memeriksa hasil penyesuaian Anda dan sangat berguna ketika perubahan Anda berlaku untuk elemen yang tidak terlihat di kanvas editor situs.

Gambar berikut menunjukkan tiga kombinasi gaya yang berbeda dibandingkan:

Tipografi

Panel Tipografi adalah tempat Anda mengontrol tipografi situs web Anda. Tentu saja, kontrol yang tersedia di panel ini bergantung pada pengaturan theme.json Anda.

Misalnya, tema Dua Puluh Dua Puluh Satu Blok (Blok TT1) mendeklarasikan properti tipografi berikut:

 "settings": { "typography": { "customLineHeight": true, "fontSizes": [], "fontFamilies": [] } }

Gambar berikutnya menunjukkan hasil pengaturan Tipografi di sidebar Global Styles:

Mari selami lebih dalam dan lihat bagaimana tema TT1 Blocks mendeklarasikan fontFamilies :

 "fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "slug": "system-font", "name": "System Font" }, { "fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif", "slug": "helvetica-arial" }, { "fontFamily": "Geneva, Tahoma, Verdana, sans-serif", "slug": "geneva-verdana" }, { "fontFamily": "Cambria, Georgia, serif", "slug": "cambria-georgia" }, { "fontFamily": "Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif", "slug": "hoefler-times-new-roman" } ]

Anda dapat memeriksa kelompok font ini di panel pratinjau Gaya Global:

warna

Di bagian Warna, Anda dapat melihat dan mengedit palet warna dan menyesuaikan warna beberapa elemen situs.

Dengan mengklik elemen tersebut, Anda mendapatkan akses ke panel baru tempat Anda dapat memilih warna dari tiga palet warna: Core, Theme, dan Custom palette (baca selengkapnya di Warna Default, Warna Tema, dan Warna Kustom).

Di panel ini, Anda dapat mengatur dan memodifikasi warna untuk elemen saat ini.

tata letak

Kelompok alat terakhir dimaksudkan untuk penyesuaian tata letak. Dalam konteks global, ini terbatas pada wadah situs.

Blok

Dengan penerapan mekanisme Global Styles, sekarang juga memungkinkan untuk mengubah tampilan blok tertentu, seperti Paragraph (tipografi dan warna), Buttons (tata letak), dan Kolom (warna dan tata letak).

Perhatikan bahwa gaya blok dapat dikustomisasi dari antarmuka Gaya Global hanya jika blok tersebut menyatakan dukungan untuk fungsionalitas tertentu dalam file block.json yang sesuai. Misalnya, blok core/post-title saat ini mendukung gaya berikut:

 "supports": { "align": [ "wide", "full" ], "html": false, "color": { "gradients": true, "link": true }, "spacing": { "margin": true }, "typography": { "fontSize": true, "lineHeight": true, "__experimentalFontFamily": true, "__experimentalFontWeight": true, "__experimentalFontStyle": true, "__experimentalTextTransform": true, "__experimentalLetterSpacing": true, "__experimentalDefaultControls": { "fontSize": true, "fontAppearance": true, "textTransform": true } } },

Karena blok core/post-title mendukung warna, spasi, dan tipografi, Anda akan menemukan entri yang sesuai dalam pengaturan Gaya Global dari blok Judul Postingan.

Gambar berikut menunjukkan pengaturan tipografi, yang dapat Anda bandingkan dengan mudah dengan kode di atas:

Perlu dicatat bahwa WordPress 5.9 hanya memberikan implementasi pertama dari antarmuka Global Styles. Seperti yang ditunjukkan Matias Ventura, kami dapat mengharapkan pengembangan lebih lanjut dari fitur kontrol gaya baru:

Di masa mendatang, akan ada aliran yang dibangun ke dalam sistem yang memungkinkan Anda berpindah dari gaya lokal ke global — seperti membuat penyesuaian pada blok tombol dan memilih untuk menerapkannya secara global di semua tombol jenis itu.

Jadi, kami mungkin akan segera melihat peningkatan besar. Gambar di bawah ini hanyalah contoh dari apa yang mungkin kita harapkan:

Peningkatan tambahan dapat mencakup kemampuan tema untuk menyediakan palet warna alternatif dan berbagai variasi gaya global.

Minggu lalu saya membuat beberapa variasi warna + font Twenty Twenty-Two menjadi tema anak super sederhana. Mereka benar-benar ringan, dan saya menyukai gagasan untuk menawarkan kepada orang-orang situs yang sangat berbeda dengan satu klik.https://t.co/dItIkvvhK9 pic.twitter.com/rB4CcTfW0A

— kjellr (@kjellr) 15 November 2021

Pengembang dapat mempelajari lebih dalam mekanisme gaya global di artikel dukungan Pengaturan & Gaya Global (theme.json). Anda akan menemukan contoh tambahan dalam pengantar kami untuk tema default Dua Puluh Dua Puluh Dua.

Blok Navigasi

Blok Navigasi telah dijuluki sebagai "salah satu blok tema paling berpengaruh", dan kami tidak takut untuk mengatakan bahwa kami setuju.

Blok telah berada dalam fase embrio untuk sementara waktu (lihat juga Masalah Pelacakan Blok Navigasi dan Masalah Pelacakan i2). Namun, sekarang setelah semua masalah tertunda dan pemblokir yang terdaftar sebagai WordPress 5.9 must-have telah diperbaiki, kami akhirnya dapat mulai menggunakan salah satu fitur paling kuat yang digabungkan ke dalam inti dengan WordPress 5.9.
[CTA]

Tinjauan Singkat Antarmuka Blok Navigasi

Menggunakan blok baru mungkin sedikit membingungkan pada awalnya, tetapi setelah Anda menguasainya, Anda akan menghargai potensi penuhnya.

Saat Anda pertama kali menambahkan blok Navigasi, placeholder blok menyediakan tiga opsi untuk memilih menu berbasis blok yang ada, membuat menu dengan semua halaman, atau memulai yang baru dengan menu kosong.

Menu Navigasi baru juga memungkinkan Anda untuk mengimpor menu yang dibuat melalui Layar Menu Penampilan yang tersedia dengan tema klasik.

Ini berarti bahwa jika Anda beralih dari tema klasik ke tema blok, Anda tidak perlu membangun kembali menu yang ada. Anda hanya perlu memilih salah satu dari "Menu Klasik" yang tersedia saat ini, dan itu akan secara otomatis diubah menjadi menu navigasi berbasis blok.

Anda dapat menambahkan blok Navigasi di mana saja di halaman Anda. Misalnya, Anda mungkin merasa berguna dalam artikel bentuk panjang untuk membuat daftar isi, yang memungkinkan pengguna untuk melompat ke bagian konten tertentu.

Tautan Navigasi Baru ditambahkan secara instan ke blok Navigasi dengan mengklik ikon plus ( + ) di sisi kanan (lihat juga catatan rilis Gutenberg 11.7), kecuali jenis blok lain telah ditambahkan ke menu.

Mengklik tombol Edit di bilah alat blok Tautan Navigasi mengonversi item menu menjadi tautan khusus. Ini memungkinkan Anda untuk menambah, mengedit, menyusun ulang, dan menghapus item satu per satu.

Anda juga dapat mengubah tautan menjadi blok dengan mengklik tombol Transform di bilah alat blok. Ini memungkinkan Anda untuk menambahkan blok tertentu langsung ke menu navigasi.

Tautan Kustom, Spacer, Logo Situs, Tautan Beranda, Ikon Sosial, dan blok Pencarian kini ditampilkan kepada pengguna saat menambahkan blok ke menu navigasi.

Di bilah sisi Pengaturan, Anda akan menemukan serangkaian opsi lengkap untuk mengontrol beberapa aspek menu navigasi Anda.

Panel Tata Letak mencakup kontrol untuk pembenaran, orientasi, dan pembungkusan.

Blok Navigasi juga dilengkapi panel pengaturan Tampilan yang ditingkatkan dengan opsi untuk menu burger yang selalu aktif.

Anda juga dapat menyesuaikan teks dan warna latar belakang untuk menu dan submenu Anda.

Tambahan bermanfaat lainnya yang baru-baru ini ditambahkan ke blok Navigasi adalah dukungan Block Gap, yang menambahkan kemampuan bagi pengguna untuk mengontrol jarak antar item menu.

Panel Tipografi menyediakan satu set kontrol untuk jenis font, tampilan, tinggi garis, dekorasi, dan huruf besar. Semua kontrol ini dapat diaktifkan/dinonaktifkan dari menu tarik-turun yang muncul saat Anda mengeklik ikon elipsis di sebelah kanan.

Blok Navigasi: Di ​​Balik Terpal

Data blok navigasi disimpan dalam database menggunakan jenis posting khusus wp_navigation .

Mengapa ini menarik bagi pengguna WordPress, dan bagaimana cara kerjanya?

Katakanlah Anda telah membuat menu navigasi yang terdiri dari dua tautan khusus dan kotak pencarian. Dengan tema Twenty Twenty-Two diinstal, menu dapat terlihat seperti yang ditunjukkan pada gambar berikut:

Blok Navigasi di atas disimpan dalam database sebagai jenis posting wp_navigation sebagai berikut:

 <!-- wp:navigation-link {"label":"Contacts","type":"page","id":7,"url":"http://wordpress-59.local/?page_id=7","kind":"post-type","isTopLevelLink":true} /--> <!-- wp:navigation-link {"label":"About Us","type":"page","id":10,"url":"http://wordpress-59.local/?page_id=10","kind":"post-type","isTopLevelLink":true} /--> <!-- wp:search {"showLabel":false,"placeholder":"Search the site","buttonPosition":"button-inside","buttonUseIcon":true} /-->

Menyimpan konten blok Navigasi ke dalam database memungkinkan pengguna untuk menggunakan menu navigasi yang sama di seluruh tema blok yang berbeda. Jika menu tidak langsung terlihat, Anda cukup memilih menu navigasi yang diinginkan di pemilih menu (lihat juga edisi #36087 dan PR #36178).

Gambar berikut menunjukkan menu di atas dengan tema Twenty Twenty-One Blocks:

Blok Navigasi telah melalui beberapa iterasi. Anda dapat mempelajari lebih dalam setiap implementasi di catatan rilis Gutenberg 11.7, 11.8, dan 11.9.

Anda juga dapat membaca lebih lanjut tentang blok Navigasi di Catatan pengembang blok Navigasi baru dan artikel dukungan blok Navigasi.
[CTA]

Galeri Gambar, Gambar Unggulan, dan Ikon Situs

Bertujuan untuk membuat gambar berperilaku lebih konsisten di berbagai konteks, WordPress 5.9 menghadirkan fitur dan peningkatan baru ke beberapa blok. Blok Galeri telah sepenuhnya direvisi, sementara berbagai perubahan pada blok Gambar Unggulan dan Ikon Situs memberi pengguna kontrol yang lebih terperinci atas gambar masing-masing.

Blok Galeri yang Difaktorkan Ulang

Di WordPress 5.8, kemampuan untuk menyesuaikan tampilan gambar di galeri agak terbatas. Tidak ada cara untuk mengubah gaya gambar atau menerapkan filter duotone.

Selain itu, fitur penting hilang dari gambar galeri, seperti menambahkan tautan khusus ke masing-masing gambar di galeri.

Untuk lebih memahami alasan asimetri antara gambar dalam dua konteks berbeda dari satu gambar dan gambar di galeri, mari kita lihat blok Galeri dalam tampilan Kode di WordPress 5.8:

Perhatikan bahwa detail gambar hanya disimpan di pembatas blok Galeri (lihat juga Apa itu Blok Gutenberg?).

Ini membuat gambar individu berperilaku berbeda dari gambar di galeri.

Untuk membuat gambar berperilaku secara konsisten dalam dua konteks yang berbeda, WordPress 5.9 memperkenalkan blok Galeri yang sepenuhnya difaktorkan ulang, yang sekarang berperilaku seperti wadah untuk kumpulan elemen gambar, bukan daftar gambar yang tidak berurutan.

Di WordPress 5.9, gambar galeri disarangkan menggunakan API inti innerBlocks , dan setiap gambar menyimpan kumpulan detailnya sendiri, persis seperti gambar individual.

Itu peningkatan yang bagus, karena gambar blok Galeri sekarang mendukung fungsi yang sama yang tersedia di blok Gambar inti , seperti dimensi gambar dan filter duotone, serta fitur blok standar, seperti fungsi seret dan lepas, salin, duplikat, dan hapus .

Dengan blok Galeri baru, Anda dapat menata gambar satu per satu. Ini memberikan beragam peluang penyesuaian.

Gambar di bawah ini menampilkan beberapa gambar di galeri, masing-masing dengan sudut membulat yang berbeda:

Anda juga dapat menggunakan filter duotone yang berbeda pada gambar yang berbeda di galeri yang sama.

Dan, tentu saja, Anda dapat menetapkan kelas CSS tertentu untuk setiap gambar, yang memberi Anda kekuatan super tambahan untuk menambahkan penyesuaian apa pun yang Anda perlukan ke gambar galeri Anda.

Untuk tampilan lebih dekat dari blok Galeri baru, lihat juga Catatan Pengembang Refactor Blok Galeri, peningkatan Blok Galeri Mendatang, dan catatan rilis Gutenberg 11.4.

Peningkatan Gambar Unggulan

Beberapa peningkatan juga telah dibawa ke blok Featured Image.

Kontrol Dimensi Dasar

Blok Gambar Unggulan sekarang menampilkan panel pengaturan Dimensi baru yang menyediakan kontrol tinggi, lebar, dan skala.

Kontrol dimensi juga berlaku untuk gambar unggulan di blok Loop Kueri, seperti yang ditunjukkan pada gambar berikut:

Filter Duotone pada Gambar Unggulan

Kami sebutkan di atas bahwa kami sekarang dapat menerapkan filter duotone pada gambar yang dibungkus dalam blok Galeri baru yang direfaktorisasi.

Sekarang, dimulai dengan WordPress 5.9, filter duotone juga tersedia di blok Gambar Unggulan dalam konteks apa pun, dari templat posting dan halaman hingga blok Query Loop.

Fitur ini membuka pintu untuk kombinasi warna yang kreatif dan konsisten di seluruh situs.

Pemangkasan Gambar di Logo Situs

Sebelum WordPress 5.9 (dan Gutenberg 11.6), gambar logo hanya dapat diedit sebelum diunggah. Dengan WordPress 5.9, Anda dapat memotong, memperbesar, dan memutar gambar yang digunakan di blok Logo Situs langsung dari bilah alat blok.

Alat Desain Baru, Blok, dan Peningkatan UI

Sebelas versi Gutenberg digabungkan ke dalam inti dengan WordPress 5.9, menghadirkan begitu banyak fitur, peningkatan, dan perbaikan bug sehingga tidak mungkin untuk membahas semuanya dalam satu artikel.

Jadi kami memilih beberapa yang menurut kami paling layak untuk diperhatikan. Untuk gambaran yang lebih dalam tentang fitur dan peningkatan tersebut, Anda mungkin juga ingin memeriksa posting rilis untuk Gutenberg 10.8, 10.9, 11.0, 11.1, 11.2, 11.3, 11.4, 11.5, 11.6, 11.7, 11.8, dan 11.9.

Dengan itu, bagian ini akan mencakup perubahan berikut:

Perbatasan Mendukung UI

Dimulai dengan WordPress 5.9, ketika theme.json mendeklarasikan pengaturan border dan sebuah blok mendeklarasikan dukungan perbatasan melalui Block Supports API, panel pengaturan baru akan menyediakan kontrol untuk radius perbatasan, lebar, gaya, warna, dan unit (lihat juga Gutenberg 11.1) .

Blok Grup inti adalah contoh yang baik dari peningkatan UI yang berguna ini. File block.json dari blok Group sekarang menyertakan deklarasi supports berikut:

 { ... "supports": { "align": [ "wide", "full" ], "anchor": true, "html": false, "color": { "gradients": true, "link": true }, "spacing": { "padding": true, "__experimentalDefaultControls": { "padding": true } }, "__experimentalBorder": { "color": true, "radius": true, "style": true, "width": true, "__experimentalDefaultControls": { "color": true, "radius": true, "style": true, "width": true } }, ... }, ... }

Fitur ini memungkinkan pengguna untuk membuat efek grafis yang mengagumkan di situs web mereka dengan sedikit usaha. Anda dapat melihatnya beraksi dengan tema Dua Puluh Dua Puluh Dua yang baru.

Di postingan atau halaman baru, buat blok Grup baru dan pilih. Anda akan melihat panel Perbatasan di bilah sisi pengaturan blok. Ubah lebar dan gaya batas sesuai kebutuhan dan nikmati hasilnya.

Jika Anda seorang pengembang tema dan ingin menambahkan fitur ini ke tema Anda, buka file theme.json Anda dan nyatakan dukungan perbatasan seperti yang ditunjukkan pada kode berikut:

 { "version": 1, "settings": { "border": { "customColor": true, "customRadius": true, "customStyle": true, "customWidth": true } } }

Simpan file dan kembali ke dashboard WordPress Anda. Di postingan atau halaman baru, buat blok Grup baru dan pilih. Anda sekarang akan melihat panel Perbatasan di bilah sisi pengaturan blok (lihat juga theme.json eksperimental ini).

Peningkatan Tampilan Daftar

Dengan WordPress 5.9, Tampilan Daftar telah ditingkatkan dan sekarang memiliki fitur seret dan lepas, bagian yang dapat dilipat, dan jangkar HTML.

Seret dan Lepas dalam Tampilan Daftar

Seperti disebutkan dalam permintaan tarik #33320, seret-dan-lepas telah diterapkan di Tampilan Daftar tetapi dinonaktifkan karena masalah kinerja.

Dimulai dengan WordPress 5.9, drag-and-drop di List View telah diimplementasikan kembali. Anda dapat kembali menyeret dan melepaskan blok dan grup blok di mana saja dalam Tampilan Daftar. Ini adalah peningkatan besar dalam kegunaan editor, karena memungkinkan Anda dengan cepat dan mudah memindahkan blok dan grup blok di sekitar halaman Anda. Ini berperan dalam artikel dan halaman bentuk panjang, dan mengelola struktur kompleks blok bersarang.

Tampilan Daftar Bagian yang Dapat Dilipat

Peningkatan signifikan lainnya pada Tampilan Daftar adalah kemampuan untuk memperluas/menciutkan bagian blok bersarang. Ini memungkinkan Anda untuk dengan mudah menavigasi struktur blok yang kompleks, memperluas satu kelompok blok sambil membiarkan sisanya runtuh.

Anda juga dapat memperluas dan menciutkan bagian Tampilan Daftar menggunakan panah kiri dan kanan.

Jangkar HTML pada Item Tampilan Daftar

Namun peningkatan bermanfaat lainnya adalah kemampuan untuk menambahkan jangkar HTML ke blok Anda di Tampilan Daftar dan melihatnya sekilas.

Kontrol Jarak Celah Blok

Pertama kali diperkenalkan di Gutenberg 11.4 dan sekarang digabungkan menjadi inti dengan WordPress 5.9, kontrol Jarak Blok yang baru memungkinkan Anda untuk mengatur jarak khusus antar item dalam satu blok. Di bawah ini, Anda dapat melihat pratinjau dengan nilai spasi blok yang berbeda di blok Kolom dengan tema default Dua Puluh Dua:

Gap Spacing awalnya tersedia untuk blok tertentu, termasuk tombol, gambar, kolom, judul, dan navigasi, tetapi dukungan harus diperluas ke lebih banyak blok di masa mendatang.

Tema harus mengaktifkan Gap Spacing di theme.json menggunakan properti AppearanceTools yang baru. Anda dapat membaca lebih lanjut tentang alat penampilan di penyelaman mendalam kami ke Dua Puluh Dua Puluh Dua. Lihat juga permintaan tarik #33991 dan #34630.

Pratinjau URL Kaya untuk Kontrol Tautan

Dengan memanfaatkan titik akhir detail url REST yang baru, kontrol Tautan kini menyediakan pratinjau URL kaya yang menampilkan detail untuk sumber daya target tautan.

Pada implementasi pertamanya, fitur ini hanya tersedia di komponen richtext Post Editor. Pada saat penulisan ini, itu juga tersedia di Editor Situs, tetapi tidak di editor Navigasi dan Widget.

Buat Halaman dari Link Popup

WordPress 5.9 juga menampilkan UI tautan sebaris yang ditingkatkan, menampilkan tombol baru untuk membuat halaman baru langsung dari sembulan tautan sebaris. Fitur ini hanya tersedia di dalam Post Editor.

Peningkatan pada Blok Pencarian

Blok Pencarian sekarang menampilkan tombol dan pengaturan warna batas.

Sekarang Anda juga dapat menyesuaikan warna latar belakang dan teks serta warna dan radius batas.

Kontrol Baru untuk Dimensi Blok

Panel pengaturan Dimensi baru sekarang tersedia bagi pengguna untuk mengontrol ruang yang ditempati oleh blok pada halaman. Panel harus mencakup tinggi, lebar, padding, margin, dan mungkin kontrol perataan, tetapi tidak semua atribut akan tersedia untuk setiap blok.

Pengembang blok akan menemukan komponen <DimensionControl /> yang didokumentasikan di GitHub, tetapi perhatikan bahwa itu masih ditandai sebagai fitur eksperimental dan dapat mengalami perubahan yang melanggar pada saat penulisan ini.

Blok Grup Widget Baru Ditambahkan ke Layar Widget

Blok Grup Widget baru sekarang tersedia di editor widget berbasis blok. Blok terbaru memungkinkan Anda untuk menambahkan sekelompok blok di widget dengan judul di Editor Widget dan Penyesuai tema klasik.

Anda dapat membaca lebih lanjut tentang editor widget di Editor Widget Berbasis Blok dan Widget Blok di Customizer.

Tata Letak Fleksibel dan Blok Baris Baru

Awalnya diperkenalkan sebagai fitur eksperimental dengan Gutenberg 11.2, tata letak fleksibel telah diperluas ke beberapa blok, termasuk Tautan Sosial dan blok Grup.

Beberapa blok, seperti blok Tautan Sosial, kini menyediakan satu set kontrol bilah alat dan pengaturan bilah sisi yang memungkinkan Anda menyesuaikan tata letak fleksibel.

Fungsionalitas yang sama ini tersedia di blok Navigasi dan blok Baris, variasi baru dari blok Grup yang diperkenalkan dengan Gutenberg 11.5.

Gambar berikut menunjukkan blok Baris dengan kontrol tata letak di bilah sisi pengaturan:

Di bawah, Anda dapat melihat blok Baris yang sama di frontend dan di alat inspektur Chrome.

Blok Peningkatan Pola

Pertama kali diperkenalkan dengan WordPress 5.5, pola blok memungkinkan pengguna WordPress untuk memasukkan struktur blok bersarang siap pakai yang kompleks ke dalam konten mereka hanya dengan beberapa klik.

Sekarang, WordPress 5.9 melangkah maju menuju demokratisasi desain & pemberdayaan pengguna dengan memperkenalkan beberapa peningkatan pada sistem pola blok.

Jadi, apa yang baru dengan pola blok di WordPress 5.9?

Pola Unggulan dari Direktori Pola

Block Inserter sekarang menampilkan Pola Blok Unggulan yang diambil secara dinamis dari Direktori Pola, memberikan pengguna cara cepat dan mudah untuk menemukan pola populer untuk digunakan dalam konten mereka.

Dengan cara yang sama, ketika pola langsung masuk ke dasbor WordPress, pengembang WordPress harus didorong untuk membuat dan menerbitkan lebih banyak pola dari waktu ke waktu, menghasilkan kemampuan desain yang semakin canggih bagi pengguna.

Penjelajah Pola Layar Penuh Baru

Karena jumlah pola blok yang tersedia di Direktori Pola terus bertambah dan lebih banyak tema yang menggunakannya, WordPress 5.9 memperkenalkan antarmuka navigasi pola blok baru: Penjelajah Pola.

Tombol Jelajahi baru sekarang membuka modal layar penuh yang memungkinkan pengguna menelusuri, mencari, dan menyisipkan pola blok hanya dengan beberapa klik. Hasilnya adalah pengalaman pengguna yang lebih baik.

Anda juga akan menemukan catatan tambahan dan beberapa contoh pola blok dalam pembahasan mendalam kami tentang tema Twenty Twenty-Two WordPress.

Jika Anda tertarik dan ingin mempelajari lebih lanjut, dengarkan podcast Josepha Haden Chomphosy Episode 16 dan 21, dan tonton video YouTube Exploring WordPress 5.9 dari Anne McCarthy.

Tema Dua Puluh Dua Puluh Dua dan Tema Blok WordPress

Dengan WordPress 5.9, Anda tidak perlu lagi menginstal plugin Gutenberg untuk mengaktifkan Full Site Editing di situs WordPress Anda. Anda hanya perlu mengizinkan tema blok untuk memanfaatkan semua fitur FSE.

Selain itu, WordPress 5.9 telah dibundel dengan tema default baru, Twenty Twenty-Two, dan ini adalah pengubah permainan karena Twenty Twenty-Two adalah tema blok default pertama yang pernah ada.

Dua Puluh Dua Puluh Dua adalah tema yang sangat fleksibel dan dapat disesuaikan. Ini menyediakan kotak pasir yang sempurna untuk mencoba alur pengeditan template baru, blok baru, peningkatan antarmuka, dan semua fitur pengeditan situs ditambahkan ke inti, dimulai dengan WordPress 5.9.

Seperti disebutkan di atas, yang perlu Anda lakukan hanyalah menginstal dan mengaktifkan tema blok, seperti Twenty Twenty-Two. Setelah tema aktif, item menu Editor (beta) baru akan muncul di menu admin dashboard WordPress.

Antarmuka Editor Situs sekarang menampilkan Alur Pengeditan Situs yang diubah. Dari antarmuka pengeditan, Anda akan dapat secara visual mengedit beranda situs, templat, dan bagian templat, serta mengakses antarmuka Gaya Global.

Saat Anda mengaktifkan tema blok, Anda tidak akan menemukan Customizer. Itu karena Customizer tidak mendukung tema blok, yang hanya menggunakan Editor Situs. Itu juga alasan mengapa Anda tidak dapat melihat pratinjau tema blok yang tidak aktif .

Jadi, mulai WordPress 5.9, titik akses ke Customizer tidak lagi tersedia di menu admin saat tema blok aktif (kecuali jika Anda menggunakan plugin yang memanfaatkannya).

Jika Anda masih terikat dengan tema tradisional dan khawatir tentang kompatibilitas mundur, tenang saja: Anda dapat terus menggunakan tema Anda.

Saat ini Anda memiliki empat kategori tema yang berbeda untuk dipilih:

• Blokir tema : Tema yang dirancang untuk FSE
• Tema universal : Tema yang bekerja dengan Penyesuai dan Editor Situs
• Tema hibrida : Tema klasik yang mendukung fitur FSE seperti theme.json
• Tema klasik : Tema dengan template PHP, functions.php, dll.

Karena dampak yang kemungkinan besar akan ditimbulkan oleh tema blok pada ekosistem WordPress, kami memiliki seluruh artikel yang mencakup Twenty Twenty-Two dan tema blok WordPress. Pastikan untuk memeriksanya untuk ikhtisar yang lebih mendalam.

Peningkatan Kinerja

Di Kinsta, kami terobsesi dengan kecepatan situs web. Itu sebabnya kami senang dengan peningkatan kinerja yang datang dengan WordPress 5.9.

Perbaikan ini akan mempengaruhi beberapa area CMS, mulai dari editor blok hingga blok tema, lazy loading, dan banyak lagi. Mari selami.

Blokir Penyempurnaan Penyisip

Sejak WordPress 5.9, tipe blok, pola, dan kategori dirender dengan malas di Block Inserter. Peramban memuat konten dengan prioritas lebih tinggi terlebih dahulu, memberi pengguna pengalaman mengedit yang lebih lancar dan kinerja yang lebih baik.

Peningkatan kinerja penting lainnya dalam konteks editor blok memengaruhi blok yang dapat digunakan kembali dan Tampilan Daftar.

Lebih Sedikit CSS Dimuat

Sedangkan untuk frontend, WordPress 5.9 secara drastis mengurangi jumlah CSS yang dimuat oleh tema blok, yang menyebabkan pemuatan halaman secara signifikan lebih cepat.

Peningkatan utama yang harus diperhatikan dalam konteks ini adalah pengenalan pengaturan theme.json dan mekanisme gaya, yang mencegah tema menggunakan lembar gaya besar-besaran, termasuk ratusan deklarasi CSS. Jumlah kode CSS yang digunakan tema kini telah dikurangi menjadi beberapa properti kustom CSS yang dapat digunakan kembali oleh semua jenis blok.

Peningkatan Kinerja Pemuatan Malas

Pemuatan malas gambar pertama kali diperkenalkan di WordPress 5.5. Mulai dari WordPress 5.7, fungsi pemuatan lambat diperluas ke iframe, memungkinkan pemilik situs untuk membangun situs web yang lebih cepat dan meningkatkan SEO mereka.

Bagaimanapun, setelah analisis dari Cat Konten Terbesar (LCP), ternyata menetapkan atribut loading="lazy" ke semua gambar dan iframe pada halaman menyebabkan sedikit penurunan kinerja.

Melewatkan atribut loading="lazy" saja bukanlah solusi karena hal itu akan menyebabkan hilangnya keuntungan yang jelas dari lazy loading.

Solusi optimal adalah dengan hanya menghilangkan atribut loading="lazy" pada gambar yang muncul di paro atas. Namun, karena atribut loading="lazy" ditetapkan di sisi server, WordPress tidak dapat menentukan gambar mana yang ditampilkan dengan tepat di paro atas. Itu adalah sesuatu yang sebagian besar tergantung pada tema aktif.

Sekarang, sebagai solusi trade-off, dimulai dengan WordPress 5.9, atribut loading="lazy" tidak diterapkan ke gambar konten atau iframe pertama. Analisis yang dilakukan pada 50 tema WordPress populer menemukan bahwa solusi ini menghasilkan peningkatan kinerja yang cukup besar dan pemuatan halaman hingga 30% lebih cepat.

Felix Arntz menjelaskan cara kerjanya:

… untuk meningkatkan kinerja out-of-the-box tanpa memerlukan pengembang untuk menyesuaikan perilaku, WordPress sekarang akan melewati “gambar konten atau iframe” pertama di halaman agar tidak dimuat dengan lambat. Istilah "gambar konten atau iframe" di sini menunjukkan gambar atau iframe apa pun yang ditemukan di dalam konten kiriman apa pun di loop kueri utama saat ini serta gambar unggulan apa pun dari kiriman semacam itu. Ini berlaku untuk konten "tunggal" dan "arsip": Dalam konteks "tunggal" gambar pertama atau iframe dari pos (hanya) tidak dimuat lambat, sedangkan dalam konteks "arsip" gambar atau iframe pertama dari posting pertama dalam kueri tidak dimuat dengan malas.

Pengembang tema sekarang dapat menggunakan filter wp_omit_loading_attr_threshold baru untuk mengubah jumlah gambar/iframe yang akan dilewati dari pemuatan lambat.

Beberapa Stylesheet Per Blok

Pengembang blok dan tema dapat mendaftarkan beberapa lembar gaya di setiap blok dan memuat gaya dari blok lain bila diperlukan. Ini memungkinkan pemuatan stylesheet tergantung pada konten halaman, mencegah tema memuat stylesheet besar di setiap halaman.

Menurut Ari Stathopoulos:

Blok sekarang dapat mendaftarkan beberapa lembar gaya, dan memuat gaya dari blok lain bila diperlukan. Tema akan dapat menambahkan gaya pada basis per blok alih-alih memuat lembar gaya monolitik yang dimuat secara paksa di mana saja. Ini memiliki dampak yang lebih besar pada tema blok di mana pemuatan stylesheet dioptimalkan berdasarkan konten halaman & tata letak, tetapi juga dapat digunakan oleh tema klasik.

Fitur Tambahan untuk Pengembang

Selain banyak fitur dan peningkatan UI yang dibahas sejauh ini, WordPress 5.9 juga memperkenalkan beberapa fitur untuk pengembang.

Atribut Baru untuk Mengunci Blok

Pengembang blok sekarang dapat mencegah pengguna memindahkan atau menghapus blok individual dengan menambahkan atribut lock di setelan blok:

 { ... "attributes": { "lock": { "type": "object", "default": { "move": true, "remove": true } } } }

Dengan mengaktifkan fitur ini, pengguna dapat mengedit konten blok, tetapi tidak dapat memindahkan blok di sekitar halaman atau menghapusnya dari kanvas editor. Gambar berikut menunjukkan blok khusus dengan seperangkat kontrol toolbar standar:

Mendefinisikan atribut lock , seperti yang terlihat pada kode di atas, menyembunyikan penggerak blok dan kontrol Pindahkan ke dan Hapus dari bilah alat blok. Gambar di bawah ini menunjukkan hasil akhir di layar:

Anda juga dapat mengunci blok tertentu dalam pola blok. Sebagai contoh, lihat juga Mengunci Blok di WordPress 5.9.

API Baru untuk Mengakses Pengaturan & Gaya Global

WordPress 5.9 memperkenalkan API publik PHP baru untuk membaca data dari theme.json .

Membaca Pengaturan dan Gaya dari theme.json

Ada dua fungsi baru untuk membaca data dari bagian settings dan styles yang dideklarasikan di theme.json :

 wp_get_global_settings( $path = array() , $context = array() ); wp_get_global_styles( $path = array(), $context = array() );

• $path adalah larik yang mencantumkan jalur ke pengaturan yang ditentukan
• $context adalah array yang mengatur konteks untuk data tersebut. Pengembang dapat membaca dari bagian pengaturan blok tertentu — misalnya, array( 'block_name' => 'core/paragraph' ) . Kunci orygin yang disetel ke base memungkinkan pengabaian data khusus yang disimpan oleh pengguna.

Kode contoh berikut akan mengembalikan nilai pengaturan contentSize . Dalam Twenty Twenty-Two, itu akan menjadi 650px :

 wp_get_global_settings( array( 'layout', 'contentSize' ) );

Dengan menyetel konteks, Anda dapat mengambil gaya untuk blok tertentu. Kode berikut menunjukkan cara mengambil nilai radius batas untuk blok core/button :

 function get_global_styles() { return wp_get_global_styles( array( 'border', 'radius' ), array( 'block_name' => 'core/button' ) ); }

Fungsi di atas mengembalikan nilai properti yang diperlukan sambil mempertimbangkan pengaturan default, pengaturan tema, dan data pengguna. Nilai kustom akan diberikan jika pengguna mengonfigurasi radius batas tombol di antarmuka Global Styles.

Untuk mengabaikan data pengguna, Anda akan menggunakan kode berikut:

 function get_global_styles() { return wp_get_global_styles( array( 'border', 'radius' ), array( 'block_name' => 'core/button', 'origin' => 'base' ) ); }

Mendapatkan Lembar Gaya yang Dihasilkan

WordPress 5.9 juga memperkenalkan fungsi baru untuk mendapatkan stylesheet yang dihasilkan dari default, tema, dan gaya kustom:

 wp_get_global_stylesheet( $types = array() );

$types adalah daftar gaya yang akan dihasilkan.

Anda dapat membaca selengkapnya tentang API baru di API Baru untuk mengakses setelan & gaya global.

Lebih Banyak Fitur untuk Pengembang

Perubahan tambahan WordPress 5.9 untuk pengembang yang mungkin ingin Anda ketahui termasuk:

• Blokir tema, cara baru untuk membangun tema di WordPress 5.9
• Pembaruan untuk Pengaturan, Gaya, dan theme.json
• Perubahan dan filter yang berfokus pada tema di WordPress 5.9
• Kueri Kemampuan Baru di WordPress 5.9
• Perubahan Inti Lain-Lain di WordPress 5.9
• Perubahan editor blok lain-lain di WordPress 5.9
• Ambil kendali lebih besar atas Area Blok Dalam (sebagai pengembang blok)

Panduan utama Anda untuk WordPress 5.9: dari peningkatan UI hingga gaya global (dan banyak lagi!) Klik untuk Tweet

Ringkasan

Kami akan menyelesaikan artikel ini dengan catatan singkat tentang pangsa pasar WordPress. WordPress saat ini menguasai lebih dari 65% dari semua situs web yang sistem manajemen kontennya dikenal dan berada di utara 43% dari semua situs web .

Angka-angka ini mengesankan, terutama jika dibandingkan dengan pesaing terdekat dengan pangsa pasar kurang dari 5%, seperti Shopify.

Dan ini juga berarti Anda tidak dapat mengabaikan evolusi WP CMS. Setiap versi baru WordPress menghadirkan fitur baru, peningkatan antarmuka, peningkatan kinerja, dan WordPress 5.9 tidak terkecuali. Yang Anda perlukan untuk menguji fitur baru adalah tema blok, seperti tema default Twenty Twenty-Two yang baru, dan Anda akan siap untuk menggunakannya.

Untuk Anda, sekarang! Apakah Anda siap untuk beralih ke blok tema dan FSE? Dan apa perubahan favorit Anda yang datang dengan WordPress 5.9?