Zatekel sem se čez ta tvit Ane Segota išče način za dodajanje CSS box-shadow na stanje lebdenja gumba v WordPressu v theme.json Datoteka.
Sprašuje, ker theme.json kjer WordPress želi, da začnemo premikati osnovne sloge za teme blokov. Tradicionalno smo naredili vse in vse stylinge style.css pri delu v "klasični" temi. Toda s privzeto temo Twenty Twenty-Three (TT3), ki je bila nedavno poslana z WordPressom 6.1, je vse svoje sloge premaknila v theme.json, smo vedno bližje temu, da bi lahko storili enako z lastnimi temami. To sem zelo podrobno obravnaval v nedavnem članku.
Pravim »bližje in bližje«, ker še vedno obstaja veliko lastnosti in izbirnikov CSS, ki niso podprti v theme.json. Na primer, če upate nekaj stilizirati s podobnim perspective-origin in theme.json, se to preprosto ne bo zgodilo — vsaj ko tole pišem danes.
Ana gleda box-shadow in na njeno srečo to lastnost CSS podpira theme.json od WordPress 6.1. Njen tvit je datiran 1. nov. točno na isti dan, ko je izšel 6.1. Ne gre za to, da je bila podpora lastnini glavna funkcija v izdaji. Večji naslovi so bili bolj povezani s tehnikami razmikov in postavitve za bloke in teme blokov.
Evo, kako lahko uporabimo a box-shadow v določen blok – recimo blok Predstavljena slika – noter theme.json:
{
"version": 2,
"settings": {},
// etc.
"styles": {
"blocks" :{
"core/post-featured-image": {
"shadow": "10px 10px 5px 0px rgba(0, 0, 0, 0.66)"
}
}
}
}Zanima me, če nova sintaksa barv dela? Jaz tudi! Toda ko sem poskusil - rgb(0 0 0 / 0.66) — Nič nisem dobil. Morda je to že v delu ali bi lahko uporabili zahtevo za vlečenje.
Enostavno, kajne? Seveda je precej drugače kot pisanje vanilije CSS style.css in se je potrebno nekaj časa navaditi. Vendar je od najnovejše izdaje WordPressa res mogoče.
In hej, isto stvar lahko naredimo s posameznimi "elementi", kot je gumb. Gumb je sam po sebi blok, lahko pa je tudi ugnezdeni blok znotraj drugega bloka. Torej, za uporabo a box-shadow globalno za vse gumbe bi naredili nekaj takega v theme.json:
{
"version": 2,
"settings": {},
// etc.
"styles": {
"elements": {
"button": {
"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
}
}
}
}Toda Ana želi gumbom dodati senco :hover država. na srečo, podpora za oblikovanje interaktivnih stanj za določene elemente, kot so gumbi in povezave, z uporabo psevdorazredov – vključno z :hover, :focus, :activein :visited — tudi pridobil theme.json podpora v WordPressu 6.1.
{
"version": 2,
"settings": {},
// etc.
"styles": {
"elements": {
"button": {
":hover": {
"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
}
}
}
}
}Če uporabljate nadrejeno temo, lahko zagotovo preglasite sloge teme v podrejeni temi. Tukaj popolnoma preglasim sloge gumbov TT3.
Oglejte si celotno kodo
{
"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)"
}
}
}
}
}
}Takole je to upodobljeno:
Drug način za to: slogi po meri
Nedavno sproščeni Pixl blok tema je še en primer uporabe v resničnem svetu box-shadow nepremičnina v theme.json uporabo alternativne metode, ki določa vrednosti po meri. V temi običaj box-shadow premoženje je opredeljeno kot .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.
}
}Potem, kasneje v datoteki, po meri shadow lastnost se kliče na elementu gumba:
{
"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.
}
}Nisem popolnoma prepričan o uporabi !important v tem kontekstu. Moja slutnja je, da gre za poskus preprečitve preglasitve teh slogov z uporabniškim vmesnikom Global Styles v urejevalniku spletnega mesta, ki ima večjo specifičnost kot slogi, definirani v theme.json. Tukaj je zasidrana povezava do več informacij iz prejšnjega članka o upravljanju slogov tem blokov.
Posodobitev: Izkazalo se je, da je o tem tekla cela razprava Zahteva za poteg #34689, ki ugotavlja, da je bil obravnavan v WordPressu 5.9.
In še več ...
Poleg senc, CSS outline tudi pridobljeno premoženje theme.json podpora v WordPressu 6.1 in se lahko uporabi za gumbe in njihova interaktivna stanja. to GitHub PR kaže dober primer.
"elements": {
"button": {
"outline": {
"offset": "3px",
"width": "3px",
"style": "dashed",
"color": "red"
},
":hover": {
"outline": {
"offset": "3px",
"width": "3px",
"style": "solid",
"color": "blue"
}
}
}
}Najdete lahko tudi resnične primere, kako outline lastnina deluje v drugih temah, vključno z Glasnost, Block Canvasin Blockbase.
Zavijanje
Kdo bi vedel, da se je o blokovnem tematiziranju v WordPressu 6.1 treba toliko pogovarjati z eno lastnostjo CSS? Videli smo uradno podprte metode za nastavitev a box-shadow na blokih in posameznih elementih, vključno z interaktivnimi stanji elementa gumba. Preverili smo tudi, kako lahko preglasimo sence v podrejeni temi. In končno smo razbili primer iz resničnega sveta, ki definira in nastavlja sence v lastnosti po meri.
Najdete lahko podrobnejše poglobljene razprave o WordPressu in njem box-shadow izvajanje v tem GitHub PR. Obstaja tudi Predlog GitHub za dodajanje uporabniškega vmesnika neposredno v WordPress za nastavitev senčnih vrednosti na blokih – lahko skoči neposredno na animirani GIF ki prikazuje, kako bi to delovalo.
Ko že govorimo o, Justin Tadlock Pred kratkim razvil blok, ki upodablja vrstico napredka in vanj integrirane kontrole senčenja polja. To pokaže v tem videu:
Več informacij
Če se želite poglobiti v box-shadow in druge lastnosti CSS, ki jih podpira theme.json datoteko v blok temi, tukaj je nekaj virov, ki jih lahko uporabite:
