Botlott ez a tweet Ana Segotától keresi a módját a CSS hozzáadásának box-shadow egy gomb lebegő állapotába a WordPressben a theme.json fájlt.
Azért kérdezi theme.json A WordPress azt szeretné, ha elkezdjük áthelyezni az alapvető stílusokat a blokktémákhoz. Hagyományosan bármilyen stílust megcsináltunk style.css amikor „klasszikus” témában dolgozunk. De az alapértelmezett Twenty Twenty-Three (TT3) témával, amelyet a közelmúltban szállítottak a WordPress 6.1-hez, minden stílusát áthelyezte theme.json, egyre közelebb kerülünk ahhoz, hogy a saját témáinkkal is meg tudjuk csinálni ugyanezt. Ezt egy nemrégiben megjelent cikkemben részletesen kifejtettem.
Azért mondom, hogy „közelebb és közelebb”, mert még mindig rengeteg olyan CSS-tulajdonság és választó van, amely nem támogatott theme.json. Például, ha azt reméli, hogy valami hasonlóval stílusozhat perspective-origin in theme.json, egyszerűen nem fog megtörténni – legalábbis amikor ezt ma írom.
Ana nézi box-shadow és szerencsére ezt a CSS tulajdonságot támogatja theme.json a WordPress 6.1-től. Tweetje november 1-je, pontosan ugyanazon a napon, amikor a 6.1 megjelent. Nem mintha a tulajdon támogatása szerepelt volna a kiadásban. A nagyobb címsorok inkább a blokkok és blokktémák térköz- és elrendezési technikáihoz kapcsolódnak.
Így tudjuk alkalmazni a box-shadow egy adott blokkra – mondjuk a Kiemelt kép blokkra – be theme.json:
{
"version": 2,
"settings": {},
// etc.
"styles": {
"blocks" :{
"core/post-featured-image": {
"shadow": "10px 10px 5px 0px rgba(0, 0, 0, 0.66)"
}
}
}
}Vajon vajon a új színszintaxis művek? Nekem is! De amikor megpróbáltam - rgb(0 0 0 / 0.66) - Nincs semmim. Lehet, hogy ez már folyamatban van, vagy használhat egy lehívási kérelmet.
Könnyű, igaz? Persze, ez egészen más, mint a vanília CSS-t beírni style.css és megszokni kell. De ez valóban lehetséges a WordPress legújabb kiadása óta.
És hé, ugyanezt megtehetjük az egyes „elemekkel”, például egy gombbal. A gomb önmagában is egy blokk, de lehet egy másik blokkon belüli beágyazott blokk is. Tehát alkalmazni a box-shadow globálisan az összes gombhoz hasonlót tennénk theme.json:
{
"version": 2,
"settings": {},
// etc.
"styles": {
"elements": {
"button": {
"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
}
}
}
}De Ana hozzá akarja adni az árnyékot a gombhoz :hover állapot. Hálásan, interaktív állapotok stílusának támogatása bizonyos elemekhez, például gombokhoz és hivatkozásokhoz pszeudoosztályok használatával – beleértve :hover, :focus, :activeés :visited — szerzett is theme.json támogatás a WordPress 6.1-ben.
{
"version": 2,
"settings": {},
// etc.
"styles": {
"elements": {
"button": {
":hover": {
"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
}
}
}
}
}Ha szülőtémát használ, minden bizonnyal felülírhatja a téma stílusait egy gyermektémában. Itt teljesen felülírom a TT3 gombstílusait.
Teljes kód megtekintése
{
"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)"
}
}
}
}
}
}Ez így jelenik meg:
Egy másik módja ennek: egyéni stílusok
A közelmúltban megjelent Pixl blokk téma egy másik példa a valós használatára box-shadow ingatlan be theme.json alternatív módszer alkalmazásával, amely egyéni értékeket határoz meg. A témában egy szokás box-shadow tulajdonságot úgy határozzuk meg .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.
}
}Majd később a fájlban az egyéni shadow A tulajdonságot egy gombelem hívja meg:
{
"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.
}
}Nem vagyok teljesen biztos a használatában !important ebben a kontextusban. Az a megérzésem, hogy ezzel próbálják megakadályozni ezen stílusok felülbírálását a Webhelyszerkesztő Global Styles UI használatával, amely sokkal specifikusabb, mint a theme.json. Itt van egy rögzített link a további információkhoz a blokktéma stílusok kezeléséről szóló korábbi cikkemből.
Frissítés: Kiderült, hogy egész vita volt erről Húzza le a 34689-es számú kérést, amely megjegyzi, hogy a WordPress 5.9-ben foglalkoztak vele.
És még több van…
Az árnyékokon kívül a CSS outline ingatlant is szerzett theme.json támogatás a WordPress 6.1-ben, és alkalmazható a gombokra és azok interaktív állapotára. Ez GitHub PR jó példát mutat.
"elements": {
"button": {
"outline": {
"offset": "3px",
"width": "3px",
"style": "dashed",
"color": "red"
},
":hover": {
"outline": {
"offset": "3px",
"width": "3px",
"style": "solid",
"color": "blue"
}
}
}
}Valódi példákat is találhat arra, hogyan a outline ingatlan más témákban működik, beleértve hangosság, Blokk vászonés Blokkbázis.
Csomagolta
Ki tudta, hogy olyan sok mindenről lehet beszélni egyetlen CSS-tulajdonnal, amikor a WordPress 6.1-es témáinak blokkolására van szükség? Láttuk a hivatalosan támogatott módszereket az a box-shadow blokkon és egyes elemeken, beleértve a gombelem interaktív állapotait. Azt is megvizsgáltuk, hogyan bírálhatjuk felül az árnyékokat egy gyermektémában. Végül pedig feltörtünk egy valós példát, amely meghatározza és beállítja az árnyékokat egy egyéni tulajdonságban.
Részletesebb, mélyreható vitákat találhat a WordPressről és arról box-shadow megvalósítása ebben GitHub PR. Itt van még az GitHub javaslat UI közvetlenül a WordPressben történő hozzáadásához árnyékértékek beállításához a blokkon – ezt megteheti ugorj közvetlenül egy animált GIF-re megmutatja, hogyan fog ez működni.
Ha már itt tartunk, Justin Tadlock nemrég kifejlesztett egy blokkot, amely folyamatjelző sávot jelenít meg és integrált doboz árnyékvezérlőket. Ebben a videóban mutatja be:
Több információ
Ha szeretnél mélyebbre ásni a box-shadow és egyéb CSS-tulajdonságok, amelyeket a theme.json fájlt egy blokktémában, itt van néhány felhasználható forrás:
