Zweiter Blick auf den WordPress Gutenberg Editor

Die Entwicklung des neuen Gutenberg Editors für WordPress 5.0 schreitet kontinuierlich voran. Zeit, erneut einen Blick auf das ambitionierte Projekt zu werfen und das Gutenberg Feature Plugin zu testen. Hält der neue Gutenberg Editor, was er verspricht?

Die erste Beta in Form eines Feature Plugins für den neuen Gutenberg Editor wurde im Juni auf dem WordCamp Europe in Paris vorgestellt und auf WordPress.org veröffentlicht.

Direkt nach der Veröffentlichung habe ich das Plugin bereits ausgiebig getestet.

Falls du mit Gutenberg als Begriff noch nichts anfangen kannst, empfehle ich für eine Einführung in das Thema meinen ersten Beitrag zu lesen: Die Zukunft von WordPress sind Blocks: Neuer Gutenberg Editor als Beta Plugin veröffentlicht

In meinem ersten Test mit Version 0.2 sah Gutenberg noch so aus:

Gutenberg Editor Version 0.2

Entwicklung von Gutenberg bis heute

Gutenberg wurde ursprünglich in Version 0.1.0 veröffentlicht und hat seitdem fast jede Woche ein neues Update erhalten. Die aktuelle Version (November 2017) ist 1.7.0.

Hier ist ein kleine Übersicht des bisherigen Projektverlaufs.

Juni und Juli – Version 0.2 bis 0.6

Wichtige Features der ersten fünf Releases waren unter anderem:

  • Default Styling für Blocks im Frontend
  • API für Benachrichtigungen im Editor
  • Navigation von Blocks mit Hoch/Runter Pfeilen
  • API zum Einfügen von Text aus externen Quellen
  • Suchfunktion im Block Inserter
  • Neue Blocks für Custom HTML, Read More, Cover Text und Cover Image

August – Version 0.7 bis 1.0

Es wurde vor allem der Text-Block verbessert und viele neue Blocks hinzugefügt:

  • 0.7 – Verbesserung der Platzhalter und bessere Integration mit WordPress Themes
  • 0.8 – Fünf neue Blöcke für Kategorien, Text Spalten, Shortcode, Audio, und Video
  • 0.9 – Verbesserte Optionen für Farben und Schriftgröße im Cover Text Block
  • 1.0 – Zusammenfügen der Blocks für Cover Text und Paragraph

September – Version 1.1 bis 1.2

Im September gab es nur zwei Updates:

  • 1.1 – Autocomplete beim Hinzufügen von Blocks und Inline Bearbeitung im Galerie Block
  • 1.2 – Unterstützung für Postmeta und erstes Konzept für Extended Settings

Oktober – Version 1.3 bis 1.5

Im Oktober erfolgte endlich die erste Implementierung von Metaboxen:

  • 1.3 – Usability Improvements, Opacity Slider für Cover Image und Feedback Option
  • 1.4 – HTML Modus für Blocks und Anpassung der REST API für Reusable Blocks
  • 1.5 – Support für Metaboxen und Inserter Button zwischen den Blöcken

November – Version 1.6 und 1.7

Größte Änderung war die Fixierung der Block Toolbar und Metaboxen ohne Iframes:

  • 1.6 – Verbesserung der Writing Experience und Fixierung der Block Toolbar
  • 1.7 – Metaboxen ohne Iframes und Multi-Block Transform Feature

Neben den größeren Features wurde auch an unzähligen Details gefeilt, um die Usability und Accessibility des Editors zu verfeinern. Meine kurze Übersicht wird deshalb nicht ansatzweise dem gerecht, was sich alles geändert hat. Die Liste ist sehr sehr lang.

Aus diesem Grund lohnt sich ein erneuter Test des Gutenberg Editors.

Gutenberg Editor im Test

Wer den Gutenberg Editor selbst ausprobieren möchte, findet das Beta Plugin weiterhin im WordPress.org Plugin Verzeichnis.

Das Gutenberg-Plugin bietet Funktionen zum Bearbeiten, Anpassen und Erstellen von Websites in WordPress. Mit diesem Beta-Plugin kannst du Bleeding-Edge-Funktionen testen …

By Gutenberg Team

(3.736)
Last Updated: 6 Tagen ago
300.000+ Active Installs
Compatible up to: 6.4.3

Nach wie vor wird Gutenberg sehr schlecht bewertet. Das liegt meiner Meinung nach an dem gerade am Anfang noch sehr unfertigem Status des Plugins, was mehr eine Alpha als Beta Version war. Der Editor wird aber sehr aktiv weiter entwickelt und laufend verbessert.

Ich empfehle deshalb, dem Gutenberg Editor eine Chance zu geben und das Plugin unbedingt selbst zu testen, nicht nur meinen Beitrag zu lesen 🙂

Erster Eindruck – Viel aufgeräumter, flüssiger und schneller

Der erste Eindruck von Gutenberg in Version 1.7 ist sehr sehr gut. Kein Vergleich mehr zu meinem ersten ausführlichen Test der Version 0.2.

Für eine wesentliche Verbesserung halte ich die Platzierung aller Buttons bzw. der Toolbar in der oberen Leiste des Editors. Damit sind die Buttons zur Formatierung des Texts nun immer an der gleichen Stelle zu finden, und nicht mehr direkt im Inhalt dem Block zugeordnet.

Gutenberg fühlt sich dadurch wesentlich aufgeräumter und eleganter an. Vorher wurden die Buttons mit Auswählen eines Blocks im Text angezeigt, was ich jedoch als sehr störend empfand. Die vielen Boxen verdeckten häufig den Text, blendeten zu viele Optionen auf einmal ein und störten damit den Schreibfluss ungemein. Nun ist das sehr viel besser gelöst.

Auch die zahlreichen Performance Updates merkt man – Gutenberg fühlt sich inzwischen sehr schnell und flüssig an. Das liegt auch an den vielen kleinen Verbesserungen in der Usability, welche die etwas hakelige Bedienung in den ersten Versionen des Plugins weitgehend beseitigt haben. Auch die Bedienung nur mit Tastatur wurde verbessert.

Verbesserte Usability zum Erstellen von Blocks

Viele kleine Details erleichtern inzwischen das Erstellen und Hinzufügen von Blocks.

Block Inserter

Der Block Inserter unterstützt nun eine Suche, um schnell den richtigen Block zu finden. Außerdem werden die zuletzt verwendeten Blocks direkt angezeigt. Auch ein Einfügen eines neuen Blocks zwischen zwei bestehenden Blöcken ist nun möglich.

Gutenberg Block Inserter

Bilder einfügen

Bilder können nun einfach mit Drag & Drop von einem Desktop Ordner an eine beliebige Stelle im Editor gezogen werden. Gutenberg legt automatisch einen Block für das Bild an und läd das Bild in die Mediathek hoch. Ein manuelles Hinzufügen eines Bild-Blocks vor dem Upload ist also nicht mehr notwendig.

Blocks umwandeln

Ebenfalls neu ist der Transform-Button, mit dem bestehende Blocks schnell umgewandelt werden können. Ein normaler Text-Block kann beispielsweise mit einem Klick zu einem Block für Überschrift, Zitat oder Liste transformiert werden.

Transform Blocks Dialog in Gutenberg

Blocks mit Tastatur einfügen

Ein oft geäußerter Kritikpunkt waren die vielen notwendigen Mausklicks zum Erstellen der einzelnen Blocks. Durch den ständigen Wechsel zwischen Tastatur und Maus wurde der Schreibfluss unnötig oft unterbrochen.

Inzwischen lässt sich ein Beitrag relativ flüssig in Gutenberg schreiben. Mit einem Enter wird automatisch ein neuer Textblock angelegt und es kann einfach weitergeschrieben werden.

Wird ein anderer Block benötigt, reicht die Eingabe eines Slashs / als erstes Zeichen im Text. Danach kann der Name des Blocks eingegeben und aus der Liste ausgewählt werden.

Gutenberg Editor: Block mit Tastatur einfügen

Das Autocomplete Feature zeigt automatisch die Blocks an, welche zum eingegeben Stichwort passen. Blocks können so sehr schnell per Tastatur hinzugefügt werden.

Text von externen Quellen einfügen

Es wurde auch an einer API gearbeitet, damit Text von externen Quellen wie Microsoft Word oder Google Docs einfach eingefügt werden kann.

Das funkioniert schon recht gut. Es reicht beispielsweise, den Inhalt eines Google Docs einfach in den ersten Text-Block zu kopieren. Gutenberg erstellt daraus einzelne Blocks und erkennt dabei automatisch Text, Überschriften und Listen.

Block Einstellungen und Block HTML bearbeiten

Die rechte Sidebar zeigt nun zwei Tabs. Document bezieht sich auf den kompletten Beitrag, beinhaltet daher die typischen Metaboxen für Kategorien, Schlagworte, Beitragsbild usw.

Der Tab Block hingegen bezieht sich immer auf den aktuell ausgewählten Block. Bei einem Überschriften-Block werden zum Beispiel diese Einstellungen angezeigt:

Gutenberg: Block Einstellungen

Die Block-Einstellungen können mit einem Klick auf das Menü-Symbol des jeweiligen Blocks aufgerufen werden. Mit dem Menü-Icon kann der Block alternativ auch gelöscht oder der HTML Code des Blocks bearbeitet werden.

Gutenberg: Block Menü

Das Bearbeiten des HTML Codes eines einzelnen Blocks ist in meinen Augen ein super Feature. Wie oft habe ich schon im Textmodus nach der richtigen Stelle im HTML gesucht…

Der Textmodus, welcher den kompletten Beitrag in HTML zeigt, wird damit fast überflüssig.

Zweistufiger Button zur Veröffentlichung

Ebenfalls verbessert wurde der Publish Button zum Veröffentlichen eines Beitrags.

Dieser öffnet nun ein DropDown Menü, in dem die Sichtbarkeit des Beitrags und das Datum der Veröffentlichung eingestellt werden kann.

Gutenberg: Beitrag veröffentlichen Dropdown

Durch den zweistufigen Prozess soll verhindert werden, dass der Beitrag aus Versehen vorzeitig veröffentlicht wird, was beim derzeitigen Editor leicht passieren kann.

Farboptionen und Schriftgröße ändern

Sehr kritisch sehe ich die Designoptionen zum Anpassen der Farben und der Schriftgröße. Diese sind als Einstellungen für jeden Textblock in der Sidebar verfügbar.

Mir persönlich geht das zu sehr in Richtung Page Builder.

Meiner Meinung nach sollte das Design die Aufgabe des Themes bleiben. Der Editor sollte ein Tool sein, um Content zu erstellen und zu verwalten – und nicht, um Content zu gestalten.

Schließlich ist WordPress ein CMS, kein Homepage Baukasten.

In Arbeit: Support für Metaboxes

Lange Zeit war nicht klar, wie genau Metaboxen im neuen Editor implementiert werden. Inzwischen wurde mit der Umsetzung begonnen und Metaboxen sind im Gutenberg Editor vorhanden. Das erste Konzept basierte noch auf Iframes, diese wurden aber mit 1.7 entfernt.

Im Moment gibt es noch einige Bugs und die technische Umsetzung ist noch nicht abgeschlossen. Ich habe deshalb ausgiebige Tests der Metaboxen ausgelassen, weil diese wohl noch einige Updates benötigen.

Fazit

Das Tempo der Weiterentwicklung von Gutenberg ist beachtlich und der neue Editor sieht so langsam richtig vielversprechend aus. Die Usability hat einen deutlichen Sprung nach vorne gemacht und es macht einfach Spaß, mit Gutenberg zu experimentieren.

Ich bin nicht von allen Features überzeugt, wie z.B. der erwähnten Farb- und Schriftoptionen. Zudem gibt es natürlich noch viele Baustellen, Bugs und fehlende Features. Gutenberg wirkt an manchen Stellen noch unfertig, was aber vollkommen normal für ein Feature Plugin ist.

Insgesamt bin ich zuversichtlich, dass bis zum Release von Gutenberg in einigen Monaten diese Probleme alle noch gelöst werden. Die bisherige Entwicklung spricht dafür.

Was denkt ihr über Gutenberg?