Was es mit dem neuen Gutenberg-Editor auf sich hat (Pro und Contra)

Der aktuelle Visuelle Editor von WordPress hat sich im Laufe der Jahre kaum geändert und ist im Wesentlichen das Gleiche geblieben. Während dies nicht unbedingt eine schlechte Sache ist, denken viele, dass es an der Zeit für eine Veränderung ist. Andere Plattformen wie Medium oder Ghost bieten eine wirklich einzigartiges und erfrischendes Nutzererlebnis für Schreiber, also warum soll WordPress das nicht auch? Nun ja, viele Contributor und freiwillige Helfer haben in den letzten 6+ Monaten am neuen WordPress Gutenberg-Editor im Hintergrund gearbeitet.  Ihr Ziel? Das Einfügen umfangreicher Inhalte in WordPress einfacher und angenehmer zu gestalten. Heute schauen wir uns an, was den neuen Editor ausmacht und welche Vor- und Nachteile der Editor mit sich bringt.

• Was ist Gutenberg?
• Wie lässt sich Gutenberg installieren?
• Details zum Gutenberg-Editor
• Vorteile des WordPress Gutenberg-Editors
• Nachteile des WordPress Gutenberg-Editors
• Gutenberg-Demo zum Ausprobieren

Was ist Gutenberg?

Gutenberg ist ein neuer Editor für WordPress. Dieser Editor ist nach Johannes Gutenberg benannt worden, der den Buchdruck mit beweglichen Lettern vor mehr als 500 Jahren erfunden hat. Der aktuelle visuelle Editor erfordert die Verwendung von Shortcodes und HTML-Komponente, damit alles richtig funktioniert. Ihr Ziel war also, diesen Vorgang einfacher zu machen, haupstächlich für diejenigen, die gerade erst angefangen haben, mit WordPress zu arbeiten. Es werden Bausteine in Form von „kleinen Blocks“ eingeführt und man will erweiterte Layoutoptionen hinzufügen. Den offiziellen Beispielbeitrag kannst du dir hier ansehen. Um den Entwicklern und dem Team gegenüber, das am Projekt arbeitet, fair zu sein, ist es wichtig zu bermerken, dass sich das Projekt derzeit noch in der Beta- und Testphase befindet, also sollte der Editor auf Live-Seiten nicht benutzt werden. Wir wollten aber jetzt schon den Editor ein bisschen näher ansehen und selber erleben, was dieser Hype um ihn eigentlich soll. Wir sorgen dafür, diesen Beitrag regelmäßig zu aktualisieren, sobald Entwicklungen oder Änderungen vorgenommen wurden. Anscheinend will Matt Mullenweg (der Gründer) noch vor der Integration des Editors in den WP-Core 100.000 aktive Installationen haben. Das ergibt natürlich Sinn, so können sie Bugs und andere Probleme lösen und neue Ideen und Features noch einbringen. https://twitter.com/YouTooCanBeGuru/status/876067558830505984 Da sich der Gutenberg-Editor noch in der Testphase befindet, will das Team Meschen dazu bringen, den Editor auszuprobieren, sodass sie dann ihre Kommentare und ihr Feedback im WordPress Support-Forum hinterlassen oder auf GitHub ein Issue öffnen. Oder wendet euch im #core-editor-Slack-Channel an die Entwickler. Gutenberg soll mit WordPress 5.0 ausgeliefert werden.

Wie lässt sich Gutenberg installieren?

Zum Zeitpunkt der Erstellung des Blogeintrags verfügt Gutenberg über etwa mehr als 20.000 aktive Installationen mit insgesamt mehr als 290.000 Downloads und ist mit 2,5 von 5 Sternen ausgezeichnet. Gutenberg ist mit WordPress-Installationen ab Version 4.8 kompatibel.

Gutenberg WordPress-Plugin

Die neueste Version von Gutenberg kannst du aus dem WordPress-Repository herunterladen oder sie im Pluginverzeichnis auf der „Plugin hinzufügen“-Seite des WordPress-Dashboards suchen. Wieder wird dazu geraten, den Editor als Plugin nur auf einer Testseite zu installieren oder zum Testen eine Staging-Umgebung aufsetzen.

Gutenberg WordPress-Plugin installieren

Details zum Gutenberg-Editor

Nach der Installation von Gutenberg werden in der Beitragsliste unter deinen Beiträgen weitere Links sichtbar, mit denen du jeden existierenden Post in Gutenberg aufrufen kannst. Der klassische Editor wird dadurch nicht ersetzt, was ganz gut ist, denn so hast du während der Testphase die Möglichkeit zwischen Klassischem und Gutenberg-Editor zu wechseln. Mit der neusten Version im WordPress-Repository unterstützt Gutenberg nun auch benutzerdefinierte Site-Typen und Pages.

Eintrag „Gutenberg” in der Beitragsliste

Wichtig: >Der neue Gutenberg-Editor wird mit der nächsten Major-Version „WordPress 5.0“ als Standard-Editor installiert sein (#41316), zukünftig hat man jedoch die Möglichkeit, das Plugin Classic Editor zu installieren, falls man auf Kompatibilitätsprobleme stößt (wie das im untenstehenden Aufruf zu lesen ist).

WordPress 5.0 Gutenberg-Aufruf

Gutenberg fügt einen neuen Menüpunkt in dein WordPress-Dashboard hinzu, der eine Demo enthält (siehe unten) und wo man neue Beiträge erstellen kann. Wir möchten nochmal betonen, dass dieser Menüpunkt wahrscheinlich nur zu Testzwecken dient. Wie du sehen kannst, sieht der visuelle Editor etwas anders aus als der, den du wohl gewohnt bist. Die Oberfläche von Gutenberg ähnelt sehr stark der von Medium, was wir toll finden.

Demo des Gutenberg-Editors

Wenn du dir sowohl den Gutenberg-Editor als auch den aktuellen visuellen Editor nebeneinander ansiehst (zum Vergrößern klicken), wirst du merken, wie viel zusätzlichen Platz man zur Bearbeitung hat, insbesondere auf kleineren Bildschirmen. Für diejenigen, die auf Laptop-Computer arbeiten, wird Gutenberg eine schöne Abwechslung sein. Das Augenmerk wird auf das Schreiben gelegt und es wird für eine ablenkungsfreie Umgebung gesorgt.

Vergleich von Gutenberg und klassischem Editor

Wenn du die rechte Sidebar im Gutenberg WordPress-Editor  entfernen möchtest, klicke auf den Button „Post Settings”. Somit nimmt Gutenberg fast ganzen Bildschirm ein, ist aber trotzdem ein Mittelweg im Vergleich zum aktuell verfügbaren ablenkungsfreien Schreibmodus. Wir haben versucht im Gutenberg-Editor die Tastenkombination Shift+Alt+W zum Wechseln in den ablenkungsfreien Schreibmodus zu verwenden, aber es scheint jetzt noch nicht zu funktionieren. Es kann sein, dass sie diese Funktion noch nicht hinzugefügt haben. Wir sind uns aber sicher, dass sie dies mal tun werden, denn es gibt ja ziemlich viele Menschen, die diesen Modus benutzen.

Beitragseinstellungen ausblenden (auf halbem Wege bis zum ablekungsfreien Schreibmodus)

Um zwischen dem visuellen Editor und dem Texteditor zu wechseln gibt es jetzt eine Dropdown-Liste links oben. Du wirst sehen, dass die einzelnen Blocks jetzt von HTML-Kommentaren umschachtelt werden. Folgendes ermöglicht dir zum Beispiel, ein Textblock zu erstellen.

 <!-- wp:core/text --> <!-- /wp:core/text -->

Somit kannst du Blocks direkt im Textmodus des Editors erstellen. Jedoch kann diese Weise zu einer gewissen Unübersichtlichkeit führen, wenn du in diesem Modus bist.

Gutenberg Textmodus

Mit dem Markieren eines Blocks wird eine Toolbar eingeblendet, mit den Navigations-Pfeilen können Blocks nach oben oder unten bewegt werden, sie können gelöscht werden oder du kannst in die Einstellungen zur Formattierung gelangen. Der Editor für den Contentbereich erinnert stark an den Editor von Medium.

Gutenberg-Blöcke bearbeiten

Wir waren auch überrascht, wie gut das alles auf dem Handy funktioniert und sofort einsatzbereit ist. Wenn du künftig unterwegs noch vor dem Veröffentlichen eines Beitrags schnell ein Bild einfügen oder einen neuen Absatz hinzufügen möchtest, wird anscheinend Gutenberg dies einfach lösen können.

Gutenberg-Editor auf dem Handy-Bildschirm

Das erste, das dir auffallen wird, ist, dass die Toolbar von TinyMCE, der du jahrelang begegnet hast, nicht mehr vorhanden ist. Das wurde mit einem Dropdown-Menü ersetzt, das du mit dem „Insert” Button öffnen kannst. Nun, Gutenberg scheint damit die TinyMCE-Integration loswerden zu wollen. Oder haben sie das bereits getan?

TinyMCE gibt es nicht mehr

Matt Mullenweg hat sich wie folgt dazu geäußert.

„Wir wollten alles so ändern, sodass man nur einmal die Dinge über Blocks lernen muss und wenn man das tut, sei es in Beiträgen, Sidebars, auf einer Seite oder in einem benutzerdefinierten Beitragstyp, gilt überall das gleiche Funktionsprinzip. Egal, was damit integriert sind, sagen wir mal ein Plugin für deine Google Photos oder dein Dropbox, das wird jetzt überall genauso funktionieren,”– Matt Mullenweg (Quelle: WP Tavern)

Auch Andrew Roberts Projektleiter des TinyMCE-Teams hat uns kontaktiert und einiges klargestellt zu dem, was jetzt eigentlich mit TinyMCE und Gutenberg ist.

Ich bin seit der Gründung im Gutenberg-Team. Das war eine gemeinsame Anstrengung. Erwähnenswert ist außerdem, dass TinyMCE die Kern-Editing-Engine ist, die den „bearbeitbaren” Teil antreibt und der wiederum die Mehrheit der Blocks antreibt. Den Tabellen Block zum Beispiel. Dies soll auch für die nächste Zukunft gelten. Außerdem ist der klassische Textblock im Grunde genommen der TinyMCE-Editor. Wie bekannt der Editor wird, hängt wahrscheinlich von den Feedbacks der Community ab. Es gibt tatsächlich eine Pull-Anforderung (#1394), die vorsieht, Gutenberg zum Wrapper für den alten Editor zu machen, sodass vorhandene TinyMCE-Plugins und Schaltflächen weiterhin funktionieren. Es bleibt abzuwarten, ob dies integriert wird. Es ist jedoch wahrscheinlich, dass die Core-Teams von WP und TinyMCE zukünftig zusammenarbeiten wird, um eine Textverarbeitungs-ähnliche Usererfahrung in WordPress zu garantieren. Auch wenn es letzendlich zu einem Plugin wird. In diesem Zusammenhang möchte ich erwähnen, dass einer der Gründe, warum wir am Gutenberg-Projekt mit einem ausgezeichneten Gutenberg-Team arbeiten, ist, diese Konzepte in den nächsten 12 Monaten zur breiteren TinyMCE-Community zu bringen. Das wird einem ermöglichen, Block-basierte Bearbeitungskonzepte in die eigene benutzerdefinierte Anwendung einzubauen. – Andrew Roberts

Unten sind einige neue Ergänzungen zum Editor zu finden, die wir ziemlich cool fanden.

Tabellen Block und Textspalten-Block

Einfache Tabellen sind nicht mehr so komplex, denn du kannst sie jetzt einfach als Blöcke innerhalb des Editors einfügen. Früher musstest du entweder Plugins von Drittanbietern oder HTML-Code benutzen. Aktuell kannst du nur 2×2-Tabellen mit der Insert-Option einfügen und du kannst sie nicht formattieren, ohne die Textansicht öffnen zu müssen. Wir denken aber, dass man diese irgendwann mal auch im visuellen Editor tun kann.

Gutenberg-Tabelle

Es wurde auch die Möglichkeit hinzugefügt, responsive Textspalten-Blöcke einzufügen, das ist super! Jetzt kannst du aus 2-,3- und 4-Spaltenlayout wählen. Responsive Spalten waren in WordPress immer zu umständlich und brauchten ein Drittanbieter-Plugin zur ordnungsgemäßen Funktionieren.

Gutenberg-Spalten

Live HTML Block

Es gibt auch den sogenannten Live-HTML-Block. Du kannst deinen Code einfügen und gleich die Vorschau innerhalb des Blocks sehen. Das ist eigentlich eine ziemlich coole Idee. Somit kann man tatsächlich vermeiden, zwischen dem visuellen Editor und dem Textmodus hin und her zu wechseln.

HTML-Block im Gutenberg-Editor

Bilder mittels Drag and Drop einfügen

Mit dem Gutenberg 0.5.0 können Bilder mittels Drag and Drop direkt in ein Bildblock eingefügt werden, so wie du es im visuellen Editor gewohnt bist. Es gibt jedoch dabei einen Fade-Effekt, was ziemlich komisch ist. Das können wir auch als ein Problem ansehen.

Bilder per Drag and Drop einfügen

Du kannst jetzt bestimmten Block zusätzliche CSS-Klassen vergeben.

Füge CSS-Klasse hinzu

Zuletzt verwendete Blocks

Wegen der hohen Anzahl an Blocks, die in Gutenberg eingebaut sind, und das ist wahrscheinlich noch nicht alles, haben sie eine Suchfunktion integriert, womit die zuletzt verwendeten Blocks direkt angezeigt werden. Ziel ist, das Einfügen von Blocks zu beschleunigen.

Zuletzt verwendete Blocks

Optionen für Cover Text

Mit dem Gutenberg 0.9.0 hat man neue visuelle Styles und Änderungoptionen für den Cover Text Block eingeführt. Du hast nun die Möglichkeit, die Schriftgröße zu ändern, die Option Initialbuchstabe zu wählen und die Farben mittels der neuen benutzerdefinierbaren Farbpalette zu ändern.

Gutenberg Cover Text

Autovervollständigung

Ein cooles Feature wurde in Gutenberg 1.1.0 hinzugefügt, und zwar die Autovervollständigung beim Hinzufügen von Blocks. Für diejenigen unter uns, die Slack tagtäglich benutzen, ist es eine gewohnte Weise, Inhalte schnell so zu formattieren, wie du es gern hättest. Die Möglichkeit zu haben, die Anzahl der notwendigen Klicks zu minimalisieren und öfter das Keyboard zu nutzen, ist immer gut.

Gutenberg Autovervollständigung (Bildquelle: WordPress.org)

Inhaltsverzeichnis und Ankerlinks

Inhaltsverzeichnisse können in der Sidebar positioniert werden. Im Inhaltsverzeichnis sind anklickbare Texte, sodass du einfach an einen bestimmten Abschnitt in deinem Beitrag springen kannst. Dies kann beim Schreiben längerer Inhalte sehr praktisch sein.

Gutenberg Inhaltsverzeichnis

Außerdem kannst du jetzt schon auch Ankerlinks innerhalb der Blöcke verwenden. Das ist eine echt aufregende Sache und etwas, was seit langem im Core gebraucht wurde. Ankerlinks helfen uns, direkt auf den bestimmten Abschnitt der Header innerhalb des Beitrags zu springen. Das eignet sich sehr gut fürs Teilen oder Erstellen von Sprungmarken, die in SERPs auf bestimmte Menüs verweisen.

Gutenberg Ankerlinks

Anzahl von Wörtern und Blocks

Die meisten von uns sind daran gewohnt, dass die Gesamtanzahl der Wörter unten im WYSIWYG-Editor zu finden ist. Nun, in Gutenberg 1.2.1 werden diese Angaben über ein Pop-up-Fenster angezeigt. Da wirst du die Gesamtanzahl der Wörter, Blocks und Überschriften lesen können.

Anzahl von Wörtern und Blocks in Gutenberg

Pull Quotes und neue Optionen für Blockausrichtung

Außer der Möglichkeit von Blockzitaten, die wir jahrelang benutzt haben, gibt es jetzt auch Pull Quotes (auch Seitenansprache genannt). Und ja, Pull Quotes sind was anderes. Es ist auch schön zu sehen, dass Pull Quotes ganz unterschiedlich platziert werden können. Jahrelang konnte man die Block-Elemente linksbündig, rechtsbündig und zentriert ausrichten oder keine Ausrichtung für sie festlegen. Mit dem Gutenberg WordPress-Editor hast du jetzt zusätzlich neue Breiten, „align wide”, also breiter als der Inhaltscontainer (siehe unten) oder „align full-width”, d.h. in der vollen Seitenbreite.

Pull Quote in weiter Breite in Gutenberg

Button

Gutenberg verfügt über ein integriertes Method zum Hinzufügen von Buttons. Obwohl es hier nicht so viele Optionen gibt, sind wir froh darüber, denn viele Blogger und andere Publizierende brauchten schon einen einfacheren Weg zur Erstellung von Calls-to-Action in den Blogbeiträgen. Aktuell musst du HTML-Code oder Drittanbieter-Plugins für Buttons oder Shortcodes verwenden.

Gutenberg-Button

Möglichkeiten zum Einbetten von Inhalten

Falls du irgendwann mal nach einfacher zugänglichen Möglichkeiten zum Einbetten von Inhalten gesucht hast, naja, da hast du sie jetzt! Gutenberg macht das Einbetten von Inhalten super einfach. Von YouTube über SoundCloud, Hulu, Flickr, Imgur, Twitter, Slideshare, Reddit ist praktisch alles dabei.  Obwohl man auch früher alles Mögliche in Beiträge einbinden konnte, wussten viele es nicht, weil nie was von dieser Möglichkeit im visuellen Editor erwähnt wurde. Kombiniert mit dem neuen Block-Erlebnis und Ausrichtungsmöglichkeiten, wissen wir nicht, wie man es noch besser machen könnte. Nun, sie müssten vielleicht mal die Dinge mit der Zeit umorganisieren, denn das hier kann leicht überladen wirken.

Möglichkeiten zum Einbetten in Gutenberg

Vorteile des WordPress Gutenberg-Editors

Im Folgenden wird dargestellt, welche Vorteile Gutenberg unserer Meinung nach hat.

• Die Abhängigkeit zu TinyMCE *teilweise* abzuschütteln ist was Gutes, unserer Ansicht nach. Wir würden eine engere Integration zwischen Core, Theme-Entwicklern, Plugins und dem Editor begrüßen.

'Right now WordPress makes you learn a lot of concepts… [Gutenberg lets you] learn it once and use it everywhere.' @photomatt #WCEU

— Alex Denning (@AlexDenning) June 17, 2017

• Publizierende, die eher das Editing-Erlebnis vom neuen Medium bevorzugen, werden den WordPress Gutenberg-Editor sehr wahrscheinlich lieben.
• Gutenberg bietet eine weniger ablenkende Umgebung und zudem mehr Bildschirmbereich.
• Blöcke sind unterhaltsam zu benutzen und die neuen Ausrichtungsoptionen sind ein Schritt nach vorn für Bildschirme mit höher Auflösung, sowie für responsive Seiten und die mit voller Breite.
• Bereits jetzt funktioniert der Editor super auf Handys, und wir sind uns sicher, dass künftig immer mehr Menschen diese Option verwenden werden. Willst du schnell unterwegs ein paar Änderungen auf deinem Handy vornehmen? Kein Problem.
• Die Möglichkeit für Theme- und Plugin-Entwickler, eigene Blöcke zu erstellen.
• Für Einsteiger ist es einfacher zu benutzen.
• Noch etwas, das unsere Aufmerksamkeit erregt hat, haben wir in Gutenberg 0.4.0 gesehen. Es wurde im Entwicklungslog erwähnt, dass ein API zur Verwaltung eingefügten Inhalts himzugefügt wird. (Ziel ist, den Inhalt eines Google Docs, Word oder Markdown einfach in einen WordPress-Block zu konvertieren und kopieren.) Das wäre großartig. Jetzt geht das Übetragen von Texten von Quellen wie Google Docs zu WordPress gar nicht.

  Nachteile des WordPress Gutenberg-Editors

  Im Folgenden erfährst du, welche Vorteile Gutenberg unserer Meinung nach hat. Vergiss immer noch nicht, dass sich Gutenberg in der Testphase befindet, also werden viele dieser Dinge wahrscheinlich später noch korrigiert oder hinzugefügt.
• Gutenberg unterstütz derzeit Markdown nicht.
• Während wir früher erwähnt haben, es sei für Anfänger einfacher zu benutzen, können wir uns vorstellen, dass das für manche schwieriger zu erlernen sein wird.
• Seit Oktober 2017 funktionieren auch Metaboxes mit Gutenberg. Es befindet sich jedoch noch im Anfangsstadium, also muss es von den Entwicklern noch einiges getan werden. Es ist aber natürlich ein Schritt in die richtige Richtung. Wenigstens kannst du schon die Konfiguration deines Yoast SEO Plugins optimieren.
• 

  Gutenberg Metaboxes

• Mit so vielen Themes und Plugins da draußen wird Abwärtskompatibilität mit der Zeit ein großes Problem darstellen. Wahrscheinlich werden deswegen Tausende von Entwicklern eine Menge zu tun haben, zum Beispiel diejenigen, die TinyMCE-Instanzen nutzen. Von allen WordPress-Updates wird dieses den Entwicklern höchstwahrscheinlich die meiste Arbeit verursachen. Doch es wird vielleicht einen Wrapper geben, der die Abwärtskompatibilität für TinyMCE gewährleisten soll. Siehe Pull-Anforderung #1394.
• Manche machen sich Sorgen um die Zugänglichkeit von Gutenberg. Joost de Valk, Entwickler von Yoast SEO hat diese Besorgnis zum Ausdruck gebracht. Lies auch den folgenden Beitrag, in dem die Nutzung von Screenreader mit Gutenberg erläutert wird.

Entwickler haben angefangen, ihre Bedenken hinsichtlich Gutenberg zu äußern. Ahmad Awais hat eine Gutenberg-Boilerplate veröffentlicht, auf deren Basis Entwicklerinnen und Entwickler eigene Gutenberg Blöcke entwickeln können. Es lohnt sich, das mal anzusehen. Und viele von euch fragen sich vermutlich, ob Gutenberg eine wählbare Option sein wird oder nicht? Die Antwort ist nein. Wenn Gutenberg reif für den Merge in den WordPress-Core ist, wirst du Gutenberg nicht deaktivieren können. Denn Gutenberg wird der neue Editor von WordPress sein. Allerding gibt es ein kostenloses Plugin mit dem Namen Classic Editor, das zur Wiederherstellung des alten Editors dient. Verwende dies als Mittel zum Zweck. Wir empfehlen dir noch diesen Beitrag, der Mythen über Gutenberg bricht und ggf. weitere Fragen beanworten kann.

Teste die Online-Demo zu Gutenberg

Möchtest du mit Gutenberg ohne Installation rumspielen? Probiere Frontenberg die eingeschränkte Frontend-Demo zu Gutenberg aus.

Für weitere Informationen empfehlen wir dir, einen Blick in unseren WordPress 5.0 Leitfaden zu werfen: Was ist neu in WordPress 5.0 (Wie man sich auf Gutenberg vorbereitet)?

Einführung in das Twenty Nineteen Theme (Theme für Gutenberg)

Wenn du noch nicht bereit bist kannst du den Editor auch deaktivieren: Wie man den Gutenberg Editor deaktiviert

Zusammenfassung

Insgesamt sind wir ziemlich beeindruck vom neuen Gutenberg WordPress-Editor. Das ist etwas, worüber man in Zukunft aufgeregt sein kann. Ihr sollt euch den Editor aus dem WordPress-Repository runterladen und ihn auf einer Dev-Seite oder Staging-Seite installieren. Wir stehen jetzt davor, bei der Entwicklung eines Editors zu helfen, den wir uns gewünscht haben. Wir können das gleiche Nutzererlebnis haben, wie diejenigen, die Medium benutzen, nun mit unserem Lieblings-CMS! Das Team hier bei Kinsta wird sich sicher die Zeit nehmen, Feedbacks zu geben. Hast du Gutenberg bereits getestet? Wenn ja, würden wir uns freuen, deine Meinung zu hören, gute wie schlechte.