Jag snubblat över denna tweet från Ana Segota letar efter ett sätt att lägga till en CSS box-shadow till en knapps svävningstillstånd i WordPress i theme.json fil.
Hon frågar därför theme.json är där WordPress vill att vi ska börja flytta grundläggande stilar för blockteman. Traditionellt skulle vi göra all styling i style.css när du arbetar med ett "klassiskt" tema. Men med standardtemat Twenty Twenty-Three (TT3) som nyligen levererades med WordPress 6.1 flyttade alla dess stilar till theme.json, vi kommer närmare och närmare att kunna göra detsamma med våra egna teman. Jag behandlade detta mycket detaljerat i en ny artikel.
Jag säger "närmare och närmare" eftersom det fortfarande finns många CSS-egenskaper och väljare som inte stöds i theme.json. Till exempel, om du hoppas kunna styla något med liknande perspective-origin in theme.json, det kommer bara inte att hända - åtminstone när jag skriver detta idag.
Ana tittar på box-shadow och, lyckligtvis för henne, stöds den CSS-egendomen av theme.json från och med WordPress 6.1. Hennes tweet är daterad 1 november, exakt samma dag som 6.1 släpptes. Det är inte som att stödet för egendomen var en rubrik i releasen. De större rubrikerna var mer relaterade till avstånds- och layouttekniker för block och blockteman.
Så här kan vi tillämpa en box-shadow till ett specifikt block — säg det utvalda bildblocket — i theme.json:
{
"version": 2,
"settings": {},
// etc.
"styles": {
"blocks" :{
"core/post-featured-image": {
"shadow": "10px 10px 5px 0px rgba(0, 0, 0, 0.66)"
}
}
}
}Undrar om ny färgsyntax Arbetar? Jag också! Men när jag försökte - rgb(0 0 0 / 0.66) - Jag har inget. Kanske är det redan på gång eller kan använda en pull-begäran.
Lätt, eller hur? Visst, det är annorlunda än att skriva vanilla CSS i style.css och det tar lite tid att vänja sig vid. Men det är verkligen möjligt från och med den senaste WordPress-versionen.
Och hej, vi kan göra samma sak med enskilda "element", som en knapp. En knapp är ett block i sig, men det kan också vara ett kapslat block i ett annat block. Så att tillämpa en box-shadow globalt för alla knappar, skulle vi göra något sånt här i theme.json:
{
"version": 2,
"settings": {},
// etc.
"styles": {
"elements": {
"button": {
"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
}
}
}
}Men Ana vill lägga till skuggan till knappens :hover stat. Tack och lov, stöd för styling av interaktiva tillstånd för vissa element, som knappar och länkar, med hjälp av pseudoklasser - inklusive :hover, :focus, :activeoch :visited — också vunnit theme.json stöd i WordPress 6.1.
{
"version": 2,
"settings": {},
// etc.
"styles": {
"elements": {
"button": {
":hover": {
"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
}
}
}
}
}Om du använder ett överordnat tema kan du säkert åsidosätta ett temas stilar i ett undertema. Här åsidosätter jag helt TT3:s knappstilar.
Se hela koden
{
"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)"
}
}
}
}
}
}Så här återges det:
Ett annat sätt att göra det: anpassade stilar
Den nyligen släppta PIXL blocktema ger ett annat exempel på verklig användning av box-shadow fastighet i theme.json använder en alternativ metod som definierar anpassade värden. I temat, en sed box-shadow egenskap definieras som .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.
}
}Sedan, senare i filen, anpassas shadow egenskapen anropas på ett knappelement:
{
"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.
}
}Jag är inte helt säker på användningen av !important i detta sammanhang. Min gissning är att det är ett försök att förhindra att dessa stilar åsidosätts med hjälp av Global Styles UI i Site Editor, som har hög specificitet än stilar som definieras i theme.json. Här är en förankrad länk till mer information från min tidigare artikel om hantering av blocktemastilar.
Uppdatering: Det visade sig att det var en hel diskussion om detta Dragförfrågan #34689, som noterar att det togs upp i WordPress 5.9.
Och det finns mer ...
Förutom skuggor, CSS outline egendom också vunnit theme.json stöd i WordPress 6.1 och kan appliceras på knappar och deras interaktiva tillstånd. Detta GitHub PR visar ett bra exempel.
"elements": {
"button": {
"outline": {
"offset": "3px",
"width": "3px",
"style": "dashed",
"color": "red"
},
":hover": {
"outline": {
"offset": "3px",
"width": "3px",
"style": "solid",
"color": "blue"
}
}
}
}Du kan också hitta de verkliga exemplen på hur outline fastighetsverk inom andra teman, bl.a Högljuddhet, Block Canvasoch Blockbas.
Inslagning upp
Vem visste att det fanns så mycket att prata om med en enda CSS-egenskap när det kommer till blocktema i WordPress 6.1? Vi såg de officiellt stödda metoderna för att ställa in en box-shadow på block och enskilda element, inklusive de interaktiva tillstånden för ett knappelement. Vi kollade också på hur vi kunde åsidosätta skuggor i ett barntema. Och slutligen öppnade vi ett verkligt exempel som definierar och sätter skuggor i en anpassad egenskap.
Du kan hitta mer detaljerade djupgående diskussioner om WordPress och det box-shadow genomförande i detta GitHub PR. Det finns också en GitHub-förslag för att lägga till UI direkt i WordPress för att ställa in skuggvärden på block — du kan hoppa direkt till en animerad GIF visar hur det skulle fungera.
Talar om vilka, Justin Tadlock nyligen utvecklat ett block som återger en förloppsindikator och integrerade boxskuggkontroller i den. Han visar upp det i den här videon:
Mer information
Om du vill gräva djupare i box-shadow och andra CSS-egenskaper som stöds av theme.json fil i ett blocktema, här är ett par resurser du kan använda:
