theme.json Block Theme Kontext

Die Grundidee von Block Themes

FSE (Full Site Editing) basiert auf einem fundamentalen Paradigmenwechsel: Alles ist ein Block. Statt PHP-Templates mit HTML/CSS zu schreiben, baust du das gesamte Theme aus Blöcken zusammen.

Warum dieser Ansatz?

  1. Konsistenz: Einmal definierte Design-Regeln gelten überall
  2. Wartbarkeit: Weniger PHP-Code, mehr deklarative Konfiguration
  3. Editor-Integration: Was du im Editor siehst, gilt auch im Frontend

theme.json als globales Kontrollzentrum

Bash
version
settings
    typography
    color
    spacing
    border
    layout
    blocks
        core/paragraph
        core/heading
        core/image
        ... (jeder Block einzeln, gleiche settings wie oben)
styles
    typography
    color
    spacing
    border
    blocks
        core/paragraph
        core/heading
        ...
    elements
        h1, h2, h3, h4, h5, h6
        a
        button
        caption
customTemplates
templateParts
  1. Settings (Was ist möglich?)
    • settings definiert, welche Optionen dem Benutzer zur Verfügung stehen. Du legst fest, welche Farben, Schriftgrössen, Abstände etc. verwendet werden können.
  2. Styles (Wie sieht es aus?)
    • styles definiert die tatsächlichen Darstellungswerte. Hier setzt du konkrete Standard-Werte für dein Theme.
  3. Block spezifische Styles
    • Einzelne Styles direkt pro Block-Typ definieren.

Style Variationen pro Block definieren

In /styles/
– blue.json
– dark.json
– minimal.json

Dort hast du jeweils eigene json files mit den Variationen drin.

functions.php braucht es trotzdem noch!

Die theme.json ist rein deklarativ und definiert nur:

  • Design-Optionen
  • Verfügbare Einstellungen
  • Styles

Sie kann nicht:

  • WordPress-Hooks verwenden
  • Logik ausführen
  • Berechtigungen prüfen
  • Dynamisch auf User-Rollen reagieren

Warum functions.php? Du musst die aktuelle User-Rolle zur Laufzeit prüfen. theme.json kann nur statische Werte definieren.

  1. theme.json = Design-Regeln
  2. functions.php = Berechtigungen & Logik

Lernfeld & Playground Fragen

  • Wie verhindere ich, dass Kunden custom Farben/Grössen/Werte eingeben können?
  • Wie blende ich Settings für Kunden aus?
  • Wie mache ich es, dass Kunden bei einem Block 3-4 verschiedene Varianten auswählen können?
  • Wie gebe ich Standard Schriftfamilien, Schriftgrössen und Farben vor?
  • Wie erstelle ich Patterns, in welchen Kunden nur Inhalte anpassen können?
  • Wie verhindere ich, dass Kunden Theme Files anpassen können?
  • Welche Core-Blöcke braucht der Kunde?