Gutenberg

Was ist Gutenberg?

Gutenberg ist der Block-Editor, der seit WordPress 5.0 (Dezember 2018) den klassischen TinyMCE-Editor ersetzt. Der Name ist eine Hommage an Johannes Gutenberg, den Erfinder des Buchdrucks mit beweglichen Lettern. Das Konzept: Statt eines einzigen, freien Textfeldes besteht ein Inhalt aus einzelnen Blöcken — Absatz, Überschrift, Bild, Spalten, Code, Zitat, eingebettetes Video. Jeder Block ist ein eigenständiges React-Element mit eigenen Einstellungen.

Gutenberg ist kein reines Plugin, sondern Teil des WordPress-Core. Es ist aber auch als eigenständiges Open-Source-Projekt auf GitHub erhältlich, wo neue Features entwickelt werden, bevor sie in den Core wandern.

Wie funktioniert Gutenberg?

Gutenberg rendert die Bearbeitungsoberfläche vollständig in React. Alle Operationen — Inhalte laden, speichern, Medien hochladen, Revisionen anzeigen — laufen über die WordPress REST API.

Blöcke sind die Grundbausteine. Jeder Block hat:

• Eine edit-Komponente (React) — die Darstellung im Editor
• Eine save-Funktion — das gerenderte HTML für das Frontend
• Ein attributes-Schema — die persistenten Daten des Blocks

Blöcke werden im Datenbankfeld post_content als kommentiertes HTML gespeichert:

<!-- wp:paragraph {"fontSize":"large"} -->
<p class="has-large-font-size">Mein Text</p>
<!-- /wp:paragraph -->

Dieses Format ist abwärtskompatibel — ohne Gutenberg-Plugin wird der Inhalt schlicht als HTML angezeigt.

Block-Kategorien:

• Text: Absatz, Überschrift, Liste, Zitat, Code, Tabelle
• Medien: Bild, Galerie, Video, Audio, Datei
• Design: Schaltfläche, Spalten, Gruppe, Trennlinie, Abstandhalter
• Widgets: Archiv, Kalender, Kategorien, Suche
• Theme: Navigation, Seitentitel, Beitragsinhalt, Seitenleiste
• Einbettungen (oEmbed): YouTube, Vimeo, Twitter, etc.

Gutenberg in der Praxis

Full Site Editing (FSE): Seit WordPress 5.9 kann Gutenberg auch für Header, Footer und andere Theme-Bereiche genutzt werden. Block-Themes ersetzen PHP-Template-Dateien vollständig durch HTML-Vorlagen, die Blöcke enthalten.

Custom Blocks entwickeln: Plugin-Entwickler können eigene Blöcke registrieren. Das @wordpress/scripts-Paket stellt eine vorkonfigurierte Build-Chain (webpack) zur Verfügung:

npx @wordpress/create-block mein-block

Block Patterns: Vorgefertigte Kombinationen von Blöcken, die als Vorlagen eingefügt werden können. Themes und Plugins können eigene Patterns registrieren.

Performance-Aspekt: Der Gutenberg-Editor lädt mehrere Megabytes JavaScript. Das betrifft nur das Admin-Backend, nicht das Frontend. Das Frontend rendert statisches HTML.

Was passiert ohne Gutenberg?

Der klassische TinyMCE-Editor ist über das Plugin „Classic Editor" weiterhin verfügbar und wird offiziell bis mindestens 2025 unterstützt (laut WordPress.org). Drittanbieter-Editoren wie Elementor oder Beaver Builder haben eigene Block/Widget-Systeme aufgebaut, die parallel zu Gutenberg existieren.

Mittelfristig wird Gutenberg aber der einzige offiziell gewartete Editor-Weg sein. Full Site Editing und zukünftige WordPress-Features setzen auf Gutenberg auf.

Häufige Fragen

Können Gutenberg-Inhalte auch ohne WordPress angezeigt werden? Ja. Da Blöcke als kommentiertes HTML gespeichert werden, kann jede Anwendung den Inhalt als normales HTML rendern. Der @wordpress/blocks-Parser ist auch als npm-Paket verfügbar, um Blöcke programmatisch zu verarbeiten.

Wie unterscheiden sich Blöcke von Shortcodes? Shortcodes sind PHP-basierte Makros im Textformat, die bei der Ausgabe dynamisch gerendert werden. Blöcke sind React-Komponenten mit visueller Bearbeitungsoberfläche im Editor. Blöcke sind typsicherer, haben ein Schema für ihre Attribute und ermöglichen echtes WYSIWYG. Shortcodes bleiben für einfache Anwendungsfälle weiterhin gültig.

Verlangsamt Gutenberg das Frontend? Nein, sofern das Theme keine Block-Library-Styles unnötig lädt. Das gerenderte Frontend-HTML ist statisch und enthält kein React. Allerdings laden viele Block-Themes zusätzliche CSS-Stile global, die durch „Enqueue-Bereinigung" optimiert werden können.

Verwandte Begriffe

PHP · RSS