Menyelam Jauh ke Dua Puluh Dua Puluh Dua dan Tema Blok WordPress

Meskipun sedikit lebih lambat dari yang direncanakan, kami mendapatkan tema default WordPress baru. Namanya Dua Puluh Dua Puluh Dua!

Tema default WordPress baru hadir dengan rilis WordPress 5.9 yang akan datang. Kami penasaran untuk mempelajari lebih lanjut tentang tema baru, jadi kami menginstal dan menguji Twenty Twenty-Two di lingkungan pengembangan lokal yang menjalankan WordPress 5.9.

Kami akan menunjukkan kepada Anda hasil kami sebelum menyimpulkan pemikiran kami untuk memberi Anda gambaran mendalam tentang seluk beluk tema WordPress baru.

Twenty Twenty-Two telah dirancang untuk menjadi tema default yang paling fleksibel, ringan, dan dapat disesuaikan yang pernah ada. Ini menyediakan taman bermain yang bagus untuk menguji blok, pola, dan templat.

Menjadi tema blok, ini akan membantu Anda menjelajahi Pengeditan Situs Penuh, Gaya Global, blok Navigasi, dan galeri gambar baru dengan lebih baik, yang merupakan fitur paling ditunggu yang hadir dengan WordPress 5.9.

Kami harus segera mengatakan bahwa Dua Puluh Dua Puluh Dua adalah tema blok default pertama !

Salah satu tujuan paling ambisius dari tema baru ini adalah untuk memberdayakan pengguna . Dengan begitu banyak pola dan templat yang tersedia, pengguna dapat membuat tata letak yang rumit hanya dengan beberapa klik. Sisanya hanya kustomisasi gaya.

Dari segi teknis, menulis tentang Twenty Twenty-Two tidak jauh berbeda dengan menulis tentang fitur-fitur terbaru dan tercanggih yang ada di WordPress 5.9. Tapi Twenty Twenty-Two memberi kami kaca pembesar untuk lebih menghargai fitur pengeditan situs baru dan mendapatkan ide yang lebih baik tentang masa depan platform.

Jadi di sini kami akan memperkenalkan Anda pada tema baru.

Pertama, kita akan menjelajahi alur pengeditan situs baru yang akan dialami pengguna dengan WordPress 5.9 dan Twenty Twenty-Two.

Setelah itu, kita akan menyelami fitur tema blok utama yang diterapkan di Twenty Twenty-Two. Anda akan mengenal Gaya Global , pola blok , templat , dan bagian templat .

Tapi masih banyak lagi yang bisa dikatakan tentang Twenty Twenty-Two dan tema blok WordPress. Jadi, sebagai bab bonus, kami akan memberikan gambaran singkat tentang cara memperluas fitur Twenty Twenty-Two dengan memanfaatkan file theme.json .

Inilah tampilan pertama pada tema default WordPress berikutnya! Saya senang bisa memimpin bersama @jffng, dan kami berdua berharap Anda berkontribusi dan/atau menikmati menggunakannya! https://t.co/covjrpgFIO

— kjellr (@kjellr) 6 Oktober 2021

Mari kita mulai bekerja dan menyelami tema default WordPress Twenty Twenty-Two yang baru.

Dua Puluh Dua Puluh Dua Membawa Alur Pengeditan Situs Baru

Beberapa fitur Pengeditan Situs Lengkap menjadi inti dengan WordPress 5.9. Pemilik situs yang menggunakan versi WordPress terbaru dengan tema blok seperti Twenty Twenty-Two yang diinstal akan segera dapat:

• Buat dan edit postingan dan halaman menggunakan lebih banyak blok dan pola
• Sesuaikan pengaturan dan gaya yang ditentukan dalam file theme.json melalui antarmuka Global Styles
• Buat dan edit template untuk halaman dan postingan
• Buat dan edit bagian template untuk header, footer, dan area template lainnya

Dengan semua fitur ini digabungkan ke inti, kontributor inti WordPress telah membahas evolusi arsitektur informasi dan mendesain ulang seluruh Alur Pengeditan Situs.

Hal pertama yang mungkin Anda perhatikan setelah mengaktifkan Twenty Twenty-Two adalah bahwa titik masuk ke editor situs tidak lagi terletak di menu utama dasbor WordPress Anda, tetapi telah dipindahkan di bawah menu Appearance .

Membawa template dan fitur pengeditan gaya di bawah menu Penampilan yang sama akan merampingkan pengalaman pengeditan. Seharusnya lebih mudah untuk memahami bahwa fitur yang Anda akses berhubungan dengan presentasi halaman Anda.

Item menu Editor membuka templat beranda situs. Tergantung pada pengaturan membaca Anda, ini bisa berupa halaman posting terbaru atau halaman statis.

Sekarang, mengklik ikon WordPress di sudut kiri atas menampilkan menu navigasi editor situs baru, termasuk tiga item menu: Site , Templates, dan Template Parts .

Mari kita lihat lebih dekat.

Opsi Situs membuka templat beranda (artikel blog terbaru atau beranda statis).

Dari item menu Template , Anda akan mendapatkan daftar template yang tersedia. Anda dapat mengklik template apa pun dalam daftar untuk meluncurkannya di editor.

Pada tulisan ini, Twenty Twenty-Two menyediakan 11 template.

Mengklik ikon elipsis ( ) di sebelah kanan memungkinkan Anda menghapus penyesuaian.

Tidak seperti template tema, template khusus hanya dapat diganti namanya atau dihapus (tetapi Anda dapat mengedit template khusus di editor pos).

Item menu Bagian Templat mencantumkan bagian templat yang tersedia yang dapat Anda buka di editor untuk penyesuaian Anda.

Anda akan menemukan empat bagian template yang ditambahkan ke Twenty Twenty-Two secara default. Mengarahkan kursor ke template yang dimodifikasi akan menampilkan tooltip yang memberi tahu Anda bahwa template telah disesuaikan.

Anda dapat menghapus penyesuaian ini dengan mengklik ikon elipsis ( ) di sebelah kanan.

Mengedit Template dan Bagian Template

Editor menyediakan antarmuka untuk menyesuaikan struktur template dan komponen template Anda.

Di sini Anda dapat dengan mudah menambahkan atau mengedit blok dan pola, dan perubahan Anda akan diterapkan secara otomatis ke setiap halaman yang menggunakan template itu.

Gambar di bawah ini menunjukkan template halaman 404 di editor. Ini adalah template yang cukup sederhana, hanya mencakup heading, paragraf, dan kotak pencarian. Namun, ini memberi kita pemahaman yang baik tentang cara kerja UI.

Di sini, Anda dapat mengedit dan menyesuaikan template agar sesuai dengan kebutuhan Anda. Misalnya, Anda mungkin ingin menambahkan Grid pola posting gambar untuk meningkatkan keterlibatan pengunjung Anda dan mengundang mereka untuk menelusuri konten situs web Anda.

Dropdown header di bagian atas editor template menampilkan daftar area Template yang tersedia. Daftar yang sama muncul di tab Template di bar samping Pengaturan .

Dengan mengklik area template mana pun (misalnya Header), Anda akan langsung dibawa ke bagian template yang ingin Anda edit.

Jika Anda mengeklik ikon elipsis di sebelah kanan, Anda akan mengakses editor bagian template Terisolasi .

Editor komponen template juga menyediakan sepasang pegangan yang dapat diseret, memungkinkan Anda untuk memeriksa bagaimana template berperilaku pada resolusi layar yang berbeda.

Setelah Anda puas dengan perubahan Anda, simpan hasil edit Anda dan kembali ke editor template utama untuk memeriksa hasil akhirnya.

Jika Anda ingin menyelam lebih dalam ke arsitektur informasi baru, Anda mungkin ingin memeriksa artikel berikut:

• Konsep IA pengeditan situs: Cara memunculkan dan mengakses fitur baru
• Pengeditan Situs Konsep iA – Bagian 2

Dua Puluh Dua Puluh Dua pada Intinya: Tinjauan Singkat theme.json

Untuk memahami sepenuhnya bagaimana Twenty Twenty-Two dan memblokir tema (seperti Bricksy), mari kita lihat konfigurasi tema baru dan mekanisme gaya berdasarkan file theme.json .

Diperkenalkan dengan WordPress 5.8, mekanisme baru ini memungkinkan pengembang tema untuk mengonfigurasi editor dan menambahkan dukungan fitur dari titik konfigurasi pusat.

Di Dua Puluh Dua Puluh Dua, file theme.json memiliki struktur berikut:

 { "version": 2, "settings": {}, "styles": {}, "customTemplates": {}, "templateParts": {} }

Mari kita lihat sekilas setiap bagian.

Versi: kapan

Bidang version menjelaskan versi spesifikasi, yang saat ini 2 .

Pengaturan

Bagian settings mendefinisikan pengaturan di tingkat global atau blok. Pengaturan yang ditentukan di tingkat atas memengaruhi semua pemblokiran, tetapi pemblokiran dapat menimpa pengaturan global satu per satu. Di Dua Puluh Dua Puluh Dua Anda akan menemukan pengaturan berikut:

 { "settings": { "appearanceTools": true, "color": { "duotone": [...], "gradients": [...], "palette": [...] }, "custom": {...}, "spacing": {...}, "typography": { "dropCap": false, "fontFamilies": [...], "fontSizes": [...] }, "layout": {...} } }

Default pengaturan disebut preset dan digunakan untuk menghasilkan properti kustom CSS dan nama kelas berdasarkan konvensi penamaan tertentu:

• Properti khusus CSS: --wp--preset--{preset-category}--{preset-slug}
• Nama kelas CSS: .has-{preset-slug}-{preset-category}

Setelah tema menentukan presetnya, properti kustom CSS yang sesuai dapat digunakan untuk menata blok dan elemen di bagian styles .

Gaya

Bagian styles adalah tempat tema menentukan gaya default blok dan elemen. Lihat, misalnya, gaya Dua Puluh Dua Puluh Dua berikut untuk blok Tombol inti:

 { "version": 2, "styles": { "blocks": { "core/button": { "border": { "radius": "0" }, "color": { "background": "var(--wp--preset--color--primary)", "text": "var(--wp--preset--color--background)" }, "typography": { "fontSize": "var(--wp--preset--typography--font-size--normal)" } } } } }

Anda akan melihat properti kustom CSS yang digunakan dalam deklarasi properti.

Template Kustom

Bagian customTemplates adalah tempat tema mendeklarasikan template kustomnya. Bidang name dan title wajib diisi. Tema juga dapat mendeklarasikan jenis posting apa yang dapat menggunakan template dengan mengatur properti postTypes .

Dua Puluh Dua Puluh Dua menyediakan empat templat khusus:

 { "version": 2, "customTemplates": [ { "name": "blank", "title": "Blank", "postTypes": [ "page", "post" ] }, { "name": "page-large-header", "title": "Page (Large Header)", "postTypes": [ "page" ] }, { "name": "single-no-separators", "title": "Single Post (No Separators)", "postTypes": [ "post" ] }, { "name": "page-no-separators", "title": "Page (No Separators)", "postTypes": [ "page" ] } ] }

Anda akan menemukan file .html yang sesuai di folder blok-templat .

Bagian Template

Bagian templateParts menyertakan definisi bagian template:

 { "version": 2, "templateParts": [ { "name": "header", "title": "Header", "area": "header" }, { "name": "header-large-dark", "title": "Header (Dark, large)", "area": "header" }, { "name": "header-small-dark", "title": "Header (Dark, small)", "area": "header" }, { "name": "footer", "title": "Footer", "area": "footer" } ] }

Bidang name dan title wajib diisi. Tema juga dapat mendeklarasikan istilah area , tempat bagian templat akan dirender di editor.

File .html bagian template terletak di folder template-parts .

Sekarang setelah Anda mengetahui lebih banyak tentang theme.json Twenty Twenty-Two, kita dapat menjelajahi fitur tema dan antarmuka pengeditan baru secara lebih menyeluruh.

Mari selami Gaya Global Dua Puluh Dua Puluh Dua .

Gaya Global dalam Dua Puluh Dua Puluh Dua

Jika Anda melihat Twenty Twenty-Two' style.css, Anda mungkin terkejut melihat bahwa ini berisi jumlah minimal deklarasi CSS. Alasannya adalah bahwa gaya dideklarasikan dalam file theme.json dalam tema berbasis blok .

WordPress 5.9 akan membawa segalanya selangkah lebih maju, memperkenalkan fitur baru yang memungkinkan pengguna tema blok untuk menyesuaikan tampilan elemen situs dari antarmuka pengguna yang disebut Global Styles.

Antarmuka Gaya Global dapat diakses dari ikon Gaya baru yang ditempatkan di sudut kanan atas Editor (lihat juga Antarmuka Gaya Global).

Mengklik ikon itu akan menampilkan bilah sisi Gaya baru termasuk tiga panel terpisah:

• Panel Pratinjau , menampilkan pratinjau penyesuaian Anda
• Panel Gaya Global yang menyediakan akses ke grup kontrol tertentu untuk Tipografi , Warna , dan Tata Letak
• Item Blok yang menyediakan akses ke pengaturan gaya level blok

Palet Warna Dua Puluh Dua Puluh Dua

Panel Warna dapat membantu Anda mengedit palet yang tersedia dan menetapkan atau mengubah warna untuk Latar Belakang , Teks , atau Tautan .

Di panel Palette , Anda dapat menyesuaikan palet Tema atau Default dan bahkan membuat palet kustom Anda.

Sudahkah Anda menemukan kode yang menghasilkan kontrol warna?

Jika tidak, buka theme.json Twenty Twenty-Two di editor kode favorit Anda. Anda akan menemukan deklarasi palet warna berikut:

 { "version": 2, "settings": { "color": { "palette": [ { "slug": "foreground", "color": "#000000", "name": "Foreground" }, { "slug": "background", "color": "#ffffff", "name": "Background" }, { "slug": "primary", "color": "#1a4548", "name": "Primary" }, { "slug": "secondary", "color": "#ffe2c7", "name": "Secondary" }, { "slug": "tertiary", "color": "#F6F6F6", "name": "Tertiary" } ] } } }

Gambar di bawah menunjukkan bagaimana kode di atas cocok dengan palet warna Twenty Twenty-Two.

Sekarang mari kita asumsikan bahwa Anda ingin mengubah warna latar belakang default untuk blok tertentu. Memilih warna yang berbeda untuk latar belakang blok hanya akan menetapkan variabel CSS yang berbeda ke properti background-color elemen. Gambar di bawah ini memberikan contohnya:

Dan itu saja! Anda tidak perlu menambahkan satu baris kode CSS khusus ke Customizer atau membuat tema anak untuk itu.

Tapi mari kita terus menjelajahi Gaya Global Twenty Twenty-Two dengan beberapa contoh tambahan.

Pengaturan Tipografi

Panel Tipografi adalah tempat Anda dapat menyesuaikan gaya tipografi untuk elemen Teks dan Tautan situs web Anda di tingkat global.

Setiap item menyediakan akses ke grup kontrol bagi Anda untuk menyesuaikan jenis font, ukuran, dan tinggi garis.

Apakah Anda bertanya-tanya kode apa yang menghasilkan kontrol ini?

Buka theme.json Twenty Twenty-Two dan temukan bagian typography . Anda akan melihat setelan berikut:

 { "version": 1, "settings": { "appearanceTools": true, "typography": { "dropCap": false, "fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "name": "System Font", "slug": "system-font" }, { "fontFamily": "\"Source Serif Pro\", serif", "name": "Source Serif Pro", "slug": "source-serif-pro" } ], "fontSizes": [ { "name": "Small", "size": "1rem", "slug": "small" }, { "name": "Normal", "size": "1.125rem", "slug": "normal" }, { "name": "Medium", "size": "1.75rem", "slug": "medium" }, { "name": "Large", "size": "clamp(1.75rem, 3vw, 2.25rem)", "slug": "large" }, { "name": "Huge", "size": "clamp(2.5rem, 4vw, 3rem)", "slug": "huge" } ] }, }

Anda mungkin berharap untuk melihat dua keluarga font dan lima ukuran font dari kode di atas. Dan Anda pasti sudah menebaknya dengan benar.

Begini cara kode di atas diterjemahkan ke pengaturan Tipografi Gaya Global:

Anda dapat menebak pengaturan apa yang menghasilkan kontrol ketinggian Garis . Di Twenty Twenty-Two, Anda tidak akan menemukan pengaturan khusus untuk itu karena diaktifkan oleh properti appearanceTools , yang merupakan jalan pintas untuk beberapa deklarasi pengaturan (lihat bagian berikutnya).

Alat Tata Letak dan Penampilan

Elemen terakhir di sidebar Global Styles adalah Layout . Pada saat penulisan ini, itu hanya mencakup kontrol padding .

Di Twenty Twenty-Two, panel Layout diaktifkan oleh properti pengaturan appearanceTools , sebuah boolean yang dapat digunakan untuk mengaktifkan beberapa pengaturan sekaligus:

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

"appearanceTools": true hanya menggantikan blok deklarasi berikut:

 { 'settings': { 'border': { 'color': true, 'radius': true, 'style': true, 'width': true }, 'color': { 'link': true }, 'spacing': { 'blockGap': true, 'margin': true, 'padding': true }, 'typography': { 'lineHeight': true } } }

Oke — semoga Anda sekarang mengerti bagaimana pengaturan yang dideklarasikan dalam file theme.json cocok dengan kontrol Global Styles yang sesuai.

Masih ada satu bagian dari teka-teki kami yang hilang untuk mendapatkan gambaran lengkap tentang tema default WordPress baru: pola blok .

Dua Puluh Dua Puluh Dua Pola Blok

Orang dapat mengatakan bahwa Twenty Twenty-Two sebagian besar merupakan kumpulan pola — dan memang begitu. Di Twenty Twenty-Two, Anda akan menemukan banyak pola blok siap pakai yang dapat Anda pilih untuk membangun struktur blok bersarang yang menakjubkan dan tak terduga untuk halaman web Anda.

Istilah kunci di sini adalah pemberdayaan pengguna . Dan itu cocok karena, dengan pola blok, Anda dapat membangun segala macam hal, dari portofolio yang menarik hingga situs web promosi satu halaman, bahkan jika Anda tidak memiliki pengetahuan tentang HTML atau CSS!

Dan WordPress 5.9 membawa peningkatan signifikan pada sistem pola dengan Pattern Explorer baru, alat yang memungkinkan Anda menelusuri pola dalam modal layar penuh.

Alat baru ini juga memungkinkan Anda dengan cepat dan mudah mengimpor pola blok langsung dari Direktori Pola. Ini membuka kemungkinan baru bagi pengguna dan pengembang WordPress, sehingga penggunaannya kemungkinan akan meningkat pesat di masa mendatang.

Dua Puluh Dua Puluh Dua mencakup banyak pola (lebih dari 65) di lima kategori.

Kumpulan pola yang solid ini berpasangan sempurna dengan templat dan bagian templat yang hadir dengan tema default baru, membuat pengalaman pengeditan yang benar-benar menakjubkan.

Jika Anda belum memiliki kesempatan untuk bereksperimen dengan pola blok, kami akan menunjukkan kepada Anda mengapa mereka dianggap sebagai alat yang sangat kuat dengan contoh sederhana.

Misalkan Anda ingin menghapus footer default dari template Index dan Single Post dan menggantinya dengan pola blok Twenty Twenty-Two yang berbeda.

Luncurkan Editor Situs dari menu Appearance atau tombol toolbar frontend WordPress untuk menyesuaikan template Indeks.

Klik tombol Index untuk menampilkan dropdown header yang menunjukkan daftar area template yang tersedia di halaman. Klik tombol elipsis di sebelah Footer dan kemudian Edit Footer .

Seperti disebutkan di atas, ini akan meluncurkan editor komponen templat yang terisolasi.

Sekarang buka penyisipan blok dan klik Pola .

Luncurkan alat Pattern Explorer baru, pilih kategori Twenty Twenty-Two Footers , dan pilih footer pilihan Anda.

Sekarang tambahkan dan edit blok sesuai dengan kebutuhan Anda.

Simpan tajuk dan periksa kembali situs Anda saat Anda puas dengan perubahan Anda.

Gambar di bawah membandingkan tiga template (Indeks, Posting Tunggal, dan Posting Tunggal tanpa pemisah) dengan penyesuaian header dan footer yang berbeda:

Memperpanjang Dua Puluh Dua Puluh Dua Dengan Tema Anak

Membuat tema anak untuk tema blok sangat berbeda dengan membuat tema anak untuk tema klasik.

Tetapi begitu Anda memiliki pemahaman yang baik tentang struktur tema blok, Anda tidak akan kesulitan membuat tema anak untuk Twenty Twenty-Two atau tema blok lainnya.

Jadi, mari cari tahu cara menyesuaikan tampilan dan nuansa situs web Anda yang berbasis Dua Puluh Dua Puluh.

1. Menyiapkan Tema Anak untuk Dua Puluh Dua Puluh Dua

Di direktori /wp-content/themes Anda, buat folder baru dan beri nama apa pun yang Anda suka (sesuai dengan standar pengembangan tema). Dalam contoh ini, kami menyebut folder tema anak dua puluh dua puluh dua anak .

Sekarang Anda membutuhkan file style.css . Buka editor kode favorit Anda dan buat stylesheet berikut:

 /* Theme Name: Twenty Twenty-Two Child Theme URI: https://example.com/ Author: Your name Author URI: https://example.com/ Description: A child theme for TT2. Requires at least: 5.8 Tested up to: 5.9 Requires PHP: 5.6 Version: 0.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentytwentytwo-child Template: twentytwentytwo Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org Twenty Twenty-Two Child is distributed under the terms of the GNU GPL. */

Seperti biasa, Anda dapat mengedit bidang sesuai dengan kebutuhan Anda.

Tema anak Anda sekarang tersedia untuk pratinjau. Anda dapat mengaktifkannya di layar admin Appearance > Themes .

2. Menyesuaikan Pengaturan Global

Sejak WordPress 5.9, tema anak dengan file theme.json mewarisi pengaturan tema induk. Jika theme.json anak mendefinisikan sekumpulan gaya, maka gaya tersebut berlaku di atas gaya induknya.

Jadi kita bisa membuat file theme.json yang hanya menyertakan blok kecil pengaturan dan definisi gaya daripada mendefinisikan ulang semua pilihan awal kita.

Cara Mendeklarasikan Palet Warna Kustom

Saat membangun tema anak untuk Twenty Twenty-Two, tugas termudah adalah mengganti palet warna. Yang perlu Anda lakukan adalah menentukan palet warna baru di theme.json anak Anda seperti yang ditunjukkan di bawah ini:

 { "version": 2, "settings": { "color": { "palette": [ { "slug": "foreground", "color": "#FFFFFF", "name": "Foreground" }, { "slug": "background", "color": "#001F29", "name": "Background" }, { "slug": "primary", "color": "#D6FDFF", "name": "Primary" }, { "slug": "secondary", "color": "#FDFCDC", "name": "Secondary" }, { "slug": "tertiary", "color": "#FED9B7", "name": "Tertiary" }, { "slug": "accent", "color": "#E94435", "name": "Accent" } ] } } }

Simpan file Anda dan kembali ke editor situs. Palet warna yang ditentukan di atas seharusnya menggantikan palet warna default Twenty Twenty-Two.

Warna akan ditampilkan secara berurutan pada palet itu sendiri, dan namanya harus mengikuti praktik terbaik dan konvensi penamaan yang dibahas di Github.

Anda dapat membaca lebih banyak tentang opsi warna theme.json dalam ikhtisar mendalam ini oleh Carolina Nymark.

Cara Mendeklarasikan Filter Duotone Kustom

Anda juga dapat mengganti warna duotone default dengan kumpulan filter khusus Anda.

Untuk melakukannya, cukup tambahkan kode berikut ke pengaturan theme.json anak Anda pada tingkat yang sama dengan properti palette :

 { "version": 2, "settings": { "color": { "palette": [...], "duotone": [ { "colors": [ "#001F29", "#FFFFFF" ], "slug": "default-filter", "name": "Default filter" } ] } } }

Simpan file Anda dan periksa hasilnya di editor blok. Anda seharusnya hanya melihat satu filter duotone.

3. Menyesuaikan Gaya Blok

Seperti yang kami sebutkan sebelumnya, dengan WordPress 5.9, Anda sekarang dapat menyesuaikan pengaturan dan gaya theme.json dari antarmuka Global Styles.

Gaya blok dapat dikustomisasi dari antarmuka Global Styles hanya jika blok tersebut menyatakan dukungan untuk fungsionalitas tertentu dalam file block.json yang sesuai. Tetapi Anda dapat mengganti pengaturan blokir default di theme.json tema anak Anda.

Sekarang misalkan Anda ingin mengganti Judul Postingan dan gaya blok Grup. Yang perlu Anda lakukan adalah menentukan gaya yang ingin Anda tambahkan atau timpa, seperti yang ditunjukkan di bawah ini:

 { "version": 2, "settings": {...}, "styles": { "blocks": { "core/post-title": { "typography": { "fontFamily": "Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif" }, "color": { "background": "var(--wp--preset--color--tertiary)" }, "spacing": { "padding": "var(--wp--custom--spacing--small)" } }, "core/group": { "spacing": { "margin": { "top": "0", "bottom": "0" } } } } } }

Pada contoh di atas, kami mengubah keluarga font, warna latar belakang, dan nilai padding untuk core/post-title , serta margin atas dan bawah untuk core/group .

Gambar di bawah ini menunjukkan hasil seperti yang akan terlihat di situs publik:

Dan itu saja untuk ulasannya!

Kami tidak akan menyelam lebih dalam ke tema anak untuk saat ini karena akan melampaui cakupan posting ini. Sementara itu, Anda akan menemukan lebih banyak contoh tema anak Dua Puluh Dua Puluh Dua di Github.

Ringkasan

Sambil melihat lebih dekat pada tema default WordPress baru Twenty Twenty-Two dan fitur-fiturnya (yang menjadikannya tema default paling fleksibel yang pernah dirilis), kami meluncurkan arsitektur informasi baru yang diperkenalkan dengan WordPress 5.9. Kami bahkan mengintip antarmuka Global Styles yang baru.

Ada banyak fitur baru yang menarik, dan tampaknya jelas bahwa lingkungan pengeditan baru semakin kuat, andal, dan fungsional dari waktu ke waktu.

Sementara banyak fitur WordPress baru sedang dalam proses, yang lain menghilang atau berkurang pentingnya. Banyak pengguna yang bertanya-tanya apa yang akan terjadi pada Customizer dan bagaimana cara terbaik menjaga kompatibilitas mundur dengan tema yang ada.

Namun, Anda tidak boleh berharap untuk tiba-tiba melompat dari tema tradisional untuk memblokir tema dalam satu ikatan. Saat ini kami memiliki empat jenis 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.

Jadi, jangan takut untuk saat ini — masih ada banyak solusi untuk dipilih jika Anda belum merasa siap untuk beralih ke tema blokir.

Dan sekarang terserah Anda! Apakah Anda siap untuk membuat lompatan besar dan mulai menggunakan tema blok sekarang? Bagikan pemikiran Anda dengan kami di komentar di bawah.