gutenberg test

The Good, the Bad and the Pretty – WordPress Gutenberg im Test

Glaubt man Matt Mullenweg, ist der neue WordPress Gutenberg Editor die Zukunft von WordPress. Und nach dem ersten Test zeigt sich: Er könnte recht haben. Vorausgesetzt Gutenberg wird mit den kommenden Releases auch für den Live-Betrieb nutzbar. Wir zeigen die größten Defizite und wichtigsten Funktionen des neuen Editors im Überblick.

Noch führt er ein Schattendasein als Beta-Version. Das könnte die Entwicklung des neuen Editors hemmen. Schade, denn im Prinzip ist Gutenberg ein wunderbarer Editor. Unabhängig davon, wie die Beta-Phase, die weitere Entwicklung und die Core-Integration laufen, haben wir uns Gutenberg einmal genauer angesehen und zeigen dir, auf was du dich freuen kannst und warum du Gutenberg nicht im Live-Betrieb einsetzen solltest.

Die Inhalte im Überblick:

  1. Die Installation
  2. Das neue Blocksystem
  3. Bilder
  4. Videos
  5. Zitate und Social Media
  6. Tabellen und Code-Snippets
  7. Buttons
  8. HTML
  9. Fazit

Der erste Schock: Alles wie zuvor

Die Installation läuft wie bei allen anderen Plugins auch: Gutenberg im Pluginverzeichnis suchen, herunterladen, aktivieren, fertig. Der neue Editor findet sich dann in der Sidebar deines WP-Dashboards.

Tatsächlich habe ich zunächst im Editor eines neuen Beitrags nach einem entsprechenden Button gesucht. Leider vergeblich. Die erste Erkenntnis an dieser Stelle: Gutenberg wird nicht automatisch zum Standard-Editor. Man kann allerdings bestehende Beiträge über Gutenberg öffnen. Dazu musst du in die Beitragsübersicht und die, etwas versteckte, Gutenberg Option auswählen.

 

Auch alte Beiträge können mit Gutenberg geöffnet werden.
Etwas versteckt findet sich die Gutenberg-Option in der Schnellauswahl der Beiträge.

 

Das Ergebnis ist derzeit leider alles andere als schön: Öffnet man einen bereits bestehenden Artikel wird, zumindest in unserem Test, der gesamte Inhalt in einen einzigen Block gepackt. Das führt das an und für sich hervorragende Block-System ad absurdum. Und es heißt natürlich, dass man Artikel, die nicht  mit Gutenberg erstellt wurden, nicht mit dem neuen Editor bearbeiten kann.

Zwei weitere gravierende Probleme sind uns noch aufgefallen: Zum einen hat in unserem Test das Setzen von Links nicht funktioniert (weder auf URLs noch auf artikelinterne Hooks). Und zum anderen kann Gutenberg noch keine pluginspezifischen Beitragsoptionen anzeigen. So werden bspw. die SEO und Social Media Optionen von Yoast nicht wie gewohnt unter den Artikel gesetzt und auch der Autor eines Beitrags lässt sich derzeit nicht über Gutenberg selbst einstellen.

bestehende Beiträge zerschießt gutenberg leider komplett
Das Ergebnis des Versuchs einen bestehenden Beitrag in Gutenberg zu öffnen: Nicht nur ist das Bild verzerrt, auch befinden sich Bild und Text im selben Block. Zudem funktionieren die Links nicht mehr.

All diese Punkte führen dazu, dass Gutenberg derzeit schlicht noch nicht für den Live-Betrieb geeignet ist. Da sich der Editor noch im Beta-Stadium befindet (derzeit in Version 0.2.0), ist das zwar verschmerzbar, die von Matt Mullenweg ausgerufene Grenze von 100.000 aktiven Installationen in den kommenden zwei Monaten wirkt nun jedoch utopisch. Das ist zwar nicht per se schlimm, wirft aber die Frage nach dem Start der Vollversion auf.

Denn das Beta-Stadium könnte dazu führen, dass viele Nutzer, die über keine Entwicklungsumgebung oder Testinstanzen verfügen, davor zurückschrecken, Gutenberg zu installieren und zu testen. RAIDBOXES-Kunden können den Editor übrigens ganz einfach im Staging oder auf einer DEMO BOX testen.

Weil sich Gutenberg im derzeitigen Zustand aus mehreren Gründen nicht wirklich für den Live-Betrieb eignet, beschränken wir uns in unserem Test der Version 0.2.0 auf den Schreibprozess selbst. Der geht mit Gutenberg nämlich so einfach von der Hand wie noch nie.

Das Block-Prinzip überzeugt und begeistert

Der Editor sieht tatsächlich von Anfang an genauso gut aus wie in der Demo. Unser Eindruck daher: Er erinnert eher an einen Page-Builder, als an einen Text-Editor. Aber nicht falsch verstehen: Es können derzeit nur Beiträge, keine Seiten, mit Gutenberg erstellt werden.

Das Block-Prinzip basiert auf der Idee, jeder inhaltlichen, argumentativen oder medialen Einheit deines Blogbeitrags ein eigenes, konfigurierbares und verschiebbares Umfeld bereitzustellen. Eben einen Block.

Eigentlich geht der Gedanke sogar noch weiter: Blöcke sollen das neue Meta-Format für WordPress werden und peu à peu alle anderen Elemente in sich vereinen und ersetzen.

We are gonna build a lot more types of blocks. And this is the basis for, of course, what is gonna be the future of customization. So blocks will replace widgets, blocks will replace kind of all the other fundamentals and primitives inside WordPress–until everything is a block

– Matt Mullenweg, WordCamp Europe 2017, Paris

Jedes Element, das du also in einen deiner Beiträge einfügst, wird als Block definiert. Egal ob es ein Bild, ein Video, ein Zitat, ein Tweet, eine Tabelle oder ein Button ist. Das Tolle daran: Die Blöcke lassen sich unabhängig voneinander verschieben. Zwar noch nicht per Drag and Drop, sondern nur in Einzelschritten, aber auch das erleichtert das Umstrukturieren von Beiträgen und deren Gestaltung schon enorm.

Bereits in der Beta stellt Gutenberg mehrere Dutzend mögliche Block-Arten bereit.
Wenn du einen neuen Block erstellst, bekommst du alle Konfigurationsmöglichkeiten angezeigt. Aktuell ist es schon eine beeindruckende Zahl, die aber mit der Zeit noch weiter anwachsen soll. Damit einher geht aber die Frage nach der Übersicht. Schon jetzt kann man in der Blockauswahl recht weit scrollen.

 

Das Block-Prinzip bringt dabei konkret drei Vorteile, die wir auch schon in unserem ca. einstündigen Test feststellen konnte:

1. Das Erstellen von Content wird dynamischer

Jeder Absatz, jedes Bild, jedes Video ist ein eigener Block. Diese Blöcke können unabhängig voneinander verschoben werden. Das Umstrukturieren von Texten wird somit zum Kinderspiel. Noch ist dieses Verschieben nur in Einzelschritten und nicht per Drag and Drop möglich.

Das Verschieben von Blöcken geht bei Gutenberg zwar nur in Einzelschritten dafür aber super einfach.2. Mehr Übersicht und aufgeräumter Editor

Durch sein cleanes Design hat uns der Editor beim Test förmlich darum angefleht alle möglichen Blockformate durchzutesten. Unser Eindruck: Dank des sehr reduzierten Designs, das eine Art “ablenkungsfreies Schreiben” deluxe ist, wurden wir dazu angeregtwesentlich intensiver über die Möglichkeiten der Gestaltung und deren Sinnhaftigkeit nachzudenken. Das ist zwar auch der Neuheit des Editors selbst geschuldet, doch gerade in Kombination mit der Dynamik der Blöcke bietet Gutenberg ein völlig neues Erlebnis der Content-Erstellung. Dabei hilft besonders die kompromisslose Textzentrierung. Und: Wir finden der Editor sieht jetzt schon verdammt gut aus.

Gutenberg hat eine extrem reduzierte Oberfläche. Und sieht doch hervorragend aus.
Der Editor ist dermaßen reduziert, dass der Modus zum ablenkungsfreien Schreiben nicht mehr benötigt wird. Die Einstellungsleiste rechts kann man übrigens auch noch einklappen.

3. Mehr Fokus auf das Wesentliche

Zuletzt hat das neue Block-Prinzip vor allem den Vorteil, dass es – hat man sich einmal daran gewöhnt – den natürlichen Denk- und Schreibprozess unterstützt. Jeder Gedanke, jedes Argument wird zu einem Block. Das macht das Strukturieren der Artikel wesentlich einfacher und intuitiver.

Das Block-Prinzip ist leicht verständlich, eingänglich, erleichtert die Content-Erstellung und hat unserer Meinung nach aus UX-Sicht definitiv das Potenzial zu dem großen Wurf zu werden, als der es angepriesen wird.

Mit Bildern arbeiten ist eine wahre Freude

Das Einfügen von Bildern läuft ebenfalls über die Blöcke und im Prinzip genau wie vorher – nur eben etwas intuitiver. Hast du einen Bild-Block angelegt, wählst du das Bild aus der Mediathek oder lädst es hoch. Dann kannst du es über die speziellen Bild-Optionen des Blocks einstellen. Das tolle dabei: Es werden wirklich nur die Optionen angezeigt, die du benötigst. Bildunterschrift und Alternativtext können ebenfalls direkt in Gutenberg geschrieben werden. Denn auch die Settings-Leiste rechts passt sich je nach gewähltem Block entsprechend an.

Bilder in Gutenberg können ganz leicht linksbündig, rechtsbündig und auf volle Breite gestellt werden.
Nicht zu sehen: Rechts können alle bildspezifischen Detaileinstellungen vorgenommen werden. In der Layoutleiste links kann das Bild entsprechend platziert werden.

Die oben gezeigten Layoutoptionen bestehen übrigens für alle Blöcke, also Videos, Zitate, Social Media Posts etc. Was uns zudem aufgefallen ist: Die Galerie-Option hat jetzt einen eigenen Block bekommen. Das macht die Option für den ein oder anderen vielleicht zugänglicher.

Video-Integration direkt über die Plattform

Auch beim Einbinden von Bewegtbild wird der Workflow mit Gutenberg nicht unterbrochen: Einfach einen neuen Block erstellen, das jeweilige Medium (oder einen blanken Embed-Block) auswählen, die URL einfügen, fertig.

Durch die Anzahl der Einzelangebote wird die Block-Auswahl hier schon etwas unübersichtlich. Zudem erschließt sich uns der Sinn der Spezial-Blöcke für bestimmte Videoplattformen, wie WordPress.tv, nicht. Denn man kann alle Videos auch einfach über den universellen Embed-Block einbinden.

Zitate bleiben gleich, Social Media Posts werden schön und einfach

Das Einbinden von Zitaten hat sich nicht groß verändert, nur dass diese durch das Block-Prinzip jetzt einfacher verschoben werden können. Das Einbinden von Social Media Posts wird hingegen etwas einfacher und hübscher: Denn jetzt kannst du direkt über die Eingabe des Links und ohne Embed-Code arbeiten.

Gutenberg macht auch die Integration von Tweets sehr einfach.

Ganz neu: Tabellen. Alles beim Alten bei Code-Schnipseln.

Ganz neu ist die Option, ohne zusätzliches Plugin direkt über den Editor Tabellen einfügen zu können. Derzeit sind allerdings nur zweispaltige Tabellen möglich, das Einfügen funktioniert aber genauso einfach, wie mit allen anderen Blöcken. Mehr konnten die Tabellen in unserem Test noch nicht. Zudem verschiebt sich die Spaltenbreite dynamisch während der Texteingabe. Man sieht dem Block an, dass er noch nicht fertig ist.

Beim Einfügen von Code-Schnipseln bleibt hingegen alles beim Alten.

Das beste zum Schluss: Buttons

Endlich bietet ein WordPress-Editor die Möglichkeit im normalen Publikations-Workflow Buttons zu setzen. Einfach so, über einen extra dafür kreierten Block. Im Prinzip muss man nur den Button einsetzen, den Link dahinter definieren und Beschriftung und Farbe auswählen. Im Prinzip. Denn unserem Test hat auch dieses Feature noch nicht funktioniert.

HTML-Anpassungen wie gehabt. Nur schöner.

In den HTML-Editor wurde das Block-System nicht übernommen. Dieser sieht aus wie gehabt, nur eben, dank des neuen Designs, etwas frischer. Und der Code wird jetzt automatisch eingerückt. Das hilft bei der Übersicht.

so sieht html im alten editor aus

so sieht html im neuen editor aus
Oben die Variante aus dem aktuellen Editor. Sie ist aufgrund der höheren Zeilenbreite insgesamt kürzer, aber im Vergleich zu der Gutenberg-Variante mit eingerückten Zeilen auch unübersichtlicher.

Über den visuellen Editor ist es übrigens auch möglich Custom HTML-Blöcke einzufügen. Das Schöne hieran: Im Block kann der HTML-Code bearbeitet und das Ergebnis direkt betrachtet werden.

so bindest du custom html gutenberg ein
Über einen einfachen Button am linken oberen Rand des Blocks kannst du bei Custom HTML zwischen dem Code und der Vorschau hin und her schalten.

Fazit: Das Feeling ist gut, die Funktionen noch verbesserungswürdig, die Kompatibilität schlecht.

Die aktuelle Gutenberg Version 0.2.0 ist eine Beta-Version. Daher ist es gar nicht nötig, dass bereits alles reibungslos funktioniert. Das tut es auch nicht. Insbesondere die Tabellen und Buttons bedürfen noch der Überarbeitung – also zwei der interessantesten Blöcke. Und auch die Abwärtskompatibilität und Integration wichtiger Publisherfunktionen läuft noch nicht rund. Somit muss man derzeit spätestens beim Feintuning eines neuen Beitrags wieder in den alten Editor wechseln. Für mehr als einen Test und einen kurzen Blick in die Kristallkugel ist Gutenberg daher zur Zeit nicht wirklich zu gebrauchen.

In einem Punkt kann der neue Editor aber voll und ganz überzeugen: Dem Block-Prinzip. Hierdurch wird der Schreibprozess bereits merklich beschleunigt und geht wesentlich intuitiver und leichter von der Hand. Gerade für Vielschreiber dürfte das eine enorme Erleichterung sein.

Aber das Block-Prinzip ist noch viel wichtiger und birgt viel mehr Potenzial als nur das Schreiben von Beiträgen zu erleichtern. Und man merkt, dass Mullenweg aktiv den Weg in Richtung eines Block-basierten WordPress gehen möchte. In seiner Q&A-Session auf dem WordCamp Europe in Paris lässt er bereits deutlich anklingen, wohin die Reise gehen soll.

We are gonna build a lot more types of blocks. And this is the basis for, of course, what is gonna be the future of customization. So blocks will replace widgets, blocks will replace kind of all the other fundamentals and primitives inside WordPress–until everything is a block.

– Matt Mullenweg, WordCamp Europe 2017, Paris

Wir interpretieren das so: Der neue WordPress-Editor, der wohlgemerkt Teil des WordPress-Core werden soll, soll aktiv in Richtung eines mächtigen Page-Builders entwickelt werden. Sollte das Block-Prinzip dann noch über die Beitrags-Ebene hinaus anwendbar werden, dürften die nächsten Releases äußerst interessant werden. Bevor es aber soweit ist, muss Gutenberg erst einmal erwachsen werden und sich seine Daseinsberechtigung als WordPress-Editor verdienen.

Wir freuen uns in jedem Fall auf weitere Updates und natürlich eine stabile Vollversion von Gutenberg. Du hast noch Input zum neuen Editor, den wir nicht abgedeckt haben oder eine Erfahrung, die du mit der Community teilen möchtest? Dann freuen wir uns auf deinen Kommentar!

2 thoughts on “The Good, the Bad and the Pretty – WordPress Gutenberg im Test

  1. per zufall auf diesen artikel gutenber editor gestossen. da ich mich im moment mit einigen page-builder beschäftige ist der gutenber eine interessant alternative. viele funktionen fehlen noch z.B. grid-system. aber der ansatz ist ist ok. eigentlich könnte man das auch zu einem inline-editor von wordpress machen, dann müsste man nicht immer die ansichten wechseln.

    1. Unserer Interpretation nach ist das genau das Ziel. Bis dahin muss aber noch viel passieren. Was ja auch normal wäre: Nichts entsteht über Nacht, gerade dann nicht, wenn der hohe Komplexitätsgrad eines modularen CMS beachtet werden muss. Wir können nur hoffen, dass das Projekt nicht an Schwung verliert und das großartige Block-System dann auch sukzessive auf andere Bereiche von WordPress ausgeweitet wird. Noch ist Gutenberg aber keine Alternative zu Page-Buildern. Und wahrscheinlich wird das auch lange nach Erscheinen der Vollversion noch nicht der Fall sein. Das Potenzial des Editors ist aber sehr groß und es scheint die Kreativität der Contributor zu beflügeln 😉

Schreibe einen Kommentar

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

* Zustimmung zur Speicherung ist nach DSGVO zwingend.

Ja, ich will den Kommentar senden.

Wenn du fortfährst, stimmst du unserer Cookie-Richtlinie zu.