Thema gewechselt, und Ihr vertrauter Editor wurde zu einer ungewohnten Leinwand aus Blöcken? Jeder, der Gutenberg zum ersten Mal öffnet, erlebt diese Schockstarre. Vertraute Schaltflächen sind verschwunden, Metabox-Felder haben ihre Position geändert, und das Erstellen eines einfachen Beitrags dauert doppelt so lange.

Doch Fakt ist: Der WordPress-Block-Editor ist der schnellste Weg, Inhalte ohne Code zu gestalten. In der Praxis haben wir festgestellt, dass Sie nach ein paar Stunden Arbeit mit Blöcken nicht mehr zum klassischen Editor zurückkehren möchten. Und wenn Sie die Tastenkombinationen und ein paar Tricks kennen, arbeitet Gutenberg schneller als jeder Page Builder.

In diesem Leitfaden finden Sie eine vollständige Aufschlüsselung des Block-Editors: vom ersten Start bis zu den Hotkeys. Keine Theorie um der Theorie willen, sondern konkrete Schritte, die Sie auf Ihrer eigenen Website nachvollziehen können.

💡 Kurzer Überblick:

• Editor öffnen: Beiträge → Neu hinzufügen, und Sie landen in der Gutenberg-Block-Oberfläche
• Inhalte mit Blöcken hinzufügen: Jeder Absatz, jede Überschrift, jedes Bild oder jede Schaltfläche ist ein separater, verschiebbarer Block
• Blöcke über das „+"-Symbol oder die /-Taste einfügen, geben Sie einfach den Namen des benötigten Blocks ein
• Blöcke über die Seitenleiste konfigurieren: Formatierungs- und Stiloptionen ändern sich je nach ausgewähltem Blocktyp
• Lernen Sie die Hotkeys: Shift + Alt + H (Windows) öffnet einen Spickzettel mit allen Tastenkombinationen

Was ist der Gutenberg-Editor

Gutenberg ist der Block-Content-Editor, der seit Version 5.0 zum WordPress-Core gehört. Anders als der klassische TinyMCE-Editor, bei dem der gesamte Beitrag ein einziges Textfeld war, zerlegt Gutenberg Inhalte in unabhängige Blöcke: Absätze, Überschriften, Bilder, Galerien, Schaltflächen, Spalten und Dutzende anderer Elemente.

Jeder Block kann unabhängig von den anderen verschoben, konfiguriert und gestaltet werden. Das Ergebnis ist sofort sichtbar: Dies ist ein visueller Editor, kein Textfeld mit einer „Vorschau"-Schaltfläche.

Im Jahr 2026 hat sich Gutenberg von einer umstrittenen Neuheit zu einem vollwertigen Page Builder entwickelt. Mit der Einführung von Full Site Editing (FSE) ist der Block-Editor über Beiträge und Seiten hinausgewachsen. Jetzt können Sie darüber Kopfzeilen, Fußzeilen, Beitragsvorlagen und Archive bearbeiten. Der klassische Editor ist weiterhin als separates Plugin verfügbar, aber WordPress hat die offizielle Unterstützung dafür bereits 2022 eingestellt. Sicherheitsupdates werden noch veröffentlicht, aber es werden keine neuen Funktionen mehr hinzugefügt.

Wenn Sie ernsthaft mit WordPress arbeiten, ist Gutenberg keine Option, sondern das Hauptwerkzeug. Das Erlernen lohnt sich allein schon wegen der Geschwindigkeit: Sobald Sie sich daran gewöhnt haben, entstehen Beiträge zwei- bis dreimal schneller als im klassischen Editor mit seiner Ansammlung von Metabox-Feldern.

Oberfläche: erster Start

Um den Editor zu öffnen, gehen Sie zu Beiträge → Neu hinzufügen (oder Seiten → Neu hinzufügen für Seiten). WordPress lädt Gutenberg mit einem Willkommensbildschirm und einem leeren Titelfeld.

Rechts befindet sich eine Seitenleiste mit zwei Tabs: Beitrag (oder Seite) und Block. Der Tab „Beitrag" enthält globale Einstellungen: Permalink, Kategorien, Schlagwörter, Beitragsbild, Kurzfassung und Veröffentlichungsstatus. Der Tab „Block" zeigt die Einstellungen für den jeweils ausgewählten Block.

Beachten Sie, dass das Permalink-Feld sofort verfügbar ist, ohne dass Sie separat auf den Titel klicken müssen. Das spart bei jedem Beitrag ein paar Sekunden.

Arbeiten mit Textblöcken

Beitragstitel

Der erste Block im Editor ist der Titel. Geben Sie einfach Text ein, und er wird automatisch zur H1 des Beitrags. Neben dem Titel befindet sich eine Schaltfläche Bearbeiten, die die Permalink-Bearbeitung direkt im Block öffnet.

Drücken Sie die Eingabetaste, und unter dem Titel erscheint ein neuer Absatzblock. Gutenberg behält die vertraute Tastaturnavigation des klassischen Editors bei: Eingabetaste erzeugt einen neuen Block, Rücktaste führt ihn mit dem vorherigen zusammen.

Absätze und die Formatierungswerkzeugleiste

Der standardmäßig neue Block ist „Absatz". Doch bevor Sie Text eingeben, zeigt Gutenberg Optionen an: Der Block lässt sich in eine Überschrift, ein Bild, eine Galerie, ein Titelbild und Dutzende anderer Typen umwandeln.

Nach der Texteingabe erscheint die Formatierungswerkzeugleiste:

Die Werkzeugleiste ermöglicht Ihnen:

• Einen Absatz in ein Zitat, eine Überschrift, eine Liste, Code oder vorformatierten Text umzuwandeln
• Fett, kursiv, durchgestrichen und unterstrichen anzuwenden
• Text linksbündig, rechtsbündig, zentriert oder im Blocksatz auszurichten
• Einen Link mit der Option hinzuzufügen, in einem neuen Tab zu öffnen
• Ein Inline-Bild direkt in der Zeile einzufügen
• Den Block zu duplizieren, zu verschieben oder zu löschen
• Den Block als HTML zu bearbeiten
• Den Block als wiederverwendbaren Block zu speichern

Auf dem Tab Block in der Seitenleiste finden Sie erweiterte Einstellungen: Schriftgröße, Initial, Hintergrund- und Textfarbe, Innenabstand und benutzerdefinierte CSS-Klasse. Farben können beliebig gesetzt werden; die Palette ist nicht auf Theme-Vorgaben beschränkt.

Bilder hinzufügen

Bilder können auf drei Wegen eingefügt werden: über das „+"-Symbol → Tab Bild, durch Ziehen einer Datei vom Desktop direkt in den Editor oder mit dem Tastaturbefehl /image innerhalb eines Absatzes.

Klicken Sie auf ein beliebiges „+"-Symbol, wählen Sie den Tab Bild, und ein Block mit drei Quellen erscheint: vom Computer hochladen, aus der Medienbibliothek auswählen oder per URL einfügen.

Einen Block über das Einfügemenü auszuwählen ist die visuellste Methode, besonders am Anfang. Sobald Sie sich daran gewöhnt haben, werden Sie zu /image wechseln, aber das visuelle Menü bleibt stets verfügbar.

Nach dem Einfügen eines Bildes bietet die Seitenleiste: Alternativtext (entscheidend für SEO und Barrierefreiheit), Größe, Seitenverhältnis und Stile (Abrundung, Duoton, Schatten und Rahmen).

Der Standarddialog für Mediendateien ist aus dem klassischen Editor vertraut; hier können Sie Titel und Beschreibung festlegen. Die wesentlichen Einstellungen sind jetzt jedoch in der Block-Seitenleiste gebündelt.

In der Praxis empfehlen wir, den Alternativtext stets auszufüllen: Er unterstützt sowohl Suchmaschinen als auch Screenreader-Nutzer. Die Beschreibung sollte konkret sein, 4 bis 8 Wörter umfassen und das Schlüsselwort des Abschnitts enthalten.

Dateien zum Herunterladen

Der Datei-Block ermöglicht es Ihnen, ein PDF, ZIP, Bild oder eine beliebige andere Datei zum Herunterladen für die Leser bereitzustellen.

Laden Sie eine Datei hoch oder wählen Sie eine aus der Mediathek; Gutenberg erstellt automatisch einen Download-Button.

Button-Text und Dateiname sind bearbeitbar. Sie können eine CSS-Klasse für individuelles Styling vergeben. Der Button öffnet standardmäßig in einem neuen Tab.

Zitate und Hervorhebungen

Der Zitat-Block fügt ein gestaltetes Zitat ein. Anders als ein normaler Absatz wird das Zitat visuell hervorgehoben; das Theme wendet eine spezielle Formatierung darauf an.

Die Seitenleiste des Zitat-Blocks erlaubt Ihnen, Hintergrundfarbe, Schriftart und Innenabstand zu konfigurieren. Das Zitat kann wie ein Teil Ihres Corporate Designs wirken, statt wie ein standardmäßiger grauer Block.

Ein Zitat nimmt denselben Text wie ein Absatz auf, hebt sich aber visuell ab. Neben dem Standard-Zitat gibt es das Pullquote (eine größere Hervorhebung) und den Vers-Block (ein Block für Lyrik, der Leerzeichen und Zeilenumbrüche beibehält).

Einbetten von Videos und externen Inhalten

Gutenberg unterstützt das Einbetten von Inhalten aus über 30 Plattformen: YouTube, Vimeo, Twitter, Facebook, SoundCloud, WordPress.tv, Slideshare und weitere. Der Ablauf ist bei allen gleich: Fügen Sie einen Einbetten-Block ein, wählen Sie die Plattform, fügen Sie die URL ein und klicken Sie auf Einbetten.

Fügen Sie die URL ein, klicken Sie auf Einbetten, und der Vorgang ist abgeschlossen. Gutenberg übernimmt automatisch Vorschau, Titel und Video-Thumbnail von YouTube.

Das Video erscheint direkt im Editor; Sie können die Vorschau ansehen, ohne das Admin-Panel zu verlassen. Für YouTube stehen Einstellungen zur Verfügung: Steuerelemente ausblenden, Autoplay aktivieren oder eine Startzeit festlegen.

Buttons und Handlungsaufforderungen

Der Buttons-Block erstellt einen oder mehrere Buttons in einer Reihe. Ideal für Handlungsaufforderungen: „Herunterladen", „Registrieren", „Zu WordPress.org".

Geben Sie den Text ein, fügen Sie die URL ein und konfigurieren Sie den Stil: Füllung, Umrandung, Eckenrundung, Größe. Buttons passen sich automatisch an mobile Endgeräte an; auf schmalen Bildschirmen werden sie auf volle Breite gestreckt.

Gutenberg prüft den Kontrast zwischen Button-Text und Hintergrund: Ist die Farbkombination unlesbar, zeigt der Editor eine Warnung an. Ein kleines Detail, das jedoch Zeit bei Barrierefreiheitsprüfungen spart.

Spalten und Raster

Der Block Spalten erzeugt ein Raster aus 2 bis 6 Spalten. In jede Spalte können Sie beliebige andere Blöcke einfügen: einen Absatz, ein Bild, eine Schaltfläche oder ein Zitat.

Standardmäßig werden zwei Spalten angelegt, aber Sie können die Anzahl und die Breite jeder Spalte in den Blockeinstellungen ändern.

Auf mobilen Geräten stapeln sich die Spalten automatisch vertikal; der Inhalt reißt nicht auseinander und bleibt lesbar. Früher waren dafür CSS-Media-Queries nötig, heute funktioniert es direkt.

Medien & Text: Bild neben Text

Der Block Medien & Text ist einer der nützlichsten für die Gestaltung: ein Bild oder Video auf der linken (oder rechten) Seite, Text mit einer Schaltfläche auf der rechten (oder linken) Seite.

Laden Sie ein Bild hoch, fügen Sie Text hinzu und optional eine Schaltfläche. Die Seiten lassen sich mit einem Klick tauschen.

Und so sieht es auf der Website aus:

Es wirkt professionell und ist in einer Minute erstellt. Für diese Art von Layout braucht es keinen Page Builder.

Blöcke von Drittanbietern: Plugins erweitern Gutenberg

Viele Plugins fügen Gutenberg eigene Blöcke hinzu. WooCommerce ist das prominenteste Beispiel: Nach der Installation des Plugins erscheinen im Editor Blöcke zum Einfügen von Produkten, Warenkörben, Filtern und Shop-Kategorien.

Jetpack ergänzt Blöcke für Formulare, Abonnements und Social-Media-Icons. Yoast SEO bettet Lesbarkeitsanalysen und SEO-Tipps direkt in die Editor-Seitenleiste ein. Contact Form 7 stellt einen Kontaktformular-Block bereit.

Das Prinzip ist überall dasselbe: Plugin installieren, und die Blöcke erscheinen im Einfügemenü. Kein zusätzlicher Code nötig.

Tastenkürzel und Tipps

Der nützlichste Gutenberg-Tipp ist die Taste /. Tippen Sie in einem beliebigen Absatz / und beginnen Sie, den Blocknamen einzugeben. Der Editor zeigt passende Optionen an; wählen Sie mit den Pfeiltasten aus und drücken Sie Enter.

Beispiel: /image → Bild-Block, /heading → Überschrift, /table → Tabelle, /column → Spalten. Nach einer Woche Nutzung beschleunigt dieser Trick Ihre Arbeit erheblich.

Vollständige Liste der Tastenkürzel: Shift + Alt + H (Windows) oder Opt + Ctrl + H (Mac). Damit öffnen Sie eine Übersicht mit allen Shortcuts, vom Verschieben von Blöcken bis zum Wechsel zwischen Bearbeitungsmodi.

Einige weitere Techniken, die wir in der Praxis nutzen:

• Ctrl + Shift + D: ausgewählten Block duplizieren
• Ctrl + Alt + T: neuen Block vor dem aktuellen einfügen
• Ctrl + Alt + Y: neuen Block nach dem aktuellen einfügen
• Klick auf das i-Symbol in der oberen Werkzeugleiste: zeigt die Dokumentstruktur (Überschriften, Wortanzahl, Absätze)
• Listenansicht (Symbol mit drei Strichen oben links): navigiert alle Blöcke des Beitrags als Baumstruktur, praktisch bei langen Artikeln

Und schließlich: Der Fehler „Update fehlgeschlagen" wird meist durch eine instabile Internetverbindung verursacht, nicht durch ein Problem mit dem Editor. Prüfen Sie Ihre Verbindung und versuchen Sie erneut zu speichern.

Video: Gutenberg in 15 Minuten

Möchten Sie alles in Aktion sehen? Dieses kurze Video von WPBeginner zeigt den kompletten Zyklus der Beitragserstellung in Gutenberg, vom ersten Block bis zur Veröffentlichung:

⁉️🤔 Häufig gestellte Fragen

Muss ich Gutenberg separat installieren?

Nein, der Block-Editor ist seit Version 5.0 (veröffentlicht im Dezember 2018) fester Bestandteil des WordPress-Core. Wenn Sie eine aktuelle WordPress-Version nutzen, funktioniert Gutenberg bereits. Das separate Gutenberg-Plugin existiert nur für diejenigen, die neue Blöcke testen möchten, bevor sie in den Core aufgenommen werden.

Kann ich zum klassischen Editor zurückkehren?

Ja, installieren Sie das kostenlose Plugin Classic Editor. Es deaktiviert Gutenberg vollständig und stellt den vertrauten TinyMCE wieder her. Bedenken Sie jedoch: WordPress hat den offiziellen Support für den klassischen Editor 2022 eingestellt. Aktuelle WordPress-Versionen (6.x im Jahr 2026) funktionieren weiterhin mit dem Classic Editor, aber neue Funktionen (Full Site Editing, Block-Themes, Patterns) sind nur in Gutenberg verfügbar.

Wie unterscheidet sich Gutenberg von Elementor oder Divi?

Gutenberg ist der integrierte WordPress-Inhaltseditor: kostenlos und ohne externe Abhängigkeiten. Elementor und Divi sind kommerzielle Page Builder mit erweiterten Designmöglichkeiten: Pop-ups, Slider, Marketing-Integrationen. Für einen typischen Blog oder eine Unternehmenswebsite deckt Gutenberg die wesentlichen Layout-Aufgaben ab. Wenn Sie mit Ihrer Website Geld verdienen (Shop, Landingpages, Funnels), bietet ein Page Builder mehr Flexibilität. Gute Nachricht: Gutenberg und Page Builder arbeiten parallel. Sie können Seiten in Elementor erstellen und Beiträge im Block-Editor verwalten.

Was tun, wenn Blöcke sich auf mobilen Geräten überlappen oder fehlerhaft darstellen?

In der Regel liegt das Problem am Theme, nicht an Gutenberg. Prüfen Sie: (1) ob Ihr aktives Theme den Block-Editor unterstützt (Block-Themes garantieren ein korrektes Layout); (2) ob benutzerdefiniertes CSS die Block-Abstände und -Breiten überschreibt. Wechseln Sie testweise zum Standard-Theme Twenty Twenty-Four; werden Blöcke dann korrekt dargestellt, liegt das Problem an Ihrem Theme.

Wie füge ich einen Block hinzu, der nicht im Standardsatz enthalten ist?

Zwei Optionen: (1) Suchen Sie nach einem Plugin, das den benötigten Block bereitstellt (zum Beispiel bieten Otter Blocks oder Spectra Dutzende zusätzlicher Blöcke), oder (2) erstellen Sie einen eigenen Block über Advanced Custom Fields (ACF), was einfacher ist, als einen Block in React zu programmieren. Für die meisten Aufgaben sind Plugins ausreichend: installieren und nutzen.

Funktioniert Gutenberg mit benutzerdefinierten Beitragstypen (Custom Post Types, CPT)?

Ja, vollständig. Geben Sie bei der Registrierung eines CPT 'show_in_rest' => true und 'supports' => array('editor') an, und der Block-Editor wird automatisch aktiviert. Für bestehende CPTs ohne REST-API-Unterstützung gibt es Adapter-Plugins, besser ist jedoch, die Registrierung des Beitragstyps zu aktualisieren.

Was Sie wählen sollten: Gutenberg oder Page Builder

Gutenberg hat sich von einem experimentellen „Feature" zu einem ausgereiften Editor entwickelt, der Millionen von Websites antreibt. Für Content-Ersteller bedeutet das einen direkten Produktivitätsgewinn: visuelles Layout, sofortige Vorschau und Tastenkürzel sparen bei jedem Beitrag 30 bis 60 Minuten im Vergleich zum klassischen Editor und Shortcode-Plugins.

Betreiben Sie einen Blog, eine Nachrichtenseite oder ein Unternehmensportal, deckt Gutenberg die wesentlichen Aufgaben ab. Kostenlos, ohne externen Code und ohne zusätzliche Serverlast.

Erstellen Sie komplexe Landingpages, einen Onlineshop mit individuellen Layouts oder Marketing-Funnels, werfen Sie einen Blick auf Page Builder. Für die tägliche Content-Arbeit starten Sie Gutenberg, tippen /heading und beginnen einfach zu schreiben.