Bisher haben wir uns mit theme.json vertraut gemacht, der Grundlage für alle WordPress-Block-Themes. Wir haben die verschiedenen JSON-Datentypen und gebräuchlichen Begriffe im Zusammenhang mit der JSON-Syntax behandelt.
In diesem Artikel werden wir dieses Wissen ausbauen.
WordPress Block Theme CSS und Style-Einstellungen Leitfaden
Inhaltsverzeichnis
Was wir mit "oberster Ebene" meinen
Wir haben besprochen, wie JSON eine strukturierte Syntax hat. Das sehen wir in der grundlegenden Gliederung der theme.json-Datei
{
"version": 2,
"settings": {},
"styles": {},
"customTemplates": {},
"templateParts": {}
}Jedes Objekt in der grundlegenden Gliederung ist eine "oberste Ebene" der Datei. Sie können sich die Objekte als Abschnitte vorstellen, in denen verschiedene Dinge konfiguriert werden. Abgesehen von der version gibt es vier oberste Abschnitte
settings: Hier definieren wir WordPress-Voreinstellungen und Standardwerte; hier können wir auch bestimmte WordPress-Funktionen aktivieren oder deaktivieren.styles: Hier definieren wir CSS für globale und blockbezogene Theme-Stile.customTemplates: Hier registrieren wir neue benutzerdefinierte Theme-Vorlagen. Das ist das Äquivalent zum Ablegen einer neuen PHP-Vorlagendatei in einem klassischen Theme.templateParts: Dieser Abschnitt enthält modulare Teile, die in Vorlagen eingebunden werden können. Das ist das Äquivalent zum Unterordnerparts, den Sie normalerweise in klassischen Themes sehen.
Wir verbringen die meiste Zeit in den Abschnitten settings und styles. Beide bieten Möglichkeiten, die globalen Stile eines WordPress-Block-Themes zu konfigurieren. Betrachten wir also jeden einzelnen und die verschiedenen Optionen, die wir haben, um das Aussehen des Themes anzupassen.
Der Einstellungsbereich (settings)
Auch hier konfigurieren wir WordPress-Funktionen, ähnlich wie die Funktion add_theme_support, die Sie in der functions.php-Datei eines klassischen Themes verwenden würden.
{
"version": 2,
"settings": {
// etc.
}
}Warum ist das für die globalen Stile eines Themes relevant? Mehrere WordPress-Funktionen beeinflussen die Gestaltung, wie z. B. UI-Steuerelemente für Abstände, Ränder, Farben und Schriftarten. Ohne deren Aktivierung gibt es keine Möglichkeit, diese und andere Stile in der Global Styles UI im Site Editor anzuwenden.
Kurz gesagt: Was wir hier definieren, ist das, was WordPress verwendet, um Theme-Support für die globalen Stileinstellungen des Site Editors hinzuzufügen, die im gesamten Theme verwendet werden.
Unterstützte Funktionen
Das WordPress Block Editor Handbook bietet eine Tabelle, die die verfügbaren Funktionen auflistet, die wir im settings-Bereich aktivieren können, und vergleicht sie mit ihren entsprechenden add_theme_support-Funktionsargumenten.
| Theme JSON Einstellungen | add_theme_support |
|---|---|
color.custom | custom-colors |
color.palette | editor-color-palette |
color.gradients | editor-gradient-presets |
spacing.padding | custom-spacing |
spacing.units | custom-units |
typography.lineHeight | custom-line-height |
typography.fontSizes | editor-font-sizes |
useRootPaddingAwareAlignments | N/A |
Zum Beispiel haben Sie in Ihrem klassischen Theme add_theme_support verwendet, um benutzerdefinierte Schriftgrößen zu deaktivieren.
<?php
add_theme_support(disable-custom-font-sizes);Das Äquivalent in theme.json ist die Eigenschaft settings.typography.customFontSize.
{
"version": 2,
"settings": {
"typography": {
"customFontSize": false;
}
}
}Wie Sie sich vorstellen können, gibt es verschachtelte Funktionen innerhalb dieser Funktionen. Wenn wir beispielsweise Unterstützung für spacing-Steuerelemente hinzufügen, gibt es eine Reihe von spacing-bezogenen Funktionen, die wir einzeln aktivieren können.
{
"version": 2,
"settings": {
"spacing": {
"margin": false,
"padding": false,
"blockGap": null,
"units": [ "px", "em", "rem", "vh", "vw" ]
},
}
}Ab WordPress 6.1 sind dies die settings-Funktionen, die in theme.json konfiguriert werden können.
Vollständige Tabelle anzeigen
| Einstellung | Merkmal | Datentyp |
|---|---|---|
border | radius | Boolean |
color | Boolean | |
style | Boolean | |
width | Boolean | |
color | custom | Boolean |
customDuotone | Boolean | |
customGradient | Boolean | |
duotone | Array | |
Verläufe | Array | |
link | Boolean | |
palette | Array | |
text | Boolean | |
background | Boolean | |
defaultGradients | Boolean | |
defaultPalette | Boolean | |
Layout | contentSize | String |
wideSize | String | |
type | String (default und constrained) | |
spacing | margin | Boolean |
padding | Boolean | |
blockGap | String | |
Einheiten | Array | |
Typografie | customFontSize | Boolean |
lineHeight | Boolean | |
dropCap | Boolean | |
fontStyle | Boolean | |
| fontWeight | Boolean | |
letterSpacing | Boolean | |
textDecoration | Boolean | |
textTransform | Boolean | |
fontSizes | Array | |
fontFamilies | Array |
Es gibt laufende Diskussionen, um die Eigenschaften outline und border zum Global Styles Panel hinzuzufügen. Sie sind in dieser Tabelle enthalten, bevor sie formell übernommen werden.
Die appearanceTools-Abkürzung
Ich weiß, dass die Tabelle eine Menge Funktionen zeigt. Die Konfiguration jeder Einstellung kann mühsam werden. Hier kommt die Einstellung appearanceTools ins Spiel.
{
"version": 2,
"settings": {
"appearanceTools": true
}
}Wenn Sie sie auf true setzen, werden die folgenden Einstellungen auf einmal aktiviert.
{
"version": 2,
"settings": {
"border": {
"color": true,
"radius": true,
"style": true,
"width": true
},
"color": {
"link": true
}
"spacing": {
"margin": true,
"padding": true,
"blockGap": true,
},
"typography": {
"lineHeight": true
}
}
}Sie können sehen, wie viele Codezeilen wir auf diese Weise sparen können! Aber nehmen wir an, Sie möchten appearanceTools nutzen, aber eine oder zwei der unterstützten Funktionen deaktivieren. Das können Sie individuell tun, um diese spezielle Einstellung zu überschreiben.
{
"version": 2,
"settings": {
"appearanceTools": true,
"border": {
"radius": false
}
}
}Der folgende Screenshot zeigt, wie das Setzen von appearanceTools auf true diese Steuerelemente in der Global Styles UI freilegt, aufgenommen aus dem Standard-Theme Twenty Twenty-Three.
Dieses Learn WordPress Video von Nick Diego erklärt die appearanceTools-Eigenschaften und die Global Styles-Oberfläche im Detail.
Abstandsbewusste Ausrichtungen
Diese Funktion verdient eine besondere Erwähnung, da sie neuer ist als viele andere Funktionen und als Teil von WordPress 6.1 veröffentlicht wurde. Sie ist eine weitere Abkürzung zum Setzen von zwei spacing-Funktionen.
Also, das
{
"version": 2,
"settings": {
"useRootPaddingAwareAlignments": true
}
}…ist das Äquivalent zu diesem
{
"version": 2,
"settings": {
"spacing": {
"margin": true,
"padding": true
},
}
}Der eigentliche Vorteil von useRootPaddingAwareAlignments liegt im Namen. Indem wir sie aktivieren, stimmen wir einer Funktion zu, die globale Abstände auf dem <body>-Element unseres Themes definiert und es Blöcken ermöglicht, aus diesem Abstand "auszubrechen" und volle Breite einzunehmen, wenn wir möchten, dass ein Block von Rand zu Rand reicht.
Siehe meinen früheren Artikel für eine detaillierte Übersicht über abstandsbewusste Ausrichtungen.
Vordefinierte Werte konfigurieren
Vordefinierte Werte (Presets) sind vordefinierte Werte, die von Global Styles-Funktionen verwendet werden. Genauer gesagt definieren sie CSS-Benutzerdefinierte Eigenschaften, die in einem Block-Theme verwendet werden.
Nehmen wir also an, Sie definieren die Standard-Farbpalette Ihres Block-Themes und fügen Schwarz (#000000) hinzu.
{
"version": 2,
"settings": {
"color": {
"palette": [
{
"color": "#000000",
"name": "Base",
"slug": "base"
}
]
}
}
}Im Hintergrund nimmt etwas namens Style Engine diese Werte und generiert die CSS-Klassen und benutzerdefinierten Eigenschaften des Themes. Ich habe die Style Engine in einem früheren Artikel beschrieben.
Die Style Engine ist eine neue API in WordPress 6.1, die die Konsistenz der Stilgenerierung und -anwendung verbessern soll. Mit anderen Worten, sie nimmt alle möglichen Stilquellen auf und ist allein dafür verantwortlich, Blockstile korrekt zu generieren. […] Eine zentralisierte API für Stile zu haben, ist wahrscheinlich die eleganteste Lösung, da Stile aus einer Reihe von Quellen stammen können.
Wenn die Style Engine unsere styles bemerkt, erstellt sie eine Reihe von vordefinierten benutzerdefinierten Eigenschaften. Zum Beispiel das obige Farbpalettenbeispiel? Es erzeugt eine benutzerdefinierte CSS-Eigenschaft basierend auf den Informationen, die wir ihm liefern.
Wenn wir DevTools öffnen und das <body>-Element inspizieren, würden wir dort unsere benutzerdefinierten Eigenschaften sehen.
Beachten Sie, wie die benutzerdefinierten Eigenschaftennamen formatiert sind.
--wp-preset--<feature>--<slug>: <value>Um also zu unserem ursprünglichen Beispiel zurückzukehren, in dem wir Schwarz in einer Farbpalette definiert haben.
"color": {
"palette": [
{
"color": "#000000",
"name": "Base",
"slug": "Base"
}
]
}Wir können erwarten, diese benutzerdefinierte Eigenschaft auf das <body>-Element angewendet zu finden.
body {
--wp--preset--color--base: #000000;
}Wir haben uns nur die settings.color-Voreinstellungen angesehen, aber fast jeder Wert, den wir im settings-Bereich definieren, führt zu einer benutzerdefinierten Eigenschaft.
{
"version": 2,
"settings": {
"spacing": {
"spacingSizes": [
{
// Creates: --wp-preset--spacing--40: 1rem
"slug": "40",
"size": "1rem",
"name": "Small"
},
// etc.
]
}
}
}Globale Vordefinierte Werte
Nachdem wir nun wissen, wie man vordefinierte Werte in theme.json definiert, möchten Sie vielleicht wissen, welche Vordefinierten Werte verfügbar sind. Die folgende Tabelle zeigt, was derzeit zum Zeitpunkt des Schreibens verfügbar ist und was sie erzeugen.
| Einstellung | Merkmal | CSS-Benutzerdefinierte Eigenschaft | CSS-Klasse |
|---|---|---|---|
color | duotone | N/A | N/A |
Verläufe | --wp-preset--gradient--<preset-slug> | .has-<preset-slug>-<preset-category> | |
palette | --wp--preset--palette--<preset-slug> | Drei Klassen pro Wert.has-<preset-value>-color.has-<preset-value>-background-color.has-<preset-value>-border-color | |
spacing | spacingScale | N/A | N/A |
spacingSizes | --wp--preset--spacing--<preset-slug> | .has-<preset-slug>-spacing | |
Typografie | fontSizes | --wp--preset--font-size--<preset-slug> | .has-<preset-slug>-font-size |
fontFamilies | --wp--preset--font-family--<preset-slug> | .has-<preset-slug>-font-family |
Block-Vordefinierte Werte
Wir können bei der Definition von vordefinierten Werten in theme.json granularer werden. Zusätzlich zu den globalen Vordefinierten Werten, die wir gerade gesehen haben, können wir Vordefinierte Werte auf Blockebene definieren.
Nehmen wir an, wir haben die folgenden globalen Farb-Vordefinierten Werte.
{
"version": 2,
"settings": {
"color": {
"palette": [
{
// --wp-preset--color--base: #ffffff
"color": "#FFFFFF",
"name": "Base",
"slug": "base"
},
{
// --wp-preset--color--contrast: #000000
"color": "#000000",
"name": "Contrast",
"slug": "contrast"
}
]
}
}
}Die von diesen Einstellungen generierten benutzerdefinierten Eigenschaften werden im gesamten Theme verwendet, einschließlich der Blöcke. Wenn wir also einen Separator-Block zu einer Seite im Block-Editor hinzufügen, wird er sich bei der Darstellung auf dieselbe Farbpalette beziehen.
Aber wir können diese Palette – oder jede andere der globalen settings – mit einer Palette, die speziell für den Separator-Block gilt, überschreiben.
{
"version": 2,
"settings": {
"color": {
"palette": [ // etc. ]
},
"blocks": {
"separator": {
"color": {
"palette": [
{
"color": "#F8A100",
"name": "Orange",
"slug": "orange"
}
]
}
}
}
}
}In diesem Beispiel überschreibt die Farbpalette des Separator-Blocks die globale Palette mit einem einzigen Orangewert (#F8A100).
Benutzerdefinierte Vordefinierte Werte
Sie können auch "benutzerdefinierte" CSS-Benutzer-Eigenschaften für jede beliebige Eigenschaft erstellen. Zusätzlich zu den bisher behandelten settings-Funktionen gibt es eine custom-Eigenschaft, in der wir dies tun können.
{
"version": 2,
"settings": {
"custom": {
// etc.
}
}
}Die Style Engine nimmt alles, was wir dort definieren, und generiert daraus CSS-Benutzer-Eigenschaften. Die Namenskonvention ist der von den anderen Einstellungen generierten benutzerdefinierten Eigenschaften ziemlich ähnlich.
--wp--custom--<variable-name>: <value>Ihre definierten Werte in custom werden in CSS-Benutzer-Eigenschaften umgewandelt und verwenden die Namenskonvention --wp--custom--<variable-name>.
Hier ist ein abgekürztes Beispiel für benutzerdefinierte Einstellungen direkt aus dem Standard-Theme Twenty Twenty-Two. Darin enthalten sind benutzerdefinierte Einstellungen für typography.font-size und typography.line-height.
{
"version": 2,
"settings": {
"custom": {
"typography": {
"font-size": {
"huge": "clamp(2.25rem, 4vw, 2.75rem)",
"gigantic": "clamp(2.75rem, 6vw, 3.25rem)",
"colossal": "clamp(3.25rem, 8vw, 6.25rem)"
},
"line-height": {
"tiny": 1.15,
"small": 1.2,
"medium": 1.4,
"normal": 1.6
}
}
}
}
}Zusammenfassung
Wir haben viel über den settings-Bereich der theme.json-Datei gelernt. Wir haben die verfügbaren Einstellungen behandelt und wie sie zur Definition globaler Stile verwendet werden, die in der Global Styles UI des WordPress Site Editors verwendet werden. Von dort haben wir uns mit vordefinierten Werten befasst, einschließlich derer, die wir konfigurieren können, und wie sie von der Style Engine in CSS-Benutzer-Eigenschaften umgewandelt werden.
Was wir noch nicht behandelt haben, ist, wie wir theme.json verwenden können, um CSS-Stile in einem Block-Theme zu definieren. Das geschieht in einem weiteren obersten Abschnitt namens styles, der im nächsten Teil dieser Serie im Mittelpunkt steht.