Der Gutenberg Editor auf dem Weg zum Page Builder

In einem weiteren Beitrag über das Gutenberg Projekt gehe ich auf die neuesten Layout-Features ein, welche seit meinem letzten Test im November hinzugefügt wurden. Diese neue Funktionen zeigen den neuen Gutenberg Editor auf dem Weg zum Page Builder.

Im November habe ich zum letzten Mal von der Entwicklung des Gutenberg Editors berichtet. Im damaligen Beitrag habe ich das Gutenberg Plugin in Version 1.7 ausführlich getestet und vorgestellt. Inzwischen folgten fünf weitere Major Releases bis zur derzeitigen Version 2.2.0.

Es hat sich also viel getan.

Natürlich gab es wieder zahlreiche Verbesserungen für Design, Usability, Accessibility, Mobile Experience und Extensibility. Der Editor wird bereits an vielen Stellen feinpoliert und die Liste von Bugfixes ist lang. Ein Merge Proposal für Gutenberg scheint näher zu rücken.

Viel interessanter finde ich aber die neuen Features, welche in den letzten Releases dazu gekommen sind. Diese zeigen immer deutlicher, dass Gutenberg mehr als nur ein neuer Editor sein soll und lassen das Potential von Gutenberg als Page Builder erkennen.

Block Templates

Mit Version 1.8 von Gutenberg wurden Block Templates eingeführt.

Als Block Template kann man sich eine definierte Liste von Blocks vorstellen, die direkt im Editor beim Erstellen eines Posts als Vorlage angezeigt werden und bereits Attribute und Platzhalter enthalten. Die Blocks müssen dann nur noch vollständig ausgefüllt werden.

Gutenberg Block Template

Beispiel: Ein Event Plugin registriert einen Custom Post Type für Events mit Block Template. Beim Erstellen eines neuen Events werden dem Nutzer gleich Blocks für Bild, Beschreibung, Datum, Zeit und Ort des Events angezeigt, die er nur noch ergänzen muss.

Momentan können Block Templates nur für komplette Post Types definiert werden, also Beiträge, statische Seiten oder Custom Post Types. Es ist aber geplant, das Block Templates auch als Page Templates für individuelle Seiten vom Theme bereitgestellt werden können und auch der Nutzer Templates zur Wiederverwendung abspeichern kann.

Wiederverwendbare (Reusable) Blocks

Im Dezember kam dann mit Version 1.9 die Implementierung von Reusable Blocks, welche sehr viele Möglichkeiten eröffnen. In der deutschen Übersetzung wird das Feature wohl als wiederverwendbare oder auch globale Blocks bezeichnet werden.

Damit kann nun jeder Block in einen Reusable Block umgewandelt und abgespeichert werden. Die gespeicherten Blocks lassen sich dann in anderen Beiträgen und Seiten wiederverwenden. Die Blocks sind global, d.h. mit Bearbeitung des Blocks wird dieser überall geändert, wo er eingesetzt wird.

Gutenberg Reusable Block

Autor Bio, Intro Texte, Newsletter Info – die Anwendungsfälle dafür sind zahlreich.

Viele Plugins wie beispielsweise Slider und Kontaktformulare setzen momentan auf Custom Post Types, welche dann mit Shortcode in die eigentliche Seite eingefügt werden. Spätestens mit Reusable Blocks kann man sich solche CPTs in Zukunft sparen und einfach ein Plugin für einen Slider oder Formular Block installieren.

Langfristig gesehen werden Reusable Blocks wahrscheinlich auch eine wichtige Rolle spielen, wenn Gutenberg auf weitere Bereiche nach WordPress 5.0 ausgedehnt wird und auch Widgets, Menüs und sogar Header und Footer auf Blocks basieren sollen.

Verschachtelte (Nested) Blocks

Die nächste interessante Funktion sind Nested Blocks. Damit können Blocks verschachtelt werden, d.h. es gibt Parent und Child Blocks. Dieses Feature ist die Voraussetzung für eine Schlüsselkomponente in jedem Page Builder – mehrspaltige Layouts.

Nested Blocks sind zurzeit noch mitten in der Entstehung, ein erstes Konzept wurde jedoch vor wenigen Tagen mit Version 2.2 von Gutenberg veröffentlicht. Es wurde ein neuer experimenteller Block Columns und eine InnerBlocks Komponente hinzugefügt. Damit können nun Blocks in mehreren Spalten angelegt werden.

Gutenberg Columns Block

Der experimentelle Status des neuen Columns Block zur Erstellung von Spalten ist recht deutlich. Das Ganze fühlt sich noch sehr hakelig an. Deshalb sollte man dieses Feature nicht voreilig beurteilen. Mit Sicherheit wird die Usability bis zum nächsten Gutenberg Release noch deutlich verbessert werden.

Coming Soon: Drag & Drop

Vor Kurzem wurde auch eine Liste mit allen Features und dem Umfang des neuen Editors veröffentlicht, welche beim Release von WordPress 5.0 enthalten sein sollen:

Scope & Features: MVP

Während die meisten Features bereits umgesetzt wurden, findet man unter Remaining noch den Punkt Drag & Drop functionality for moving and adding blocks.

Gutenberg Drag & Drop
Drag & Drop von Gutenberg Blocks, Quelle: Github

Mit Drag & Drop können die Blocks mit gedrückter Maustaste an eine neue Position gezogen werden und damit schneller angeordnet und sortiert werden. Gerade in Kombination mit mehrspaltigen Blocks ist das Feature ein Must-have für einen Page Builder.

Fazit

Der Gutenberg Editor auf dem Weg zum Page Builder?

Diese These mag vielleicht etwas gewagt und verfrüht klingen. Schließlich wird Gutenberg nicht ansatzweise an die ganzen Features und Optionen von derzeit im Markt erhältlichen Page Builder Plugins heranreichen.

Nicht vergessen sollte man aber das Ökosystem um WordPress. Zahlreiche Entwickler werden zum Release von WordPress 5.0 neue Plugins veröffentlichen, die zusätzliche Blocks hinzufügen und den Gutenberg Editor mit weiteren Optionen erweitern werden.

Mit Nested & Reusable Blocks, Templates und Drag&Drop schafft Gutenberg auf jeden Fall viele technische Vorraussetzungen, auf die Developer aufbauen können. Das Potential für Gutenberg als vollwertigen Page Builder ist also vorhanden.

Was denkt ihr?