Gutenberg – der neue WordPress-Editor

Bei der Layout-Gestaltung waren WordPress-Redakteure lange Zeit stark eingeschränkt, egal ob sie mit dem Texteditor oder dem visuellen Editor von WordPress gearbeitet haben. Mehr als Text-Bild-Kombinationen waren ohne Programmierkenntnisse in der Regel nicht möglich. Das war auch gar nicht nötig, denn WordPress war ursprünglich als reine Blog-Software konzipiert worden.

Mittlerweile hat sich WordPress aber zu einem gern und viel genutzten Content-Management-System für Webseiten gemausert. Daher Und eine immer größer werdende Community stellt Tools und Plugins bereit, um die Gestaltungsmöglichkeiten zu erweitern.

So wurden in den letzten Jahren zahlreiche Page Builder entwickelt, die es auch Redakteuren ohne Programmier-Know-how erlauben, komplexere Layouts und Seiten zu gestalten. Viele der Themes, die jetzt zur Seitengestaltung zur Verfügung stehen, sind auf einen speziellen Page Builder ausgelegt und liefern diesen auch gleich mit. Die beherrschenden Editoren der letzten Jahre waren Divi, Visual Composer, Beaver Builder und Elementor.

Als WordPress Agentur setzen wir dieses CMS gerne für kleinere und mittlere Projektgrößen ein.

Was ist Gutenberg?

Der Editor Gutenberg hat den Standard-Editor von WordPress abgelöst und ist seit Version 5.0 standardmäßig in WordPress integriert. Er ist kein Plugin, muss also nicht zusätzlich installiert werden. Gutenberg ist kein reiner Editor mehr, sondern eigentlich schon ein Page Builder, mit dem man aus verschiedenen Bausteinen, sogenannten „Blöcken“, ganz individuelle, mehrspaltige Layouts erstellen kann, die auch professionellen Ansprüchen genügen.

Wie funktioniert Gutenberg?

Gutenberg basiert auf dem Konzept der „Blöcke“. Ähnlich wie bei traditionellen Druckerpressen werden hier fertige Bausteine in beliebiger Kombination angeordnet. Ein Block besteht aber nicht aus einem einzelnen Buchstaben, sondern das können ganz unterschiedliche User-Interface-Komponenten sein, etwa ein Textabsatz, ein Bild, eine Überschrift, ein Video oder eine Bildergalerie. Aber auch Tabellen, Spalten und Text+Media-Kombinationen können einzelne Blöcke sein. Gerade die Spalten spielen eine besonders wichtige Rolle bei Gutenberg. Sie lassen sich einfach mit anderen Blöcken bestücken und so kann man mit vergleichsweise wenig Aufwand auch komplexere Layouts anlegen. Die Zeiten von monotonen vertikalen Text-Bild-Abfolgen sind damit endgültig vorbei.

Alle Elemente können per Drag-and-drop beliebig verschoben und verschachtelt werden. Und das Schöne bei Gutenberg: Im Editor sieht das Layout exakt so aus wie auf der Website. Es gibt also keine böse Überraschung, wenn man sich die Seite später live anschaut.

Besonders hilfreich und praktisch sind die wiederverwendbaren Blöcke. Mit diesem Feature kann man Kombinationen, die man für eine Seite erstellt hat, einfach abspeichern und an anderer Stelle erneut einsetzen.

Lässt sich Gutenberg erweitern?

Ganz nach dem WordPress-Motto „Mehr erreichen mit weniger Plugins“ bietet Gutenberg nur eine begrenzte Anzahl von Funktionen. Mit etwas Fantasie und cleverem Einsatz lassen sich damit aber bereits anspruchsvolle Layouts erstellen. Es ist also nicht mehr nötig, einen zusätzlichen Page Builder zu installieren, nur weil man gerne ein mehrspaltiges Layout hätte. Das schafft man auch problemlos mit Gutenberg.

Doch Gutenberg wäre nicht der standardmäßige Editor von WordPress, wenn er nicht erweiterbar wäre. Wem die Basis-Version des Editors nicht genügt, der kann diesen beliebig mit Custom-Blöcken ergänzen. Diese bekommt man entweder einzeln oder auch als ganze Block Libraries.

Liste mit einzelnen Blöcken:

Bekannte Block Libraries:

Die zusätzlichen Blöcke werden per Plugin installiert und sind dann im Gutenberg-Editor verfügbar.

Vor- und Nachteile von Gutenberg

Vorteile


Nachteile

Kann man den Gutenberg-Editor ausprobieren?

Besser als jede noch so anschauliche Erklärung ist es, Dinge selbst auszuprobieren. WordPress bietet deshalb einen Live-Editor, um den Gutenberg einfach mal zu testen:

https://de.wordpress.org/gutenberg/