In Teil 2 dieser Serie haben wir den Prozess der Aktivierung bestimmter Funktionen in einem WordPress-Block-Theme in der Datei theme.json behandelt. Wir haben uns mit dem Abschnitt settings der Datei beschäftigt und die verschiedenen verfügbaren Funktionen sowie deren Anwendung zur Anpassung der Global Styles UI im WordPress Site Editor mit vordefinierten Werten, die CSS-Custom-Properties-Werten zugeordnet sind, die auf das <body>-Element beschränkt sind, erläutert.
WordPress Block Theme CSS und Style-Einstellungen Leitfaden
Inhaltsverzeichnis
Der Abschnitt styles (styles)
Der Abschnitt styles liegt neben dem Abschnitt settings, den wir im letzten Artikel behandelt haben, als eigenständiger Abschnitt.
{
"version": 2,
"settings": {},
"styles": {
// etc.
}
}In Teil 2 haben wir gelernt, dass der Abschnitt settings Standardstile auf oberster Ebene definiert – CSS, das generell auf das <body>-Element angewendet wird. Der Abschnitt styles ist der Ort, an dem wir diese Voreinstellungen mit granulareren Stilen überschreiben können, die auf bestimmte globale Elemente (z. B. <h1>) und spezifische Blöcke angewendet werden (z. B. theme.json-Datei von Twenty Twenty-Three und andere aktuelle Block-Themes aus dem Theme-Verzeichnis).
Mit anderen Worten: Die settings sind "Stile auf oberster Ebene", die auf alle Elemente kaskadieren. Wir können diese Voreinstellungen im Abschnitt styles überschreiben, wo wir Stile auf spezifische elements und blocks anwenden. Tatsächlich sind elements und blocks Unterabschnitte von styles.
{
"version": 2,
"settings": {},
"styles": {
// Global element styles
"elements": {},
// Block styles
"blocks": {}
}
}Das Tolle daran ist, dass theme.json so strukturiert ist, dass Stile sehr ähnlich wie eine CSS-Stylesheet kaskadieren. Wenn settings zur Konfiguration globaler Stilfunktionen dient, dann ist styles der Ort, an dem wir diese Voreinstellungen überschreiben, wenn wir mit spezifischen globalen elements und einzelnen blocks arbeiten.
Unterstützte Eigenschaften
Als wir uns in Teil 2 den Abschnitt settings angesehen haben, haben wir gesehen, dass er "Features" enthält, die in einem Block-Theme aktiviert und konfiguriert werden können. Im Bezug auf die styles-Abschnitte definieren wir stattdessen CSS-Eigenschaften.
Tatsächlich sind die Objekte, die im Abschnitt styles enthalten sind, echten CSS-Eigenschaften zugeordnet. Zum Beispiel entspricht styles.border-color der border-color-Eigenschaft in CSS.
Bevor wir uns also in den Abschnitt styles stürzen und wie wir das Aussehen eines Block-Themes anpassen können, sollten wir genau wissen, mit welchem CSS wir arbeiten. Die folgende Tabelle listet alle CSS-Eigenschaften auf, die derzeit im Abschnitt styles unterstützt werden (Stand WordPress 6.1).
Vollständige Eigenschaftentabelle
| Eigenschaft | Stil | CSS-Äquivalent | Zusätzliche Props |
|---|---|---|---|
border | color | border-color | |
radius | border-radius | ||
style | border-style | ||
width | border-width | ||
top | border-top | color, style, width | |
right | border-right | color, style, width | |
bottom | border-bottom | color, style, width | |
left | unten-links | color, style, width | |
color | background | background-color | |
gradient | background-image | ||
text | color | ||
spacing | blockGap | gap (in Flexbox- und Grid-Containern) | |
margin | margin | bottom, left, right, top | |
padding | padding | bottom, left, right, top | |
Typografie | fontFamily | font-family | |
fontSize | font-size | ||
fontStyle | font-style | ||
fontWeight | font-weight | ||
letterSpacing | letter-spacing | ||
lineHeight | line-height | ||
textDecoration | text-decoration | ||
textTransform | text-transform | ||
filter | duotone | filter | |
schatten | box-shadow | ||
outline | color | outline-color | |
offset | outline-offset | ||
style | outline-style | ||
width | outline-width |
Es gibt ein paar Dinge, die man beim Setzen dieser Eigenschaften beachten sollte:
- Es gibt keine Äquivalente für logische Eigenschaften. Zum Beispiel wird
margin-leftunterstützt, abermargin-inline-startderzeit nicht. - Mehrere Farbformate werden unterstützt, wie
rgbaundhsla, aber die neuen Syntaxen nicht, z. B.rgb(255, 255, 255 / .5).
Stile auf oberster Ebene
Wir haben Stile auf oberster Ebene bereits in Teil 2 behandelt. Mit "oberster Ebene" meinen wir Stile, die global auf das Root-Element (<html>) sowie auf das <body> angewendet werden. Diese Stile sind "oberste Ebene" in dem Sinne, dass sie standardmäßig von allem im Theme geerbt werden.
Das klassische Beispiel in CSS ist die Festlegung einer Standard-Schriftgröße für das <body>-Element.
body {
font-size: 1.125rem;
}Jedes Element hat nun einen font-size-Wert von 1.125rem, es sei denn, er wird woanders überschrieben. Man könnte denken, dass Stile auf oberster Ebene im styles-Abschnitt von theme.json gesetzt werden. Aber wenn Sie sich an den letzten Artikel dieser Serie erinnern, sind Stile auf oberster Ebene die vordefinierten Werte, die wir stattdessen im settings-Abschnitt definieren.
{
"version": 2,
"settings": {
"typography": {
"fontSizes": {
"size": "1.125rem",
"slug": "medium"
}
}
},
"styles": {}
}Im Hintergrund generiert die WordPress Style Engine eine CSS-Custom-Property, die auf das <body>-Element angewendet wird.
body {
font-size: var(--wp--preset--font-size--medium);
}...was genau zu dem führt, was wir in CSS erwarten würden.
body {
font-size: 1.125rem;
}Nun können wir uns dem Abschnitt styles zuwenden, um diese Art von Stil auf oberster Ebene auf zwei verschiedenen Ebenen zu überschreiben: elements und blocks.
Stile auf Elementebene
Was ist, wenn wir diese font-size auf oberster Ebene auf ein bestimmtes Element beschränken wollen? Ein globales Element ist etwas schwierig zu verstehen, da es sowohl Blöcke als auch Blöcke sind, die in andere Blöcke verschachtelt werden können.
Betrachten Sie elements als "Kern"-Blöcke. Das ist tatsächlich so, wie sie im WordPress Handbook genannt werden, und es ist eine gute Beschreibung dessen, was sie sind: Blöcke, die mit WordPress Core out-of-the-box geliefert werden.
Eine Überschrift ist ein perfektes Beispiel für einen Kern-Block. Es gibt einen Heading Block, den wir verwenden können, um jede Überschriftenebene (<h1>–<h6>) zu einer Seite oder einem Beitrag hinzuzufügen. Wenn Sie also ein H2-Element auf einer Seite einfügen müssen, haben Sie einen spezifischen Block dafür.
Aber eine H2 kann Teil eines anderen Blocks sein. Wenn Sie zum Beispiel einen Query Loop Block zu einer Seite hinzufügen, erhalten Sie eine Liste von Beiträgen, die jeweils einen Post Title Block haben, der ein <h2>-Element ausgibt.
Wenn Sie alle Überschriftenelemente stiln möchten, unabhängig von der Ebene, können Sie dies im elements-Objekt in theme.json tun.
{
"version": 2,
"settings": { }
"styles": {
// Global-level styles
"elements": {
"heading": { ... },
}
}
}Nehmen wir an, die CSS-Eigenschaft color ist als Stil auf oberster Ebene in settings auf Schwarz gesetzt.
{
"version": 2,
"settings": {
// Top-level styles
"color": {
"palette": {
"color": "#000000",
"name": "Contrast",
"slug": "contrast"
}
}
},
}Die WordPress Style Engine erstellt eine CSS-Custom-Property, die auf oberster Ebene auf das <body>-Element angewendet werden kann.
body {
color: var(--wp--preset--color--contrast);
}Vielleicht möchten Sie, dass alle Ihre Überschriften eine andere Farbe haben als die, die bereits auf das <body>-Element angewendet ist. Sie können dies unter styles.elements.heading einstellen, um Schwarz durch z. B. eine dunkelgraue Farbe zu ersetzen.
{
"version": 2,
"settings": {
// Top-level style presets
"color": {
"palette": {
"color": "#000000",
"name": "Contrast",
"slug": "contrast"
}
}
},
"styles": {
// Global-level styles
"elements": {
"heading": {
"color": {
"text": "#333333"
}
}
}
}
}Eine andere Möglichkeit besteht darin, eine neue Farbe in settings.color.palette zu konfigurieren und die generierte CSS-Custom-Property auf styles.elements.heading.color.text anzuwenden.
Okay, aber vielleicht möchten Sie, dass das H2-Globalelement stärker hervorsticht als andere Überschriftenebenen. Sie können das Dunkelgrau für alle Kernüberschriftenelemente mit einem anderen Farbwert überschreiben, der dem h2-Element zugewiesen ist.
{
"version": 2,
"settings": {
// Top-level style presets
"color": {
"palette": {
"color": "#000000",
"name": "Contrast",
"slug": "contrast"
}
}
},
"styles": {
// Global-level styles
"elements": {
"heading": {
"color": {
"text": "#333333"
}
},
"h2": {
"color": {
"text": "#F8A100"
}
}
}
}
}Zum Zeitpunkt des Schreibens werden im Abschnitt styles.elements derzeit die folgenden globalen Elemente unterstützt:
| JSON-Eigenschaft | Generierter Selektor | Anwendungsfälle |
|---|---|---|
elements.buttons | Schaltflächen | Buttons-Block, Blöcke |
elements.heading | Überschriften | Überschriften-Block, |
elements.h1 bis elements.h6 | <h1> bis <h6> | Seitentitel, Beitragstitel, Blöcke |
elements.link | <a> | Links |
elements.cite | blockquote.cite, quote.cite | Zitat, Pullquote |
elements.caption | <figcaption>, <caption> | Figure, Tabelle |
elements.spacing.padding | Füllung | Überschriften, Zeile, Blöcke, Absatz |
elements.typography | Typografie | Überschriften, Absatz |
Stile auf Blockebene
Es gibt noch eine weitere Ebene in styles, und diese wird verwendet, um das CSS für einzelne Blöcke anzupassen.
{
"version": 2,
"styles": {
// Top-level styles
// etc.
// Global-level styles
"elements": { },
// Block-level styles
"blocks": { }
}
}Lassen Sie uns dort weitermachen, wo wir im letzten Abschnitt aufgehört haben. Wir hatten die Eigenschaft color im styles auf oberster Ebene auf Schwarz gesetzt, diese dann mit einer anderen Farbe für alle Überschriften in styles.elements.heading überschrieben und dann diese nur für das H2-Element unter styles.elements.h2 überschrieben. Hier ist der Code noch einmal:
{
"version": 2,
"styles": {
// Top-level styles
"color": "#000000",
// Global-level styles
"elements": {
"heading": {
"color": {
"text": "#333333"
}
},
"h2": {
"color": {
"text": "#f8a100"
}
},
}
}
}Zuvor haben wir besprochen, wie ein globales Element wie H2 auch Teil eines anderen Blocks sein kann. Wir haben den Query Loop Block als Beispiel verwendet, bei dem H2 für jeden Beitragstitel verwendet wird.
Bisher ist die Farbe des Beitragstitels des Query Loops #F8A100, da dies unter styles.elements.h2 eingestellt ist. Aber Sie können dies im Abschnitt styles.blocks überschreiben, wenn Sie möchten, dass das H2-Element des Query Loop Blocks eine andere Farbe erhält, ohne andere Überschriften zu beeinträchtigen.
{
"version": 2,
"styles": {
// Top-level styles
"color": "#000000",
// Global-level styles
"elements": {
"heading": {
"color": {
"text": "#333333"
}
},
"h2": {
"color": {
"text": "#F8A100"
}
}
},
"blocks": {
"core/query": {
"elements": {
"h2": {
"color": {
"text": "var(--wp--preset--color--primary)"
}
}
}
}
}
}
}Im Hintergrund erstellt die WordPress Style Engine das CSS für das <h2>-Element des Query Loops.
.wp-query h2 {
color: var(--wp--preset--color--primary);
}Ziemlich großartig, oder? Jetzt haben wir eine Möglichkeit, Standardstile zu setzen und sie auf verschiedenen Ebenen im Theme auf strukturierte Weise zu überschreiben, die der CSS-Kaskade ähnelt.
Schauen Sie im WordPress Handbook nach einer vollständigen Liste der Blöcke, die verwendet werden können im Block-Editor.
Interaktive Stile
Was ist, wenn Sie das CSS für verschiedene interaktive Zustände anpassen möchten? Alles, was wir bisher betrachtet haben, ist großartig für die Gestaltung eines Kern-Blocks wie Button, aber was ist mit den Stilen, wenn jemand mit dem Mauszeiger über einen Button-Block fährt? Oder vielleicht, wenn dieser Button im Fokus ist?
Das können wir mit CSS-Pseudo-Klassen tun. Sie sind wahrscheinlich bereits gut vertraut mit der Verwendung von Pseudo-Klassen wie :hover, :focus, :active und :visited. Sie sind sehr verbreitet!
Glücklicherweise hat die Unterstützung für die Gestaltung interaktiver Zustände für bestimmte Kern-Blöcke wie Buttons und Links mithilfe von Pseudo-Klassen in WordPress 6.1 die Unterstützung in theme.json erhalten. Hier ist ein Beispiel aus einem meiner früheren Artikel, das einen box-shadow zu den Button-Elementen eines Themes bei Hover hinzufügt.
{
"version": 2,
"settings": {},
"styles": {
"elements": {
"button": {
":hover": {
"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
}
}
}
}
}Die WordPress Style Engine liest dies und generiert das folgende CSS:
.wp-button:hover {
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.66);
}Aber bevor Sie sich beeilen, all Ihre interaktiven Stile zu erstellen, sollten Sie beachten, dass theme.json derzeit nur die interaktiven Pseudo-Klassen :hover, :focus und :active unterstützt (Stand WordPress 6.1), und selbst diese sind auf die Elemente button und link beschränkt. Aber dies wird sich wahrscheinlich auf weitere in Zukunft ausdehnen – einschließlich Pseudo-Klassen, die spezifisch für Formularelemente sind –, wie in diesem Make WordPress Core-Blogbeitrag zur Einführung interaktiver Stile erwähnt.
Fürs Erste hier ein Beispiel für die vollständigste Art, die interaktiven Stile eines Buttons anzupassen.
{
"version": 2,
"styles": {
"elements": {
"button": {
"color": {
"background": "#17A2b8",
"text": "#ffffff"
}
":hover": {
"color": {
"background": "#138496"
}
},
":focus": {
"color": {
"background": "#138496"
}
},
":active": {
"color": {
"background": "#138496"
}
}
}
}
}
}Das Gleiche funktioniert, wenn wir elements.button zu elements.link ändern würden.
Ein weiteres JSON-Objekt wird im WordPress Handbook erwähnt, namens css, aber es gibt keine Dokumentation dafür, außer der Erwähnung, dass es verwendet wird, um benutzerdefiniertes CSS festzulegen, das nicht von anderen theme.json-Eigenschaften behandelt wird.
Referenzieren von Stilen
Eine Referenzierungsstilfunktion ist ebenfalls in theme.json verfügbar. Dies ermöglicht es Ihnen, auf eine zuvor definierte Stil-Eigenschaft auf Root-Ebene mit dem Begriff ref: zu verweisen.
Im obigen Beispiel für Stile auf oberster Ebene haben wir die folgende Hintergrundfarbe mithilfe der Eigenschaft styles.color.background am Root der styles-Eigenschaft registriert.
"styles": {
"color": {
"background": "var(--wp--preset--color--base)"
}
}Wir können dieselbe Stil-Eigenschaft für beliebig viele Blöcke wiederverwenden.
{
"color": {
"text": { ref: "styles.color.background" }
}
}Globale Stilvariationen
Es ist möglich, dass ein Theme mehr als eine theme.json-Datei enthält. Warum? Weil Sie so globale Stilvariationen erstellen können.
Dieser Link führt Sie zur offiziellen Dokumentation für globale Stilvariationen, aber die allgemeine Idee ist diese: theme.json enthält alle Ihre Standardwerte und befindet sich im Stammverzeichnis des Theme-Ordners. Zusätzliche theme.json-Dateien werden dann zum Theme-Ordner hinzugefügt, die "Variationen" des Standard-Themes darstellen.
So funktioniert es. Sagen wir, wir haben unsere Standard-theme.json-Datei fertig konfiguriert und sie liegt im Stammverzeichnis des Themes. Nun möchten Sie eine "Dark Mode"-Funktion implementieren, die es dem Benutzer ermöglicht, zwischen hellen und dunklen Farbpaletten zu wechseln. Wir würden eine neue Datei erstellen – nennen wir sie vielleicht dark.json – und sie in einem neuen Ordner im Theme namens /styles platzieren. Wir können so viele dieser Dateien hinzufügen, wie wir möchten, um alle gewünschten Variationen zu erstellen.
theme-folder/
|__ /assets
|__ /patterns
|__ /templates
|__ /parts
|__ /styles
|__ dark.json
|__ index.php
|__ functions.php
|__ style.css
|__ theme.jsonDer größte Unterschied zwischen der Standard-theme.json-Datei und unserer dark.json-Variationsdatei ist, dass unsere Variationsdatei ein Feld title enthält, das es uns ermöglicht, sie von anderen JSON-Dateien zu unterscheiden.
{
"version": 2,
"title": "Dark",
"styles": {}
}Alles, was wir hier einfügen, überschreibt, was in theme.json steht, sobald es aktiviert ist. Und wie aktiviert man eine globale Stilvariation? Sie finden sie im Site Editor (Dashboard → Darstellung → Editor) unter "Stile durchsuchen" (Editor → Stile → "Stile durchsuchen"). Das ist das Geheimnis hinter all den verschiedenen Variationen, die im Standard-Theme Twenty Twenty-Three angeboten werden.
Sie können mehr über die Erstellung von Block-Theme-Stilvariationen in diesem CSS-Tricks-Artikel lesen.
Zusätzliche Ressourcen
- Globale Stile & theme.json (Full Site Editing mit WordPress)
- Globale Einstellungen & Stile (theme.json) (WordPress Developer Resources)
- Updates für Einstellungen, Stile und theme.json (Make WordPress Core)
- Standardisierung von Theme.json Farb-Slugs in WordPress Block-Themes (Rich Tabor)
- Gestaltung der Editor-Erfahrung (WordPress Block Editor Handbook)
- 3 Wege, die Editor-Erfahrung in WordPress zu gestalten (WP Engine Blog)
- Video: Wie man die Editor-Erfahrung gestaltet (Learn WordPress)
Zusammenfassung
Wir sind dem vollständigen Bild der theme.json-Datei sehr nahe gekommen. Wir haben die Struktur behandelt, wie man Features aktiviert und Stile auf Theme-, globaler und Blockebene konfiguriert, bis hin zur Untersuchung von benutzerdefinierten Styling-Möglichkeiten und dem Überschreiben all unserer Standardwerte mit globalen Stilvariationen. Hoffentlich erkennen Sie, wie mächtig theme.json in der Ära der WordPress-Block-Themes ist.
Der nächste Artikel in dieser Serie gibt Ihnen einen tieferen Einblick in die Style Engine. Wir haben sie mehrmals erwähnt, aber nur kurz beschrieben, was sie tut. Sie ist ein integraler Bestandteil des Block-Theme-Puzzles, da sie das gesamte JSON, das wir schreiben, in reinen CSS-Code umwandelt.
Sie ist die einzige Quelle der Wahrheit, wenn es um die Verwaltung des CSS eines Block-Themes geht. Und es ist gut zu wissen, was WordPress im Hintergrund tut, wenn ein Theme gerendert wird, also gehen wir zum nächsten Artikel über!