Block-Editor und Full Site Editing

Seit Version 5.0 arbeitet WordPress mit dem Block-Editor, auch Gutenberg genannt. Jeder Inhalt besteht aus Blöcken: Überschriften, Absätze, Bilder, Buttons, Spalten, eingebettete Videos. Seit Version 5.9 lässt sich mit Blöcken nicht nur der Inhalt einzelner Seiten gestalten, sondern die ganze Website – Kopfzeile, Fußzeile, Vorlagen für Beiträge und Archive. Man spricht von Full Site Editing oder kurz vom Website-Editor. Diese Lektion zeigt, wie Blöcke funktionieren, wie sie gespeichert werden und wie der Website-Editor aufgebaut ist. Wer das versteht, kann Websites bauen, die das Team selbst pflegen kann, ohne das Design zu zerstören.

1. Was ein Block ist

Das Besondere am Block-Editor ist die Art der Speicherung. Blöcke werden nicht in einem eigenen Datenformat abgelegt, sondern als normales HTML mit Kommentaren, die Blocktyp und Einstellungen beschreiben. Probieren Sie es aus:

1<!-- wp:heading -->
2<h2 class="wp-block-heading">Yoga am Morgen</h2>
3<!-- /wp:heading -->
4
5<!-- wp:paragraph -->
6<p>Sanft in den Tag – für alle Level.</p>
7<!-- /wp:paragraph -->
8
9<!-- wp:buttons -->
10<div class="wp-block-buttons"><!-- wp:button -->
11<div class="wp-block-button"><a class="wp-block-button__link">Probestunde buchen</a></div>
12<!-- /wp:button --></div>
13<!-- /wp:buttons -->

Diese Art der Speicherung hat Vorteile. Der Inhalt bleibt auch ohne WordPress lesbar, Suchmaschinen sehen sauberes HTML, und Programme – bis hin zu KI-Agenten – können Blöcke gezielt auslesen und verändern. Nachteil: Wer HTML direkt in der Datenbank ändert, muss die Kommentare erhalten, sonst erkennt der Editor den Block nicht mehr.

2. Der Website-Editor

Im Website-Editor unter „Design“ wird die gesamte Website gestaltet. Erkunden Sie die Bereiche:

3. Globale Stile statt Einzelformatierung

Der häufigste Fehler im Block-Editor ist, jeden Block einzeln zu formatieren: hier eine Farbe, dort eine Schriftgröße, anderswo ein anderer Abstand. Nach einigen Monaten sieht jede Seite ein wenig anders aus, und eine Änderung des Designs erfordert, hunderte Blöcke anzufassen. Der bessere Weg sind globale Stile: Farben, Schriften, Größen und Abstände werden einmal zentral festgelegt und stehen im Editor als Auswahl zur Verfügung. Ändert man eine Farbe der Palette, ändert sie sich überall. Die folgende Lektion und Modul 3 zeigen, wie das technisch über theme.json funktioniert.

4. Muster und Sperren

Muster sind vorgefertigte Kombinationen von Blöcken. Ein Yogastudio kann etwa ein Muster „Kurskarte“ mit Bild, Titel, Uhrzeit und Button anlegen, das Redakteure mit einem Klick einfügen. Synchronisierte Muster – früher „wiederverwendbare Blöcke“ – aktualisieren sich überall, wo sie verwendet werden, etwa für einen Hinweis zu Öffnungszeiten. Zusätzlich lassen sich Blöcke sperren, sodass sie nicht verschoben oder gelöscht werden können. Theme-Entwickler können festlegen, welche Blöcke und Einstellungen Redakteuren überhaupt zur Verfügung stehen. So entsteht ein Editor, der Freiheit beim Inhalt lässt, aber das Design schützt.

5. Tipps für die tägliche Arbeit

Einige Handgriffe erleichtern die Arbeit im Editor erheblich. Mit einem Schrägstrich am Zeilenanfang lassen sich Blöcke schnell einfügen, etwa „/bild“. Die Listenansicht zeigt die Struktur einer Seite als Baum und hilft, verschachtelte Blöcke zu finden. Mit Strg+Umschalt+Alt+M lässt sich zwischen visueller Ansicht und Code-Editor wechseln. Und Revisionen erlauben, frühere Fassungen einer Seite wiederherzustellen – ein Rettungsanker, wenn etwas schiefgegangen ist. Wer diese Werkzeuge kennt, arbeitet schneller und sicherer.

6. Ein Beispiel

Ein Café mit Rösterei baute seine Website früher mit einem Page Builder. Jede Seite hatte eigene Abstände und Farben, die Ladezeit war hoch, und Änderungen am Design dauerten Tage. Beim Umstieg auf ein Block-Theme wurden Farben, Schriften und Abstände einmal in den globalen Stilen festgelegt. Für wiederkehrende Elemente – Kaffeesorte mit Herkunft und Röstgrad, Veranstaltung mit Datum – entstanden Muster. Kopf- und Fußzeile wurden als Template-Teile angelegt. Seitdem pflegt das Team neue Sorten selbst, ohne das Design zu verändern, die Seite lädt deutlich schneller, und die nächste Designänderung – eine neue Hausfarbe – war in wenigen Minuten erledigt.

7. Blöcke als Grundlage für mehr

Die strukturierte Speicherung in Blöcken ist mehr als eine Frage der Bedienung. Sie macht Inhalte maschinenlesbar – für die REST API, für Headless-Anwendungen und für KI-Agenten, die Inhalte erstellen oder überarbeiten. Ein Agent kann gezielt einen Button-Text ändern oder eine neue Kurskarte nach einem Muster einfügen, ohne das restliche Layout zu gefährden. Wer heute sauber mit Blöcken, globalen Stilen und Mustern arbeitet, schafft deshalb die Grundlage für die automatisierten Arbeitsabläufe, die Modul 7 beschreibt.

8. Häufige Fragen

Kann ich den klassischen Editor weiterverwenden? Mit dem Plugin „Classic Editor“ ist das weiterhin möglich, und manche bestehenden Websites nutzen ihn noch. Neue Funktionen entstehen jedoch fast ausschließlich für den Block-Editor, und viele Plugins setzen ihn inzwischen voraus. Für neue Projekte ist der Block-Editor die zukunftssichere Wahl; bei bestehenden Websites lohnt ein schrittweiser Umstieg, etwa beim nächsten Relaunch.

Was passiert mit alten Inhalten beim Umstieg? Inhalte aus dem klassischen Editor erscheinen im Block-Editor als „klassischer Block“ und bleiben unverändert. Mit einem Klick lassen sie sich in einzelne Blöcke umwandeln. Das sollte man Seite für Seite prüfen, denn eingebettete Shortcodes älterer Plugins oder Page-Builder-Inhalte werden nicht immer sauber übertragen.

Wie verhindere ich, dass Redakteure das Design verändern? Über theme.json lassen sich Einstellungen wie freie Farbwahl, eigene Schriftgrößen oder benutzerdefinierte Abstände abschalten. Muster und Vorlagen können gesperrt werden, sodass nur Texte und Bilder änderbar sind. Und über Benutzerrollen lässt sich steuern, wer Zugriff auf den Website-Editor hat. So bekommen Redakteure genau die Freiheit, die sie brauchen, und das Design bleibt geschützt.

Stand: September 2026, WordPress 7.1, PHP 8.3. Kursmaterial der Klarwerk Akademie. WordPress entwickelt sich schnell – maßgeblich ist die aktuelle Dokumentation auf developer.wordpress.org.