Block Themes, theme.json und Site Editor

Begriffe vorab

• Block: ein Baustein des Editors, etwa Absatz, Bild oder Überschrift.
• Site Editor: Oberfläche, in der man Templates und Gestaltung eines Block Themes visuell bearbeitet.
• Preset: eine benannte Vorgabe, zum Beispiel eine Farbe oder Schriftgröße.
• Global Styles: Gestaltungseinstellungen, die für die ganze Website gelten.

Block Themes sind der aktuelle Standard. Templates bestehen aus HTML mit Block-Markup und werden im Site Editor bearbeitet. Mindestens nötig sind style.css (Header) und templates/index.html.

Verzeichnisstruktur

• theme.json: zentrale Konfiguration für Einstellungen und Styles
• templates/: Seitentemplates wie index.html, single.html, page.html, 404.html
• parts/: Template Parts wie header.html und footer.html
• patterns/: PHP-Dateien mit Header-Kommentar, werden automatisch als Block Patterns registriert
• styles/: Stilvariationen als JSON-Dateien
• functions.php: optional, für Theme-Support und eigene Registrierungen

Die Template-Hierarchie gilt auch hier, nur mit .html-Dateien statt PHP.

Block-Markup

<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group">
	<!-- wp:post-title /-->
	<!-- wp:post-content /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer"} /-->

theme.json

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "color": { "palette": [ { "slug": "primary", "color": "#21759B", "name": "Primär" } ] },
    "layout": { "contentSize": "720px", "wideSize": "1200px" }
  },
  "styles": {
    "color": { "background": "#ffffff" },
    "elements": { "link": { "color": { "text": "var(--wp--preset--color--primary)" } } }
  }
}

settings legt fest, was im Editor verfügbar ist (Paletten, Schriftgrößen, Layout). styles definiert das Standard-Aussehen. Aus Presets erzeugt WordPress CSS-Variablen nach dem Muster --wp--preset--color--primary. Version 3 von theme.json wird empfohlen, wenn die Mindestversion WordPress 6.6 ist. Ältere Versionen werden weiterhin unterstützt.

Seit WordPress 7.0 lassen sich Pseudo-Klassen wie :hover und :focus für Blöcke wie den Button direkt in theme.json definieren.

Patterns und Block Styles

Patterns sind vorgefertigte Block-Anordnungen. Block Styles (per register_block_style() oder JSON) bieten Variationen eines Blocks, zum Beispiel einen abgerundeten Button.

Halte Designentscheidungen in theme.json statt in eigenem CSS. Nutzer können sie dann im Site Editor über Global Styles anpassen.

Ein Beispiel für den Nutzen von theme.json

Legst du in theme.json eine Palette mit den Hausfarben fest, erscheinen genau diese Farben im Editor, und WordPress erzeugt daraus CSS-Variablen. Ändert jemand später die Primärfarbe in den Global Styles, passt sich jede Stelle an, die darauf verweist. Bei eigenem CSS müsste man jede Stelle einzeln anfassen.

Klassisch oder Block Theme?

Klassische Themes bestehen aus PHP-Templates und bieten viel Programmierfreiheit. Block Themes bestehen aus HTML-Templates und sind für Redakteure im Editor bearbeitbar. Für neue Projekte ist das Block Theme der aktuelle Standard; klassische Themes werden weiter unterstützt und sind bei bestehenden Projekten verbreitet.

Typische Fehler

• Designentscheidungen doppelt in theme.json und in eigenem CSS zu pflegen.
• Zu viele Farben und Größen freizugeben, sodass das Design uneinheitlich wird.
• Änderungen im Site Editor nicht mit der Versionskontrolle abzugleichen – sie liegen in der Datenbank, nicht in den Dateien.

Prüfstatus: Belegt (Stand 1. Oktober 2026): Jahreszahlen, Zahlen, Namen und Quellenangaben dieser Lektion, soweit die Quellenliste sie nennt, wurden gegen Primärquellen geprüft. Nicht einzeln belegt: erklärende Darstellung nach Lehrbuchstand und Quellen, die in der Liste als „allgemeine Referenz“ markiert sind. Codebeispiele sind nur auf Syntax geprüft, nicht in WordPress ausgeführt.

Quellen

• WordPress Theme Handbook – „Global Settings & Styles (theme.json)“ (developer.wordpress.org/themes/global-settings-and-styles/) (allgemeine Referenz, nicht Zeile für Zeile geprüft)
• Make WordPress Core – „Pseudo-element support for blocks and their variations in theme.json“ (Core-Changelog zu WordPress 7.0) (allgemeine Referenz, nicht Zeile für Zeile geprüft)