zurück zum Glossar

Gutenberg Editor – Der WordPress-Block-Editor im professionellen Einsatz

Der Gutenberg Editor hat die Art und Weise verändert wie WordPress-Inhalte erstellt werden

Der Gutenberg Editor ist der Standard-Editor von WordPress seit Version 5.0, die im Dezember 2018 veröffentlicht wurde. Benannt nach Johannes Gutenberg, dem Erfinder des Buchdrucks mit beweglichen Lettern, ersetzt dieser Block-basierte Editor den klassischen TinyMCE-Editor, der WordPress seit seinen Anfängen begleitet hatte. Das Grundprinzip von Gutenberg ist einfach und gleichzeitig revolutionär: Jedes Inhaltselement – ob Absatz, Überschrift, Bild, Liste oder Video – wird als eigenständiger Block behandelt. Diese Blöcke können frei angeordnet, verschoben, kopiert und individuell gestaltet werden, ohne dass HTML-Kenntnisse erforderlich sind. Für Unternehmen und Agenturen bedeutet der Gutenberg Editor eine grundlegende Veränderung im Workflow: Inhalte können visueller, schneller und strukturierter erstellt werden als jemals zuvor in WordPress.

Die Entwicklung des Gutenberg Editors geht weit über einen reinen Text-Editor hinaus. Gutenberg ist Teil eines vierphasigen Entwicklungsplans für WordPress: Einfacheres Editieren (Phase 1, abgeschlossen), Anpassung mit Full Site Editing (Phase 2, weitgehend abgeschlossen), Kollaboration (Phase 3, in Entwicklung) und Mehrsprachigkeit (Phase 4, geplant). Mit Full Site Editing können mittlerweile nicht nur Beitrags- und Seiteninhalte, sondern auch Header, Footer, Seitenleisten und Templates über den Block-Editor gesteuert werden. WordPress entwickelt sich damit von einem Content-Management-System zu einer vollwertigen Website-Baukasten-Plattform, die in vielen Fällen Page Builder wie Elementor oder Divi überflüssig macht.

Professionelle WordPress-Website mit Gutenberg erstellen lassen

Die wichtigsten Block-Kategorien und ihre Einsatzmöglichkeiten

Der Gutenberg Editor organisiert seine Blöcke in mehrere Kategorien, die unterschiedliche Funktionen abdecken. Die Text-Blöcke umfassen Absatz, Überschrift, Liste, Zitat, Code, Preformatiert und Vers. Diese bilden das Fundament jeder Inhaltsseite und bieten über die Block-Einstellungen individuelle Formatierungsoptionen wie Schriftgrösse, Textfarbe und Hintergrundfarbe. Besonders der Absatz-Block ist deutlich leistungsfähiger als sein Vorgänger im Classic Editor: Initialen, Textausrichtung und individuelle Abstände sind direkt im Block konfigurierbar.

Die Medien-Blöcke – Bild, Galerie, Audio, Video, Cover und Datei – ermöglichen die nahtlose Integration multimedialer Inhalte. Der Cover-Block ist besonders vielseitig: Er kombiniert ein Hintergrundbild oder -video mit überlagerndem Text und eignet sich hervorragend für Hero-Bereiche und visuelle Abschnitte. Der Galerie-Block arrangiert Bilder automatisch in einem responsiven Raster und unterstützt Lightbox-Funktionalität. Medien-Blöcke werden direkt aus der WordPress-Mediathek befüllt und unterstützen Drag-and-Drop-Upload.

Die Design-Blöcke bilden das Rückgrat komplexer Layouts. Der Group-Block fasst mehrere Blöcke zusammen und erlaubt gemeinsame Hintergrundfarben und Abstände. Der Columns-Block erstellt mehrspaltige Layouts ohne CSS-Kenntnisse. Der Spacer-Block fügt präzise Abstände ein, und der Separator-Block erzeugt visuelle Trennlinien. Seit WordPress 6.0 stehen zudem Row- und Stack-Blöcke zur Verfügung, die flexiblere Layout-Optionen mit Flexbox-Eigenschaften bieten. Für fortgeschrittene Layouts ist der Query Loop Block zentral – er ermöglicht die Anzeige von Beiträgen mit individuellen Filterkriterien direkt im Editor.

Full Site Editing – Gutenberg als vollständiger Website-Builder

Full Site Editing, kurz FSE, erweitert den Gutenberg Editor vom reinen Inhalts-Editor zum vollständigen Website-Builder. Mit FSE können alle Bereiche einer Website über den Block-Editor gesteuert werden: Header, Footer, Seitenleisten, Archivseiten, Suchergebnisse und 404-Seiten. Die Grundlage bilden Block-Themes, die im Gegensatz zu klassischen Themes keine PHP-Templates verwenden, sondern HTML-basierte Template-Dateien mit Block-Markup.

Der Site Editor, erreichbar über Design > Editor im WordPress-Backend, bietet eine zentrale Oberfläche für die Bearbeitung aller Website-Templates. Hier können globale Styles definiert werden – Schriftarten, Farben, Abstände und Layout-Einstellungen, die für die gesamte Website gelten. Template Parts ermöglichen wiederverwendbare Bereiche wie Header und Footer, die einmalig definiert und auf allen Seiten eingesetzt werden. Globale Styles werden in der Datei theme.json gespeichert, die als zentrale Konfigurationsdatei für Block-Themes dient.

Für Agenturen und Entwickler bietet Full Site Editing erhebliche Vorteile. Die Entwicklung eines Block-Themes erfordert deutlich weniger PHP-Code als ein klassisches Theme. Kunden können nach der Übergabe eigenständig Änderungen an Header, Footer und Templates vornehmen, ohne in Theme-Dateien eingreifen zu müssen. Die theme.json-Datei ermöglicht eine präzise Kontrolle darüber, welche Gestaltungsoptionen dem Kunden zur Verfügung stehen – von der Farbpalette über erlaubte Schriftgrössen bis hin zu Layout-Optionen. So können Agenturen sicherstellen, dass die Corporate-Design-Vorgaben eingehalten werden, während Kunden maximale Flexibilität bei der Inhaltspflege geniessen.

Full Site Editing für Ihre WordPress-Website einrichten lassen

Kostenlose Erstberatung: WordPress mit Gutenberg professionell umsetzen

Erfahren Sie, wie der Gutenberg Editor und Full Site Editing Ihre WordPress-Website zukunftssicher machen – mit weniger Plugins, besserer Performance und voller Gestaltungsfreiheit.

Jetzt Beratung anfragen

Gutenberg vs. Page Builder – wann lohnt sich welcher Ansatz

Die Frage, ob der Gutenberg Editor Page Builder wie Elementor, Divi oder WPBakery ersetzen kann, ist eine der meistdiskutierten in der WordPress-Community. Die Antwort hängt vom konkreten Anwendungsfall ab. Gutenberg bietet mit Full Site Editing mittlerweile eine solide Grundlage für die meisten Website-Projekte. Die Vorteile gegenüber Page Buildern sind klar: keine zusätzliche Plugin-Abhängigkeit, bessere Performance durch weniger JavaScript und CSS, native WordPress-Integration und langfristige Zukunftssicherheit, da Gutenberg vom WordPress-Core-Team entwickelt wird.

Page Builder behalten ihre Berechtigung bei Projekten, die hochgradig individuelle Designs erfordern, die über die Gutenberg-Möglichkeiten hinausgehen. Elementor und Bricks Builder bieten präzisere Kontrolle über Abstände, Animationen, Responsive-Design und visuelle Effekte. Für Agenturen, die häufig komplexe Landingpages oder Portfolio-Seiten erstellen, kann ein Page Builder den Entwicklungsprozess beschleunigen. Die Kosten für eine professionelle WordPress-Website mit Gutenberg liegen typischerweise zwischen 3.000 und 10.000 Euro, während komplexe Projekte mit Page Buildern und individuellen Designs zwischen 10.000 und 20.000 Euro kosten können.

Die empfohlene Strategie für 2026 lautet: Gutenberg als Standard einsetzen und Page Builder nur dort nutzen, wo der Block-Editor an seine Grenzen stösst. Für Content-lastige Websites – Blogs, Unternehmensseiten, Wissensportale – ist Gutenberg die optimale Wahl. Für Design-intensive Projekte mit komplexen Animationen und individuellen Layouts kann ein Page Builder die bessere Option sein. In jedem Fall sollte die Entscheidung zu Projektbeginn getroffen und konsequent durchgehalten werden – ein Mix aus Gutenberg und Page Builder auf derselben Website führt erfahrungsgemäss zu Wartungsproblemen und Performance-Einbussen.

Häufige Fehler beim Einsatz des Gutenberg Editors

Fehler Nummer eins: Zu viele Plugins für Block-Erweiterungen installieren

Der WordPress-Plugin-Markt bietet Dutzende von Block-Bibliotheken: Spectra, Stackable, Kadence Blocks, GenerateBlocks und viele mehr. Jedes dieser Plugins fügt dem Editor zahlreiche neue Blöcke hinzu. Die Versuchung ist gross, mehrere dieser Bibliotheken gleichzeitig zu installieren, um eine maximale Auswahl zu haben. Das Ergebnis ist jedoch häufig ein aufgeblähter Editor mit Hunderten von Blöcken, die selten genutzt werden, und ein spürbarer Performance-Verlust durch das zusätzliche JavaScript und CSS. Beschränken Sie sich auf maximal eine Block-Bibliothek und nutzen Sie vorrangig die Gutenberg-eigenen Blöcke. Bei Bedarf können einzelne Blöcke über eigene Block-Plugins oder ACF Blocks ergänzt werden.

Fehler Nummer zwei: Wiederverwendbare Blöcke und Block Patterns ignorieren

Viele WordPress-Nutzer erstellen identische Inhaltselemente – Call-to-Action-Boxen, Hinweisfelder, Kontaktbereiche – immer wieder von Grund auf neu. Der Gutenberg Editor bietet mit Wiederverwendbaren Blöcken (seit WordPress 6.3 als Synced Patterns bezeichnet) und Block Patterns leistungsstarke Werkzeuge zur Wiederverwendung. Synced Patterns werden an einer Stelle gepflegt und ändern sich automatisch überall, wo sie eingesetzt werden. Block Patterns dienen als Vorlagen, die nach dem Einfügen individuell angepasst werden können. Investieren Sie die Zeit, häufig verwendete Layouts als Patterns anzulegen – das spart langfristig erhebliche Bearbeitungszeit und sorgt für ein konsistentes Erscheinungsbild.

Fehler Nummer drei: Die theme.json-Konfiguration vernachlässigen

Die Datei theme.json ist das Herzstück jedes modernen WordPress-Themes und steuert, welche Gestaltungsoptionen im Editor zur Verfügung stehen. Ohne eine durchdachte theme.json-Konfiguration haben Redakteure Zugriff auf alle Farben, Schriftgrössen und Layout-Optionen – was häufig zu einem inkonsistenten Design führt. Definieren Sie in der theme.json eine klare Farbpalette, begrenzte Schriftgrössen und konsistente Abstände, die zum Corporate Design passen. Deaktivieren Sie Optionen, die nicht benötigt werden, über die settings-Konfiguration. Eine sorgfältig konfigurierte theme.json schützt das Design vor unbeabsichtigten Änderungen und erleichtert die Inhaltspflege für Redakteure.

Häufig gestellte Fragen zum Gutenberg Editor

Kann man den Gutenberg Editor deaktivieren und den Classic Editor verwenden

Ja, mit dem offiziellen Classic Editor Plugin kann der Gutenberg Editor deaktiviert und der klassische TinyMCE-Editor wiederhergestellt werden. Das Plugin wird mindestens bis 2025 offiziell unterstützt. Allerdings ist der langfristige Wechsel zu Gutenberg empfehlenswert, da immer mehr WordPress-Funktionen – insbesondere Full Site Editing und Block-Themes – den Block-Editor voraussetzen. Neue Plugins und Themes werden zunehmend für Gutenberg optimiert, sodass die Nutzung des Classic Editors die verfügbaren Optionen langfristig einschränkt.

Ist der Gutenberg Editor für SEO geeignet

Der Gutenberg Editor ist hervorragend für SEO geeignet. Die Block-Struktur fördert semantisch korrektes HTML mit klaren Überschriftenhierarchien. Bilder erhalten automatisch Alt-Texte und responsive Quellenangaben. Die Performance-Vorteile gegenüber Page Buildern – weniger JavaScript, schnellere Ladezeiten – wirken sich positiv auf die Core Web Vitals aus. SEO-Plugins wie Rank Math und Yoast SEO sind vollständig mit Gutenberg kompatibel und bieten Block-spezifische Optimierungsmöglichkeiten. Für Content-fokussierte SEO-Strategien ist Gutenberg aktuell die beste Wahl unter den WordPress-Editoren.

Wie erstellt man eigene Gutenberg-Blöcke

Eigene Gutenberg-Blöcke können auf drei Wegen erstellt werden. Der offizielle Weg verwendet das @wordpress/create-block Paket, das ein vollständiges Block-Plugin-Gerüst generiert – dieser Ansatz erfordert Kenntnisse in React und JavaScript. Für PHP-Entwickler bietet ACF Blocks eine Alternative, bei der Blöcke in PHP registriert und gerendert werden. Der dritte Weg nutzt Block Patterns, die aus bestehenden Blöcken zusammengesetzt werden und keine Programmierung erfordern. Für die meisten Agenturprojekte ist ACF Blocks der pragmatischste Ansatz, da er die vorhandenen PHP-Kenntnisse nutzt und schnelle Ergebnisse liefert.

Welche WordPress-Version wird für den Gutenberg Editor benötigt

Der Gutenberg Editor ist seit WordPress 5.0 (Dezember 2018) der Standard-Editor und in jeder neueren WordPress-Version enthalten. Für die neuesten Funktionen wie Full Site Editing, Synced Patterns und erweiterte Layout-Optionen wird mindestens WordPress 6.2 empfohlen. Das Gutenberg-Plugin auf WordPress.org bietet Zugang zu Funktionen, die erst in zukünftigen WordPress-Versionen integriert werden. Für Produktionsumgebungen empfiehlt sich die Nutzung der in WordPress integrierten Gutenberg-Version, da diese stabiler und besser getestet ist als die Plugin-Variante.

Kostenlose Beratung zu WordPress und Gutenberg

Autor

David Keiser

David Keiser bringt über 10 Jahre Erfahrung im Webdesign und der Suchmaschinenoptimierung mit und gilt als ausgewiesener Experte aus Recklinghausen.

Rückruf vereinbaren

Wir melden uns innerhalb von 24 Stunden zurück.

Trage dich in das Kontaktformular ein und wir melden uns, innerhalb von 24 Stunden bei dir.

Der Rückruf ist kostenlos und du erhälst keine Werbung.

Du hast ein spannendes Projekt? Lass uns darüber sprechen.

Schicke uns einfach eine unverbindliche Anfrage und wir melden uns innerhalb von 24 Stunden zurück.
100% unverbindlich & persönlich.