Gutenberg ist der Name des Block-Editors von WordPress, der mit WordPress 5.0 am 6. Dezember 2018 als Standard-Editor eingeführt wurde. Er ersetzt das klassische TinyMCE-Textfeld durch ein System aus modularen Inhaltsblöcken und bildet die Grundlage für das Full Site Editing in neueren WordPress-Versionen.
Was bedeutet das?
Der Name Gutenberg geht auf Johannes Gutenberg zurück, den Erfinder des Buchdrucks mit beweglichen Lettern im 15. Jahrhundert. Das Projekt begann 2017 als eigenständiges Plugin und wurde nach einer ausgedehnten Beta-Phase mit WordPress 5.0 in den WordPress-Core integriert. Das gleichzeitig veröffentlichte Classic-Editor-Plugin stellte sicher, dass Nutzer und Entwickler, die mehr Zeit für die Migration benötigten, zum bekannten Editor zurückwechseln konnten.
Das Kernprinzip des Block-Editors ist die Aufteilung von Inhalten in einzelne, eigenständige Blöcke. Jeder Inhaltstyp hat seinen eigenen Block: Absatz, Überschrift (H1 bis H6), Bild, Galerie, Video, Zitat, Liste, Tabelle, Schaltfläche, Trennlinie, Shortcode, benutzerdefiniertes HTML und viele weitere. Blöcke werden per Drag-and-Drop oder über die Tastatur neu angeordnet und können einzeln gestaltet werden. WordPress speichert die Blockstruktur als HTML-Kommentarmarkierungen direkt im Beitragsinhalt der Datenbank, was eine Lesbarkeit des Inhalts auch ohne den Block-Editor gewährleistet.
Mit WordPress 5.9 (25. Januar 2022) wurde das Full Site Editing eingeführt, das den Gutenberg-Block-Editor auf das gesamte Theme ausdehnt. Im Site Editor lassen sich neben Beitragsinhalten auch Template-Teile wie Header, Footer und Archivseiten bearbeiten. Globale Stile definieren einheitliche Schriften, Farben und Abstände für das gesamte Theme. Synchronisierte Muster (bis WordPress 6.2 als „wiederverwendbare Blöcke“ bekannt) erlauben es, eine Gruppe von Blöcken einmal zu erstellen und sie auf mehreren Seiten wiederzuverwenden, wobei eine Änderung an einer Stelle automatisch alle Verwendungen aktualisiert.
Plugins können eigene Blöcke registrieren und damit den Block-Editor um spezifische Funktionen erweitern. Die Block-Entwicklung erfolgt in JavaScript (React) und nutzt die @wordpress/blocks-Paketbibliothek.
Beispiel aus der Praxis
Sie schreiben einen neuen Wartungs-Beitrag auf Ihrer WordPress-Website. Im Block-Editor geben Sie / in einem leeren Block ein und wählen aus der erscheinenden Liste den Überschriften-Block aus. Nach der Überschrift fügen Sie mit einem Klick auf das Pluszeichen einen Absatz-Block ein, dann einen Bild-Block, in den Sie per Drag-and-Drop ein Bild aus der Mediathek ziehen. Mit dem Listenblock strukturieren Sie eine Aufzählung. Jeder Block kann in der rechten Seitenleiste mit eigenen Einstellungen versehen werden, ohne andere Bereiche zu beeinflussen.
Tipp
Der Block-Editor bietet einen Listenansicht-Modus (erreichbar über das Symbol in der oberen Werkzeugleiste), der alle Blöcke eines Beitrags als strukturierte Hierarchie darstellt. Bei langen Beiträgen oder verschachtelten Blöcken erleichtert diese Ansicht die Orientierung erheblich und ermöglicht das schnelle Auswählen und Verschieben von Blöcken, die in der normalen Vorschau schwer zu treffen sind.