Der WordPress Editor Gutenberg für Webentwickler


07.12.2018
CMS

Seit heute ist der Gutenberg Editor fester Bestandteil von WordPress. WordPress 5.0 bietet zwar weiterhin die Möglichkeit, den klassischen Editor zu verwenden. Der Support wird allerdings nach 2021 eingestellt.

Der neue Gutenberg Editor von WordPress im Einsatz
Der neue Gutenberg Editor von WordPress im Einsatz

Grund genug sich mit dem neuen Gutenberg Editor auseinanderzusetzen. In diesem Artikel teile ich meine ersten Eindrücke aus Sicht eines Webentwicklers (statt aus der Sicht des Redakteurs). Dabei gehe ich nicht im Detail auf den Code ein (weil ich es tatsächlich für mich selbst noch nicht gemacht habe), sondern schaue mir erst einmal die generellen Möglichkeiten an. Was ändert sich für Webentwickler, die für ihre Kunden WordPress Webseiten erstellen oder pflegen?

Ohne Plugins individuelle Contentelemente erstellen

Viele Websites haben eigene Anforderungen an sich wiederholende Elemente. Um diesen Anforderungen gerecht zu werden, mussten Webentwickler häufig Plugins wie ACF oder Metaboxes installieren. Gutenberg bietet die Möglichkeit, individuelle Inhaltselemente zu erstellen. Der User muss dann nur noch entsprechend die Parameter übergeben. Leider sind die Möglichkeiten der neuen Blockelemente (noch) beschränkt. Wer als komplexe Abfragen (Bedingungen, Schleifen, etc.) in seinen Block integrieren will, muss immer noch auf ein Plugin zurückgreifen.

Baukasteneditor als natives Feature von WordPress

Im Gegensatz zu einem CMS wie TYPO3 hatte WordPress nie von Haus aus ein Baukastensystem. Darunter verstehe ich, dass zum Bespiel die Reihenfolge von individuellen Inhaltselememten per Drag and Drop angepasst werden kann. Um dieses Feature auch bei WordPress zu verwenden, musste man sich Plugins wie Visual Composer, Beaver Builder oder Live Composer zurückgreifen. Jedoch ist der Einsatz von Plugins immer kritisch, da Sicherheitslücken, Wartungsaufwand und Performanceverlust damit einhergehen. Mit dem WordPress Gutenberg Editor ist dieses Feature nun standardmäßig dabei.

Integration von Plugins in die Blockelemente

Ich bin ein großer Fan von ACFPro und nutze es in vielen Projekten. Ein tolles Feature von ACF ist, dass nicht nur Seiten durch ACF erweitert werden können, sondern auch Optionen, Kategorien und Taxonomien. Das gleiche gilt ab jetzt auch für die neuen Blockelemente. Mit dem Plugin Block Options for Gutenberg Editor kann man die Anzeige der Gutenberg Block Elemente von ACF Feldern abhängig machen.

Aussehen der Block Elemente für das Backend anpassbar

Standardmäßig ist die Optik der Blocks im Backend ähnlich wie im Frontend. WordPress bietet jedoch die Möglichkeit, ein eigenes Stylesheet für den Editor hinzuzufügen, um den User im Backend besser an die Hand nehmen zu können.

JavaScript Notation

Die Konfiguration der Blockelemente und deren Events wird nicht in PHP geschrieben, sondern in JavaScript. Für Entwickler, die bisher eine Kombination aus PHP und HTML gewohnt waren ist das eine große Veränderung. Der Workflow erinnert tatsächlich stark an reaktive JavaScript Frameworks wie Vue, Angular oder React. Die JavaScript Komponenten lassen sich mit serverseitigen Abfragen in PHP kombinieren. Da auch bei WordPress die Zukunft anscheinend JavaScript heißt, unterstützt WordPress glücklicherweise ES6 (Ecma Script 6, bzw. ES2015), wodurch sich das Schreiben von JavaScript Code wesentlich vereinfacht.

WP-CLI als Helfer

Bisher habe ich noch nicht intensiven Kontakt mit der WordPress Konsole. Komisch eigentlich, ist Artisan bei Laravel doch mein täglicher Begleiter. Das wird sich aber jetzt vermutlich ändern. Denn das Aufsetzen neuer Block Template Elemente ist komplexer, als es das bei ursprünglichen WordPress Elementen war (eigentlich gut, da View, Modelling und die Logik so getrennt sind). Doch mit WP-Cli lassen sich neue Elemente sofort über die Konsole erstellen und teils auch gleich konfigurieren.

Fazit

Das waren meine ersten, subjektiven Eindrücke, bevor ich jetzt tiefer in die Materie eintauchen werden und tatsächlich meine ersten „richtigen“ Blocktemplates schreiben werde (die mehr als „Hallo Welt“ können). Was für normale Websitebetreiber vor allem Komfortfeature ist, ist für Webentwickler, die sich einen WordPressworkflow angeeignet haben, ein großer Umbruch. Um Umbrüche machen zunächst Angst. Aus technischer Sicht bin ich aber sicher, dass die Neuerungen WordPress als CMS aufwerten und zukunftsfähiger machen.

Wer ohnehin bereits viel mit modernen JavaScript Frameworks arbeitet, wird es beim Umstieg sicherlich einfacher haben.

Ich für meinen Teil bin froh, dass mir 2019 schon die ersten „frischen“ WordPress Projekte bevorstehen. Denn die konkreten Anlässe werden mich auf jeden Fall dazu zwingen, mich intensiv mit den neuen Möglichkeiten von Gutenberg auseinanderzusetzen. Und am Ende ist es ja das, was das Webentwicklerleben ausmacht: Gefühlt alle vier Wochen neue Frameworks und Techniken lernen 🙂


Sag mir deine Meinung


    1. Danke für den Hinweis. Allerdings ist es jetzt auch möglich mit WP-CLI direkt Blocktemplates zu erstellen. 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Name