Ich bin auf diesen Tweet von Ana Segota gestoßen, die nach einer Möglichkeit suchte, einen CSS-box-shadow zum Hover-Zustand eines Buttons in der WordPress-Datei theme.json hinzuzufügen.
Sie fragt, weil theme.json der Ort ist, an den WordPress uns schicken möchte, um grundlegende Stile für Block-Themes zu verschieben. Traditionell würden wir jeden und alle Stile in style.css schreiben, wenn wir mit einem „klassischen“ Theme arbeiten. Aber mit dem standardmäßigen Twenty Twenty-Three (TT3) Theme, das kürzlich mit WordPress 6.1 ausgeliefert wurde und alle seine Stile nach theme.json verschoben hat, kommen wir unserem eigenen Themes immer näher. Ich habe dies ausführlich in einem kürzlichen Artikel behandelt.
Ich sage „immer näher“, weil es immer noch viele CSS-Eigenschaften und Selektoren gibt, die in theme.json nicht unterstützt werden. Wenn Sie beispielsweise hoffen, etwas mit perspective-origin in theme.json zu stylen, wird das nicht funktionieren – zumindest nicht, solange ich das hier schreibe.
Ana schaut sich box-shadow an und, glücklicherweise für sie, wird diese CSS-Eigenschaft seit WordPress 6.1 von theme.json unterstützt. Ihr Tweet vom 1. November ist genau derselbe Tag, an dem 6.1 veröffentlicht wurde. Es ist nicht so, dass die Unterstützung für die Eigenschaft ein Hauptmerkmal der Veröffentlichung war. Die größeren Schlagzeilen bezogen sich eher auf Abstände und Layouttechniken für Blöcke und Block-Themes.
So können wir einen box-shadow für einen bestimmten Block – sagen wir den Featured Image Block – in theme.json anwenden
{
"version": 2,
"settings": {},
// etc.
"styles": {
"blocks" :{
"core/post-featured-image": {
"shadow": "10px 10px 5px 0px rgba(0, 0, 0, 0.66)"
}
}
}
}Fragt sich, ob die neue Farbsyntax funktioniert? Ich auch! Aber als ich es versuchte – rgb(0 0 0 / 0.66) – bekam ich nichts. Vielleicht ist das bereits in Arbeit oder könnte einen Pull-Request gebrauchen.
Einfach, oder? Sicher, es ist viel anders als das Schreiben von reinem CSS in style.css und es braucht etwas Gewöhnung. Aber es ist tatsächlich möglich ab der neuesten WordPress-Version.
Und, hey, wir können dasselbe für einzelne „Elemente“ tun, wie z. B. einen Button. Ein Button ist an sich ein Block, aber er kann auch ein verschachtelter Block innerhalb eines anderen Blocks sein. Um also einen box-shadow global für alle Buttons anzuwenden, würden wir in theme.json so etwas tun:
{
"version": 2,
"settings": {},
// etc.
"styles": {
"elements": {
"button": {
"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
}
}
}
}Aber Ana möchte den Schatten für den :hover-Zustand des Buttons hinzufügen. Glücklicherweise gewann die Unterstützung für das Styling von interaktiven Zuständen für bestimmte Elemente, wie Buttons und Links, unter Verwendung von Pseudoklassen – einschließlich :hover, :focus, :active und :visited – ebenfalls die Unterstützung von theme.json in WordPress 6.1.
{
"version": 2,
"settings": {},
// etc.
"styles": {
"elements": {
"button": {
":hover": {
"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
}
}
}
}
}Wenn Sie ein Eltern-Theme verwenden, können Sie die Stile eines Themes sicherlich in einem Kind-Theme überschreiben. Hier überschreibe ich die Button-Stile von TT3 komplett.
Gesamten Code anzeigen
{
"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)"
}
}
}
}
}
}So rendert das
Eine weitere Möglichkeit: benutzerdefinierte Stile
Das kürzlich veröffentlichte Block-Theme Pixl bietet ein weiteres Beispiel für die reale Nutzung der box-shadow-Eigenschaft in theme.json, indem eine alternative Methode verwendet wird, die benutzerdefinierte Werte definiert. Im Theme wird eine benutzerdefinierte box-shadow-Eigenschaft als .settings.custom.shadow definiert.
{
"version": 2,
"settings": {
// etc.
"custom": {
// etc.
"shadow": "5px 5px 0px -2px var(--wp--preset--color--background), 5px 5px var(--wp--preset--color--foreground)"
},
// etc.
}
}Dann wird später in der Datei die benutzerdefinierte shadow-Eigenschaft auf ein Button-Element angewendet
{
"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.
}
}Ich bin mir bei der Verwendung von !important in diesem Kontext nicht ganz sicher. Meine Vermutung ist, dass es ein Versuch ist, diese Stile über die Global Styles UI im Site Editor zu überschreiben, die eine höhere Spezifität hat als in theme.json definierte Stile. Hier ist ein verankerter Link zu weiteren Informationen aus meinem vorherigen Artikel über die Verwaltung von Block-Theme-Stilen.
Update: Es gab tatsächlich eine ganze Diskussion darüber in Pull Request #34689, der besagt, dass dies in WordPress 5.9 behoben wurde.
Und es gibt noch mehr…
Zusätzlich zu Schatten hat die CSS-Eigenschaft outline ebenfalls die Unterstützung von theme.json in WordPress 6.1 erhalten und kann auf Buttons und ihre interaktiven Zustände angewendet werden. Dieser GitHub PR zeigt ein gutes Beispiel.
"elements": {
"button": {
"outline": {
"offset": "3px",
"width": "3px",
"style": "dashed",
"color": "red"
},
":hover": {
"outline": {
"offset": "3px",
"width": "3px",
"style": "solid",
"color": "blue"
}
}
}
}Sie können auch reale Beispiele dafür finden, wie die outline-Eigenschaft in anderen Themes funktioniert, darunter Loudness, Block Canvas und Blockbase.
Zusammenfassung
Wer hätte gedacht, dass es so viel über eine einzige CSS-Eigenschaft zu sagen gibt, wenn es um Block-Theming in WordPress 6.1 geht? Wir haben die offiziell unterstützten Methoden gesehen, um einen box-shadow auf Blöcke und einzelne Elemente anzuwenden, einschließlich der interaktiven Zustände eines Button-Elements. Wir haben auch untersucht, wie wir Schatten in einem Kind-Theme überschreiben könnten. Und schließlich haben wir ein reales Beispiel analysiert, das Schatten in einer benutzerdefinierten Eigenschaft definiert und setzt.
Ausführlichere Diskussionen über WordPress und seine box-shadow-Implementierung finden Sie in diesem GitHub PR. Es gibt auch einen GitHub-Vorschlag zum Hinzufügen von UI direkt in WordPress, um Schattenwerte auf Blöcke anzuwenden – Sie können direkt zu einem animierten GIF springen, das zeigt, wie das funktionieren würde.
Apropos, Justin Tadlock hat kürzlich einen Block entwickelt, der eine Fortschrittsleiste rendert und Box-Shadow-Steuerelemente integriert hat. Er stellt es in diesem Video vor
Weitere Informationen
Wenn Sie tiefer in die box-shadow und andere CSS-Eigenschaften eintauchen möchten, die von der theme.json-Datei in einem Block-Theme unterstützt werden, finden Sie hier ein paar Ressourcen, die Sie verwenden können
- CSS-Stile in einem WordPress-Block-Theme verwalten (CSS-Tricks)
- Elemente in Block-Themes stylen (Dev Notes)
- Ein Spaziergang durch Layout-Klassen in WordPress 6.1 (Gutenberg Times)
- Wie man Box-Shadows mit theme.json hinzufügt (Full Site Editing)
- Box-Shadow: UI-Werkzeuge zum Setzen von Box-Shadows auf einem Block hinzufügen (Gutenberg Pull Request #45507)
- Box-Shadow-Unterstützung für Blöcke über theme.json hinzufügen (Gutenberg Pull Request #41972)
- Outline-Unterstützung für Blöcke über theme.json hinzugefügt (Gutenberg Pull Request #43526)