Gutenberg ist der Standard-Inhaltseditor in WordPress. Er wurde mit WordPress 5.0 im Dezember 2018 eingeführt und ersetzte den Classic Editor, der über ein Jahrzehnt lang der Standard war. Der Name ist eine Anspielung auf Johannes Gutenberg, den Erfinder des Buchdrucks. Die Grundidee ist einfach: Statt eines einzelnen Textfeldes, in dem alles inline formatiert wird, ist jedes Inhaltselement ein eigener „Block", den man unabhängig verschieben, konfigurieren und gestalten kann.
Die Geschichte hinter Gutenberg
Vor Gutenberg nutzte WordPress TinyMCE, einen klassischen WYSIWYG-Rich-Text-Editor (What You See Is What You Get). TinyMCE diente WordPress jahrelang gut, hatte aber Grenzen. Komplexe Layouts wie mehrspaltige Abschnitte oder gestaltete Call-to-Action-Boxen erforderten typischerweise Shortcodes, eigenes HTML oder Page-Builder-Plugins. Das WordPress-Core-Team startete das Gutenberg-Projekt 2017 mit dem Ziel, reichhaltige Inhaltserstellung für alle zugänglich zu machen, nicht nur für Entwickler oder Nutzer, die bereit sind, Drittanbieter-Page-Builder zu installieren. Als WordPress 5.0 im Dezember 2018 erschien, wurde Gutenberg der Standard-Editor für alle neuen Beiträge und Seiten.
So funktioniert der Block-Editor
Alles in Gutenberg ist ein Block. Ein Absatz ist ein Block. Ein Bild ist ein Block. Eine Überschrift, eine Liste, ein Video-Embed, ein Button, eine Tabelle – alles Blöcke. Du baust eine Seite, indem du diese Blöcke vertikal stapelst und jeden einzelnen über seine eigene Toolbar und sein Einstellungspanel konfigurierst. Blöcke können per Drag-and-Drop oder mit den Auf-/Ab-Pfeilen umgeordnet werden. Jeder Block speichert seinen Inhalt und seine Konfiguration als Kombination aus HTML und speziellen HTML-Kommentaren, die WordPress nutzt, um den Block im Editor wiederherzustellen.
Block-Kategorien und -Typen
WordPress liefert Dutzende eingebauter Blöcke mit, organisiert in Kategorien:
- Text-Blöcke: Absatz, Überschrift, Liste, Zitat, Code, Vorformatiert, Pullquote, Vers, Tabelle.
- Medien-Blöcke: Bild, Galerie, Audio, Video, Cover, Datei, Medien & Text.
- Design-Blöcke: Spalten, Gruppe, Reihe, Stapel, Trennzeichen, Abstandhalter, Buttons, Details.
- Widget-Blöcke: Neueste Beiträge, Neueste Kommentare, Archive, Kategorien, Seitenliste, Suche, Schlagwörter-Wolke, Social Icons, Kalender.
- Einbettungs-Blöcke: YouTube, Vimeo, Twitter/X, Spotify, SoundCloud, TikTok und viele weitere oEmbed-kompatible Dienste.
Wiederverwendbare Blöcke und Block-Patterns
Wiederverwendbare Blöcke (seit WordPress 6.3 „Synchronisierte Patterns" genannt) ermöglichen es, einen Block oder eine Gruppe von Blöcken zu speichern und in mehreren Beiträgen oder Seiten einzufügen. Wenn du ein synchronisiertes Pattern aktualisierst, wird die Änderung überall übernommen, wo es verwendet wird. Das ist nützlich für Elemente wie Call-to-Action-Bereiche, Haftungsausschlüsse oder Autoren-Bio-Boxen, die auf vielen Seiten erscheinen. Block-Patterns sind vorgestaltete Anordnungen von Blöcken, zum Beispiel ein Hero-Bereich mit Hintergrundbild, Überschrift und Button. WordPress Core enthält eingebaute Patterns, Themes können eigene registrieren, und im WordPress Pattern Directory stehen Hunderte weitere zur Verfügung.
Full Site Editing und Block-Themes
Gutenberg hat sich weit über den Beitragsinhalt hinaus entwickelt. Full Site Editing (FSE), schrittweise ab WordPress 5.9 eingeführt, ermöglicht es, das gesamte Seitenlayout mit Blöcken zu bearbeiten: Header, Footer, Sidebars, Archiv-Templates, Einzelbeitrags-Templates, 404-Seiten und mehr. Um FSE zu nutzen, brauchst du ein „Block-Theme" (wie das Standard-Theme Twenty Twenty-Four oder Twenty Twenty-Five). Block-Themes ersetzen die traditionelle PHP-Template-Hierarchie durch HTML-basierte Templates, die Blöcke verwenden. Der Site-Editor (Design > Editor) bietet eine visuelle Oberfläche, um jeden Teil deiner Seite ohne Code anzupassen. Klassische Themes funktionieren weiterhin, unterstützen aber kein FSE.
Das Classic Editor Plugin
Nicht alle haben den Wechsel begrüßt. Das Classic Editor Plugin wurde vom WordPress-Team als offizielle Möglichkeit veröffentlicht, den alten TinyMCE-Editor wiederherzustellen. Es ist eines der meistinstallierten WordPress-Plugins mit Millionen aktiver Installationen. WordPress hatte sich ursprünglich dazu verpflichtet, den Classic Editor bis 2024 zu unterstützen, und das Plugin funktioniert weiterhin und erhält Updates. Viele langjährige Seiten, besonders solche mit stark angepassten TinyMCE-Konfigurationen oder komplexen Shortcode-basierten Layouts, nutzen es noch. Für neue Seiten ist der Block-Editor jedoch die klare Richtung, in die WordPress sich entwickelt.
Gutenberg Plugin vs. WordPress Core
Es gibt einen wichtigen Unterschied zwischen dem Gutenberg-Plugin und dem in WordPress Core eingebauten Block-Editor. Das Gutenberg-Plugin ist ein eigenständiges Plugin auf wordpress.org, das als Testumgebung für Features dient, die für zukünftige WordPress-Releases geplant sind. Es liefert etwa alle zwei Wochen neue Updates und enthält experimentelle Features, die noch nicht stabil genug für Core sind. Sobald ein Feature im Plugin ausgereift ist, wird es in das nächste große WordPress-Release übernommen. Wenn du Entwickler oder Early Adopter bist und kommende Features testen möchtest, kannst du das Gutenberg-Plugin installieren. Für die meisten Seitenbetreiber ist die mit WordPress Core gebündelte Version die richtige Wahl.
Performance-Aspekte
Gutenberg basiert auf der Editor-Seite auf React und fügt blockspezifisches CSS und JavaScript zum Frontend hinzu. Jeder Block-Typ kann sein eigenes Stylesheet laden, sodass eine Seite mit vielen verschiedenen Block-Typen mehr CSS-Dateien laden kann als eine Seite, die mit dem Classic Editor erstellt wurde. WordPress hat daran gearbeitet, dies zu verbessern: Seit Version 5.8 werden Block-Styles pro Block geladen statt als einzelnes großes Stylesheet. Trotzdem können Seiten mit vielen Blöcken oder starker Nutzung von Drittanbieter-Block-Plugins spürbaren Frontend-Overhead erzeugen. Performance-orientierte Seitenbetreiber kombinieren Gutenberg oft mit einem Caching-Plugin und einem CSS-Optimierungstool, um die Ladezeiten niedrig zu halten.
Beliebte Block-Bibliothek-Plugins
Die eingebauten Blöcke decken die Grundlagen ab, aber viele Seitenbetreiber erweitern den Editor mit Drittanbieter-Block-Bibliotheken für fortgeschrittenere Layouts und Komponenten:
- Spectra (von Brainstorm Force): Fügt Blöcke für Preistabellen, Beitragsraster, Formulare, Countdowns, Sternebewertungen und mehr hinzu. Beliebt bei Astra-Theme-Nutzern.
- Stackable: Bietet designorientierte Blöcke mit erweiterten Styling-Optionen, globalen Einstellungen und einer eigenen Design-Bibliothek.
- GenerateBlocks: Ein leichtgewichtiges Plugin vom GeneratePress-Team. Bietet nur vier hochflexible Blöcke (Container, Headline, Buttons, Grid), die durch ihre Konfigurationsoptionen Dutzende spezialisierter Blöcke ersetzen können.
- Kadence Blocks: Enthält einen erweiterten Row-/Layout-Block, Icon-Listen, Info-Boxen, Testimonials und einen Formular-Block. Bekannt für gute Performance und einen großzügigen kostenlosen Tarif.
- CoBlocks: Von GoDaddy, mit Blöcken für Rezepte, Preistabellen, Social Sharing, Click-to-Tweet und mehr.
Eigene Blöcke für Entwickler
Entwickler können eigene Blöcke mit der WordPress Block API erstellen. Das offizielle Tool zum Erstellen eines Block-Plugins ist @wordpress/create-block, das die Dateistruktur, Build-Konfiguration und Boilerplate-Code generiert. Eigene Blöcke werden mit JavaScript (typischerweise JSX mit React) für die Editor-Seite gebaut und können auf dem Frontend entweder per JavaScript oder serverseitig mit PHP gerendert werden. Die block.json-Datei definiert Metadaten wie den Blocknamen, die Kategorie, Attribute und unterstützte Features. Für Entwickler, die PHP-basierte Workflows bevorzugen, bietet das Advanced Custom Fields (ACF) Plugin „ACF Blocks" an, mit denen man eigene Blöcke über PHP-Templates und ACF-Felder erstellen kann, ohne React-Code zu schreiben.
Was InspectWP prüft
InspectWP erkennt, ob deine WordPress-Seite den Gutenberg-Editor verwendet, indem es den Seitenquelltext nach blockspezifischen HTML-Kommentaren durchsucht (wie <!-- wp:paragraph -->, <!-- wp:image --> und andere) sowie nach Gutenberg-bezogenen CSS- und JavaScript-Dateien. So kannst du nachvollziehen, ob eine Seite den Block-Editor nutzt oder noch den Classic Editor verwendet.