Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

News

„Gutenberg“ – der neue Editor in WordPress 5.0

Interface des neuen Block-Editors, der mit WordPress 5.0 eingeführt wird (Screenshot: WordPress.org/gutenberg)

Mit dem für heute angekündigten WordPress 5.0 wird ein komplett neuer Editor Einzug in das CMS halten. Hier stellen wir ihn euch vor.

Gutenberg unterteilt Inhalte in Blöcke

Der neue Editor, der unter dem Code-Namen „Gutenberg“ – benannt nach Johannes Gutenberg – entwickelt wurde, ist ein radikaler Umbruch im Vergleich zu dem TinyMCE-Editor, der vor WordPress 5.0 Standard war. In dem neuen Editor sind alle Inhalte in Blöcke unterteilt. Dabei sind von Haus aus unter anderem folgende Blöcke dabei:

  • Absatz
  • Überschrift
  • Bild
  • Galerie
  • Embed
  • Tabelle

Ihr seht: Die Inhalte werden in die kleinstmöglichen Elemente unterteilt. So soll eine größere Flexibilität beim Erstellen von Beiträgen und Seiten gegeben und komplexere Layouts beim Inhalt möglich sein.

So sieht der neue Editor aus

Wenn ihr den aktuellen dritten Release-Candidate von WordPress 5.0 installiert und den Hallo-Welt-Beitrag öffnet, werdet ihr von folgender Ansicht begrüßt:

Die Ansicht von Gutenberg beim ersten Öffnen einer neuen Installation von WordPress 5.0 RC3. (Screenshot: eigene Installation)

Wie ihr seht, verändert der neue Editor die komplette Bearbeitungsansicht. Geblieben sind lediglich oben die Admin-Bar und links das Menü, das ich aus Platzgründen auf die Icons reduziert habe. Der Editor besteht grob aus zwei Bereichen:

  1. Ein großer Inhaltsbereich in der Mitte, in dem ihr eure Seiten und Beiträge schreibt.
  2. Eine Sidebar rechts, die in die beiden Bereiche „Dokument“ und „Block“ unterteilt ist.
    1. Im Bereich „Dokument“ findet ihr die Einstellungen, die die komplette Seite oder den Beitrag betreffen, wie etwa die Veröffentlichungsoptionen, Kategorien oder Permalink-Einstellungen.
    2. Der Bereich „Block“ beinhaltet Einstellungen zu dem jeweiligen gerade ausgewählten Block, beispielsweise für die Textfarbe eines Absatzblocks.

Oben in der Toolbar gibt es allgemein nützliche Optionen wie die Möglichkeit einen neuen Block einzufügen, sich die Inhaltsstruktur oder eine Vorschau anzeigen zu lassen und die Änderungen zu veröffentlichen.

Wenn ein Block angeklickt wird, verändert sich die Ansicht:

Der neue Gutenberg-Editor mit ausgewähltem Absatzblock. (Screenshot: eigene Installation)

Es erscheint eine Toolbar direkt über dem Block – die lässt sich über die drei Punkte ganz rechts oben neben dem Zahnrad auch unter der Editor-Toolbar fixieren. Immer vorhanden ist darin ganz links ein Button, mit dem ein Block in andere Blöcke umgewandelt werden kann – etwa ein Absatzblock in einen Überschriftenblock. Ebenfalls bei jedem Block vorhanden sind ganz rechts die drei Punkte, die weitere Optionen sichtbar machen, wie etwa das Duplizieren oder Löschen eines Blocks.

Die übrigen Buttons in der Toolbar sind abhängig vom Block – hier haben wir beispielsweise Optionen für die Textausrichtung oder Verlinkung. Zusätzlich wird rechts in der Sidebar vom Dokument- in den Blockbereich gewechselt. Hier kann standardmäßig für einen Absatz die Schriftgröße sowie Text- und Hintergrundfarbe festgelegt und ein Initialbuchstabe aktiviert werden.

Der Editor in Aktion

Der neue Gutenberg-Editor in Aktion.

In dem GIF seht ihr die grundlegende Nutzung des Editors. Ein neuer Block wird automatisch erstellt, wenn man am Ende eines anderen Blocks die Enter-Taste drückt. Über einen Slash-Befehl kann dann der Blocktyp gewählt, oder – falls es ein Absatz sein soll – einfach losgeschrieben werden.

Alternativ kann über ein links erscheinendes Plussymbol der Blocktyp geändert werden, aber über den Shortcut geht es natürlich schneller. Auf WordPress.org/gutenberg lässt sich der Editor ausprobieren, ohne eine eigene Installation anlegen zu müssen.

Sieht fancy aus, aber wo kommt jetzt der richtige Mehrwert?

Berechtigte Frage – das bisher gezeigte wäre ja auch (fast) alles mit dem TinyMCE möglich gewesen. Aber schauen wir uns beispielsweise den Block an, der in dem Demo-GIF als letztes eingefügt wurde: eine Liste der letzten Beiträge. So etwas gab es bisher als Widget für Widget-Bereiche, oder als selbsterstellten – oder von einem Plugin gelieferten – Shortcode, wenn es im Beitragsinhalt eingefügt werden sollte.

Mit Gutenberg können solche komplexeren Inhaltstypen jetzt als Block umgesetzt werden, sodass der Nutzer direkt im Backend sieht, wie es im Frontend aussehen wird – sofern das Theme wie im Beispiel oben Styles im Editor ausspielt. Das ist um einiges schöner als Shortcodes. Ein weiteres Beispiel: Es gibt einen Spaltenblock, über den mehrspaltige Inhalte realisiert werden können. Auch das war bisher nur mit Shortcodes oder Page-Buildern möglich.

Außerdem gibt es die Möglichkeit, einen Block in einen wiederverwendbaren Block umzuwandeln. Damit kann ein Block auf verschiedenen Seiten wiederverwendet werden und der Inhalt muss nur einmal gepflegt werden.

Momentan ist das alles teilweise an einigen Stellen noch etwas hakelig, aber von entscheidender Stelle als gut genug zum Release bewertet. Mit der Zeit wird das stabiler – für die Zukunft sind zweiwöchige Minor-Releases geplant.

Erweiterbarkeit und Anpassung des Editors

Darüber hinaus lassen sich mit der Editor-API eigene Blöcke erstellen. So ist beispielsweise ein Block für Testimonials oder für eine Grid-Anzeige von Beiträgen eines Custom-Post-Types möglich.

Außerdem können bestehende Blöcke erweitert und verändert werden – so können beispielsweise für den Absatzblock verschiedene „Stiles“ registriert werden, die der Nutzer auswählen kann und damit dem p-Element eine zusätzliche Klasse zuweist. So ließen sich visuell hervorgehobene Absätze erstellen, zum Beispiel für Update-Boxen oder besondere Hinweise.

An dieser Stelle sei aber auch gesagt, dass zumindest momentan die Dokumentation der API noch zu Wünschen übriglässt. Vermutlich wird man bei der Entwicklung mit Gutenberg auch noch den ein oder anderen Bug antreffen – diese Block-Stile lassen sich zum Beispiel noch nicht für Blöcke erstellen, die wiederum andere Blöcke enthalten können (wie der Spalten-Block).

Theme-Optionen für den Editor

Der neue Editor liefert standardmäßig eigene Styles für einige Core-Blöcke mit, wie etwa den Spalten-Block. Grob funktionieren sollte es mit Themes also, auch wenn sie nicht besonders auf Gutenberg vorbereitet sind. Das lässt sich natürlich optimieren, so können Themes die Styles im Editor anpassen, sodass die Darstellung im Backend der im Frontend ziemlich nahekommt.

Des Weiteren ist es zum Beispiel möglich, eine eigene Farbpalette zu definieren, die der User dann für Text- und Hintergrundfarben nutzen kann und dem Nutzer zu verbieten, eigene Farben zu wählen.

Dokumentation für Designer, Entwickler und User

Unter WordPress.org/gutenberg/handbook/ gibt es Dokumentationen für Designer, Entwickler und Nutzer (wobei die für Nutzer zum aktuellen Zeitpunkt noch nicht live ist). Bei der Dokumentation für Designer und Entwickler handelt es sich um Inhalte, die aus Readmes des Gutenberg-Github-Repositorys gezogen werden. Nach meiner bisherigen Erfahrung ist es am besten, direkt im Repo und gegebenenfalls im Code nachzuschauen, da, wie bereits erwähnt, die Dokumentation teilweise noch nicht so umfangreich ist, wie es wünschenswert wäre.

Hilfe, ich will das nicht, kann ich das abstellen?

Wenn ihr den neuen Editor aus irgendwelchen Gründen nicht verwenden möchtet oder könnt (es gibt leider momentan noch Probleme mit der Barrierefreiheit), gibt es die Möglichkeit ihn zu deaktivieren. Dafür könnt ihr euch das Plugin Classic Editor installieren und habt anschließend wie bisher weiter den TinyMCE.

Bitte beachte unsere Community-Richtlinien

3 Reaktionen
dennis

Der neue Editor ist gut und bietet viele Vorteile. Es ist so, dass Änderungen immer schlecht von Menschen angenommen werden. Das ist normal und wird sich nie ändern.

Wer wechseln möchte und wirklich auch einen Blog betreibt, Wordpress wird nämlich für alle mögiichen Dinge eingesetzt, für die es gar nicht vorgesehen ist, der sollte sich Textpattern anschauen. Das ist eine gute und einfache Software, die sich wirklich ums Bloggen dreht. Nutze ich selbst auch lieber und der Editor ist ein reiner HTML Editor, so wie es sein sollte.

Antworten
Jürgen

sollte fairerweise auch das PlugIn Disable Gutenberg von Jeff Starr erwähnt werden, der alle Inhaltstypen zugunsten des Beibehalts des bewährten klassischen Editors deaktiviert und laut Community wärmstens empfohlen wird.

nach internen mir vorliegenden Informationen sind bereits einige Websites beim Major Upgrade auf 5.0 gecrasht. Ob darunter auch solche sich befinden, die Gutenberg mit PlugIns vorsorglich ausgeklammert haben, ist mir noch nicht bekannt.

Die Verunsicherung ist allerdings sehr gross und könnte der Abspaltung zu Classic Press Vorschub leisten. Eine Migration via PlugIn wird bereits angeboten. Trotzdem bleiben viele Fragen offen, wohin sich WP entwickeln wird. Einige Blogger haben schon angekündigt: wird das Chaos zu gross wechseln wir zu Joomla oder anderen CMS Anbietern.

Antworten
Florian Brinkmann

Hi Jürgen,

danke für deinen Kommentar.

Zu den gecrashten Updates: Ich bin sicher, dass immer einige Sites bei Updates kaputtgehen, kommt halt immer drauf an, wie stark sie angepasst sind :)

Aber klar ist auch: bei dem Release ist einiges nicht optimal gelaufen, auch was die Kommunikation betrifft. Ich persönlich finde Gutenberg einen guten Schritt, aber meiner Meinung nach war der Release zu früh, dafür hat der Editor noch zu viele Bugs.

Viele Grüße
Florian

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.