Ik strompelde over deze tweet van Ana Segota op zoek naar een manier om een CSS toe te voegen box-shadow naar de zweefstatus van een knop in WordPress in de theme.json bestand.
Ze vraagt het omdat theme.json is waar WordPress wil dat we beginnen met het verplaatsen van basisstijlen voor blokthema's. Traditioneel doen we alle styling erin style.css bij het werken in een “klassiek” thema. Maar met het standaard Twenty Twenty-Three (TT3)-thema dat onlangs werd geleverd met WordPress 6.1, werden al zijn stijlen verplaatst naar theme.json, komen we er steeds dichter bij om hetzelfde te kunnen doen met onze eigen thema's. Ik heb dit uitgebreid behandeld in een recent artikel.
Ik zeg "steeds dichterbij" omdat er nog steeds veel CSS-eigenschappen en selectors zijn die niet worden ondersteund theme.json. Als je bijvoorbeeld iets wilt stylen met like perspective-origin in theme.json, het zal gewoon niet gebeuren - tenminste terwijl ik dit vandaag schrijf.
Ana kijkt box-shadow en, gelukkig voor haar, wordt die CSS-eigenschap ondersteund door theme.json vanaf WordPress 6.1. Haar tweet dateert van 1 november precies dezelfde dag dat 6.1 werd uitgebracht. Het is niet zo dat ondersteuning voor het onroerend goed een hoofdfunctie was in de release. De grotere koppen hadden meer te maken met spatiëring en lay-outtechnieken voor blokken en blokthema's.
Hier is hoe we een kunnen toepassen box-shadow naar een specifiek blok - zeg maar het blok Uitgelichte afbeelding - in theme.json:
{
"version": 2,
"settings": {},
// etc.
"styles": {
"blocks" :{
"core/post-featured-image": {
"shadow": "10px 10px 5px 0px rgba(0, 0, 0, 0.66)"
}
}
}
}Vraagt u zich af of de nieuwe kleurensyntaxis werken? Ik ook! Maar toen ik het probeerde - rgb(0 0 0 / 0.66) - Ik heb niets. Misschien is dat al in de maak of kan het een pull request gebruiken.
Makkelijk, toch? Natuurlijk, het is heel anders dan het schrijven van vanille-CSS style.css en is even wennen. Maar het is inderdaad mogelijk vanaf de meest recente WordPress-release.
En hey, we kunnen hetzelfde doen met individuele "elementen", zoals een knop. Een knop is een blok op zich, maar kan ook een genest blok binnen een ander blok zijn. Dus, om een toe te passen box-shadow wereldwijd naar alle knoppen, zouden we zoiets als dit doen theme.json:
{
"version": 2,
"settings": {},
// etc.
"styles": {
"elements": {
"button": {
"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
}
}
}
}Maar Ana wil de schaduw toevoegen aan de knoppen :hover staat. Dankbaar, ondersteuning voor het opmaken van interactieve toestanden voor bepaalde elementen, zoals knoppen en links, met behulp van pseudo-klassen — inclusief :hover, :focus, :active en :visited - ook gewonnen theme.json ondersteuning in WordPress 6.1.
{
"version": 2,
"settings": {},
// etc.
"styles": {
"elements": {
"button": {
":hover": {
"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
}
}
}
}
}Als je een parent-thema gebruikt, kun je zeker de stijlen van een thema overschrijven in een child-thema. Hier negeer ik de knopstijlen van TT3 volledig.
Volledige code bekijken
{
"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)"
}
}
}
}
}
}Hier is hoe dat wordt weergegeven:
Een andere manier om het te doen: aangepaste stijlen
De onlangs vrijgegeven Pixl block-thema is een ander voorbeeld van het gebruik in de echte wereld van het box-shadow eigendom in theme.json een alternatieve methode gebruiken die definieert aangepaste waarden. In het thema, een gewoonte box-shadow eigenschap wordt gedefinieerd als .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.
}
}Dan, verderop in het bestand, de custom shadow eigenschap wordt aangeroepen op een knopelement:
{
"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.
}
}Ik ben niet helemaal zeker over het gebruik van !important in deze context. Mijn vermoeden is dat het een poging is om te voorkomen dat die stijlen worden overschreven met behulp van de Global Styles UI in de Site Editor, die een hogere specificiteit heeft dan stijlen die zijn gedefinieerd in theme.json. Hier is een verankerde link naar meer informatie uit mijn vorige artikel over het beheren van blokthemastijlen.
update: Daar bleek een hele discussie over te zijn geweest Trekverzoek #34689, waarin wordt opgemerkt dat het is geadresseerd in WordPress 5.9.
En er is meer ...
Naast schaduwen, de CSS outline ook verworven eigendom theme.json ondersteuning in WordPress 6.1 en kan worden toegepast op knoppen en hun interactieve toestanden. Deze GitHub PR laat een goed voorbeeld zien.
"elements": {
"button": {
"outline": {
"offset": "3px",
"width": "3px",
"style": "dashed",
"color": "red"
},
":hover": {
"outline": {
"offset": "3px",
"width": "3px",
"style": "solid",
"color": "blue"
}
}
}
}U kunt ook de echte voorbeelden vinden van hoe de outline property werkt in andere thema's, waaronder Loudness, Blok canvas en Blokbasis.
Afsluiten
Wie had gedacht dat er zoveel was om over te praten met een enkele CSS-eigenschap als het gaat om blokthema's in WordPress 6.1? We zagen de officieel ondersteunde methoden voor het instellen van a box-shadow op blokken en individuele elementen, inclusief de interactieve toestanden van een knopelement. We hebben ook gekeken hoe we schaduwen in een child-thema konden overschrijven. En tot slot hebben we een voorbeeld uit de echte wereld opengebroken dat schaduwen definieert en instelt in een aangepaste eigenschap.
U kunt meer gedetailleerde diepgaande discussies vinden over WordPress en zijn box-shadow uitvoering hierin GitHub PR. Er is ook een GitHub-voorstel voor het rechtstreeks toevoegen van een gebruikersinterface in WordPress om schaduwwaarden op blokken in te stellen - dat kan spring direct naar een geanimeerde GIF laten zien hoe dat zou werken.
Daarover gesproken, Justin Tadlock onlangs een blok ontwikkeld dat een voortgangsbalk weergeeft en geïntegreerde box-schaduwbedieningen erin. Hij laat het zien in deze video:
Meer informatie
Als je dieper wilt graven in de box-shadow en andere CSS-eigenschappen die worden ondersteund door de theme.json bestand in een blokthema, hier zijn een paar bronnen die u kunt gebruiken:
