Gutenberg ist der Standard-Inhaltseditor in WordPress. Er wurde mit WordPress 5.0 im Dezember 2018 eingefuhrt und ersetzte den Classic Editor, der uber 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 unabhangig 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 fur alle zuganglich zu machen, nicht nur fur Entwickler oder Nutzer, die bereit sind, Drittanbieter-Page-Builder zu installieren. Als WordPress 5.0 im Dezember 2018 erschien, wurde Gutenberg der Standard-Editor fur alle neuen Beitrage und Seiten.
So funktioniert der Block-Editor
Alles in Gutenberg ist ein Block. Ein Absatz ist ein Block. Ein Bild ist ein Block. Eine Uberschrift, eine Liste, ein Video-Embed, ein Button, eine Tabelle; alles Blocke. Du baust eine Seite, indem du diese Blocke vertikal stapelst und jeden einzelnen uber seine eigene Toolbar und sein Einstellungspanel konfigurierst. Blocke konnen 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 Blocke mit, organisiert in Kategorien:
- Text-Blocke: Absatz, Uberschrift, Liste, Zitat, Code, Vorformatiert, Pullquote, Vers, Tabelle.
- Medien-Blocke: Bild, Galerie, Audio, Video, Cover, Datei, Medien & Text.
- Design-Blocke: Spalten, Gruppe, Reihe, Stapel, Trennzeichen, Abstandhalter, Buttons, Details.
- Widget-Blocke: Neueste Beitrage, Neueste Kommentare, Archive, Kategorien, Seitenliste, Suche, Schlagworter-Wolke, Social Icons, Kalender.
- Einbettungs-Blocke: YouTube, Vimeo, Twitter/X, Spotify, SoundCloud, TikTok und viele weitere oEmbed-kompatible Dienste.
Wiederverwendbare Blocke und Block-Patterns
Wiederverwendbare Blocke (seit WordPress 6.3 "Synchronisierte Patterns" genannt) ermoglichen es, einen Block oder eine Gruppe von Blocken zu speichern und in mehreren Beitragen oder Seiten einzufugen. Wenn du ein synchronisiertes Pattern aktualisierst, wird die Anderung uberall ubernommen, wo es verwendet wird. Das ist nutzlich fur Elemente wie Call-to-Action-Bereiche, Haftungsausschlusse oder Autoren-Bio-Boxen, die auf vielen Seiten erscheinen. Block-Patterns sind vorgestaltete Anordnungen von Blocken, zum Beispiel ein Hero-Bereich mit Hintergrundbild, Uberschrift und Button. WordPress Core enthalt eingebaute Patterns, Themes konnen eigene registrieren, und im WordPress Pattern Directory stehen Hunderte weitere zur Verfugung.
Full Site Editing und Block-Themes
Gutenberg hat sich weit uber den Beitragsinhalt hinaus entwickelt. Full Site Editing (FSE), schrittweise ab WordPress 5.9 eingefuhrt, ermoglicht es, das gesamte Seitenlayout mit Blocken 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 Blocke verwenden. Der Site-Editor (Design > Editor) bietet eine visuelle Oberflache, um jeden Teil deiner Seite ohne Code anzupassen. Klassische Themes funktionieren weiterhin, unterstutzen aber kein FSE.
Das Classic Editor Plugin
Nicht alle haben den Wechsel begrusst. Das Classic Editor Plugin wurde vom WordPress-Team als offizielle Moglichkeit veroffentlicht, den alten TinyMCE-Editor wiederherzustellen. Es ist eines der meistinstallierten WordPress-Plugins mit Millionen aktiver Installationen. WordPress hatte sich ursprunglich dazu verpflichtet, den Classic Editor bis 2024 zu unterstutzen, und das Plugin funktioniert weiterhin und erhalt Updates. Viele langjahrige Seiten, besonders solche mit stark angepassten TinyMCE-Konfigurationen oder komplexen Shortcode-basierten Layouts, nutzen es noch. Fur 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 eigenstandiges Plugin auf wordpress.org, das als Testumgebung fur Features dient, die fur zukunftige WordPress-Releases geplant sind. Es liefert etwa alle zwei Wochen neue Updates und enthalt experimentelle Features, die noch nicht stabil genug fur Core sind. Sobald ein Feature im Plugin ausgereift ist, wird es in das nachste grosse WordPress-Release ubernommen. Wenn du Entwickler oder Early Adopter bist und kommende Features testen mochtest, kannst du das Gutenberg-Plugin installieren. Fur die meisten Seitenbetreiber ist die mit WordPress Core gebundelte Version die richtige Wahl.
Performance-Aspekte
Gutenberg basiert auf der Editor-Seite auf React und fugt 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 grosses Stylesheet. Trotzdem konnen Seiten mit vielen Blocken oder starker Nutzung von Drittanbieter-Block-Plugins spurbaren 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 Blocke decken die Grundlagen ab, aber viele Seitenbetreiber erweitern den Editor mit Drittanbieter-Block-Bibliotheken fur fortgeschrittenere Layouts und Komponenten:
- Spectra (von Brainstorm Force): Fugt Blocke fur Preistabellen, Beitragsraster, Formulare, Countdowns, Sternebewertungen und mehr hinzu. Beliebt bei Astra-Theme-Nutzern.
- Stackable: Bietet designorientierte Blocke mit erweiterten Styling-Optionen, globalen Einstellungen und einer eigenen Design-Bibliothek.
- GenerateBlocks: Ein leichtgewichtiges Plugin vom GeneratePress-Team. Bietet nur vier hochflexible Blocke (Container, Headline, Buttons, Grid), die durch ihre Konfigurationsoptionen Dutzende spezialisierter Blocke ersetzen konnen.
- Kadence Blocks: Enthalt einen erweiterten Row-/Layout-Block, Icon-Listen, Info-Boxen, Testimonials und einen Formular-Block. Bekannt fur gute Performance und einen grosszugigen kostenlosen Tarif.
- CoBlocks: Von GoDaddy, mit Blocken fur Rezepte, Preistabellen, Social Sharing, Click-to-Tweet und mehr.
Eigene Blocke fur Entwickler
Entwickler konnen eigene Blocke 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 Blocke werden mit JavaScript (typischerweise JSX mit React) fur die Editor-Seite gebaut und konnen 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 unterstutzte Features. Fur Entwickler, die PHP-basierte Workflows bevorzugen, bietet das Advanced Custom Fields (ACF) Plugin "ACF Blocks" an, mit denen man eigene Blocke uber PHP-Templates und ACF-Felder erstellen kann, ohne React-Code zu schreiben.
Was InspectWP pruft
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.