Saya tersandung tweet ini dari Ana Segota mencari cara untuk menambahkan CSS box-shadow ke status hover tombol di WordPress di theme.json file.
Dia bertanya karena theme.json di sinilah WordPress ingin kita mulai memindahkan gaya dasar untuk tema blok. Secara tradisional, kami akan melakukan semua gaya style.css saat bekerja dalam tema "klasik". Tetapi dengan tema default Dua Puluh Dua Puluh Tiga (TT3) yang baru-baru ini dikirimkan dengan WordPress 6.1 memindahkan semua gayanya ke theme.json, kami semakin dekat untuk dapat melakukan hal yang sama dengan tema kami sendiri. Saya membahas ini dengan sangat rinci dalam artikel terbaru.
Saya mengatakan "lebih dekat dan lebih dekat" karena masih banyak properti dan pemilih CSS yang tidak didukung theme.json. Misalnya, jika Anda berharap untuk menata sesuatu dengan suka perspective-origin in theme.json, itu tidak akan terjadi - setidaknya saat saya menulis ini hari ini.
Ana melihat box-shadow dan, untungnya baginya, properti CSS itu didukung oleh theme.json pada WordPress 6.1. Tweet-nya bertanggal 1 November, hari yang sama persis saat 6.1 dirilis. Ini tidak seperti dukungan untuk properti yang menjadi fitur utama dalam rilis. Judul yang lebih besar lebih terkait dengan teknik spasi dan tata letak untuk blok dan tema blok.
Inilah cara kita dapat menerapkan a box-shadow ke blok tertentu — katakanlah blok Gambar Unggulan — di theme.json:
{
"version": 2,
"settings": {},
// etc.
"styles": {
"blocks" :{
"core/post-featured-image": {
"shadow": "10px 10px 5px 0px rgba(0, 0, 0, 0.66)"
}
}
}
}Ingin tahu apakah sintaks warna baru bekerja? Saya juga! Tetapi ketika saya mencoba - rgb(0 0 0 / 0.66) — Saya tidak mendapatkan apa-apa. Mungkin itu sudah dalam pengerjaan atau bisa menggunakan permintaan tarik.
Mudah, bukan? Tentu, ini jauh berbeda dari menulis vanilla CSS style.css dan mengambil beberapa membiasakan diri. Tapi itu memang mungkin pada rilis WordPress terbaru.
Dan, hei, kita bisa melakukan hal yang sama pada "elemen" individual, seperti tombol. Tombol adalah blok itu sendiri, tetapi juga bisa menjadi blok bersarang di dalam blok lain. Jadi, untuk menerapkan a box-shadow secara global ke semua tombol, kami akan melakukan hal seperti ini theme.json:
{
"version": 2,
"settings": {},
// etc.
"styles": {
"elements": {
"button": {
"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
}
}
}
}Tapi Ana ingin menambahkan bayangan pada tombolnya :hover negara. Syukurlah, dukungan untuk menata status interaktif untuk elemen tertentu, seperti tombol dan tautan, menggunakan kelas semu — termasuk :hover, :focus, :active, dan :visited - juga diperoleh theme.json dukungan di WordPress 6.1.
{
"version": 2,
"settings": {},
// etc.
"styles": {
"elements": {
"button": {
":hover": {
"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
}
}
}
}
}Jika Anda menggunakan tema induk, Anda pasti bisa mengganti gaya tema dalam tema anak. Di sini, saya sepenuhnya mengesampingkan gaya tombol TT3.
Lihat kode lengkap
{
"version": 2,
"settings": {},
// etc.
"styles": {
"elements": {
"button": {
"border": {
"radius": "0"
},
"color": {
"background": "var(--wp--preset--color--tertiary)",
"text": "var(--wp--preset--color--contrast)"
},
"outline": {
"offset": "3px",
"width": "3px",
"style": "dashed",
"color": "red"
},
"typography": {
"fontSize": "var(--wp--preset--font-size--medium)"
},
"shadow": "5px 5px 5px 0px rgba(9, 30, 66, 0.25), 5px 5px 5px 1px rgba(9, 30, 66, 0.08)",
":hover": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--base)"
},
"outline": {
"offset": "3px",
"width": "3px",
"style": "solid",
"color": "blue"
}
},
":focus": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--base)"
}
},
":active": {
"color": {
"background": "var(--wp--preset--color--secondary)",
"text": "var(--wp--preset--color--base)"
}
}
}
}
}
}Begini cara rendernya:
Cara lain untuk melakukannya: gaya khusus
Baru saja dirilis Pixl tema blok memberikan contoh lain penggunaan dunia nyata dari box-shadow properti di theme.json menggunakan metode alternatif yang mendefinisikan nilai-nilai kustom. Dalam tema, kebiasaan box-shadow properti didefinisikan sebagai .settings.custom.shadow:
{
"version": 2,
"settings": {
// etc.
"custom": {
// etc.
"shadow": "5px 5px 0px -2px var(--wp--preset--color--background), 5px 5px var(--wp--preset--color--foreground)"
},
// etc.
}
}Kemudian, nanti di file, custom shadow properti dipanggil pada elemen tombol:
{
"version": 2,
"settings": {
// etc.
},
"styles": {
"elements": {
"button": {
// etc.
"shadow": "var(--wp--custom--shadow) !important",
// etc.
":active": {
// etc.
"shadow": "2px 2px var(--wp--preset--color--primary) !important"
}
},
// etc.
}
}Saya tidak sepenuhnya yakin tentang penggunaan !important pada konteks ini. Firasat saya adalah bahwa ini merupakan upaya untuk mencegah penggantian gaya tersebut menggunakan UI Gaya Global di Editor Situs, yang memiliki kekhususan tinggi daripada gaya yang ditentukan di theme.json. Berikut tautan berlabuh ke informasi lebih lanjut dari artikel saya sebelumnya tentang mengelola gaya tema blok.
Update: Ternyata ada diskusi lengkap tentang ini di Tarik Permintaan #34689, yang mencatat bahwa itu dialamatkan di WordPress 5.9.
Dan masih ada lagi…
Selain bayangan, CSS outline properti juga diperoleh theme.json mendukung di WordPress 6.1 dan dapat diterapkan ke tombol dan status interaktifnya. Ini PR GitHub menunjukkan contoh yang baik.
"elements": {
"button": {
"outline": {
"offset": "3px",
"width": "3px",
"style": "dashed",
"color": "red"
},
":hover": {
"outline": {
"offset": "3px",
"width": "3px",
"style": "solid",
"color": "blue"
}
}
}
}Anda juga dapat menemukan contoh nyata bagaimana outline properti bekerja di tema lain, termasuk Kekerasan, Blok Kanvas, dan Basis blok.
Membungkus
Siapa yang tahu ada begitu banyak hal untuk dibicarakan dengan satu properti CSS saat memblokir tema di WordPress 6.1? Kami melihat metode yang didukung secara resmi untuk menyetel a box-shadow pada blok dan elemen individual, termasuk status interaktif elemen tombol. Kami juga memeriksa bagaimana kami dapat mengganti bayangan dalam tema anak. Dan, terakhir, kami membuka contoh dunia nyata yang mendefinisikan dan menetapkan bayangan di properti khusus.
Anda dapat menemukan diskusi mendalam yang lebih rinci tentang WordPress dan itu box-shadow implementasi dalam hal ini PR GitHub. Ada juga Usulan GitHub untuk menambahkan UI secara langsung di WordPress untuk menetapkan nilai bayangan pada blok — Anda bisa lompat langsung ke GIF animasi menunjukkan bagaimana itu akan berhasil.
Ngomong-ngomong soal, justin tadlock baru-baru ini mengembangkan blok yang menampilkan bilah kemajuan dan kontrol bayangan kotak terintegrasi ke dalamnya. Dia memamerkannya dalam video ini:
Informasi lebih lanjut
Jika Anda ingin menggali lebih dalam tentang box-shadow dan properti CSS lainnya yang didukung oleh theme.json file dalam tema blok, berikut adalah beberapa sumber daya yang dapat Anda gunakan:
