Erster Test mit dem WordPress Gutenberg Editor

von

am

|

geschätzte Lesezeit:

9 Minuten

Disclaimer: Dieser Beitrag ist älter als zwei Jahre. Es könnte also sein, dass auch sein Inhalt in Teilen bereits veraltet ist.

Viele Blöcke für das Blog: Gutenberg Editor
Viele Blöcke für das Blog: Alles neu macht der Gutenberg Editor

Spätestens seit dem WordCamp Cologne 2017 ist eines klar: Mit der nächsten großen WordPress Version 5.0 soll der neue Gutenberg Editor veröffentlicht werden. Avisiert ist das Release für das dritte Quartal 2018. Ob bis dahin alle Probleme gelöst sind, die eine solche grundlegende Veränderung mit sich bringt, sei dahingestellt. Testen lässt sich der Gutenberg Editor als Plugin jedenfalls schon seit einer ganzen Weile. Bislang war ich in dieser Hinsicht noch sehr zurückhaltend. Nun aber habe ich das Plugin installiert und meinen ersten Test durchgeführt.

Da es sich hierbei um eine fortlaufende Entwicklung handelt, sei darauf hingewiesen: Dieser Test beruht auf der Version 1.7.0 im Zusammenspiel mit WordPress 4.9 und dem Twenty Seventeen Theme.

Und ganz deutlich sei darauf hingewiesen: Das Gutenberg Plugin hat nichts in der Installation einer Live Website verloren! Als Plugin in Entwicklung produziert es noch am laufenden Band Fehler. Die wollen Sie sicherlich nicht auf Ihrer Website haben.

Warum ein neuer Editor?

Der TinyMCE Editor, mit dem WordPress bislang arbeitet, ist in der Tat etwas in die Jahre gekommen. Chic war er ohnehin noch nie. Was ich persönlich nicht tragisch fand. Mit seinem schlichten Charme kamen aber auch einige Probleme daher. So nervte schon immer der Umstand, dass er im Textmodus nicht alle HTML Auszeichnungen zeigt. Und apropos HTML: Entsprechende Eingaben, die man im Textmodus macht, gehen grundsätzlich immer dann verloren, wenn man es wagt, in den visuellen Editor umzuschalten. Komplexere Strukturen kann so noch nicht einmal eine/r problemlos anlegen, der oder die mit HTML umzugehen weiß.

Nun schläft die Konkurrenz nicht. So haben sich im Laufe der Zeit zwei Tendenzen abgezeichnet. Zum einen sind da die sogenannten Page Builder Plugins. Beziehungsweise jene Themes, die die Page Builder Funktion fest eingebunden haben. Diese Page Builder sollen die Schwächen des TinyMCE Editors kompensieren. Vor allem sollen sie es Menschen, die keine Ahnung von den Sprachen des Internet haben, ermöglichen, komplexe Seitenstrukturen zu erstellen. Ähnliches gilt für Anbieter von Baukastensystemen, der zweiten Tendenz. Sie versprechen der Kundschaft, ansprechende Designs auch ohne grundlegende Kenntnis erstellen zu können.

Schließlich geht die WordPress Community davon aus, dass das textlastige Grundverständnis des bisherigen Editors nicht mehr zeitgemäß sei. Sprich: Wenn Sie diesen Text allein bis zu dieser Stelle gelesen haben, gehören Sie schon einer aussterbenden Art an.

Viele Blöcke braucht das Blog

Das Grundprinzip des neuen Gutenberg Editors ist der Block. Genauer gesagt nicht nur ein Block, sondern derer ganz viele. Die Namensgebung wirkt vielleicht etwas irritierend, dürfte aber auf das HTML-Prinzip der Blockelemente zurückgehen. Ein Blockelement benutzt immer die volle, ihm zur Verfügung stehende Breite. So ist jeder Absatz oder jede Überschrift ein solches Blockelement. Dies gilt nun auch im Gutenbergschen Konzept. Zukünftig gibt es kein großes Texteingabefenster mehr, sondern so viele Absatz- und sonstige Blöcke, wie Ihr Text hergibt.

Übersichtliches Arbeiten mit dem Gutenberg Editor
Trotz Metaboxen sehr übersichtliches Arbeiten mit Gutenberg

Wenn Sie also zukünftig einen neuen Beitrag für Ihr Blog oder eine neue Seite für Ihre Website anlegen, sehen Sie erst einmal nur die Eingabemöglichkeit für den Titel des Beitrags oder der Seite (Add title) sowie für einen Absatz (Write your story). Darunter angedeutet durch das Pluszeichen die Option für das Erstellen weiterer Absatz-, aber auch Bild- oder Überschriftblöcke.

Interessant für all jene, die gerne auch mal im Code arbeiten: Das Dokument an sich, aber auch jeder Block einzeln, lässt sich in die HTML-Ansicht umschalten. Und die zeigt dann tatsächlich den kompletten Code mit allen Auszeichnungen an.

Seitenspalte und Kopfzeile für die Bearbeitung

Bearbeitungsoptionen für das Dokument an sich sowie für einzelne Blöcke befinden sich in der rechten Seitenspalte. Beim TinyMCE Editor sind dort die Metaboxen untergebracht, die dem Veröffentlichen, dem Zuordnen von Kategorien und Schlagwörtern sowie dem Beitragsbild gelten. Gutenberg ordnet sie nicht mehr als getrennte Boxen an und verlängert Liste der Dokument-Optionen um den Auszug und die Diskussion. Dafür rücken das Speichern, die Vorschau und der Veröffentlichen– beziehungsweise Aktualisieren-Button nach oben in den rechten Bereich der Kopfzeile. Benutzerdefinierte Felder fehlen fortan völlig.

Apropos Veröffentlichen: Vor dem Veröffentlichen und vor jedem Aktualisieren fragt WordPress nun, ob Sie das wirklich wollen. Beides erfordert also immer zwei Klicks. Das ist zumindest mal gewöhnungsbedürftig. Lästig ist auf jeden Fall, dass Gutenberg ständig speichert. Die Anzahl der Revisionen schnellt somit innerhalb kürzester Zeit ins Unermessliche.

Alternativ zur Bearbeitung des Dokumentes zeigt die Seitenspalte auch Einstellungsoptionen für einzelne Blöcke. Einige davon sind bedeutsam (zum Beispiel die Zuordnung von CSS-Klassen), andere erscheinen völlig überflüssig. So vor allem jene, die der Formatierung von Schrift dienen. Dies widerspricht gänzlich dem Prinzip der Trennung von Form und Inhalt.

Gutenberg Editor, Optionen der Textbearbeitung
Vergisst die Trennung von Form und Inhalt: die Textbearbeitung des Gutenberg Editors

In der Kopfzeile befinden sich auch Einstellungsoptionen für die Darstellung der Bearbeitung. So lässt sich die Seitenspalte ausblenden. Auch können Sie dort entscheiden, ob Sie für die Bearbeitung die Block-Ansicht (Visual Mode) oder den HTML Code (Text Mode) nutzen möchten. Schließlich haben Sie auch die Möglichkeit, den Erscheinungsort der Toolbar festzulegen. Statt oben links in der Kopfzeile kann die nämlich auch direkt oberhalb eines jeden Blocks positioniert sein.

Arbeiten mit Textblöcken

Jedes Textelement, zum Beispiel ein normaler Absatz, erhält nun sein eigenes Eingabefenster. Wann immer Sie bei der Texteingabe auf die Enter-Taste drücken, erstellt Gutenberg für Sie einen neuen Absatzblock. So macht der der Editor deutlich, was bislang nicht offensichtlich war: Zwei Absätze sind zwei getrennte HTML-Elemente.

Jeden Absatz könnten Sie jederzeit umdefinieren zu einer Überschrift, einer Liste, einem Zitat oder einem Block zur Ausgabe von Code. Somit wäre es möglich, mit einem Absatzblock beginnend erst einmal den kompletten Text zu schreiben, der vorerst nur aus Absatzblöcken besteht. Um im zweiten Schritt aus einzelnen Absatzblöcken Zwischenüberschriften, Listen oder Zitate zu machen. Auch lässt sich die Reihenfolge aller Blöcke bequem per Klick ändern.

Gutenberg erkennt tatsächlich, was Sie vorhaben. Beginnen Sie einen Absatz zum Beispiel mit einem »1.«, macht der Editor aus dem Absatzblock einen Aufzählungsblock. Vergleichbares gilt, wenn Sie einen Absatz mit einem Spiegelstrich beginnen. Dann produziert der Gutenberg  Editor einen Auflistungsblock. Damit ist es fast gar nicht mehr möglich, innerhalb eines Absatzes Listen falsch oder gar nicht auszuzeichnen.

Schließlich ist der Gutenberg Editor in der Lage, in Word oder Google Docs geschriebenen und sauber formatierten Text in passende Blöcke zu zerlegen.

Arbeiten mit Bildblöcken

Gutenberg Editor Bildblock
Zwei Schritte nötig, damit der Textblock das Bild umfließt

Grundsätzlich gibt es zwei verschiedene Bildblöcke: das normale Bild und das Cover Bild. Für letzteres lassen sich Einstellungen wählen wie das Fixieren und das Dimmen. Zudem erscheint auf dem Bild der Titel des Beitrags. Für das Beitragsbild (also jenes, das auch auf Archivseiten erscheint) gibt es keinen eigenen Block. Die Zuordnung erfolgt wie gehabt in der rechten Seitenspalte im Bereich der Dokumentbearbeitung.

Das Arbeiten mit Bildern erscheint bei Weitem nicht so intuitiv wie das Arbeiten mit Textblöcken. Sicher, einen Bildblock einfügen, das passende Bild aus der Mediathek auswählen oder ein neues in die Mediathek hochladen – das ist nicht schwer. Aber auf diese Weise entsteht erst einmal ein Block, der die komplette Breite nutzt und das Bild auch groß darstellt. Was aber tun, wenn das Bild kleiner und linksbündig neben dem Text stehen soll? Ich habe ein paar Ansätze gebraucht, bis mir das Vorgehen klar war.

Sie fügen vor dem entsprechenden Absatzblock einen Bildblock ein und wählen das gewünschte Bild aus. Nun wählen Sie für den Bildblock die Einstellung linksbündig (alignleft). Das allein reicht aber noch nicht. Offenbar nutzt Gutenberg für Bilder immer erst einmal die größtmögliche Einstellung. Also müssen Sie nun noch die passende Bildgröße auswählen. Sagen wir: middle. Erst jetzt umfließt der Textblock den Bildblock.

Weitere Blöcke und Embeds

Neben den Text- und den Bildblöcken gibt es noch weitere, zum Beispiel den Tabellen Block. Ferner zu nennen seien vor allem hier solche, die dem Layout dienen, die Widget Blöcke sowie die sogenannten Embeds.

Der Tabellen Block mag mich noch gar nicht überzeugen. Nun arbeitet man ja auch nicht mehr so viel mit Tabellen. Aber wenn, dann sollte schon die Option bestehen, Zellen zusammenfügen oder auch wieder trennen zu können. Vielleicht verstecken sich die Einstellungen dafür irgendwo? Ich konnte sie bislang jedenfalls nicht finden.

Gutenberg Tabellen Block
Der Tabellen Block braucht wohl noch Überarbeitung

Unter den Layout Blöcken findet sich zum Beispiel der More-tag. Der Gutenberg Editor bietet in der Dokumentbearbeitung zwar die Möglichkeit an, einen Auszug zu definieren. Doch wenn das Theme wie Twenty Seventeen auf Archivseiten den Volltext ausgibt, greift es auf diesen Auszug gar nicht zu. Es braucht also den More-tag. Den habe ich lange gesucht, bis ich ihn dann unter den Layout Blöcken fand. Dort verstecken sich auch die horizontale Line (Separator), die Möglichkeit, einen anklickbaren Button zu erstellen, sowie das Block für zweispaltigen Text.

Außerdem bietet der Gutenberg Editor auch das Einbinden von Widgets als Blöcke. Aktuell sind es nur das Letzte Beiträge und das Kategorien Widget. Beide lassen sich im gewissen Maße bearbeiten. So kann das Beitragswidget die Links als Liste untereinander oder nebeneinander zeigen. Die Kategorien lassen sich wie ein Bildblock alignleft ausgeben. Schließlich findet sich unter den Widget Blöcken auch der Block für Shortcodes. Im Zusammenspiel mit Contact Form 7 und Advanced Custom Fields funktioniert der Shortcode Block soweit gut.

Unter Embeds schließlich findet sich eine lange Liste externer Quellen wie zum Beispiel Youtube, Facebook oder Twitter, Spotify, Vimeo, Flickr, Slideshare etc. Ausprobiert habe ich nur die ersten drei, von denen Facebook allerdings nur Fehler ausgab.

Der Gutenberg Editor und die Metaboxen

Bis vor Kurzem noch ging die Nachricht rund, Gutenberg wolle auf gar keinen Fall Metaboxen zulassen. Soll heißen: Neben dem großen Bereich der Block-Bearbeitung und den Einstellungsoptionen in der rechten Seitenspalte sollte sich kein Plugin irgendwo mit einer eigenen Bearbeitungsoption platzieren können. Dieses Konzept sorgte für helle Aufregung bei allen Plugin Anbietern, deren Bearbeitungsoptionen damit nicht mehr realisierbar wären. So zum Beispiel Yoast SEO.

Nun aber hatte das Gutenberg Team ein Einsehen. Es funktioniert nur noch nicht so richtig. Yoast SEO ist zwar unterhalb der Block-Bearbeitung zu sehen. Und sobald der Beitrag veröffentlicht ist, funktioniert auch die Yoast Bewertung. Vor der Veröffentlichung tut sich in dieser Hinsicht aber noch gar nichts. Aber das wird sich hoffentlich noch ändern.

Nebenbei bemerkt: In meiner Installation erscheint auch die Metabox des Shariff Plugins – allerdings nur solange Yoast SEO aktiviert ist. Mit dem Deaktivieren von Yoast SEO verschwindet auch Shariff. Kurios!

Es gibt noch viel zu tun

Die Liste der Fehler und Seltsamkeiten ist beim gegenwärtigen Entwicklungsstand in der Tat noch sehr lang. Um nur noch einen weiteren zu nennen: Ich vermisse doch arg die Möglichkeit, den Permalink im Rahmen von Gutenberg bearbeiten zu können. Zwar habe ich schon Screenshots gesehen, die einen entsprechenden Edit Button zeigten. Der will sich mir an entsprechender Stelle aber leider nicht offenbaren. Ich habe nur die Möglichkeit, den Link zu kopieren. Das hilft nur bei einem Tippfehler nicht weiter.

Nutzer von Themes mit Page Builder Plugin müssen sich fragen, wie ihre Zukunft aussieht. Zwar hieß es beim WordCamp Cologne, dass mit WordPress 5.0 immer noch die Wahl zwischen Standard und Gutenberg Editor möglich sein soll. Doch vermute ich mal, dass dies auf lange Sicht nicht der Fall sein wird. Auf lange Sicht wird sich Gutenberg durchsetzen und damit die Nutzung von Page Builder Plugins überflüssig machen. Und je nachdem, wie deren Anbieter sich verhalten, wird die Nutzung schlimmstenfalls gar nicht mehr möglich sein.

Natürlich kann es nicht die Aufgabe von WordPress sein, die Probleme von Bezahlplugins zu lösen. Deren Anbieter werden schon selbst dafür sorgen müssen, dass die Websites ihrer Kunden auch zukünftig noch funktionieren. Die Installation deswegen nicht mehr zu aktualisieren, kann für Nutzer von Page Builder Plugins jedenfalls keine Option sein!

Noch ist ja nicht aller Tage Abend. Wir werden sehen, wie es in Sachen Gutenberg Editor (mit oder ohne Page Builder) weitergeht. Der Eindruck, den das Ganze inzwischen auf mich macht, ist jedenfalls nicht schlecht.


Beitragsbilder: Britta Kretschmer

2 Antworten zu „Erster Test mit dem WordPress Gutenberg Editor“

  1. Ein weiteres Problem ist, das der von WordPress mitgelieferte Editor an manchen Stellen für blinde Nutzer von Screenreadern nicht wirklich zugänglich ist.

  2. Hallo Lydia,
    Danke für den Hinweis! Umso wichtiger, dass die Gutenberg-Entwickler darauf achten.
    LG, bk

Schreibe einen Kommentar

Die im Rahmen der Kommentare angegebenen Daten werden von mir dauerhaft gespeichert. Cookies speichere ich nicht. Für weitere Informationen siehe bitte meine Datenschutzerklärung.

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert