Gutenberg –  der neue WordPress Editor steht in den Startlöchern

“It’s time for WordPress’ next big thing, the thing that helps us deal with our challenges and opportunities. The thing that changes the world. Gutenberg“

So beschrieb WordPress‘ Lead Entwickler Matthew Mullenweg bereits im vergangen Jahr im Artikel: We called it Gutenberg for a reason den Editor und adressierte darin die Vorteile für verschiedene Stakeholder-Gruppen. Ein gutes Jahr nach der Veröffentlichung des Artikels steht der neue Editor in den Startlöchern und wird in Kürze mit dem Update auf WordPress 5.0 verfügbar sein.

Was der Editor leistet, welche Vor- und Nachteile er bietet, wie der Workflow aussieht und für wen sich ein Umstieg lohnt wollen wir Ihnen in diesem Blog-Beitrag erläutern.

Was ist Gutenberg?

Gutenberg ist der neue Standard Editor, der ab WordPress Version 5.0 den bestehenden Tiny MCE Editor ablösen wird. Bereits jetzt ist Gutenberg als Plugin erhältlich. Nach der Installation der aktuellen Version 4.9.8 (Stand: November 2018) erhält jeder Webmaster auf dem Dashboard eine Meldung über die Verfügbarkeit (Vgl. Abbildung 1). Wer von einer Plugin-Installation noch absehen möchte, den Editor jedoch vorab testen will, der kann ihn auch ohne Plugin-Installation in einer Live-Version online testen.

Unterschiede zwischen Gutenberg und Tiny MCE

Der neue Gutenberg Editor verfügt über eine komplett neue Struktur und eine überarbeitete Optik (Vgl. Abbildung 3). Die größte Änderung betrifft jedoch die Art und Weise wie Seiten erstellt werden: Anders als der Tiny MCE Editor verwendet Gutenberg für alle Elemente eines Beitrags oder eine Seite sogenannte Blöcke. Jeder Block repräsentiert dabei einen Baustein für ein bestimmtes Element. Man schreibt also nicht mehr länger nur seinen Text, erstellt Überschriften über die Bedienelemente der Werkzeugleiste oder fügt Medien in Form von Bildern und Videos ein.

Vielmehr „baut“ man sich den gewünschten Aufbau genau wie mit einem Page-Builder über die vorhandenen Bausteine zusammen. Jeder Baustein kann als eigenständiges Element bearbeitet, erweitert oder verschoben werden.

Neuer Workflow mit dem Gutenberg Editor

Die ersten Schritte im neuen Editor gestalten sich (für erfahrene Nutzer) etwas ungewohnt: Blickt man zunächst auf eine mehr oder weniger blanke Zeichenfläche. Man kann sich den Einstieg erleichtern, indem man sich mit den wichtigsten Menüflächen kurz auseinandersetzt. An dieser Stelle wollen wir auf die wichtigsten Bedienelemente eingehen und zeigen, wie man die ersten Texte im neuen Editor verfasst.

Bedienung

Bevor man seine ersten Blöcke erstellt, sollte man sich mit den wichtigsten Bedienelementen vertraut machen. In der fixierten Leiste am oberen Bildschirmrand befinden sich folgende Funktionen:

1. Neuen Block hinzufügen
2. Rückgängig
3. Wiederholen
4. Inhaltliche Struktur
5. Block Navigation
6. Einstellungen (für Dokument & Block)
7. Weitere Werkzeuge und Optionen (z.B. Code Editor)

Klickt man auf das Plus-Icon (1) öffnet sich ein Dropdown Menü mit einer Auswahl an Blöcken. Die Blöcke sind in verschiedene Kategorien eingeteilt (Mehr dazu im folgenden Abschnitt: Vorhandene Blöcke). Mit einem Klick auf den gewünschten Block wird dieser erstellt. Typischerweise beginnt ein Artikel oder eine Seite mit einer Überschrift. Klickt man auf den Block „Überschrift“ wird ein leerer Block erstellt. Gleichzeitig öffnet sich direkt am Block ein Kontextmenü wo man weitere Einstellungen vornehmen kann (Vgl. Abbildung 5).

Das Kontextmenü ändert sich dabei je nach Block. Bewegt man den Mauszeiger an die horizontalen Ränder des Blocks erscheint ein Plus-Icon über das man direkt neue Blöcke erstellen kann. Weitere Einstellungen lassen sich vornehmen indem man die Seitenleiste über das Zahnrad-Icon am oberen Bildschirmrand zuschaltet. Hier hat man die Möglichkeit Einstellungen am Dokument oder am aktuell ausgewählten Block vorzunehmen (Vgl. Abbildung 6)

Vorhandene Blöcke

Beiträge oder Seiten werden im Gutenberg Editor über verschiedene Blocks oder Blöcke zusammengestellt. Jeder Block repräsentiert hierbei ein bestimmtes Element: Text, Bild, Zitat, Überschrift, etc.. Hintergrund ist, dass Inhalte besser strukturiert werden sollen. Jeder Block lässt sich dabei individuell bearbeiten, anpassen und positionieren.

In der aktuellen Version kurz vor Release stehen folgende Blöcke zur Verfügung:

Allgemeine Blöcke</h4

• Absatz
• Cover
• Bild
• Überschrift
• Galerie
• Liste
• Zitat
• Audio
• Datei
• Video

Formatierung</h4
Abbildung 7: Gutenberg Blöcke

• Code
• Classic
• HTML
• Vorformatiert
• Pullquote
• Tabelle
• Vers

Layout Elemente</h4

• Spalten
• Button
• Medien und Text
• Mehr
• Seitenumbruch
• Trennzeichen
• Abstandshalter

Widgets</h4

• Archive
• Kategorien
• Neueste Kommentare
• Neueste Beiträge

Einbettungen</h4

• Einbetten
• Facebook
• Twitter
• Youtube
• Instagram
• (…)

Zudem bietet WordPress einen Reiter „Meistgenutzt“ zur Verfügung. Hier werden alle Blöcke angezeigt, die bereits bei der Erstellung genutzt wurden. Auf diese Blöcke lässt sich schneller wieder zugreifen. Des Weiteren wird eine Suchfunktion zur Verfügung gestellt über die man textbasiert nach einzelnen Blöcken filtern kann (Vgl. Abbildung 7).

Vorteile und Nachteile vom Gutenberg Editor

Gutenberg ändert die Art und Weise wie man Beiträge und Seiten unter WordPress erstellt grundlegend. Der folgende Abschnitt beschreibt Vorteile und Nachteile des Editors, welche wir in unseren Tests feststellen konnten.

Vorteile des Editors

• Einfaches Erstellen komplexerer Strukturen
• Keine Programmierkenntnisse notwendig
• Große Auswahl an Blöcken
• Auch Mobil nutzbar
• Komfortfunktionen (Wiederverwertbare Blöcke, Statistiken)
• Keine Verschlechterung der Performanz
• Erweiterbarkeit der Blöcke durch Entwickler

Nachteile des Editors

• Anpassung an neuen Workflow
• Inkompatibilität mit Themes & Plugins
• Mehr „Klick-Arbeit“ notwendig
• Spalten Bedienung hakt teilweise
• Shortcodes funktionieren teilweise nicht mehr
• Vereinzelte Bugs