Der Gutenberg Editor unter der Lupe

Mit dem Sprung auf WordPress 5.0 soll der neue Gutenberg Editor den klassischen Editor in WordPress ersetzen und damit zugleich ein neues Kapitel einläuten. In einem vorangegangenen Beitrag hatte ich schon geschrieben, dass ich dieser Entwicklung relativ gelassen entgegensehe. Für diesen Beitrag habe ich mir den Gutenberg Editor (hier in der Version 2.4.0) aus der WordPress Plugin Bibliothek geladen und angeschaut.

Meine hier geteilten Erfahrungen sind natürlich nur eine Momentaufnahme, denn der Gutenberg Editor befindet sich zur Zeit noch im Entwicklungsprozess. So, wie ich ihn hier zu Gesicht habe und vorstelle, wird er wahrscheinlich nicht offiziell veröffentlicht und zum Kernbestandteil von WordPress werden. Diverse Bugs werden noch gefixt, wahrscheinlich die eine oder andere Funktion noch hinzugefügt werden. Schließlich beruhen meine hier geschilderten Erfahrungen auf meinem persönlichen Workflow.

Der Gutenberg Editor als Plugin zum Testen

Schon seit geraumer Zeit lässt sich die Zukunft von WordPress testen. Das Team um den Gutenberg Editor hat diesen als Plugin in der WordPress Plugin Bibliothek für jeden zur Verfügung gestellt. Und seit man in gewisser Weise »die Hosen heruntergelassen hat« erhebt sich ein Sturm der Kritik.

WordPress Gutenberg
Der Gutenberg Editor in der WordPress Plugin Bibliothek (Screenshot)

Ausdruck findet diese massive Kritik u. a. in vielen negativen Bewertung des Gutenberg Editors. Schaut man ein bisschen genauer hin, lässt sich der erste Eindruck allerdings relativieren. Denn zur Zeit, so die Informationen in der WordPress Plugin Bibliothek, gibt es lediglich zwischen 7.000 und 8.000 aktive Installationen (die Zahlen schwanken im Moment stärker) und die durchschnittliche Bewertung stützt sich mal gerade auf 391 Abstimmungen. Außerdem zeigt sich, dass die Kritiker erfahrungsgemäß meistens lauter sind oder als lauter wahrgenommen werden, als die Befürworter oder die eher neutralen Stimmen.

Ich selbst verfolge diese Diskussionen schon etwas länger und habe mir hier und da den Gutenberg Editor sporadisch angeschaut. Jetzt, da die offizielle Veröffentlichung im Rahmen des Versionssprungs auf WordPress 5.0 immer näher rückt (man spekuliert im Sommer 2018), habe ich mir die Zeit genommen, etwas genauer hinzuschauen.

Um den Gutenberg Editor (Version 2.4.0) genauer unter die Lupe zu nehmen, habe ich eine lokale Testumgebung erstellt. Installiert ist die zur Zeit aktuelle WordPress Version 4.9.4 und PHP 7.2.1. Als Theme verwende ich OceanWP in der Version 1.5.5. Außerdem habe ich einen Page Builder installiert, nämlich den Elementor in der Version 1.9.8 einschließlich dem Pro Paket in Version 1.15.3.

Nach der Installation und Aktivierung des Gutenberg Plugins hast Du in den Beiträgen und Seiten die Wahl, ob Du den Beitrag bzw. die Seite mit dem Gutenberg oder dem klassischen Editor erstellen möchtest. Da ich noch zusätzlich den Elementor Page Builder installiert habe, steht mir auch dies zur Auswahl.

WordPress Gutenberg
Beim Erstellen eines Beitrags (oder einer Seite) kannst Du wählen, womit Du dies tun möchtest (Screenshot)

Die Schreibumgebung im Gutenberg Editor

Der erste Eindruck fällt aus meiner Sicht positiv aus. Das hat nicht zuletzt etwas mit der durchaus aufgeräumten Schreibumgebung zu tun, die der Gutenberg Editor bereithält. Im direkten Vergleich mit dem klassischen Editor eine merkliche Verbesserung.

WordPress Gutenberg
Aufgeräumte Schreibumgebung im Gutenberg Editor (Screenshot)

Mit ein paar wenigen Handgriffen lässt sich der Gutenberg Editor für ablenkungsfreies Schreiben optimieren. Zunächst deaktiviert man die Seitenleiste rechts und klappt dann das WordPress Menü links ein.

WordPress Gutenberg
Ablenkungsfreies Schreiben durch Deaktivierung der Seitenleiste und des WordPress Menüs (Screenshot)

Im Screenshot zuvor ist zusätzlich die Werkzeugleiste in der oberen Leiste fixiert. Darauf komme ich später zurück. Zieht man nochmals den Vergleich zum klassischen Editor, so kann Gutenberg auch bei diesem Aspekt des ablenkungsfreien Schreibens punkten.

Blocks

Das revolutionäre Moment im neuen Gutenberg Editor nennt sich »Blocks«. Alle Inhaltselemente in einem Beitrag oder einer Seite werden in solche Blocks eingebunden, seien es Überschriften, Text, Bilder, Blockquotes, Code etc. Wechselst Du in den Code Editor und schaust Dir bspw. mal einen Text-Block an, dann wird das Prinzip deutlich.

WordPress Gutenberg
Ein Block mit Text im Code Editor von Gutenberg (Screenshot)

Wie Du sehen kannst, ist der »p«-Tag eingerahmt zwischen

<!-- wp:paragraph --> ... und ... <!-- /wp:paragraph -->,

was den eigentlichen Text-Block ausmacht. Die Schreibweise erinnert stark an den bekannten »More-Tag«. Hinter dem »wp:« wird die Art des Blocks definiert (hier »paragraph« für einen normalen Text-Block). Weitere Layout- und Designanweisungen werden dahinter in geschwungene Klammern gesetzt, wie Du z. B. im folgenden Beispiel eines Gallery-Blocks sehen kannst.

WordPress Gutenberg
Ein Gallery Block in der Code Editor Ansicht (Screenshot)

Shortcodes werden (wohl) überflüssig

Es gibt viele Themes und Plugins auch jenseits der Page Builder, die zur Zuweisung spezifischer Layout- und Designanweisungen in Beiträgen und Seiten auf Shortcodes zurückgreifen, bspw. um mehrspaltige Bereiche, verschiedene Block- und Pullquotes, Alert-Boxen etc. zur Verfügung zu stellen. Solche Shortcodes dürften in Zukunft wohl überflüssig werden. Hierfür stehen im Gutenberg Editor die Blocks zur Verfügung, sofern die Layout- und Designfunktionen entweder von Hause aus oder durch Drittanbieter erweitert werden. Das, was zur Zeit im Gutenberg Editor hierfür zur Verfügung steht, lässt allenfalls eine erste Ahnung darüber zu, was prinzipiell alles möglich wäre.

Nebenbei erwähnt: Das Theme Review Team von WordPress, genauer: Nilambar Sharma hat eine interessante und mitunter kontroverse Diskussion angestoßen, ob Themes, die in der WordPress Theme Bibliothek gelistet sind, solche »Custom Blocks« enthalten dürfen (Link zur Diskussion gefunden im Wochenrückblick von Florian Brinkmann).

Die Blocks lassen sich verschieben

Abgesehen davon, dass sich Layout- und Designeigenschaften auf Blocks anwenden lassen (von der Breite des Blocks über Schriftgröße, Schrift- und Hintergrundfarbe bis hin zur Zuweisung einer spezifischen CSS Klasse), kannst Du die Blocks auch nach oben oder unten verschieben.

WordPress Gutenberg
Blöcke lassen sich mit Hilfe der Pfeil-Buttons links nach oben oder unten verschieben (Screenshot)

Wenn Du gleich mehrere Blocks verschieben möchtest, geht das auch problemlos. Hierzu markierst Du einfach den ersten Block, den Du verschieben möchtest und betätigst mit der gedrückten Umstelltaste die Pfeiltasten nach unten, bis Du alle Blocks markiert hast, die Du verschieben möchtest. Die markierten Blocks verschiebst Du dann mit den bereits erwähnten Pfeil-Buttons links neben dem obersten Block.

Shared Blocks

Es drängt sich der Vergleich zu einem Lego Baukastensystem auf (zur Lego-Analogie siehe auch Ellen Bauer auf elmastudio.de). Dieser Eindruck wird noch verstärkt, wenn man sich die sogenannten »Shared Blocks« anschaut. Du kannst jeden Block zu einem »Shared Block« umwandeln und ihn so als Vorlage abspeichern, um ihn an einer anderen Stelle wieder einzufügen.

WordPress Gutenberg
Shared Blocks im Gutenberg Editor (Screenshot)

Nimmst Du Änderungen an dem Block vor und speicherst den so veränderten Shared Block, dann erscheinen die Änderungen überall dort, wo Du diesen Shared Block verwendet hast. Sollen die Änderungen nur an einer spezifischen Stelle erscheinen, darfst Du diese nicht oder nur unter einem anderen Namen speichern.

Schreibfluss in Gutenberg

Man könnte jetzt meinen, dass sich diese Blocks negativ auf den Schreibfluss auswirken. Hierzu wurden und werden ja diverse Bedenken im Vergleich mit dem ursprünglichen Editor geäußert. Ich für meinen Teil kann da aber Entwarnung geben. Nach einigen Beiträgen, die ich testweise im Gutenberg Editor verfasst habe, kann ich keine abträglichen Effekte auf den Schreibflusses feststellen. Zusammen mit der zuvor vorgestellten aufgeräumten Schreibumgebung empfinde ich das Schreiben im Gutenberg Editor sogar vergleichsweise angenehmer, wobei ich jedoch zu denen gehöre, die längere Texte eh außerhalb von WordPress verfassen. Zum Einfügen extern erstellter Texte weiter unten mehr. Aber zurück zum Schreiben in Gutenberg.

Um einen neuen Block einzufügen, musst Du nicht zwangsläufig die Finger von der Tastatur nehmen, um einen entsprechenden Button zu betätigen. Es reicht, wenn Du mittels der Eingabetaste (Return-Taste) einen neuen Absatz beginnst, der dann in einen neuen Block eingefasst ist.

Wenn Du oberhalb oder unterhalb eines existierenden Blocks einen neuen Block einfügen möchtest, bewegst Du den Zeiger einfach oberhalb oder unterhalb des Blocks, vor bzw. nach welchem Du einen neuen Block einfügen möchtest. Es erscheint dann eine dickere Linie. Klickst Du dann, wird der neue Block eingefügt. Alternativ setzt Du den Cursor an den Anfang der ersten bzw. ans Ende der letzten Zeile und betätigst die Eingabetaste.

Schließlich: Die Tastenkombinationen für die gängigsten Formatierungsanweisungen scheinen auch im Gutenberg Editor zu funktionieren.

Die Werkzeugleiste

Standardmäßig wird oberhalb eines Blocks eine Werkzeugleiste eingeblendet, die die wichtigsten Einstellungs- und Konfigurationselemente wie z. B. die Textausrichtung, Fett- und Kursivsatz oder das Einfügen eines Links enthält.

WordPress Gutenberg
Die Werkzeugleiste an einem Textblock (Screenshot)

Wenn Dich diese Werkzeugleiste beim Schreiben stört, dann kannst Du sie in der oberen Leiste fixieren, wie Du es aus dem klassischen Editor kennst.

WordPress Gutenberg
Die Werkzeugleiste fixiert in der oberen Leiste (Screenshot)

In dieser oberen Leiste findest Du ansonsten Zugriff auf die Revisionsfunktion, also die Möglichkeit, einzelne Bearbeitungsschritte durch Klick auf den Undo- oder Redo-Button rückgängig zu machen bzw. wiederherzustellen (dazu mehr weiter unten). Des Weiteren finden sich dort auch die Buttons zum Speichern des Entwurfs, zur Vorschau und zum Publizieren des Beitrags bzw. der Seite.

Es mag nur eine Kleinigkeit sein, aber hier zeigt sich eine echte Verbesserung im Vergleich zum klassischen Editor, wo diese Buttons in der Seitenleiste untergebracht waren bzw. sind. Das hat zur Folge, jedesmal nach oben scrollen zu müssen, um an diese Buttons zu kommen, wenn man seinen Entwurf zwischenspeichern wollte. Im Gutenberg Editor ist die obere Leiste fixiert und ständig sicht- und damit erreichbar. Speichert man im Gutenberg Editor seinen Entwurf, so bleibt der Cursor auch an der zuletzt bearbeiteten Stelle. Im klassischen Editor springt der Beitrag bzw. die Seite nach dem Speichern immer ganz nach oben und Du musst immer zu der Stelle zurückscrollen, die Du zuletzt bearbeitet hattest.

Schließlich kannst Du in der oberen fixierten Leiste per Klick auf den Zahnrad-Button jederzeit die Seitenleiste ein- oder ausblenden und hast Zugriff zu weiteren Einstellungen über den Button »Mehr«. Hier findest Du die Möglichkeit, den Code-Editor aufzurufen, die Werkzeugleiste – wie bereits angesprochen –, in der oberen Leiste zu fixieren und den kompletten Inhalt des Beitrags bzw. der Seite zu kopieren.

Die Seitenleiste

Die Seitenleiste im Gutenberg Editor beinhaltet zwei Panels, »Dokument« und »Block«. Unter »Dokument« findet man alle Einstellungen, die man aus dem klassischen Editor kennt. Neu ist lediglich, dass das Feld für die Auszüge hier jetzt standardmäßig untergebracht ist und nicht mehr unterhalb des Editors, wie man es vom klassischen Editor gewohnt ist.

 

Ebenfalls neu ist, dass man sich in der Seitenleiste unter »Inhaltsverzeichnis« die Gliederungsstruktur seines Beitrags oder einer Seite anzeigen lassen und innerhalb des Beitrags oder einer Seite per Klick navigieren kann. Das ist praktisch, wenn man längere Beiträge verfasst. Zu diesem Inhaltsverzeichnis gelangst Du auch über einen Button in der oberen Werkzeugleiste. Dort findest Du auch noch weitere textanalytische Angaben.

Unter der Rubrik »Block« in der Seitenleiste findet man alle Einstellungen, die den jeweils ausgewählten Block betreffen. Das ist im Vergleich zum klassischen Editor natürlich komplett neu.

Auto-Safe und Undo/Redo Funktionen

Der Gutenberg Editor besitzt eine Auto-Safe Funktion. Solange der Beitrag oder die Seite noch nicht veröffentlicht worden ist, sich also im Entwurf befindet, werden in einem kurzen Intervall Deine Arbeitsschritte automatisch gespeichert, ohne dass Du hierzu einen Button betätigen musst. Damit zusammenhängend hast Du die Möglichkeit, mit Hilfe von Undo- und Redo-Buttons in der oberen Leiste einzelne Arbeitsschritte rückgängig zu machen oder wiederherzustellen.

Dadurch werden allerdings sehr viele Revisionen eines Beitrags bzw. einer Seite gespeichert. Leider gibt es noch keine integrierte Funktion, diese Revisionen zu löschen, wenn man sie nach der Veröffentlichung eines Beitrags oder einer Seite nicht mehr benötigt, nicht zuletzt, um die Datenbank von diesem Ballast zu befreien. Wenn dies so bleibt, wird man um den Einsatz eines zusätzlichen Plugins (wie bisher) wohl nicht herumkommen.

Extern verfasste Texte einfügen

Wenn Du zu denjenigen gehörst, die ihre Texte außerhalb von WordPress schreiben, um sie anschließend in einen neu erstellten Beitrag bzw. eine neu erstellte Seite einzufügen, dann dürfte es für Dich interessant sein, wie der neue Gutenberg Editor mit diesem Szenario umgeht. Zwei Fragen dürften hier besonders unter den Nägeln brennen:

  1. Wie geht der Gutenberg Editor mit der Formatierung des extern verfassten Textes um? Übernimmt er sie überhaupt und wenn ja, was genau?
  2. Werden die Absätze des extern geschriebenen Textes automatisch in Blocks umgewandelt oder wird der Text in einen einzigen Block eingebunden?

Schreibst Du Deine Texte außerhalb von WordPress in einem Plaintext-Editor mit MarkDown Funktionalität (z. B. Ulysses, ByWord, iA Writer, MultiMarkdown Composer etc.), dann werden im Gutenberg Editor die Standardformatierungen übernommen. Also: Überschriften bleiben Überschriften und im Fließtext werden hervorgehobene Textteile entsprechend übernommen. Das gilt auch für Texte, die Du in den üblichen Textverarbeitungsprogrammen geschrieben hast (also bspw. MS Word, Pages, LibreOffice Writer etc.).

Der extern verfasste Text wird im Gutenberg Editor automatisch in einzelne Blocks differenziert eingefügt. Also eine Überschrift bleibt nicht nur eine Überschrift, sondern wird in einen entsprechenden Block eingebunden.

Fazit

Alles in Allem gefällt mir der Gutenberg Editor sehr gut. Im Vergleich mit dem klassischen Editor empfinde ich die Schreibumgebung in Gutenberg wesentlich angenehmer. Auch der Workflow und Schreibfluss wird durch diverse Verbesserungen optimiert, jedenfalls gemessen an meinen Gewohnheiten. Ich erinnere hier an die Auto-Safe Funktion sowie die direkte Erreichbarkeit von grundlegenden Formatierungsfunktionen sowie den Button zum Speichern des Entwurfs in der fixierten oberen Menüleiste.

Das Block-System scheint in der Tat revolutionär in bzw. für WordPress zu werden. Abgesehen von den dadurch erweiterten Layout- und Designmöglichkeiten, ist die Funktion der »Shared Blocks« sehr nützlich.

Neben den positiven Aspekten, gibt es auch einiges, was mir (noch) fehlt bzw. noch nicht richtig funktioniert:

  • Die benutzerdefinierten Felder (Custom Fields) sollten unbedingt zum offiziellen Release des Gutenberg Editors integriert und verfügbar gemacht werden.
  • Beim Einfügen von Links fehlt mir die Möglichkeit, festlegen zu können, ob sie in einem neuen Tab/Fenster geöffnet werden sollen.
  • Die Texteinstellungen müssten für meinen Geschmack noch ein wenig mehr Möglichkeiten bereithalten, bspw. die Schriftart, die Zeilenhöhe, der Buchstabenabstand usw.
  • Die Unterstützung von MarkDown würde ich mir wünschen. Zwar war bzw. ist dies auch im klassischen Editor nur mit zusätzlichen Plugins möglich, aber in Gutenberg könnte man diese Funktion doch direkt implementieren, ohne dass ein zusätzliches Plugin installiert werden muss.
  • Ein besseres, integriertes Revisionsmanagement halte ich für wünschenswert, um die nicht benötigten Revisionen nach Veröffentlichung eines Beitrags oder einer Seite löschen zu können. Bis jetzt ist dafür ein zusätzliches Plugin nötig, was mit einer integrierten Funktion in den neuen Gutenberg Editor überflüssig wäre.
  • Im Moment ist das Schreiben im Code Editor von Gutenberg noch nicht so richtig möglich. Ich gehe zwar davon aus, dass diese Funktion bis zum Release noch zur Verfügung gestellt werden wird, erwähne es an dieser Stelle aber der Vollständigkeit halber.

Hast Du Dir den neuen Gutenberg Editor schon mal angeschaut? Welche ersten Eindrücke hast Du gesammelt? Was ist Deiner Meinung nach gut gelungen, was weniger? Welche Funktionen fehlen Dir noch?

Schreibe einen Kommentar

Menü schließen