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

hostpress-blog-gutenberg

“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 euch 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.

wordpress-meldung-gutenberg
Abbildung 1: Dashboard Meldung Gutenberg

 

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.

tinymce-editor
Abbildung 2: Tiny MCE Editor

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.

gutenberg-editor
Abbildung 3: Gutenberg Editor

 

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:

Bedienelemente Gutenberg
Abbildung 4: Bedienelemente Gutenberg

 

  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).

block-optionen
Abbildung 5: Block-Optionen

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)

seitenleiste-einstellungen-gutenberg
Abbildung 6: Seitenleiste Einstellungen

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

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

Formatierung

blocks gutenberg
Abbildung 7: Gutenberg Blöcke
  • Code
  • Classic
  • HTML
  • Vorformatiert
  • Pullquote
  • Tabelle
  • Vers

Layout Elemente

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

Widgets

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

Einbettungen

  • 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

 

Fazit – Umstieg auf Gutenberg. Ja oder Nein?

Mit dem neuen Gutenberg Editor macht WordPress einen großen Schritt in Richtung Page-Builder und weg vom klassischen Text-Editor. Warum dieser Schritt? WordPress wurde 2003 als reine Blog-Software veröffentlicht. Mittlerweile wird WordPress als Plattform für alle möglichen Arten von Webseiten oder Webshops eingesetzt. Komplexe Strukturen und multimediale Inhalte sind für Webseitenbetreiber von großer Wichtigkeit. Mit dem TinyMCE Editor war bzw. ist die Umsetzung solcher Strukturen nur mit fortgeschrittenen Programmierkenntnissen möglich. Abhilfe leisten seitdem die sogenannten Page-Builder</>. Gutenberg schließt nun diese Lücke und integriert einen eigenen Page-Builder.

 

Betrachtet man den Funktionsumfang so kann sich dieser (noch) nicht mit aktuellen Page-Buildern wie Elementor oder dem WPBakery Page Builder messen. Es ist jedoch damit zu rechnen, dass der Funktionsumfang in Zukunft noch erweitert wird und neue Blöcke hinzukommen.

 

Ob sich ein Umstieg auf Gutenberg lohnt, muss jeder individuell entscheiden. Klassische Blog-Posts lassen sich zugegeben schneller mit dem alten TinyMCE Editor verfassen. Webseiten-Betreiber sollten vor dem Einsatz von Gutenberg zudem abklären, ob Plugins und Theme kompatibel sind. Einsteigern kann man den Editor jedoch fast uneingeschränkt empfehlen: Der Workflow ist nach kurzer Eingewöhnung äußerst intuitiv und man benötigt keinerlei Programmierkenntnisse. Wer partout nicht mit dem neuen Editor arbeiten möchte, kann jederzeit den klassischen Editor als Plugin nachinstallieren. Wir empfehlen euch, den Editor noch vor dem Release mit WordPress 5.0 zu testen.

Gutenberg – der neue WordPress Editor steht in den Startlöchern
5 (100%) 1 vote