Gutenberg FSE: Die Zukunft des WordPress-Designs im Jahr 2026

Full Site Editing wurde mit WordPress 5.9 eingeführt. Drei Jahre später nutzen die meisten Agenturen es immer noch nicht richtig – und diejenigen, die es tun, haben einen erheblichen Wettbewerbsvorteil.

Was FSE tatsächlich bedeutet

Vor FSE steuerten WordPress-Themes Header, Footer und das globale Layout über PHP-Vorlagen. Gutenberg kümmerte sich nur um den Inhaltsbereich. Sie konnten Ihren Blogbeitrag mit Blöcken bearbeiten, aber Ihre Navigation war in einer PHP-Datei gesperrt.

FSE ändert das. Mit einem Block-Theme ist jeder Teil der Website – Header, Footer, Sidebar, Archivvorlagen, Einzelbeitrags-Layout – im Gutenberg-Editor mit Blöcken bearbeitbar. Keine PHP-Kenntnisse für Layout-Änderungen erforderlich.

Dies ist wichtig für die KI-Generierung, da es bedeutet, dass die gesamte Website als Block-JSON ausgedrückt werden kann. Es gibt kein hybrides System, bei dem einige Teile PHP-Vorlagen und andere Blöcke sind. Alles sind Blöcke, alles ist JSON, alles kann programmatisch generiert und bearbeitet werden.

Wie PAGEnza FSE nutzt

Wenn PAGEnza eine Website generiert, erstellt es nicht nur eine Homepage. Es erstellt ein vollständiges Block-Theme mit:

• templates/index.html – die Standardvorlage
• templates/single.html – Layout für Einzelbeiträge
• templates/archive.html – Blog-/Kategorie-Liste
• templates/404.html – Fehlerseite
• parts/header.html – wiederverwendbarer Header-Block
• parts/footer.html – wiederverwendbarer Footer-Block
• theme.json – globale Stile (Farben, Typografie, Abstände)

All diese werden aus demselben Design-Mandat generiert. Die für die Homepage definierte Farbpalette ist dieselbe wie in den globalen Stilen von theme.json. Das Schrift-Trio, das für den Hero-Bereich gewählt wurde, ist dasselbe, das im Stylesheet des Block-Themes geladen wird.

Dies ist der entscheidende Vorteil von FSE für die KI-Generierung: Konsistenz wird vom System erzwungen, nicht durch die Hoffnung, dass der Designer daran denkt, überall dieselbe Schriftart anzuwenden.

theme.json – die wichtigste Datei, die Sie noch nie bearbeitet haben

theme.json ist eine Konfigurationsdatei, die das globale Designsystem für ein Block-Theme definiert. Sie steuert:

• Farbpalette – benannte Farben, die im Farbwähler des Editors angezeigt werden
• Typografie – Schriftfamilien, Größen, Zeilenhöhen
• Abstände – die Skala für Abstände, die von Abstands- und Randeinstellungen verwendet wird
• Radius für Rahmen – Standardwerte für Eckradien
• Layout – Inhaltsbreite, breite Breite

Wenn PAGEnza eine Website generiert, wird theme.json programmatisch aus dem Design-Mandat erstellt. Die Farben ink, bg1, bg2 und accent werden als benannte Palettenfarben registriert. Das Schrift-Trio wird als Schriftfamilien mit den korrekten Google Fonts @import-URLs registriert.

Das Ergebnis ist, dass, wenn ein Kunde den Gutenberg-Editor öffnet, um Text zu ändern, der Farbwähler genau die vier Markenfarben anzeigt – nichts anderes. Der Schriftart-Selektor zeigt die drei ausgewählten Schriftarten. Die Abstands-Steuerelemente verwenden die Systemskala. Das Designsystem wird auf der Editor-Ebene durchgesetzt.

Was "Live in Gutenberg bearbeiten" tatsächlich bedeutet

Jede von PAGEnza generierte Website ist eine Live-WordPress-Installation mit aktiviertem Gutenberg FSE. Der Kunde kann:

• Auf beliebigen Text klicken und ihn direkt bearbeiten
• Abschnittshintergründe ändern, indem er klickt und aus der Markenfarbpalette auswählt
• Abschnitte durch Ziehen von Blöcken neu anordnen
• Neue Abschnitte aus dem Block-Inserter hinzufügen
• Bilder ändern, indem er auf den Platzhalter klickt

Sie können das Designsystem nicht versehentlich durch die Auswahl einer nicht markenkonformen Farbe beschädigen, da nur die vier Markenfarben verfügbar sind. Sie können keine unpassende Schriftart wählen, da nur die drei Marken-Schriftarten registriert sind.

Dies macht KI-generierte Websites für echte Kunden praktikabel – die Einschränkungen, die das Design funktionieren lassen, bleiben nach der Übergabe erhalten.

Das Problem der Blockabdeckung

FSE ist leistungsstark, hat aber ein Abdeckungsproblem. Nicht jedes Designmuster kann sauber in Kern-Gutenberg-Blöcken dargestellt werden. Komplexe Layouts, interaktive Komponenten und benutzerdefinierte Datenanzeigen erfordern oft benutzerdefinierte Blöcke oder Plugins von Drittanbietern.

PAGEnza löst dies auf zwei Arten:

Für das Layout: Wir verwenden eine Kombination aus Gruppen-, Cover-, Spalten- und Medien-&-Text-Blöcken mit sorgfältig kontrollierten Attributen. Etwa 95 % der Layouts von Marketingseiten können allein mit diesen vier Blocktypen erreicht werden.

Für interaktive Komponenten: Der Plugin Builder generiert benutzerdefinierte Gutenberg-Blöcke als PHP-Plugins. Eine Preistabelle, ein Buchungsformular, ein Testimonial-Slider – diese werden als ordnungsgemäß registrierte Blöcke generiert, die sich in den FSE-Editor integrieren, nicht als Shortcodes, die am Rand angebracht sind.

Das Ziel ist, dass alles, was ein Kunde bearbeiten muss, im visuellen Editor bearbeitet werden kann, ohne Code anzufassen.