Die Landschaft des WordPress-Designs hat sich drastisch verändert. Was einst von traditionellen Theme-Optionen und individuellem CSS dominiert wurde, wird heute zunehmend von einem leistungsstarken, blockbasierten Ansatz geprägt. Im Zentrum dieser Revolution steht die theme.json-Datei, ein Konfigurationswerkzeug, das zusammen mit Full Site Editing (FSE) und Block-Themes eine neue Ära der Designflexibilität und -kontrolle einläutet. Es geht nicht mehr nur darum, Inhalte zu erstellen, sondern die gesamte Website – von Kopf- bis Fusszeile – direkt im Editor zu gestalten.
Die Rolle von theme.json als zentrales Designsystem
Die theme.json-Datei wurde mit WordPress 5.8 eingeführt und hat sich schnell als Herzstück moderner WordPress-Theme-Entwicklung etabliert. Sie dient als zentrale Konfigurationsdatei, über die Entwickler und fortgeschrittene Nutzer globale Stile und Einstellungen für ein gesamtes Theme definieren können, anstatt manuell CSS für jedes Feature zu schreiben. Dies vereinfacht die Theme-Entwicklung und -Anpassung erheblich und ermöglicht einen konsistenten Look & Feel über die gesamte Website.
Globale Stile und Einstellungen verwalten
Mit theme.json können Sie eine Vielzahl von Designaspekten steuern. Dazu gehören:
- Farbpaletten: Definieren Sie benutzerdefinierte Farbpaletten, die im Block-Editor zur Verfügung stehen. Dies sorgt für Markenkonsistenz und vereinfacht die Farbauswahl für Redakteure. Sie können auch Standardfarben von WordPress deaktivieren und eigene Farben hinzufügen.
- Typografie: Legen Sie Schriftfamilien, Schriftgrößen, Zeilenhöhen und weitere typografische Eigenschaften fest. Moderne
theme.json-Versionen unterstützen sogar Fluid Typography, die sich dynamisch an verschiedene Bildschirmgrößen anpasst, ohne dass traditionelle Media Queries für jede einzelne Schriftgrösse erforderlich sind. - Layout: Bestimmen Sie die Standardbreite des Inhaltsbereichs (
contentSize) sowie die Breiten für "Wide"- und "Full"-Blöcke, was für ein einheitliches Layout über die gesamte Website sorgt. Dietheme.json-Datei bietet die Möglichkeit, global die Breite von Inhalten zu steuern und so für eine konsistente Darstellung zu sorgen. - Abstände (Spacing): Konfigurieren Sie standardmäßige Abstände und Polsterungen für Blöcke und Elemente. Mit der Einstellung
useRootPaddingAwareAlignmentkönnen Sie sicherstellen, dass Polsterungen korrekt auf umgebende Elemente und nicht auf denbody-Tag angewendet werden, was besonders wichtig für die Kontrolle von Wide- und Full-Width-Alignments ist.
Die Einstellungen in theme.json spiegeln sich sowohl im Frontend der Website als auch in den integrierten WordPress-Editoren wider. Es fungiert als eine "gemeinsame Sprache", die es WordPress, dem Theme, Plugins und Nutzern ermöglicht, effektiv zu kommunizieren und ein kohärentes Design zu realisieren.
Full Site Editing (FSE) und Block-Themes: Visuelles Design neu gedacht
Full Site Editing (FSE) ist die konsequente Weiterentwicklung des Block-Editors (Gutenberg), die es ermöglicht, die gesamte Website visuell mit Blöcken zu gestalten – einschliesslich Header, Footer und Templates. Anstatt zwischen Customizer, Widget-Bereichen und dem Inhaltseditor zu wechseln, bietet FSE eine zentrale Oberfläche, den Site-Editor, in dem alle Designelemente über Blöcke angepasst werden können.
Block-Themes sind speziell für FSE konzipiert und nutzen theme.json in vollem Umfang, um ein umfassendes, blockbasiertes Design zu ermöglichen. Sie erlauben es Nutzern, Designänderungen direkt im Browser vorzunehmen, was sie besonders benutzerfreundlich macht.
Stil-Variationen: Mehrere Designs in einem Theme
Ein herausragendes Merkmal moderner Block-Themes sind die Stil-Variationen (Style Variations). Ein Theme kann mehrere vordefinierte Stil-Variationen anbieten, die verschiedene Farbschemata, Typografien und Layout-Einstellungen kombinieren. Nutzer können diese Variationen im Site-Editor einfach per Klick wechseln, um das gesamte Erscheinungsbild ihrer Website schnell zu ändern, ohne das Theme wechseln zu müssen. Dies ist ein mächtiges Feature für die Schaffung eines Designsystems, das sowohl konsistent als auch flexibel ist.
Typografie- und Farbpaletten-Steuerung im Detail
Die granularere Kontrolle über Typografie und Farben ist ein grosser Vorteil von theme.json.
Fortschrittliche Typografie-Einstellungen
Neben der Festlegung grundlegender Schriftfamilien und Grössen ermöglicht theme.json die Definition von fluiden Schriftgrössen. Das bedeutet, Schriftgrößen passen sich fliessend an die Bildschirmgrösse an, was die Notwendigkeit von festen Media Queries für jede Bildschirmgrösse reduziert und ein reaktionsschnelleres Design fördert. Sie können Minimal- und Maximalwerte für Schriftgrößen festlegen, und WordPress kümmert sich um die Zwischenberechnungen. Auch benutzerdefinierte Schriftarten können über theme.json eingebunden werden.
Flexible Farbpaletten und Duotone-Filter
Die Farbkontrolle in theme.json geht über die einfache Definition von Hex-Werten hinaus. Sie können:
- Eigene Farbpaletten erstellen: Definieren Sie eine Reihe von Farben mit
slug,nameundcolorWerten, die im Editor als Auswahlmöglichkeiten erscheinen. - Standardfarben deaktivieren: Falls gewünscht, können Sie die Standard-Farbpaletten von WordPress deaktivieren, um eine striktere Markenrichtlinie durchzusetzen.
- Duotone-Filter: Definieren Sie Duotone-Filter, die auf Bilder angewendet werden können, um kreative Effekte zu erzielen.
- Mehrere Farbpaletten: Seit WordPress 6.6 können Themes sogar mehrere Farbpaletten anbieten, aus denen der Nutzer im Site Editor wählen kann.
Diese zentralisierte Farbverwaltung stellt sicher, dass alle Designelemente auf die definierten Brand-Farben zugreifen und diese konsistent anwenden können.
Layout-Anpassung und Responsive Design
Die theme.json-Datei spielt eine entscheidende Rolle bei der Definition des Website-Layouts und der Sicherstellung von responsivem Design.
Layout-Einstellungen
Mit dem layout-Setting in theme.json können Sie die Breiten für den Standard-Inhalt, für "weite" (wide) und "volle Breite" (full width) Blöcke festlegen. Dies ersetzt frühere Funktionen wie add_theme_support( 'align-wide' ) und ermöglicht eine zentrale Steuerung der globalen Layout-Strukturen.
Responsive Design: Intrinsic Design statt reiner Media Queries
Während theme.json selbst keine direkte Unterstützung für Media Queries bietet, können diese weiterhin in der style.css-Datei des Themes verwendet werden, um spezifische responsive Anpassungen vorzunehmen. Allerdings fördert der FSE-Ansatz zunehmend das Konzept des Intrinsic Design, bei dem Elemente und Layouts so gestaltet werden, dass sie sich "intrinsisch" an den verfügbaren Raum anpassen. Fluide Typografie und die dynamische Anpassung von Abständen sind Beispiele dafür, wie dies erreicht wird.
Block-Variationen: Flexibilität für den Inhalt
Block-Variationen sind eine elegante Möglichkeit, verschiedene Versionen eines bestehenden Blocks zu erstellen, ohne völlig neue Blöcke von Grund auf neu entwickeln zu müssen. Eine Block-Variation unterscheidet sich vom Originalblock durch eine Reihe von initialen Attributen oder inneren Blöcken.
Dies ist äusserst nützlich, um die Bearbeitungserfahrung zu verbessern und spezifische Anwendungsfälle für Standardblöcke zu definieren. Beispielsweise könnte man eine Variation des "Überschrift"-Blocks erstellen, die standardmässig eine bestimmte Grösse und Farbe hat, oder eine Variation des "Medien & Text"-Blocks mit einer vordefinierten Anordnung. Block-Variationen können über JavaScript registriert werden und benötigen keinen komplexen Build-Prozess wie die Entwicklung von komplett neuen Blöcken. Sie sind auch die Grundlage für Block-Patterns, die wiederum vordefinierte Block-Layouts darstellen.
Der Übergang von klassischen zu Block-Themes
Der Übergang von klassischen WordPress-Themes zu Block-Themes und FSE ist ein signifikanter Wandel. Klassische Themes nutzten den Customizer für globale Anpassungen und Widget-Bereiche für bestimmte Layout-Sektionen. Block-Themes hingegen integrieren all diese Funktionen in den Site-Editor und die theme.json.
Für Websites, die noch auf klassischen Themes basieren, besteht die Möglichkeit, schrittweise zu migrieren oder zumindest von den Vorteilen der theme.json zu profitieren. Eine theme.json-Datei kann auch in klassischen Themes hinzugefügt werden, um globale Einstellungen und Stile für den Block-Editor zu steuern und so die Konsistenz des Designs zu verbessern, ohne das gesamte Theme auf FSE umstellen zu müssen. Dies kann den Bearbeitungsprozess vereinfachen und eine bessere Kontrolle über Farben, Typografie und Abstände bieten.
Die Entscheidung, zu einem Block-Theme zu wechseln, bedeutet, die volle Kontrolle über die Website-Struktur und das Design direkt im Editor zu übernehmen. Dies erfordert oft ein Umdenken in der Arbeitsweise, bietet aber enorme Flexibilität und Effizienz für die Erstellung und Pflege moderner Websites.
Fazit
Die theme.json-Datei in Kombination mit Full Site Editing und Block-Themes stellt eine grundlegende Neuerung im WordPress-Ökosystem dar. Sie ermöglicht die zentrale Verwaltung von Designsystemen, einschliesslich Typografie, Farbpaletten und Layout-Einstellungen, auf eine Weise, die zuvor nur mit komplexem Custom-Code möglich war. Durch Features wie Stil-Variationen und Block-Variationen wird nicht nur die Konsistenz gefördert, sondern auch eine aussergewöhnliche Flexibilität für die Gestaltung und Anpassung von Websites geboten. Der Übergang von klassischen zu blockbasierten Ansätzen eröffnet Entwicklern und Nutzern gleichermaßen die Möglichkeit, moderne, responsive und visuell ansprechende WordPress-Projekte effizient zu realisieren und eine kohärente digitale Präsenz aufzubauen.
Weiterführende Quellen
https://kulturbanause.de/blog/theme-json-globale-styles-und-einstellungen-fuer-wordpress/
https://fullsiteediting.com/lessons/theme-json-color-options/
https://anwass.de/wordpress-gutenberg-farbpalette-bearbeiten-ueber-theme-json-oder-styles-json/