Yang Baru di WordPress 6.2: Mode Penelusuran, Buku Gaya, Menu Navigasi yang Disempurnakan, API Baru, dan Banyak Lagi

WordPress 6.2 telah dijadwalkan untuk rilis pada 28 Maret 2023 , dan inilah saatnya bagi kita untuk mengeksplorasi apa yang akan hadir dengan rilis pertama tahun 2023.

Dengan WordPress 6.2, kami memasuki tahap akhir Fase 2 dari peta jalan pengembangan jangka panjang Gutenberg, dan editor blok secara resmi meninggalkan fase beta.

Rilis ini terutama berfokus pada peningkatan antarmuka dan merampingkan pengalaman pengeditan.

Sebuah pendekatan baru untuk menavigasi antara template dan bagian template telah diperkenalkan, serta kemampuan untuk mengimpor widget ke dalam tema blok, mode penulisan bebas gangguan baru, pengalaman pengaturan blok yang diskalakan, dan banyak peningkatan besar dan kecil pada blok yang ada , kinerja, dan kegunaan.

Namun jika ada sesuatu yang melompat ke depan dalam hal fungsionalitas dan kegunaan, itu adalah blok Navigasi. Sejak pertama kali dirilis, menu Navigasi telah melalui beberapa iterasi yang secara signifikan merampingkan proses pengeditan dari waktu ke waktu. Dengan WordPress 6.2, pengembangan berlanjut, dan dalam artikel ini, kami akan menunjukkan kepada Anda betapa mudahnya Anda mengelola menu navigasi.

Pengalaman Mengedit yang Lebih Baik

WordPress 6.2 menghadirkan pengalaman pengeditan yang lebih baik, dengan seluruh struktur situs ditempatkan di tengah. Anda kini dapat mengelola menu navigasi dengan lebih mudah, mendorong perubahan gaya dari satu blok ke Gaya Global, dan dengan mudah menavigasi antara template dan komponen template dengan komponen template berwarna dan blok yang dapat digunakan kembali.

Tapi masih banyak lagi. Mari jelajahi secara detail penambahan dan perubahan utama pada antarmuka editor.

Antarmuka Editor Situs yang Dirubah dan Mode Jelajah

Dengan WordPress 6.2, beberapa peningkatan pada antarmuka editor menjadi intinya. Pembaruan pertama dan paling menarik memengaruhi antarmuka Editor Situs. Berkat Mode Jelajah baru, sekarang lebih mudah untuk menavigasi templat dan komponen templat.

Antarmuka baru juga memungkinkan Anda untuk menambahkan template atau bagian template baru langsung dari sidebar editor hanya dengan mengklik ikon plus (+) yang terletak di sebelah kanan judul menu.

Menurut Ryan Welcher, kontributor Wp Core and Documentation, “[T]ia mengerjakan fitur ini sedang berlangsung dan akan terus meningkat saat versi Gutenberg baru dirilis.”

Alur kerja sekarang lebih halus dan mulus. Untuk mulai mengedit bagian template/template saat ini, cukup klik tombol Edit di menu sebelah kiri, atau pada pratinjau template di tengah halaman.

Mode Bebas Gangguan

WordPress 6.2 memperkenalkan mode pengeditan Bebas Gangguan baru, yang memotong kekacauan dari kanvas dan memungkinkan Anda untuk fokus pada konten halaman.

Anda dapat mengaktifkan fitur ini di panel opsi yang muncul dengan mengeklik ikon elipsis (tiga titik) di pojok kanan atas.

Setelah mode Distraction Free diaktifkan, bilah sisi dan bilah alat asing menghilang, hanya menyisakan konten yang sedang Anda kerjakan di layar.

Inspektur Blok Bertab

WordPress 6.2 memperkenalkan Inspektur Blok baru yang bertujuan menertibkan sidebar dengan membagi kontrol pengaturan menjadi panel terpisah.

Pengaturan blok sekarang dibagi menjadi beberapa tab untuk memisahkan pengaturan gaya dari pengaturan blok lainnya.

Jika tersedia, tab Inspektur Blok akan ditampilkan dengan urutan sebagai berikut:

• Tampilan Daftar: Termasuk kontrol untuk mengelola anak blok, seperti submenu dan tautan di blok Navigasi
• Pengaturan: Termasuk pengaturan konfigurasi yang tidak terkait dengan tampilan blok
• Penampilan: Menyertakan pengaturan yang secara khusus terkait dengan gaya blok saat ini, seperti tipografi dan warna

Ini adalah peningkatan penting dalam kegunaan antarmuka, terutama untuk blok lanjutan dengan banyak opsi konfigurasi seperti Blok Grup atau Blok Navigasi.

Perhatikan bahwa:

• Inspektur baru hanya menampilkan tab jika berisi elemen untuk ditampilkan.
• Jika tab Pengaturan hanya berisi panel Lanjutan, itu dipindahkan ke tab Tampilan.
• Jika Inspektur Blok hanya memiliki satu tab, maka akan ditampilkan seperti sebelum WordPress 6.2.

Lihat catatan dev untuk melihat lebih dekat dari Inspektur Blok baru.

Bagian Templat Berwarna dan Blok yang Dapat Digunakan Kembali

Untuk lebih mudah membedakannya dari grup dan blok, Bagian Template dan blok yang Dapat Digunakan Kembali kini disorot dengan warna berbeda di Tampilan Daftar, Penyisip Blok, Bilah Alat Blok, dan di kanvas editor.

Ini terjadi di Editor Situs dan editor pos, seperti yang ditunjukkan pada gambar di bawah.

Penyisip Blok yang Dirubah

Block Inserter dipengaruhi oleh beberapa perubahan yang secara signifikan meningkatkan pengalaman pengeditan secara keseluruhan.

Pertama, desain antarmuka baru meningkatkan navigasi antara pola dan kategori media serta menyediakan pratinjau yang lebih besar untuk pola dan item media.

Saat media ada di situs, tab Media muncul di Block Inserter untuk menyederhanakan penyisipan media di dalam konten. Anda dapat menarik dan melepaskan gambar/media atau cukup mengeklik media Anda untuk menambahkannya ke konten.

Tab media di Block Inserter” width=”1296″ height=”1420″ class=”size-full wp-image-148375″> Tab Media baru di Block Inserter

Di dalam tab, tombol Open Media Library membawa Anda ke WordPress Media Lybrary.

Integrasi Openverse di Block Inserter

Openverse adalah alat yang bertujuan untuk membagikan karya berlisensi atau domain publik secara terbuka untuk digunakan oleh siapa saja. Sekarang, dengan WordPress 6.2, Openverse diintegrasikan ke dalam Block Inserter.

Untuk mengakses fitur baru ini, klik tab Media dari Block Inserter. Ini menunjukkan panel dengan bidang pencarian dan pratinjau gambar yang langsung diambil dari repositori Openverse.

Untuk detail teknis, lihat permintaan penarikan integrasi Openverse.

Migrasikan Widget untuk Memblokir Tema

Dimulai dengan WordPress 6.2, pengguna yang menjalankan situs menggunakan tema klasik yang memutuskan untuk beralih ke tema blok dapat memindahkan area widget yang ada ke tema baru, mengubahnya menjadi bagian template.

Mari cari tahu cara kerjanya.

Pertama, buat area widget dengan tema klasik. Misalnya, Anda dapat mengaktifkan Twenty-Eleven dan menambahkan kalender ke Footer Area One.

Sekarang ubah tema menjadi Dua Puluh Dua Puluh Tiga. Buka Editor Situs, pilih templat untuk diedit, dan tambahkan bagian templat.

Di sidebar blok, pilih area widget untuk diimpor dari menu tarik-turun Impor Area Widget .

Dan itu saja. Sekarang Anda dapat mengelola area widget sebelumnya seperti bagian template lainnya.

Detail Dokumen dan Tampilan Daftar Gabungan

Sebelum WordPress 6.2, ada dua tombol terpisah di bilah alat Editor untuk Detail dan Tampilan Daftar . Pada gambar berikut, Anda dapat melihat popover detail dokumen di WordPress 6.1, termasuk jumlah kata, jumlah karakter, waktu membaca, dan jumlah header, paragraf, dan blok, serta Garis Besar Dokumen.

Dimulai dengan WordPress 6.2, Tampilan Daftar dan Detail telah dipindahkan ke satu panel Ikhtisar Dokumen yang dibagi menjadi dua tab: Tampilan Daftar dan Garis Besar .

Perubahan ini akan memberikan cara yang lebih mudah untuk mengelola dokumen.

Kemampuan Blok yang Diperpanjang

Dengan WordPress 6.2, kemampuan beberapa tipe blok inti telah diperluas. Hal ini terutama berlaku untuk blok Navigasi, yang dipengaruhi oleh beberapa perubahan dan peningkatan pengalaman pengeditan.

Mari kita lihat perubahan utama secara mendetail.

Pengeditan Berbasis Daftar untuk Blok Navigasi

Dengan dirilisnya WordPress 6.2, dimungkinkan untuk mengubah susunan elemen Blok Navigasi dari tampilan daftar di sidebar pengaturan blok.

Mengklik item menu akan membawa Anda ke sidebar pengaturan dari Tautan Halaman yang dipilih, tempat Anda dapat mengedit detail tautan, termasuk label, URL, deskripsi, judul tautan, dan rel tautan.

Perubahan ini sangat menyederhanakan pengalaman pengeditan menu navigasi, memungkinkan Anda menambah, mengatur, dan menghapus item di menu Anda, atau bahkan membuat menu Navigasi baru.

Kunci Navigasi

Peningkatan lain pada blok Navigasi adalah kemampuan untuk mengunci pengeditan menu dengan cara yang lebih terperinci. Sekarang Anda dapat Membatasi pengeditan , Nonaktifkan gerakan , dan Mencegah penghapusan , sedangkan dengan WordPress 6.1, hanya opsi Pembatasan pengeditan dan Nonaktifkan gerakan yang tersedia.

Selain itu, opsi yang dipilih juga dapat diterapkan ke blok dalam (tautan dan submenu).

Tambahkan/Hapus Keterangan Dari Blok Toolbar

Tombol Tambahkan/Hapus teks yang baru memungkinkan pengguna mengontrol teks dari bilah alat blok untuk beberapa blok (Audio, Video, Gambar).

Jika Anda sudah menetapkan teks, teks akan disertakan secara otomatis saat Anda menambahkan gambar ke konten Anda.

Perbaikan Blok Daftar Halaman

Dua peningkatan melibatkan blok Daftar Halaman.

Pertama, blok Daftar Halaman sekarang dapat diperluas untuk menampilkan daftar halaman di panel Tampilan Daftar.

Selain itu, opsi baru di sidebar blok sekarang memungkinkan Anda untuk mengatur halaman awal dan hanya menampilkan halaman yang turun darinya di blok.

Placeholder Blok Grup Baru

Sekarang placeholder Blok Grup menampilkan pemilih variasi saat blok ditambahkan ke konten halaman.

Dukungan Blok Pemosisian Lengket

WordPress 6.2 memperkenalkan fitur dukungan blok posisi baru, dimulai dengan posisi lengket.

Fitur baru ini saat ini hanya berlaku untuk blok Grup, yang diikutsertakan secara default.

Pengembang tema dapat mengaktifkan sticky positioning pada tema mereka menggunakan fitur appearanceTools di theme.json . Jika Anda ingin kontrol yang lebih terperinci atas alat penampilan, Anda juga dapat menyetel prop settings.position.sticky ke true .

Anda dapat mengaktifkan sticky positioning di panel Position pada sidebar kontrol Inspector.

Dengan posisi sticky diaktifkan, tag HTML mendapatkan kelas is-position-sticky , dan beberapa aturan CSS berlaku untuk elemen yang sesuai:

 .wp-container-6 { top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px)); position: sticky; z-index: 10; }

Pemosisian lengket hanya berfungsi untuk blok Grup di akar dokumen . Meskipun hal ini dapat mencegah kebingungan dan kesalahan bagi pengguna, Anda dapat menemukan pemosisian lengket bawaan agak rumit saat ini (dan Anda mungkin ingin memeriksa berbagai metode untuk menambahkan tajuk lengket ke situs web WordPress Anda). Namun, menurut catatan pengembang,

… dalam pengujian manual, umpan balik menunjukkan bahwa tanpa kerja UI atau UX tambahan, dapat membingungkan bagi pengguna yang mencoba membuat tajuk lengket jika mereka secara tidak sengaja menyetel blok non-root menjadi lengket, atau misalnya, blok di dalam bagian templat tajuk ke lengket. Keputusannya adalah untuk menskalakan fitur menjadi hanya blok root untuk 6.2 untuk memberikan lebih banyak waktu untuk mengeksplorasi solusi yang cocok untuk blok bersarang.

Fitur pemosisian hanya tersedia untuk blok individual, jadi Anda tidak akan menemukannya di Gaya Global.

Peningkatan Tambahan untuk Memblokir Pengalaman Pengeditan

Beberapa pemutakhiran penting lainnya untuk memblokir pengeditan termasuk yang berikut:

• Anda sekarang dapat menarik dan melepas gambar ke paragraf kosong untuk menggantinya dengan blok Gambar.
• Kontrol tipografi telah dikelompokkan ke dalam panel. Hal ini membuat antarmuka Styles lebih konsisten dengan antarmuka Pengaturan dan meningkatkan kegunaannya, karena kini Anda dapat menampilkan dan menyembunyikan kontrol seperti pada antarmuka pengaturan blok.

  

• Sekarang dimungkinkan untuk memodifikasi jarak huruf dari blok judul secara langsung di antarmuka Global Styles.
• Anda sekarang dapat mengatur latar belakang, tautan, dan warna teks dari blok Kalender.
• Dua kategori pola blok Spanduk dan Kaki baru telah diperkenalkan untuk mencerminkan struktur halaman web dengan lebih baik.
• Sekarang dimungkinkan untuk melengkapi tautan secara otomatis di blok mana pun menggunakan pintasan [[ . Sebelum perubahan ini, pemblokiran harus secara eksplisit menyatakan dukungan untuk pelengkapan otomatis tautan menggunakan __experimentalSlashInserter .
• control baru + option + 1 – 6 pintasan keyboard memungkinkan Anda mengubah paragraf menjadi heading.
• Blok Daftar Halaman sekarang mendukung semua opsi tipografi, termasuk jenis font, ukuran font, tampilan, tinggi baris, spasi huruf, dekorasi, dan huruf besar-kecil.

  

  

Alat Desain yang Disempurnakan

Banyak fitur dan peningkatan baru yang diperkenalkan dengan WordPress 6.2 meningkatkan kemampuan gaya dan desain CMS. Di bawah ini adalah daftar fitur terkait desain paling menarik yang hadir dengan 6.2; kami akan merinci masing-masing lebih jauh ke bawah.

Buku Gaya

WordPress 6.2 memperkenalkan fitur Buku Gaya baru yang memungkinkan pengguna untuk mempratinjau setiap blok yang dapat digunakan di situs web mereka tanpa harus menambahkan blok tersebut ke bagian templat/templat. Anda dapat meluncurkan Style Book dengan mengklik tombol Open Style Book (ikon mata) yang sekarang muncul di header Styles di dalam global styles.

Ini membuka antarmuka yang menunjukkan pratinjau dari setiap blok inti dan pihak ketiga berdasarkan kategori.

Antarmuka Style Book baru menyederhanakan proses desain dengan membuat pratinjau dari setiap gaya blok tersedia di satu lokasi terpusat.

Dari sudut pandang teknis, antarmuka baru dihasilkan oleh komponen StyleBook baru yang ditambahkan ke @wordpress/edit-site untuk menampilkan pratinjau dari setiap blok terdaftar di iframe (lihat juga PR #45960).

Antarmuka yang sama juga menyediakan pratinjau dari masing-masing blok. Sebagai contoh, gambar berikut menampilkan pratinjau widget kalender yang disesuaikan.

Pengembang dapat menyembunyikan blok agar tidak dimasukkan dan dipratinjau dengan dua cara. Pertama, Anda dapat menyetel supports.inserter ke false di block.json :

 { "supports": { "inserter": false } }

Cara lain untuk menyembunyikan pratinjau blok adalah dengan menghindari properti example , yang digunakan untuk membuat pratinjau blok di Panel Bantuan Inspektur (baca lebih lanjut di sini).

Bayangan dalam Gaya Global

Dengan WordPress 6.2, sekarang dimungkinkan untuk menambah dan menyesuaikan bayangan ke beberapa blok menggunakan Global Styles atau theme.json (saat tulisan ini dibuat, fitur bayangan hanya tersedia untuk blok Button).

Pertama, dalam tema yang mendukung fitur ini, Anda dapat menambahkan bayangan dari antarmuka Global Styles.

Untuk melihatnya beraksi, aktifkan tema Twenty Twenty-Three, arahkan ke Styles > Blocks > Button , dan klik tombol Shadow .

Pop-up Shadow memungkinkan Anda memilih bayangan dari preset tema.

Pengembang tema dan pengguna tingkat lanjut juga dapat menambahkan bayangan ke blok menggunakan theme.json . Definisi berikut menambahkan bayangan hitam 4px ke blok Tombol:

 "styles": { "blocks": { "core/button": { "shadow": "4px 4px #000000" } } },

Anda juga dapat menentukan preset untuk memberi pengguna tema kemampuan untuk memilih salah satu dari antarmuka Styles:

 "settings": { "shadow": { "presets": [ { "shadow": "4px 4px #FF0000", "name": "Red", "slug": "red" }, { "shadow": "4px 4px #00FF00", "name": "Green", "slug": "green" }, { "shadow": "4px 4px #0000FF", "name": "Blue", "slug": "blue" } ] }, }

Setelah ditentukan, preset Anda muncul di panel Shadow di blok Styles.

Anda juga dapat memilih nilai preset dan menggunakannya sebagai default blok:

 "styles": { "blocks": { "core/button": { "shadow": "var(--wp--preset--shadow--blue)" } } }

Kontrol Dimensi Tinggi Minimum Baru

Dimulai dengan WordPress 6.2, panel Dimensi dari sidebar pengaturan blok untuk blok Grup dan Konten Post sekarang menyediakan kontrol Tinggi Minimum baru yang diaktifkan secara default di tema menggunakan fitur appearanceTools .

Kontrol baru ini memungkinkan pengguna untuk mengatur ketinggian minimum untuk blok Grup dan Konten Posting dan dapat digunakan untuk merender footer di bagian bawah halaman, bahkan dengan sedikit konten.

Dikombinasikan dengan alat perataan vertikal baru, ini juga memungkinkan untuk menyelaraskan elemen bagian dalam secara vertikal di bagian atas/tengah/bawah halaman.

Pengembang dapat menambahkan dukungan untuk ketinggian minimum ke tema dengan menambahkan pengaturan minHeight ke theme.json :

 { "settings": { dimensions: "minHeight": true } }

Anda juga dapat menggunakan properti appearanceTools :

 { "settings": { "appearanceTools": true } }

Properti minHeight baru juga dapat digunakan untuk menyetel nilai tertentu secara langsung di theme.json :

 { "styles": { "blocks": { "core/post-content": { "dimensions": { "minHeight": "80vh" } } } } }

Pengembang blok dapat menambahkan properti supports.dimensions.minHeight ke file block.json mereka dan menyetel nilainya ke true . Untuk blok statis, aturan min-height CSS akan disimpan sebagai gaya sebaris, sedangkan untuk blok dinamis akan disertakan dalam atribut gaya yang dikembalikan oleh get_block_wrapper_attributes .

CSS khusus di Panel Gaya

Salah satu fitur yang hilang di Editor Situs dibandingkan dengan Penyesuai Tema adalah kemampuan untuk menambahkan gaya CSS khusus. WordPress 6.2 mengisi kekosongan dan sekarang antarmuka Global Styles menyertakan bidang teks untuk menambahkan aturan CSS khusus yang tidak akan ditimpa saat Anda memperbarui tema.

Anda dapat menambahkan gaya khusus baik berdasarkan per blok, dari panel gaya blok, atau dengan mengklik tombol tindakan Gaya Lainnya di bilah alat Gaya. Ini menampilkan menu pop-up yang menampilkan elemen CSS tambahan .

Untuk mendukung CSS khusus, properti styles.css baru telah ditambahkan ke theme.json .

Aturan CSS khusus dapat sepenuhnya menggantikan gaya khusus apa pun yang ditetapkan di theme.json . Jika Anda tidak ingin hal ini terjadi, Anda mungkin ingin mempertimbangkan untuk menyertakan style sheet menggunakan metode enqueuing yang ada.

Anda juga dapat menambahkan CSS khusus per blok di theme.json menggunakan properti styles.blocks.block.css :

 "styles": { "blocks": { "core/button": { "css": "background: #FF0000" } } }

Anda juga dapat menggunakan & untuk elemen bersarang dan pemilih semu.

Untuk melihat lebih dekat fitur CSS kustom baru, lihat juga CSS Kustom untuk gaya global dan per blok.

Menyalin dan Menempelkan Gaya Antar Blok

Grup baru di menu Opsi bilah alat blok sekarang menampilkan dua tombol untuk Salin gaya dan Tempel gaya . Sebelum penambahan ini, hanya dimungkinkan untuk menyalin gaya, tetapi tidak jelas cara menempelkan gaya.

Untuk mencoba fitur baru ini, tambahkan blok baru, seperti heading. Ubah gaya dan pilih Salin gaya dari menu Opsi blok.

Kemudian pilih blok lain dan pilih Paste style . Gaya yang disalin akan diterapkan secara otomatis ke blok kedua.

Perhatikan bahwa fitur ini hanya tersedia di situs aman (https) di browser yang mendukung. Untuk detail tambahan, lihat pull request.

Terapkan Blokir Perubahan Secara Global

WordPress 6.2 juga memperkenalkan tombol Terapkan secara global di bawah panel Lanjutan untuk setiap blok yang memungkinkan Anda mendorong perubahan gaya blok ke Gaya Global dan menerapkan perubahan tersebut di seluruh situs web.

Berkat fitur baru ini, menerapkan tipografi blok, spasi, dimensi, dan gaya warna ke semua blok jenis itu kini semudah menekan tombol (lihat juga permintaan tarik ini).

Pengalaman Desain yang Disempurnakan Dengan Spacing Visualizers

Spacing Visualizers memungkinkan Anda untuk melihat jumlah margin atau padding yang sedang diterapkan ke blok. Dengan WordPress 6.2, fitur ini disempurnakan dengan beberapa tambahan yang meningkatkan pengalaman pengeditan.

Pertama, Spacing Visualizers sekarang muncul segera setelah Anda mengarahkan kursor ke kontrol margin atau padding.

Kedua, Visualizer Penspasian sekarang secara otomatis menyembunyikan bilah alat blok segera setelah Anda mengarahkan kursor ke pengaturan penspasian sehingga Anda dapat mempratinjau pengaturan margin dan padding baru yang bebas dari keruwetan bilah alat blok.

Ini adalah perubahan kecil namun signifikan yang memengaruhi sejumlah besar blok inti.

Perubahan untuk Pengembang

WordPress 6.2 juga menghadirkan banyak fitur baru untuk pengembang: API baru, perbaikan bug, peningkatan kinerja, dan banyak lagi. Mari selami tambahan yang paling menarik.

API HTML Baru

WordPress 6.2 memperkenalkan Pemroses Tag HTML, parser yang sesuai dengan spesifikasi HTML5 yang menyediakan cara aman untuk menemukan tag HTML tertentu dan menambahkan, menghapus, atau memperbarui atribut melalui PHP. Pemroses Tag HTML adalah komponen pertama dalam API pemrosesan HTML baru.

API baru memudahkan untuk melakukan tugas-tugas kompleks yang sebelumnya sering membutuhkan penggunaan ekspresi reguler.

Dalam contoh berikut, kami cukup menambahkan atribut alt ke tag img :

 $html = '<img src="/my-image.jpg" />'; $p = new WP_HTML_Tag_Processor( $html ); if ( $p->next_tag() ) { $p->set_attribute( 'alt', 'Hello WordPress 6.2' ); } echo $p->get_updated_html();

Kode ini akan menghasilkan tag img berikut:

 <img alt="Hello WordPress 6.2" src="/my-image.jpg">

Metode $p->next_tag() berpindah ke tag berikutnya yang tersedia di HTML. Itu juga menerima nama tag, kelas CSS, atau keduanya untuk menemukan tag tertentu, seperti yang ditunjukkan pada contoh di atas.

Untuk mengedit tag HTML, pertama-tama Anda harus memilih tag target:

 $p->next_tag();

Setelah memilih tag target, Anda dapat menggunakan metode API untuk melakukan beberapa operasi:

• $p->get_tag()
• $p->set_attribute()
• $p->get_attribute()
• $p->remove_attribute()
• $p->add_class()
• $p->remove_class()

Anda dapat mengatur atribut gaya:

 $html = '<a href="https://example.com">example.com</a>'; $p = new WP_HTML_Tag_Processor( $html ); if ( $p->next_tag( 'a' ) ) { $p->set_attribute( 'style', 'text-decoration: wavy underline purple;' ); } echo $p->get_updated_html();

Anda juga dapat menambah atau menghapus kelas atau atribut. Dalam kode berikut, kami menambahkan kelas khusus ke tag h1 :

 $html = '<div><h1>Page Title</h1></div>'; $p = new WP_HTML_Tag_Processor( $html ); if( $p->next_tag( 'h1' ) ) { $p->add_class( 'title' ); } echo $p->get_updated_html();

Anda kemudian dapat mengulang atau mengembalikan tag yang diperbarui menggunakan metode $p->get_updated_html() .

Untuk melihat lebih dekat pada HTML API yang baru, lihat tutorial PHP interaktif ini dari Adam Zielinski, WordPress Core committer.

API Pola dan Properti template_types Baru

Patterns API memungkinkan pengembang WordPress untuk "membuat blok konten pra-desain yang dapat dengan mudah dimasukkan ke dalam posting, halaman, jenis posting kustom, dan template".

Dengan WordPress 6.2, Patterns API sekarang menyertakan properti template_types baru untuk memungkinkan Anda menentukan template mana yang dapat digunakan dengan pola blok tertentu.

Jorge Costa menyoroti bahwa ini adalah pembaruan khusus backend dan saat ini tidak ada fungsionalitas UX yang sesuai. Namun, kami dapat mengharapkan untuk melihat implementasi yang berkembang dari fitur ini dengan WordPress 6.3:

Penggunaan pertama, dalam pemikiran untuk WordPress 6.3, adalah untuk menunjukkan kepada pengguna beberapa pola yang masuk akal pada template saat pengguna mulai membuat template. Pengguna dapat memulai dari pola alih-alih "kosong" atau template fallback.

Di sisi teknis, fungsi register_block_pattern() telah dimodifikasi untuk menyertakan parameter template_types baru, yang merupakan larik string berisi nama templat yang dimaksudkan untuk pola blok.

REST API juga dimodifikasi untuk mengembalikan tipe template dari pola blok jika setidaknya satu telah ditentukan.

Bereaksi v18.0 dan Mode Konkurensi

WordPress 6.2 juga mengirimkan versi baru dari perpustakaan React, sekarang diperbarui ke versi 18.0. Versi baru hadir dengan API baru, fitur, peningkatan, dan perbaikan bug. Salah satu fitur utama yang hadir dengan React v18.0 adalah pengenalan mode konkurensi, “mekanisme baru di balik layar yang memungkinkan React menyiapkan beberapa versi UI Anda secara bersamaan”.

Salah satu karakteristik utama Concurrent Mode di React adalah dapat diinterupsi:

React menjamin bahwa UI akan tampil konsisten bahkan jika render terganggu. Untuk melakukannya, ia menunggu untuk melakukan mutasi DOM hingga selesai, setelah seluruh pohon dievaluasi. Dengan kemampuan ini, React dapat menyiapkan layar baru di latar belakang tanpa memblokir thread utama. Ini berarti UI dapat segera merespons input pengguna meskipun berada di tengah tugas rendering yang besar, menciptakan pengalaman pengguna yang lancar.

Manfaat utamanya adalah UI segera merespons input pengguna, sesuai dengan pekerjaan yang masih berjalan di latar belakang.

Namun, konkurensi juga menimbulkan potensi jebakan yang harus diperhatikan oleh pengembang. Untuk ikhtisar yang lebih mendalam tentang Concurrent Mode di React di WordPress 6.2, lihat contoh yang disediakan di catatan dev.

Perubahan Tambahan untuk Pengembang

Perubahan penting lainnya yang harus diperhatikan pengembang termasuk yang berikut:

• WordPress 6.2 memperkenalkan filter JavaScript baru yang dapat digunakan untuk memfilter pengaturan blok sebelum editor ditampilkan di layar. Filter blockEditor.useSetting.before baru juga memungkinkan pengembang untuk mengubah pengaturan berdasarkan lokasi blok, peran pengguna saat ini, blok tetangga, dan banyak lagi. Untuk informasi tambahan dan contoh penggunaan, lihat Sesuaikan pengaturan untuk setiap blok di WordPress 6.2.
• Prop skipBlockSupportAttributes baru telah diperkenalkan untuk mengecualikan atribut dan gaya yang terkait dengan dukungan blok di komponen ServerSideRender .
• API theme.json baru sekarang memungkinkan untuk menata variasi blok inti yang ada dari theme.json .
• Google Font sekarang disertakan secara lokal dan tidak diambil dari alamat Google dalam paket tema dari Dua Belas Dua Belas hingga Dua Puluh Tujuh Belas.

Tapi itu belum semuanya. WordPress 6.2 memperkenalkan banyak fitur, peningkatan, dan perbaikan bug yang tidak kami sebutkan di sini demi singkatnya. Untuk ikhtisar yang lebih komprehensif, lihat Panduan Lapangan WordPress 6.2.

Ringkasan

WordPress 6.2 membawa kita lebih dekat ke akhir Fase 2 proyek Gutenberg bernama Kustomisasi. Namun, seperti yang ditunjukkan oleh Matias Ventura, ini tidak berarti pekerjaan penyesuaian selesai dan di versi yang akan datang. Seperti biasa, kami mengharapkan peningkatan tambahan pada editor berdasarkan umpan balik dari komunitas.

Dalam posting ini, kami menjelajahi beberapa fitur utama, peningkatan, dan perbaikan bug yang hadir dengan WordPress 6.2. Tapi masih banyak lagi di 6.2. Dengan sepuluh versi plugin Gutenberg ke dalam inti — dari 14.2 hingga 15.1 — kita akan melihat Mode Penelusuran baru, Inspektur Blok Bertab, migrasi Widget ke Blok Tema, API baru, dan banyak penyempurnaan dan perbaikan bug. Dan juga akan ada peningkatan aksesibilitas dan internasionalisasi.

Dan jika Anda menyukai WordPress dan ingin memperoleh keterampilan pengembangan WordPress baru atau menguji dan memberikan kontribusi pada CMS, pastikan untuk menggunakan DevKinsta, rangkaian pengembangan WordPress lokal Kinsta yang sepenuhnya gratis, untuk uji coba.

Sekarang, kepada Anda: Sudahkah Anda menguji versi baru di lingkungan pengembangan Anda? Fitur apa yang paling Anda sukai di WordPress 6.2? Sampaikan pendapatmu pada bagian komentar di bawah ini.