WordPress Block Theme CSS und Style-Einstellungen Leitfaden
Gängige JSON-Begriffe
Wir werden uns kurz mit JSON-bezogenen Begriffen vertraut machen, bevor wir zum nächsten Abschnitt übergehen, der die sechs verschiedenen Arten von JSON-Datentypen beschreibt.
JSON
JSON steht für JavaScript Object Notation, ein maschinenlesbares Datenformat zum Datenaustausch. Wie der Name schon sagt, leitet sich JSON von JavaScript ab und wird in vielen anderen Sprachen wie PHP, Ruby, Python usw. verwendet. Viele Softwareanwendungen, darunter React, Gatsby, VS Code und andere, verwenden JSON für die Konfiguration von Umgebungen.
Objekt
Objekte sind Schlüssel-Wert-Paare, die durch Doppelpunkte : getrennt und in geschweifte Klammern ({}) eingeschlossen sind. Man kann es sich in gewisser Weise wie CSS vorstellen. Wir haben eine Eigenschaft (oder einen Schlüssel) gefolgt von einem Wert, der die Eigenschaft definiert.
color: #9DFF20;In JSON wird dies wie folgt als Objekt dargestellt:
{ "color": "#9DFF20" }Hinweis: Eine JSON-Objekt-Eigenschaft wird auch als Feld oder Schlüssel bezeichnet. Ein Schlüssel-Wert-Paar wird auch als Element oder Daten bezeichnet.
Und so wie ein CSS-Regelsatz viele Schlüssel-Wert-Paare enthalten kann, kann dies auch ein JSON-Objekt. Dieses Beispiel ist ein Objekt mit drei Schlüsseln — color, name und slug — mit jeweils einem entsprechenden Wert.
{ "color": "#9DFF20", "name": "Primary", "slug": "primary" }Im Gegensatz zu CSS ist JSON keine "verzeihende" Sprache, und schon ein einziger Tippfehler kann die gesamte Website zum Absturz bringen.
Verschachteltes Objekt
Objekte in JSON können andere Objekte enthalten. Wir nennen diese verschachtelte Objekte, und das macht JSON zu einer strukturierten Sprache.
{
"object1": {
"object1a": "value",
"object1b": "value"
},
"object2" : {
"object2a": "value",
"object2b": "value"
}
}Nehmen wir ein Beispiel direkt aus der theme.json-Datei des emptytheme.
Array
Ein Array ist eine durch Kommas getrennte Gruppe von Objekten in eckigen Klammern ([]). Die Idee ist, dass wir möglicherweise mehr als ein Objekt gleichzeitig definieren müssen. Ein gutes Beispiel ist die Definition der Farben der Farbpalette eines Blockthemas. Ein Array ermöglicht es uns, eine Gruppe von Farben für diese Palette zu definieren.
JSON-Datentypen
JSON-Werte müssen einer der sechs Datentypen sein: ein String, eine Zahl, ein Objekt, ein Array, ein Boolean (true oder false) und null. JSON-Daten werden mit der Punktnotation . ausgewertet.
Hier ist eine gekürzte, modifizierte TT3 theme.json-Objektdatenbank, die alle Datentypen zeigt.
{
"version": 2, // 1: Number (no quotes)
"settings": {
"appearanceTools": true, // 2: Boolean (true or false, no quotes)
"useRootPaddingAwareAlignments": false,
"color": {
"palette": [ // 3: Array of string object palette
{
"color": "#ffffff", // 4: Object (in curly brackets)
"name": "Base",
"slug": "base"
}
]
},
"layout": { "contentSize": "650px"}, // 5: String (in double quotes)
"styles": {
"typography": { "lineHeight": "1.6" },
"spacing": { "blockGap": null } // 6: null (no quotes)
}
}
}Zusätzliche Ressourcen
- HTML und CSS (Block Editor Handbuch | Erklärungen)
- Einführung in JSON (JSON.org)
- Eine Einführung in JSON (DigitalOcean)
- Was ist JSON (REST API Tutorial)
Als Nächstes…
Nachdem wir nun ein solides Verständnis von JSON und seiner Struktur in der theme.json von WordPress-Blockthemen haben, wollen wir uns genauer ansehen, wie die globalen Stile funktionieren. Wir können Standardstile für ein Blockthema direkt in theme.json definieren. Wir können auch die Benutzeroberfläche für globale Stile in WordPress verwenden.
Wie arbeiten diese zusammen? Welche Arten von Einstellungen sind verfügbar? Wann sollte man die eine über die andere verwenden? Diese und weitere Fragen beantworten wir im nächsten Abschnitt.