WordPress/CMS

Gutenberg

Gutenberg ist der moderne Block-Editor von [WordPress](wordpress.md). Statt Text und Bilder in einem einzigen Fließtext-Feld zu bearbeiten, baust du deine Inhalte aus einzelnen **Blocks**: ein Block für die Überschrift, einer für den Absatz, einer für das Bild, einer für die Galerie. Jeder Block ist eigenständig und individuell anpassbar.

Lesezeit 5 Min Kategorie WordPress/CMS

Was ist Gutenberg?

Gutenberg ist die größte Veränderung, die WordPress in seiner Geschichte erlebt hat. Benannt nach Johannes Gutenberg — dem Erfinder des Buchdrucks — sollte der Editor die Art revolutionieren, wie Menschen im Web Inhalte erstellen. Seit WordPress 5.0 ist Gutenberg der Standard-Editor und löst den alten "Classic Editor" ab, der von 2003 bis 2018 im Einsatz war.

Das Grundprinzip ist simpel, aber mächtig: Jedes Element auf einer Seite ist ein Block. Eine Überschrift ist ein Block. Ein Absatz ist ein Block. Ein Bild ist ein Block. Eine Galerie, ein Button, ein YouTube-Video, eine Tabelle, eine Zitat-Box, eine Spaltenansicht — alles Blocks. Du fügst sie mit einem Klick auf das "+" hinzu, verschiebst sie per Drag & Drop, stellst jeden Block individuell in einer rechten Seitenleiste ein (Farbe, Schriftgröße, Abstand).

Konkretes Beispiel: Du schreibst einen Blog-Artikel über Marketing-Tipps. Überschrift einfügen — neuer Heading-Block. Einleitung schreiben — Absatz-Block. Ein Bild dazu — Image-Block. Eine Liste mit Vorteilen — List-Block. Ein Zitat vom Geschäftsführer — Quote-Block. Ein YouTube-Video einbetten — Embed-Block. Alles im gleichen Editor, alles visuell, kein Wechsel in "HTML-Ansichten".

Gutenberg vs. Classic Editor — was sich geändert hat

Der alte Classic Editor war im Prinzip eine Textbox mit Formatierungs-Buttons wie in Word. Text schreiben, fett machen, Bild einfügen — alles in einem einzigen Feld, und für komplexere Layouts brauchte man HTML-Kenntnisse oder einen Page Builder. Gutenberg ist ein kompletter Paradigmenwechsel.

AspektClassic EditorGutenberg
Bearbeitungs-ModellEin großes Textfeld mit FormatierungJedes Element ist ein eigenständiger Block
LayoutLinear, Text-dominiertFlexibel, mit Spalten, Groups, Covers
MedienEingefügt als inline HTMLEigene Blocks mit vollen Einstellungsmöglichkeiten
WiederverwendungKeineReusable Blocks, Block-Patterns
ErweiterbarkeitPer Plugin (oft mit Shortcodes)Per Custom Blocks im JavaScript
Mobile BearbeitungFrustrierendKlappt auch auf Tablet
LernkurveZiemlich flach, aber begrenztEtwas steiler, dafür mächtig

Wer heute mit WordPress startet, arbeitet automatisch in Gutenberg. Wer noch das Classic-Editor-Plugin installiert hat, hängt in der Vergangenheit fest.

Wie funktioniert Gutenberg im Alltag?

Der Editor ist in drei Bereiche geteilt:

  1. Canvas (Mitte) — hier baust du die Seite zusammen. Du siehst deinen Inhalt ungefähr so, wie er später im Frontend aussieht.
  2. Block-Inserter (links oben, "+") — hier wählst du neue Blocks aus. Es gibt über 80 Standard-Blocks, dazu hunderte, die Plugins wie Spectra, Kadence Blocks oder Stackable mitbringen.
  3. Seitenleiste (rechts) — hier stellst du Eigenschaften des gerade ausgewählten Blocks ein: Farben, Typografie, Abstand, Rahmen, Hintergrund, erweiterte Optionen.

Dazu kommen ein paar Konzepte, die du kennen solltest:

  • Groups und Columns — Container-Blocks, die andere Blocks aufnehmen und in Spalten oder Abschnitte strukturieren.
  • Synced Patterns (früher "Reusable Blocks") — wiederverwendbare Baustein-Bibliothek. Du baust einmal einen Call-to-Action-Abschnitt, speicherst ihn als Synced Pattern, und fügst ihn auf allen Seiten ein. Änderst du ihn zentral, wird er überall automatisch aktualisiert. Seit WordPress 6.3 heißen Reusable Blocks offiziell Synced Patterns, der Mechanismus dahinter ist der gleiche.
  • Block-Patterns — vorgefertigte, nicht-synchronisierte Block-Kombinationen. Statt ein Hero-Layout Block für Block zusammenzubauen, fügst du ein fertiges Pattern ein und passt nur Texte und Bilder an. Änderungen gelten nur an dieser einen Stelle.
  • Block-ThemesThemes, die vollständig auf Gutenberg aufbauen und Full Site Editing unterstützen.
  • theme.json — die zentrale Konfigurationsdatei für Block-Themes, die global Farben, Schriftgrößen, Abstände und verfügbare Block-Features definiert. Einmal richtig gesetzt, zieht sich die gleiche Design-Sprache durch jeden Block auf jeder Seite.

Full Site Editing (FSE) — der nächste Schritt

Full Site Editing — oder kurz FSE — ist die logische Weiterentwicklung von Gutenberg. Während der klassische Gutenberg nur den Inhalt von Seiten und Beiträgen bearbeitet, kannst du mit FSE die komplette Website im Block-Editor gestalten: Header, Footer, Archive, Single-Templates, 404-Seite, Sidebar. Alles.

Voraussetzung ist ein Block-Theme, das FSE unterstützt. Beispiele: Twenty Twenty-Four (das Standard-Theme), Frost, Blockbase, Raft. Mit einem solchen Theme öffnest du im Backend den Site Editor unter Design → Editor. Links in der Seitenleiste siehst du Navigation, Styles, Pages, Templates und Patterns — rechts den Canvas, in dem du alles visuell bearbeitest. Header, Footer, Blog-Archiv, 404-Seite, einzelne Templates für bestimmte Post Types: alles sitzt an einem zentralen Ort.

FSE ist die strategische Zukunft von WordPress. Aktuell reicht es für einfache bis mittlere Projekte — für komplexe Designs sind klassische Themes mit Page Buildern wie Elementor oder Bricks oft noch voraus, aber Gutenberg holt schnell auf.

Warum ist Gutenberg für deine Website wichtig?

Drei Gründe, warum Gutenberg für jeden WordPress-Nutzer relevant ist:

  • Es ist der Standard. Jede neue WordPress-Installation startet mit Gutenberg. Wer neu einsteigt, muss Gutenberg verstehen — es gibt kein "ich benutze nur den alten Editor" mehr, ohne sich in ein sterbendes Ökosystem zu manövrieren.
  • Kostenlos und eingebaut. Du brauchst keinen zusätzlichen Page Builder, keine Plugin-Lizenz. Für viele KMU-Websites reicht Gutenberg inzwischen völlig aus. Das spart 60 bis 250 Euro pro Jahr an Builder-Lizenzen.
  • Performance ist top. Gutenberg erzeugt schlanken HTML-Output — deutlich weniger verschachteltes DOM als viele Page Builder. Für Core Web Vitals und PageSpeed ist das ein klarer Vorteil.

Häufige Missverständnisse über Gutenberg

"Gutenberg ist ein Page Builder." Nicht ganz. Gutenberg ist ein Block-Editor, mit dem du Seiten bauen kannst — aber der Ansatz ist stärker inhaltsorientiert als bei klassischen Builder-Plugins. Elementor wurde für komplexe Layouts und Landingpages entwickelt; Gutenberg kommt aus der Ecke "Inhalt zuerst, Layout zweitens". In den letzten Jahren nähern sich beide Welten an.

"Gutenberg ist zu kompliziert." Anfangs fremdelt jeder mit dem Block-Konzept, besonders wer vom Classic Editor kommt. Nach zwei Stunden Arbeit haben die meisten den Dreh raus. Die Lernkurve ist flach, wenn man einmal verstanden hat, dass jedes Element ein Block ist.

"Gutenberg ersetzt meinen Page Builder." Je nach Projekt ja, je nach Projekt nein. Für einen Blog, eine einfache Firmen-Website oder ein Portfolio reicht Gutenberg inzwischen. Für Landingpages mit 30 Design-Elementen pro Screen ist ein Page Builder noch entspannter.

"Gutenberg zerstört meine alte Seite." Nein. Wenn du eine alte Seite mit dem Classic Editor gebaut hast, bleibt sie funktionsfähig. WordPress kapselt den alten Inhalt in einen "Classic Block", der sich wie der alte Editor verhält. Du kannst ihn jederzeit in moderne Blocks konvertieren — musst aber nicht.

Ähnliche Begriffe

Design

Hex-Code

Ein Hex-Code ist die digitale Adresse einer Farbe — eine sechsstellige Kombination aus Buchstaben und Zahlen, die einem …

Weiterlesen →
Web-Technik

TLD (Top-Level-Domain)

Die TLD ist die Endung einer Domain — der letzte Teil hinter dem letzten Punkt. Bei `firmencharisma.de` ist `.de` die TL…

Weiterlesen →
SEO

Meta-Description

Die Meta-Description ist der zwei- bis dreizeilige Teaser-Text unter dem blauen Title-Link in den Google-Ergebnissen. Si…

Weiterlesen →
Cookie Consent mit Real Cookie Banner