theme.json: Globale Blöcke wie Buttons bei Block Themes gestalten
Globale Einstellungen von Blöcken bei Block Themes können über die theme.json vorgenommen werden. Man kann z. B. die Schriftgröße, Farben, Innen- und Außenabstände, aber auch die Pseudoklasse hover bei bestimmten Blöcken wie z. B. dem Button-Block einstellen. Diese Einstellungen gelten dann für die komplette Website. Spezielle Anpassungen sind allerdings nur über CSS realisierbar.
Globale Einstellungen für Blöcke im WordPress-Website-Editor sind zentrale Design- und Funktionseinstellungen, die automatisch für die ganze Website oder gezielt für einzelne Blöcke gelten. Sie werden meist über den Site Editor („Website-Editor“) oder die Datei theme.json im verwendeten Block-Theme verwaltet. In diesem Beitrag geht es um die Änderung der globalen Einstellungen über die theme.json.
Zusätzliches CSS für den Button-Block in die theme.json übertragen
Hier sehen wir die Einstellungen für den Button-Block aus dem Beitrag zur Gestaltung mit zusätzlichem CSS:
Und hier noch mal das Beispiel aus dem Beitrag, bei dem ich die Pseudoklasse „Hover“ über zusätzliches CSS beim Button Block eingerichtet habe:
:hover {
background-color: black;
color: yellow;
outline-style: dotted; /* gepunktet statt durchgehend */
outline-width: 10px; /* dicke Outline (große Punkte je nach Browserdarstellung) */
outline-color: black; /* Farbe der Outline */
outline-offset: 2px; /* Abstand der Outline vom Element */
border-color: black; /* optional – sorgt für nahtlose Optik bei transparentem Rand */
}Was muss man machen, um diese CSS-Regel und auch Einstellungen für den Button-Block wie z. B. Hintergrundfarbe, Schrift, etc. direkt in der theme.json definieren?
Zunächst ist es sinnvoll, wenn wir erst wieder ein frisches Child Theme zum Theme Twenty Twenty-Five erstellen. Wie das funktioniert, könnt ihr noch mal in dem vorherigen Beitrag nachlesen.
Die Bearbeitung der theme.json kann man in einem Editor wie z. B. Visual Code oder Notepad++ vornehmen.
Schauen wir uns jetzt mal die theme.json des „frischen“ Child Themes an:
frische theme.json nach Erstellung eines Child Themes
{
"settings": {
"color": {
"palette": [
{
"color": "#F8F7F5",
"name": "Base",
"slug": "base"
},
{
"color": "#191919",
"name": "Contrast",
"slug": "contrast"
},
{
"color": "#FFFFFF",
"name": "Accent 1",
"slug": "accent-1"
},
{
"color": "#F5B684",
"name": "Accent 2",
"slug": "accent-2"
},
{
"color": "#191919",
"name": "Accent 3",
"slug": "accent-3"
},
{
"color": "#5F5F5F",
"name": "Accent 4",
"slug": "accent-4"
},
{
"color": "#F1EEE9",
"name": "Accent 5",
"slug": "accent-5"
},
{
"color": "#19191933",
"name": "Accent 6",
"slug": "accent-6"
}
]
}
},
"styles": {
"blocks": {
"core/button": {
"border": {
"bottom": {
"color": "var(--wp--preset--color--contrast)"
},
"left": {
"color": "var(--wp--preset--color--contrast)"
},
"right": {
"color": "var(--wp--preset--color--contrast)"
},
"top": {
"color": "var(--wp--preset--color--contrast)"
}
},
"variations": {
"outline": {
"border": {
"color": "currentColor"
}
}
}
},
"core/column": {
"variations": {
"section-4": {
"color": {
"text": "var(--wp--preset--color--accent-2)"
},
"elements": {
"button": {
":hover": {
"color": {
"background": "color-mix(in srgb, var(--wp--preset--color--accent-2) 85%, transparent)"
}
}
},
"heading": {
"color": {
"text": "var(--wp--preset--color--accent-2)"
}
},
"link": {
"color": {
"text": "var(--wp--preset--color--accent-2)"
}
}
}
},
"section-5": {
"color": {
"text": "var(--wp--preset--color--base)"
},
"elements": {
"button": {
":hover": {
"color": {
"background": "color-mix(in srgb, var(--wp--preset--color--base) 85%, transparent)"
}
}
},
"heading": {
"color": {
"text": "var(--wp--preset--color--base)"
}
},
"link": {
"color": {
"text": "var(--wp--preset--color--base)"
}
}
}
}
}
},
"core/columns": {
"variations": {
"section-4": {
"color": {
"text": "var(--wp--preset--color--accent-2)"
},
"elements": {
"button": {
":hover": {
"color": {
"background": "color-mix(in srgb, var(--wp--preset--color--accent-2) 85%, transparent)"
}
}
},
"heading": {
"color": {
"text": "var(--wp--preset--color--accent-2)"
}
},
"link": {
"color": {
"text": "var(--wp--preset--color--accent-2)"
}
}
}
},
"section-5": {
"color": {
"text": "var(--wp--preset--color--base)"
},
"elements": {
"button": {
":hover": {
"color": {
"background": "color-mix(in srgb, var(--wp--preset--color--base) 85%, transparent)"
}
}
},
"heading": {
"color": {
"text": "var(--wp--preset--color--base)"
}
},
"link": {
"color": {
"text": "var(--wp--preset--color--base)"
}
}
}
}
}
},
"core/group": {
"variations": {
"section-4": {
"color": {
"text": "var(--wp--preset--color--accent-2)"
},
"elements": {
"button": {
":hover": {
"color": {
"background": "color-mix(in srgb, var(--wp--preset--color--accent-2) 85%, transparent)"
}
}
},
"heading": {
"color": {
"text": "var(--wp--preset--color--accent-2)"
}
},
"link": {
"color": {
"text": "var(--wp--preset--color--accent-2)"
}
}
}
},
"section-5": {
"color": {
"text": "var(--wp--preset--color--base)"
},
"elements": {
"button": {
":hover": {
"color": {
"background": "color-mix(in srgb, var(--wp--preset--color--base) 85%, transparent)"
}
}
},
"heading": {
"color": {
"text": "var(--wp--preset--color--base)"
}
},
"link": {
"color": {
"text": "var(--wp--preset--color--base)"
}
}
}
}
}
},
"core/post-title": {
"color": {
"text": "var(--wp--preset--color--accent-3)"
},
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--accent-3)"
}
}
}
},
"core/pullquote": {
"color": {
"text": "var(--wp--preset--color--accent-3)"
},
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--accent-3)"
}
}
}
},
"core/query-title": {
"color": {
"text": "var(--wp--preset--color--accent-3)"
},
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--accent-3)"
}
}
}
},
"core/site-title": {
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--contrast)"
}
}
},
"typography": {
"fontStyle": "normal",
"fontWeight": "700",
"letterSpacing": "-0.02em"
}
}
},
"color": {
"text": "var(--wp--preset--color--accent-4)"
},
"elements": {
"button": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--base)"
}
},
"heading": {
"color": {
"text": "var(--wp--preset--color--accent-3)"
}
},
"link": {
"color": {
"text": "var(--wp--preset--color--contrast)"
}
}
}
},
"version": 3,
"$schema": "https://schemas.wp.org/wp/6.8/theme.json"
}Änderungen an theme.json
Hier jetzt die Änderungen, die vorgenommen werden müssen:
Hier wird die Farbe eingestellt:
"elements": {
"button": {
"color": {
"background": "var(--wp--preset--color--accent-2)", // Orange (#F5B684)
"text": "var(--wp--preset--color--contrast)" // Schwarz (#191919)
}
}
}
Block-spezifische Button-Einstellungen:
"blocks": {
"core/button": {
"color": {
"background": "var(--wp--preset--color--accent-2)", // Orange
"text": "var(--wp--preset--color--contrast)" // Schwarz
},
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--contrast)" // Schwarzer Link-Text
}
}
},
"typography": {
"fontSize": "var(--wp--preset--font-size--x-large)",
"fontStyle": "normal",
"fontWeight": "900"
}
}
}
Hier die angepasste theme.json:
Angepasste theme.json
{
"settings": {
"color": {
"palette": [
{
"color": "#F8F7F5",
"name": "Base",
"slug": "base"
},
{
"color": "#191919",
"name": "Contrast",
"slug": "contrast"
},
{
"color": "#FFFFFF",
"name": "Accent 1",
"slug": "accent-1"
},
{
"color": "#F5B684",
"name": "Accent 2",
"slug": "accent-2"
},
{
"color": "#191919",
"name": "Accent 3",
"slug": "accent-3"
},
{
"color": "#5F5F5F",
"name": "Accent 4",
"slug": "accent-4"
},
{
"color": "#F1EEE9",
"name": "Accent 5",
"slug": "accent-5"
},
{
"color": "#19191933",
"name": "Accent 6",
"slug": "accent-6"
}
]
}
},
"styles": {
"blocks": {
"core/button": {
"border": {
"bottom": {
"color": "var(--wp--preset--color--contrast)"
},
"left": {
"color": "var(--wp--preset--color--contrast)"
},
"right": {
"color": "var(--wp--preset--color--contrast)"
},
"top": {
"color": "var(--wp--preset--color--contrast)"
}
},
"color": {
"background": "var(--wp--preset--color--accent-2)",
"text": "var(--wp--preset--color--contrast)"
},
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--contrast)"
}
}
},
"typography": {
"fontSize": "var(--wp--preset--font-size--x-large)",
"fontStyle": "normal",
"fontWeight": "900"
},
"variations": {
"outline": {
"border": {
"color": "currentColor"
}
}
}
},
"core/column": {
"variations": {
"section-4": {
"color": {
"text": "var(--wp--preset--color--accent-2)"
},
"elements": {
"button": {
":hover": {
"color": {
"background": "color-mix(in srgb, var(--wp--preset--color--accent-2) 85%, transparent)"
}
}
},
"heading": {
"color": {
"text": "var(--wp--preset--color--accent-2)"
}
},
"link": {
"color": {
"text": "var(--wp--preset--color--accent-2)"
}
}
}
},
"section-5": {
"color": {
"text": "var(--wp--preset--color--base)"
},
"elements": {
"button": {
":hover": {
"color": {
"background": "color-mix(in srgb, var(--wp--preset--color--base) 85%, transparent)"
}
}
},
"heading": {
"color": {
"text": "var(--wp--preset--color--base)"
}
},
"link": {
"color": {
"text": "var(--wp--preset--color--base)"
}
}
}
}
}
},
"core/columns": {
"variations": {
"section-4": {
"color": {
"text": "var(--wp--preset--color--accent-2)"
},
"elements": {
"button": {
":hover": {
"color": {
"background": "color-mix(in srgb, var(--wp--preset--color--accent-2) 85%, transparent)"
}
}
},
"heading": {
"color": {
"text": "var(--wp--preset--color--accent-2)"
}
},
"link": {
"color": {
"text": "var(--wp--preset--color--accent-2)"
}
}
}
},
"section-5": {
"color": {
"text": "var(--wp--preset--color--base)"
},
"elements": {
"button": {
":hover": {
"color": {
"background": "color-mix(in srgb, var(--wp--preset--color--base) 85%, transparent)"
}
}
},
"heading": {
"color": {
"text": "var(--wp--preset--color--base)"
}
},
"link": {
"color": {
"text": "var(--wp--preset--color--base)"
}
}
}
}
}
},
"core/group": {
"variations": {
"section-4": {
"color": {
"text": "var(--wp--preset--color--accent-2)"
},
"elements": {
"button": {
":hover": {
"color": {
"background": "color-mix(in srgb, var(--wp--preset--color--accent-2) 85%, transparent)"
}
}
},
"heading": {
"color": {
"text": "var(--wp--preset--color--accent-2)"
}
},
"link": {
"color": {
"text": "var(--wp--preset--color--accent-2)"
}
}
}
},
"section-5": {
"color": {
"text": "var(--wp--preset--color--base)"
},
"elements": {
"button": {
":hover": {
"color": {
"background": "color-mix(in srgb, var(--wp--preset--color--base) 85%, transparent)"
}
}
},
"heading": {
"color": {
"text": "var(--wp--preset--color--base)"
}
},
"link": {
"color": {
"text": "var(--wp--preset--color--base)"
}
}
}
}
}
},
"core/post-title": {
"color": {
"text": "var(--wp--preset--color--accent-3)"
},
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--accent-3)"
}
}
}
},
"core/pullquote": {
"color": {
"text": "var(--wp--preset--color--accent-3)"
},
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--accent-3)"
}
}
}
},
"core/query-title": {
"color": {
"text": "var(--wp--preset--color--accent-3)"
},
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--accent-3)"
}
}
}
},
"core/site-title": {
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--contrast)"
}
}
},
"typography": {
"fontStyle": "normal",
"fontWeight": "700",
"letterSpacing": "-0.02em"
}
}
},
"color": {
"text": "var(--wp--preset--color--accent-4)"
},
"elements": {
"button": {
"color": {
"background": "var(--wp--preset--color--accent-2)",
"text": "var(--wp--preset--color--contrast)"
},
":active": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--accent-2)"
}
},
":focus": {
"border": {
"color": "var(--wp--preset--color--accent-4)"
},
"color": {
"background": "var(--wp--preset--color--accent-2)",
"text": "var(--wp--preset--color--contrast)"
},
"outline": {
"color": "var(--wp--preset--color--accent-4)",
"offset": "4px"
}
},
":hover": {
"border": {
"color": "var(--wp--preset--color--base)"
},
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--accent-2)"
},
"outline": {
"color": "var(--wp--preset--color--contrast)",
"offset": "2px",
"style": "dotted",
"width": "10px"
}
}
},
"heading": {
"color": {
"text": "var(--wp--preset--color--accent-3)"
}
},
"link": {
"color": {
"text": "var(--wp--preset--color--contrast)"
}
}
}
},
"version": 3,
"$schema": "https://schemas.wp.org/wp/6.8/theme.json"
}Hier die Einstellungen unter "styles": {
"blocks": {
"core/button": {
"border": {
"bottom": {
"color": "var(--wp--preset--color--contrast)"
},
"left": {
"color": "var(--wp--preset--color--contrast)"
},
"right": {
"color": "var(--wp--preset--color--contrast)"
},
"top": {
"color": "var(--wp--preset--color--contrast)"
}
},
"color": {
"background": "var(--wp--preset--color--accent-2)",
"text": "var(--wp--preset--color--contrast)"
},
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--contrast)"
}
}
},
"typography": {
"fontSize": "var(--wp--preset--font-size--x-large)",
"fontStyle": "normal",
"fontWeight": "900"
},
"variations": {
"outline": {
"border": {
"color": "currentColor"
}
}
}
},
Und hier die Einstellungen unter"styles": {
"elements": {
"button": {
"color": {
"background": "var(--wp--preset--color--accent-2)",
"text": "var(--wp--preset--color--contrast)"
},
":active": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--accent-2)"
}
},
":focus": {
"border": {
"color": "var(--wp--preset--color--accent-4)"
},
"color": {
"background": "var(--wp--preset--color--accent-2)",
"text": "var(--wp--preset--color--contrast)"
},
"outline": {
"color": "var(--wp--preset--color--accent-4)",
"offset": "4px"
}
},
":hover": {
"border": {
"color": "var(--wp--preset--color--base)"
},
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--accent-2)"
},
"outline": {
"color": "var(--wp--preset--color--contrast)",
"offset": "2px",
"style": "dotted",
"width": "10px"
}
}
},
Geänderte Einstellungen in der theme.json für Buttons
Hover/Focus/Active States:
- Hover: Schwarzer Hintergrund mit orangem Text
- Focus: Gleich wie Standard + Outline
- Active: Schwarzer Hintergrund mit orangem Text
Border-Einstellungen beibehalten:
- Schwarzer Rahmen um alle Buttons
Darstellung der Buttons:
- Orange Hintergrund (#F5B684)
- Fast schwarzer Text (#191919)
- Schwarzer Rahmen
- Bei Hover umgekehrte Farben zeigen
Danach sollte die Datei gespeichert und ggfs. der (Browser-)Cache gelöscht werden.
Tipp für die bessere Ansicht und Bearbeitung der theme.json
Unter Werkzeuge > Theme-Datei-Editor > Theme-Styles & Block-Settings kann man sich zwar die Datei theme.json ansehen und bearbeiten, aber das ist für mich nur eine Option, wenn ich einen Überblick haben möchte. Die Darstellung ist unübersichtlich, weil das Einklappen (Folding) von Teilabschnitten nicht möglich ist und zumindest bei einer produktiven Website die Bearbeitung schnell zu Fehlern führen kann.
Um eine theme.json Datei strukturiert und übersichtlich anzusehen sowie gezielt Teile auszublenden, gibt es verschiedene Werkzeuge und Tipps, die sowohl die Klarheit als auch die Bearbeitbarkeit verbessern:
- Natürlich über einen Editor wie z. B. Visual Code
- Online: https://jsoneditoronline.org/
- Als Plugin: https://wordpress.org/plugins/sje-simple-json-editor/
Vor- und Nachteile bei CSS
Vorteile:
- Granulare Kontrolle: Sehr spezifische Anpassungen für einzelne Blöcke möglich
- Flexibilität: Individuelle CSS-Regeln für komplexe Designs
- Backward Compatibility: Funktioniert auch mit älteren WordPress-Versionen
- Performance: Direktes CSS ohne zusätzliche Verarbeitungsschritte
- Erweiterte Selektoren: Verwendung von CSS-Pseudoklassen, Media Queries etc.
Nachteile:
- Wartungsaufwand: CSS muss separat gepflegt werden
- Konsistenz: Schwieriger, ein einheitliches Design zu gewährleisten
- Überschreibungen: Spezifitätsprobleme bei CSS-Regeln
- Keine zentrale Verwaltung: Styles sind über verschiedene Dateien verteilt
- Weniger Editor-Integration: Änderungen nicht direkt im Block Editor sichtbar
Vor- und Nachteile bei theme.json
Vorteile:
- Zentrale Konfiguration: Alle Designsystem-Definitionen an einem Ort
- Editor-Integration: Änderungen werden direkt im Block Editor reflektiert
- Konsistenz: Globale Farbpaletten, Typografie und Spacing-Systeme
- Performance: WordPress generiert optimiertes CSS automatisch
- Zukunftssicher: Nutzt die neueste WordPress-Architektur
- Benutzerfreundlichkeit: Designsystem für Endnutzer verständlicher
- Automatische Variablen: CSS Custom Properties werden automatisch generiert
Nachteile:
- Eingeschränkte Flexibilität: Nicht alle CSS-Eigenschaften unterstützt
- Lernkurve: Neue JSON-Syntax und Konzepte zu erlernen
- WordPress-Abhängigkeit: Funktioniert nur ab WordPress 5.8+
- Debugging: Schwieriger nachzuvollziehen, welches CSS generiert wird
- Begrenzte Selektoren: Keine komplexen CSS-Selektoren möglich
Hybrid-Ansatz
Best Practice ist je nach Bedarf eine Kombination:
- theme.json für das Designsystem: Grundlegende Farben, Typografie, Spacing
- Block Styles für spezielle Anpassungen: Komplexe Hover-Effekte, Animationen, responsive Designs
Beispiel:
// theme.json - Grundfarben definieren
"color": {
"palette": [
{"color": "#F5B684", "name": "Accent", "slug": "accent"}
]
}
/* style.css - Spezielle Effekte */
.wp-block-button:hover {
transform: scale(1.05);
transition: transform 0.2s ease;
}
Fazit
Die theme.json eignet sich ideal für systematische Designentscheidungen, während traditionelle CSS-Methoden weiterhin für komplexe, individuelle Styling-Anforderungen notwendig sind.
Links, Quellen und aktuelle Infos
- theme-json Generatoren
- https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/
- https://kinsta.com/de/blog/theme-json/
- https://haurand.com/plugin-create-block-theme-am-beispiel-twenty-twenty-three/
- https://fullsiteediting.com/block-theme-generator/
- https://pinegrow.com/docs/wordpress/exporting-theme-json/
- CLI-Tool und Skripte zur automatisierten Erstellung von theme.json:
https://github.com/ItalyStrap/theme-json-generator - Online-JSON-Viewer: https://jsoneditoronline.org/
- https://wordpress.org/plugins/sje-simple-json-editor/
Weitere Beiträge zum Thema
- Theme-Update – Und wo finde ich die Infos?
- Schnellbearbeitung bei Seiten und Beiträgen
- Navigation: Ollie Menu Designer
- WordPress: llms.txt (KI) einrichten
- theme.json: Globale Blöcke wie Buttons bei Block Themes gestalten
Wir freuen uns über eine Kontaktaufnahme
Was hältst du davon?
Wir hoffen, dieser Beitrag hat dir gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.
Newsletter: Wenn du über unsere neuesten Beiträge und Neuigkeiten rund um WordPress informiert werden möchtest, kannst du dich gerne bei unserem kostenlosen Newsletter anmelden.
Blog: Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörtern.
Schreibe einen Kommentar