Gutenberg: WordPress Block-Editor einfach erklärt

Gutenberg ist der standardmäßige Block-Editor von WordPress, der seit Version 5.0 (Dezember 2018) das klassische Bearbeitungserlebnis ersetzt. Benannt nach Johannes Gutenberg, dem Erfinder des modernen Buchdrucks, revolutioniert dieser Editor die Art, wie Inhalte in WordPress erstellt werden – von einzelnen Beiträgen bis zu ganzen Websites.

Was ist Gutenberg?

Der Gutenberg-Editor repräsentiert einen fundamentalen Paradigmenwechsel in der WordPress-Contentbearbeitung. Während der frühere TinyMCE-Editor auf einem durchgehenden Textfeld basierte (ähnlich wie Word), strukturiert Gutenberg jeden Inhalt in modulare, wiederverwendbare Blöcke. Jeder Block ist eine eigenständige Inhaltseinheit – sei es ein Absatz, ein Bild, eine Überschrift, ein Button oder komplexere Elemente wie Galerien, Tabellen oder eingebettete Videos.

Diese blockbasierte Architektur macht Gutenberg zu mehr als einem reinen Editor: Er ist die Grundlage für das moderne WordPress-Ökosystem. Mit der Einführung von Full-Site-Editing (FSE) erweitert sich Gutenbergs Funktionsumfang vom reinen Content-Editor zum kompletten Website-Builder, der Header, Footer, Sidebars und Template-Strukturen direkt im Editor bearbeitbar macht.

Warum Gutenberg? Die Geschichte hinter dem Namen

Die Namensgebung ist Programm: Johannes Gutenberg (ca. 1400–1468) machte durch den Buchdruck mit beweglichen Lettern Wissen demokratisch zugänglich. Ähnlich demokratisiert der Gutenberg-Editor professionelles Webdesign, indem er komplexe Layouts ohne Programmierkenntnisse ermöglicht. Was früher Custom-Code oder teure Pagebuilder erforderte, lässt sich nun direkt im Core von WordPress umsetzen.

Wie funktioniert der Block-Editor?

Die Block-Philosophie

Jeder Gutenberg-Block folgt drei Grundprinzipien:

1. Eigenständigkeit: Jeder Block existiert unabhängig mit eigenen Einstellungen, Stilen und Daten. Ein Button-Block beeinflusst nicht den Absatz darüber, ein Bild-Block nicht die Galerie darunter.

2. Konsistenz: Alle Blöcke teilen eine gemeinsame Bedienlogik. Einmal gelernt, wie man einen Block einfügt und konfiguriert, versteht man alle Blöcke.

3. Erweiterbarkeit: Entwickler können eigene Blöcke programmieren, bestehende erweitern oder per Plugin neue Funktionen hinzufügen.

Blöcke hinzufügen und bearbeiten

Um einen Block einzufügen, klickst du auf das „+“-Symbol in der Editor-Toolbar oder drückst „/“, gefolgt vom Block-Namen (z. B. „/bild“ für einen Bild-Block). Gutenberg zeigt eine Vorschau häufig genutzter Blöcke und eine Suchfunktion für alle verfügbaren Optionen.

Jeder Block verfügt über:

• Block-Toolbar: Direkt über dem Block erscheinende Werkzeuge für häufige Aktionen (Ausrichtung, Links, Formatierung)
• Settings-Sidebar: Rechts im Editor befinden sich erweiterte Einstellungen wie Farben, Abstände, Typografie, CSS-Klassen
• Block-Optionen: Über das Drei-Punkte-Menü erreichst du erweiterte Funktionen wie Duplizieren, Löschen, Gruppieren oder HTML-Bearbeitung

Drag & Drop und Reorder

Blöcke lassen sich per Drag & Drop neu anordnen. Der Griff-Icon links neben jedem Block ermöglicht Verschieben, während Pfeiltasten die Position im Dokument ändern. Diese Flexibilität erlaubt schnelles Prototyping und Umstrukturieren von Inhalten, ohne Copy & Paste.

Core-Blöcke: Das Standard-Arsenal

WordPress liefert über 90 Core-Blöcke mit, organisiert in Kategorien:

Text-Blöcke

• Absatz: Grundlegender Textblock mit Rich-Text-Formatierung
• Überschrift: H1-H6 mit SEO-relevanter Hierarchie
• Liste: Geordnet, ungeordnet, mit Verschachtelung
• Zitat: Blockzitate mit Quellenangabe
• Code: Syntax-Highlighted Code-Darstellung
• Preformatted: Für ASCII-Art oder vorformatierten Text

Medien-Blöcke

• Bild: Mit Bildunterschrift, Alternativtext (BITV-konform), Verlinkung
• Galerie: Mehrbildansicht mit Lightbox-Option
• Audio/Video: Einbettung eigener Medien oder externer Player
• Datei: Download-Links für PDFs, ZIPs etc.
• Cover: Hero-Sections mit Bild/Video-Hintergrund und Overlay-Text

Design-Blöcke

• Button: Call-to-Action-Elemente mit Stil-Varianten
• Columns: Spalten-Layouts (responsiv, verschiedene Breiten)
• Spacer: Unsichtbare Abstandshalter für präzise Abstände
• Separator: Horizontale Trennlinien
• Group: Container zur Gruppierung mehrerer Blöcke

Widget-Blöcke

• Archive: Archiv-Listen nach Monat/Jahr
• Kategorien: Dynamische Kategorie-Listen
• Neueste Beiträge: Automatisch aktualisierte Post-Listen
• Suche: Suchfeld-Integration
• Social Icons: Icons für Facebook, Twitter, LinkedIn etc.

Theme-Blöcke (FSE)

• Site Title/Site Logo: Seitentitel und Logo
• Navigation: Menü-Builder mit Mega-Menu-Support
• Template Part: Wiederverwendbare Template-Bereiche (Header, Footer)
• Post Content/Title/Date/Author: Dynamische Inhalte aus Beiträgen
• Query Loop: WordPress-Query als Block (Post-Listen, Archive)

Full-Site-Editing (FSE): Der nächste Schritt

Full-Site-Editing erweitert Gutenberg vom Content-Editor zum kompletten Site-Builder. Mit FSE-kompatiblen Themes (Block-Themes) bearbeitest du nicht nur Beiträge und Pages, sondern auch:

Templates bearbeiten

Im Template-Editor („Appearance → Editor“) gestaltest du Templates wie „Single Post“, „Archive“, „Search“ oder „404“ komplett im Block-Editor. Änderungen werden zentral gespeichert und auf alle relevanten Seiten angewendet.

Template-Teile (Template Parts)

Header und Footer werden als wiederverwendbare Template-Parts definiert. Änderst du den Header, aktualisiert er sich site-wide – eine Änderung, viele Orte.

Theme.json: Design-Tokens

Die theme.json-Datei definiert globale Design-Variablen (Farben, Schriftarten, Abstände) und macht sie im Editor verfügbar. Du änderst einmal die Primärfarbe, und alle Buttons, Links und Akzente passen sich an.

Global Styles

Im Style-Editor passt du Typografie, Farben und Block-Stile global an – ohne CSS-Kenntnisse. Änderungen wirken sich auf alle Inhalte aus, die diese Stile nutzen.

Pattern: Vorgefertigte Block-Kombinationen

Patterns (Block-Muster) sind vordefinierte Block-Arrangements für häufige Use Cases:

Core-Patterns

WordPress liefert Dutzende Patterns mit: Hero-Sections, Call-to-Actions, Testimonials, Pricing-Tables, Footer-Layouts. Du fügst sie per Klick ein und passt Text/Bilder an.

Custom Patterns

Mit dem Pattern-Creator erstellst du eigene Patterns aus beliebigen Block-Kombinationen. Speichere eine aufwändig gestaltete Produkt-Feature-Section als Pattern und verwende sie in allen relevanten Pages – ohne jedes Mal neu zu bauen.

Pattern-Kategorien

Organisiere Patterns in Kategorien wie „Buttons“, „Headers“, „Testimonials“ für schnellen Zugriff. Besonders nützlich für Teams: Alle nutzen dieselben Brand-konformen Designs.

Reusable Blocks: Einmal bauen, überall nutzen

Reusable Blocks (wiederverwendbare Blöcke) sind Block-Kombinationen, die zentral gespeichert werden. Änderst du einen Reusable Block, aktualisieren sich alle Instanzen auf der Website automatisch.

Anwendungsfälle:

• Call-to-Action-Banner am Ende jedes Blogposts
• Autor-Boxen mit einheitlichem Design
• Disclaimer-Texte für rechtliche Hinweise
• Newsletter-Anmeldungen mit gleichem Layout

Wichtiger Unterschied zu Patterns: Patterns kopieren Block-Kombinationen (Änderungen betreffen nur die aktuelle Seite), Reusable Blocks referenzieren eine zentrale Instanz (Änderungen wirken global).

Vorteile von Gutenberg

Keine Vendor-Lock-ins

Anders als bei Pagebuildern wie Elementor oder WPBakery sind Gutenberg-Inhalte Teil des WordPress-Core. Wechselst du das Theme, bleiben deine Inhalte zugänglich (bei Pagebuildern wird oft unbrauchbarer Shortcode zurückgelassen).

Performance

Gutenberg generiert sauberes HTML ohne aufgeblähte Div-Strukturen. Drittanbieter-Pagebuilder laden oft Megabytes an CSS und JavaScript – Gutenberg nutzt, was WordPress ohnehin lädt.

Barrierefreiheit

Core-Blöcke folgen WCAG-Richtlinien. Bildblöcke fordern Alternativtexte, Überschriften-Hierarchien werden automatisch geprüft, Farb-Kontrastverhältnisse werden validiert. Das erfüllt BITV 2.0– und BFSG-Anforderungen.

Native Integration

Gutenberg arbeitet nahtlos mit WordPress-Features zusammen: Revisionen, Benutzer-Rollen, Taxonomien, Custom Post Types. Keine Extra-Datenbanktabellen, kein proprietäres Datenformat.

Kostenlos und Open Source

Gutenberg ist GPL-lizenziert und Teil von WordPress. Keine Lizenzkosten, keine Pro-Versionen mit künstlichen Feature-Beschränkungen.

Herausforderungen und Lösungen

Lernkurve für Umsteiger

Wer Jahre mit dem TinyMCE-Editor gearbeitet hat, muss sich umgewöhnen. Die Block-Logik erfordert anfangs mehr Klicks, zahlt sich aber durch Flexibilität aus.

Lösung: WordPress bietet interaktive Tutorials im Editor. Theme-Dokumentationen enthalten oft Gutenberg-Guides. Für Teams empfehlen sich Schulungen.

Kompatibilität mit Legacy-Themes

Ältere Themes ohne Gutenberg-Support zeigen Blöcke manchmal unstyled. Bei aktiviertem Classic Editor arbeitet WordPress wie vor 5.0.

Lösung: Das Classic Editor Plugin reaktiviert den alten Editor dauerhaft. Langfristig sollten Themes aber auf Gutenberg aktualisiert oder gewechselt werden.

Theme-Abhängigkeit für erweiterte Styles

Die Flexibilität von Gutenberg-Blöcken hängt stark vom Theme ab. Ein Theme ohne umfangreiche theme.json bietet weniger Gestaltungsoptionen.

Lösung: Block-Themes (FSE-Ready) oder moderne Themes wie GeneratePress, Kadence oder Blocksy bieten volle Gutenberg-Integration. Alternativ: Block-Design-Plugins wie EditorsKit oder Getwid.

Performance bei Block-Plugin-Inflation

Viele Block-Plugins laden CSS/JS auch auf Seiten, die diese Blöcke nicht nutzen. Das verlangsamt die Ladegeschwindigkeit.

Lösung: Plugin-Manager wie Asset CleanUp oder Perfmatters deaktivieren unnötige Scripts. Alternativ: Nur benötigte Block-Plugins installieren, nicht „All-in-One“-Pakete mit 100+ ungenutzten Blöcken.

Gutenberg erweitern: Block-Entwicklung

Eigene Blöcke programmieren

Mit React und der Block-Editor-API entwickelst du Custom Blocks. Der @wordpress/create-block-Starter generiert das Grundgerüst:

bash

npx @wordpress/create-block mein-custom-block

Ein Block besteht aus:

• block.json: Metadaten (Name, Kategorie, Attribute)
• edit.js: Editor-Ansicht (React-Komponente)
• save.js: Frontend-Ausgabe (HTML-Struktur)
• style.css/editor.css: Styles für Frontend/Editor

Block-Plugins

Statt selbst zu entwickeln, nutzen viele fertige Block-Sammlungen:

• Kadence Blocks: Fortgeschrittene Layout-Blöcke mit Tabs, Accordions, Icon-Listen
• GenerateBlocks: Performance-optimierte Layout-Blöcke
• Stackable: 40+ Premium-Blöcke mit Design-Vorlagen
• Otter Blocks: Von ThemeIsle, kostenlos und erweiterbar

Block-APIs und Hooks

WordPress bietet APIs zum Anpassen bestehender Blöcke:

• Block Filters: Ändere Attribute, Ausgabe oder Styles vorhandener Blöcke
• Block Styles: Füge Style-Varianten hinzu (z. B. „Button mit Schatten“)
• Block Supports: Aktiviere Features wie Farben, Typografie oder Ausrichtung für Custom Blocks

Ein Beispiel: Du fügst dem Core-Button-Block eine „Glow“-Variante hinzu:

javascript

wp.blocks.registerBlockStyle('core/button', {
    name: 'glow-button',
    label: 'Glow-Effekt'
});

Im Editor wählst du dann unter „Button → Styles → Glow-Effekt“ aus.

Gutenberg vs. Pagebuilder: Wann was nutzen?

Wann Gutenberg ausreicht

• Standard-Unternehmenswebsites (Über uns, Services, Kontakt)
• Blogs und Content-Portale
• Einfache Onepager
• Wenn Performance und DSGVO-Konformität Priorität haben
• Langfristige Wartbarkeit wichtiger als kurzfristige Flexibilität

Wann Pagebuilder sinnvoll sind

• Sehr komplexe, pixelgenaue Layouts (z. B. kreative Agenturen)
• Wenn das Team bereits Elementor/Divi beherrscht und Umstellung aufwändig wäre
• Projekte mit Dutzenden Custom-Widget-Typen, die nicht blockbasiert laufen
• Wenn bestimmte Theme-Features an den Pagebuilder gebunden sind

Trend: Immer mehr Pagebuilder integrieren Gutenberg (z. B. Elementor’s „Loop Grid“ nutzt WordPress-Queries). Die Grenzen verschwimmen.

Technisches SEO mit Gutenberg

Strukturierte Daten

Blöcke können JSON-LD-Structured-Data direkt ausgeben. Das FAQ-Block-Plugin von Schema & Structured Data for WP generiert automatisch Schema-Markup für SERP-Featured-Snippets.

Überschriften-Hierarchie

Gutenberg warnt bei fehlerhaften Heading-Strukturen (z. B. H1 → H3 ohne H2). Das verhindert SEO-Fehler und verbessert Screenreader-Navigation.

Bild-Optimierung

Der Bild-Block fordert Alt-Texte und zeigt Dateigrößen. Plugins wie ShortPixel oder Imagify komprimieren Uploads automatisch – ohne Qualitätsverlust, aber mit schnelleren Ladezeiten.

Interne Verlinkung

Der Link-Block schlägt existierende Beiträge vor und zeigt Anchors auf der aktuellen Seite. Das vereinfacht interne Verlinkungsstrategien für bessere Sichtbarkeit.

DSGVO und Gutenberg

Datensparsamkeit

Core-Blöcke sammeln keine Nutzerdaten. YouTube-Embeds laden Inhalte erst nach User-Interaktion (2-Click-Lösung per Plugin wie Borlabs Cookie).

Cookie-Banner

Blöcke für Cookie-Consent (Real Cookie Banner, Complianz) integrieren sich nahtlos in Gutenberg. User-Einstellungen werden in Block-Optionen verwaltet.

Hosting und externe Inhalte

Gutenberg lädt keine Google Fonts, externe JavaScript-Bibliotheken oder Tracking-Skripte. Alle Ressourcen kommen vom eigenen Server oder werden explizit per Plugin eingebunden (mit Consent-Management).

Best Practices für Gutenberg-Projekte

Theme-Wahl

• Wähle ein FSE-Ready-Theme für maximale Flexibilität
• Prüfe theme.json-Support für globale Styles
• Teste Pattern-Kompatibilität (manche Themes überschreiben Core-Patterns)

Plugin-Strategie

• Nutze Block-Plugins sparsam (jedes Plugin = zusätzliche Assets)
• Bevorzuge leichtgewichtige Lösungen (GenerateBlocks statt Elementor)
• Teste Performance mit PageSpeed Insights nach jeder Plugin-Installation

Content-Struktur

• Nutze Reusable Blocks für wiederkehrende Elemente
• Erstelle Custom Patterns für Team-Standards
• Dokumentiere Block-Kombinationen für Redakteure (Screenshots, Guidelines)

Wartung

• Halte WordPress Core, Themes und Block-Plugins aktuell (Sicherheit + neue Features)
• Teste Updates auf Staging-Umgebung
• Prüfe nach Updates alle Seiten auf Layout-Brüche

Zukunft von Gutenberg

Phase 3: Collaboration

Die WordPress-Roadmap plant Echtzeit-Kollaboration. Mehrere Redakteure arbeiten simultan am selben Beitrag (wie Google Docs).

Phase 4: Multilingual

Native Mehrsprachigkeit wird direkt in Gutenberg integriert. Keine separaten Plugins wie WPML oder Polylang mehr nötig.

Block-Bindings

Die Block-Bindings-API ermöglicht dynamische Inhalte ohne Custom Post Types. Ein Button zeigt automatisch den aktuellen Produktpreis aus der Datenbank.

WebAssembly-Integration

Experimente laufen, Blöcke in WebAssembly zu kompilieren. Das würde komplexe Blöcke (z. B. Bildbearbeitung direkt im Editor) ermöglichen.

Gutenberg für Agenturen

White-Label-Lösungen

Agenturen können Gutenberg per Plugin branden: Custom Icons, eigene Block-Kategorien, client-spezifische Patterns. Das Plugin „Editor Blocks“ ermöglicht vollständige Anpassung.

Deployment-Workflows

Mit der Gutenberg-REST-API automatisierst du Content-Migrationen. Blöcke werden als JSON übertragen und auf Staging/Production synchronisiert.

Schulungsangebote

Da Gutenberg WordPress-Standard ist, steigt die Nachfrage nach Gutenberg-Trainings. Agenturen bieten Workshops, Video-Tutorials oder Dokumentationen als Service.

Häufige Fragen (FAQ)

Kann ich den Classic Editor wiederherstellen? Ja, über das „Classic Editor“-Plugin. Das reaktiviert den alten TinyMCE-Editor dauerhaft. WordPress supportet Classic Editor noch bis mindestens 2025.

Sind Gutenberg-Inhalte portabel? Ja. Gutenberg speichert Inhalte als HTML-Kommentare mit Block-Metadaten. Bei Theme-Wechsel bleiben Inhalte lesbar (wenn auch vielleicht unstyled).

Funktioniert Gutenberg auf älteren WordPress-Versionen? Das Gutenberg-Plugin läuft ab WordPress 5.9+. Für maximale Funktionalität empfiehlt sich aber die neueste WordPress-Version.

Wie teste ich Gutenberg ohne Live-Site? Nutze Local by Flywheel oder XAMPP für lokale WordPress-Installationen. Dort testest du alle Features gefahrlos.

Bremst Gutenberg die Website aus? Core-Gutenberg nicht. Block-Plugins können Performance beeinträchtigen, wenn sie schlecht programmiert sind oder unnötige Assets laden. Asset-Minification und Lazy-Loading helfen.

Fazit

Gutenberg ist mehr als ein Editor – er ist das Fundament der modernen WordPress-Architektur. Mit Full-Site-Editing, Patterns und einer wachsenden Block-Bibliothek demokratisiert er professionelles Webdesign. Die Lernkurve wird durch Flexibilität, Performance und Zukunftssicherheit mehr als ausgeglichen.

Für neue WordPress-Projekte ist Gutenberg die empfohlene Wahl. Bei Legacy-Projekten hängt die Entscheidung von Theme-Kompatibilität und Team-Vertrautheit ab. Die Richtung ist klar: WordPress baut sein Ökosystem konsequent um Gutenberg herum – wer dabei ist, profitiert langfristig.

Du möchtest deine WordPress-Website auf Gutenberg-Best-Practices umstellen oder benötigst Unterstützung bei der WordPress-Entwicklung? Wir helfen dir gerne bei Theme-Migration, Custom-Block-Entwicklung und Performance-Optimierung.