Seit WordPress 6.0 ist Full Site Editing keine Zukunftsmusik mehr, sondern produktionsreif. Trotzdem zögern viele Entwickler und Agenturen noch mit dem Umstieg – verständlicherweise. Denn FSE bedeutet nicht nur ein neues Feature, sondern einen grundlegend anderen Ansatz für WordPress-Websites. Dieser Leitfaden zeigt, wann sich der Wechsel lohnt und wie Sie ihn systematisch angehen.
Was ist WordPress Full Site Editing genau?
Full Site Editing erweitert den Block-Editor (Gutenberg) von Beiträgen und Seiten auf alle Bereiche Ihrer Website. Header, Footer, Seitenleisten, Template-Bereiche – alles wird mit Blöcken statt mit PHP-Templates gesteuert.
Der zentrale Unterschied zu klassischen Themes:
- Früher: PHP-Dateien (header.php, footer.php, single.php) mit Template-Tags und Funktionen
- Mit FSE: HTML-Templates aus Blöcken, gespeichert als JSON im Theme oder Datenbank
- Anpassungen: Visuell im Editor statt im Code (mit Code-Optionen für Profis)
FSE basiert auf drei Säulen: dem Site Editor zur visuellen Bearbeitung, Block-Themes als technische Basis und Theme.json als zentrale Konfigurationsdatei für Design-System und Einstellungen.
Für wen lohnt sich der Umstieg?
FSE ist ideal, wenn Sie…
- Kunden mehr Kontrolle über das Design geben wollen – ohne Angst vor kaputtem Code
- Wartungsaufwand reduzieren möchten (weniger Custom Code, mehr Standard)
- Schneller Layouts prototypen und testen wollen
- Ein konsistentes Design-System über mehrere Projekte nutzen
- Mit Page Buildern unzufrieden sind (Performance, Lock-in)
Bleiben Sie vorerst bei klassischen Themes, wenn…
- Sie hochkomplexe, individuelle PHP-Logik in Templates haben
- Ihr Workflow stark auf ACF Flexible Content o.ä. aufbaut
- Sie mit bestehenden Child-Themes arbeiten, die massiv angepasst sind
- Ihre Kunden technisch wenig versiert sind (FSE hat eine Lernkurve)
Eine Hybridlösung ist möglich: WordPress 6.5+ unterstützt klassische und Block-Templates parallel.
Die technischen Grundlagen verstehen
Theme.json: Das Herzstück
Diese zentrale Datei definiert Farben, Schriftarten, Spacing-Einheiten, Layout-Einstellungen und welche Block-Features verfügbar sind. Sie ersetzt viele Funktionen, die früher in functions.php oder CSS gelebt haben.
Wichtigste Vorteile:
- Konsistente Design-Tokens für alle Blöcke
- Automatische CSS-Variablen-Generierung
- Reduzierung von Custom CSS
- Bessere Performance durch weniger Inline-Styles
Block-Templates und Template-Parts
Templates definieren den Aufbau einzelner Seitentypen (Homepage, Blogpost, Archiv). Template-Parts sind wiederverwendbare Komponenten wie Header oder Footer.
Gespeichert werden diese entweder als HTML-Dateien im Theme-Ordner (/templates und /parts) oder – nach Bearbeitung im Editor – in der Datenbank. Die Datenbank-Version überschreibt die Theme-Version.
Block-Patterns: Ihr Layout-Baukasten
Patterns sind vordefinierte Block-Arrangements, die Benutzer einfügen können. Denken Sie an sie wie an Snippets für häufig genutzte Layouts: Hero-Sections, Testimonials, Call-to-Action-Bereiche.
Schritt für Schritt zum ersten FSE-Projekt
Schritt 1: Wählen Sie Ihren Ansatz
Option A – Bestehendes Block-Theme anpassen: Starten Sie mit Twenty Twenty-Four oder einem Premium-Block-Theme. Ideal zum Lernen und für Standard-Websites.
Option B – Eigenes Block-Theme entwickeln: Nutzen Sie Create Block Theme Plugin für den Start oder arbeiten Sie mit dem leeren Theme-Boilerplate von Automattic.
Option C – Klassisches Theme migrieren: Schrittweise Umwandlung über Hybrid-Ansatz. Beginnen Sie mit einzelnen Templates.
Schritt 2: Entwicklungsumgebung aufsetzen
Installieren Sie WordPress 6.4 oder neuer (besser 6.5+ für aktuelle Features). Folgende Plugins erleichtern die Arbeit erheblich:
- Create Block Theme: Export/Import von Templates, Theme.json-Generator
- Gutenberg Plugin: Zugriff auf neueste Block-Editor-Features vor Core-Integration
- Query Monitor: Für Performance-Überwachung
Schritt 3: Theme.json konfigurieren
Definieren Sie zunächst Ihr Design-System. Legen Sie maximal 5-7 Farben fest (Primary, Secondary, Neutrals), 2-3 Schriftfamilien und eine konsistente Spacing-Skala (z.B. 0.5rem, 1rem, 1.5rem, 2rem, 3rem, 4rem).
Aktivieren Sie nur die Block-Features, die Sie wirklich brauchen. Weniger Optionen = bessere User Experience für Ihre Kunden.
Schritt 4: Templates erstellen
Beginnen Sie mit den wichtigsten Templates in dieser Reihenfolge:
- Header und Footer (Template-Parts)
- Index/Frontpage
- Single Post
- Page
- 404
Nutzen Sie den Site Editor für den visuellen Aufbau, exportieren Sie dann via Create Block Theme Plugin in Ihr Theme für Versionskontrolle.
Schritt 5: Custom Blocks für spezifische Anforderungen
FSE deckt nicht alles ab. Für projektspezifische Funktionen entwickeln Sie eigene Blöcke. Das @wordpress/create-block Tool macht den Start einfach.
Typische Kandidaten für Custom Blocks: Formulare mit spezieller Logik, Produktdarstellungen, interaktive Elemente, API-Integrationen.
Häufige Stolpersteine und Lösungen
Problem: Kunden überschreiben versehentlich Templates
Lösung: Nutzen Sie Template-Locking. Sie können einzelne Blöcke oder ganze Template-Bereiche sperren. Nur bewegliche/editierbare Bereiche bleiben änderbar.
Problem: Performance-Einbußen durch Block-Markup
Lösung: Block-Markup ist tatsächlich ausführlicher als minimal optimiertes PHP. Kompensieren Sie durch Browser-Caching, CDN und moderne Hosting-Infrastruktur. Tests zeigen: Der Unterschied ist in der Praxis bei korrekter Optimierung vernachlässigbar.
Problem: Migration bestehender Custom Fields
Lösung: ACF-Blocks oder Custom Blocks mit InnerBlocks-API. Sie können Custom Fields weiter nutzen und in Blöcken rendern. Ein vollständiger Block-Ansatz ist oft cleaner, aber nicht zwingend.
Problem: Debugging ist schwieriger
Lösung: Nutzen Sie die Browser-Entwicklertools ausgiebig. Das Gutenberg-Plugin bietet einen Debug-Modus. Für Template-Logik: Query Monitor zeigt, welche Templates aktiv sind.
FSE und Page Builder: Konkurrenz oder Ergänzung?
FSE ersetzt für viele Projekte die Notwendigkeit von Elementor, Divi oder Beaver Builder. Die Vorteile: Keine zusätzlichen Plugins, bessere Performance, kein Vendor-Lock-in, Core-Updates inklusive.
Page Builder sind weiterhin überlegen bei: Sehr komplexen Animationen, Mega-Menüs mit aufwändiger Logik, wenn Kunden bereits umfassend eingearbeitet sind.
Für neue Projekte 2024 empfiehlt sich: Erst FSE evaluieren, nur bei konkreten Limitierungen zu Page Buildern greifen.
Ressourcen für die Weiterbildung
Die offizielle WordPress Developer Documentation bietet einen umfassenden Block-Theme-Guide. Das Full Site Editing Outreach Programm veröffentlicht wöchentlich Updates und Best Practices.
Empfehlenswerte Block-Themes zum Lernen sind Twenty Twenty-Four (mitgeliefert, exzellente Code-Qualität) und Frost (von Brian Gardner, minimalistisch und gut dokumentiert).
Das Create Block Theme Plugin selbst enthält eine integrierte Dokumentation, die den Workflow erklärt.
Ihr nächster Schritt
FSE wird nicht mehr verschwinden – es ist die Zukunft von WordPress. Der beste Zeitpunkt für den Einstieg ist bei einem neuen Projekt mit überschaubarem Scope.
Konkrete Handlungsempfehlung: Nehmen Sie sich diese Woche zwei Stunden Zeit. Installieren Sie eine frische WordPress-Instanz mit Twenty Twenty-Four, aktivieren Sie das Create Block Theme Plugin und bauen Sie eine simple Template-Struktur nach. Experimentieren Sie mit Theme.json-Einstellungen. Nach diesem Hands-on-Test können Sie fundiert entscheiden, ob und wann FSE für Ihre Projekte passt.
Starten Sie klein, lernen Sie kontinuierlich, und migrieren Sie schrittweise. FSE ist keine Revolution, die über Nacht passiert – sondern eine Evolution, die Sie in Ihrem Tempo mitgehen können.
