Profis mit Erfahrung


Der Gutenberg Editor – ein Erfahrungsbericht

Stimmt es wirklich, dass der Gutenberg Block-Editor die WordPress-Welt monumental verändern soll, wie es heißt? Wir haben uns das ansehen wollen und die Beta-Version des Gutenberg-Plugins getestet.

Hinweis: dieser Artikel wurde am 11. Juli 2018 verfasst. Seither hat sich Gutenberg kräftig weiterentwickelt und wird durch weitere Block-Plugins erweitert.


Ich schreibe diesen Blogbeitrag bereits im neuen Gutenberg Editor (»Block-Editor«) der demnächst mit der WordPress Version 5.0 veröffentlicht werden soll. Jetzt sind wir immerhin ja schon bei WordPress-Version 4.9.7 (Status 11. Juli 2018) angelangt, also müssen wir uns als WordPress Redakteurinnen wohl damit beschäftigen. Schließlich wird Gutenberg den aktuellen TinyMCE Editor komplett ersetzen.

Stimmt es wirklich, dass er die WordPress-Welt monumental verändern soll, wie es heißt? Ich wollte das mal etwas genauer unter die Lupe nehmen, und habe die Beta-Version des Gutenberg-Plugins getestet.

Installation

Ich erstelle eine neue Seite, und sofort erscheint ein Text, der mich in die „wunderbare Welt der Blöcke“ willkommen heißt. Wie schön!

Die obere Seitenleiste

Wenn ich das “+” anklicke (“Add block”), kann ich einen neuen Block einfügen. Es gibt Blöcke für jede mögliche Art von Content:

  • Fließtext (Absatz)
  • Überschriften
  • Bilder
  • Listen
  • Zitate
  • Galerien
  • Audio
  • Video
  • Dateien
  • Untertitel

Erster Eindruck: viel mehr Platz und ganz schön viele Blöcke!

Die Blöcke unterteilen sich in:

  • Allgemeine Blöcke (wie die bereits oben genannten)
  • Formatierungs-Blöcke: hier kann man seinen eigenen Code oder HTML eingeben, eine Tabelle, ein Pullquote (hervorgehobenes Zitat) und weitere Blöcke, deren Sinn sich mir aber noch nicht ganz erschließt
  • Layout-Elemente: hier kann man Buttons, Spalten, Textspalten, Seitenumbrüche, Trennzeichen usw. einfügen
  • Widgets: Shortcode, Kategorien, neueste Beiträge
  • Embeds: das sind die Social Media Icons, die man hier einfügen kann

Gleich neben dem „+“ Symbol befindet sich ein Pfeil, mit dem ich meine Änderungen rückgängig machen kann. Sehr praktisch! Bisher war der Rückgängig-Pfeil schlecht sichtbar im WordPress Editor. Man musste zuerst die Werkzeugleiste umschalten, um ihn überhaupt sehen zu können.

Obere Seitenleiste, rechts

Vorschau: Ich kann eine Vorschau meines Beitrags laden, um sicherzugehen, ob ich mit meinen Blöcken zufrieden bin.

Veröffentlichen: Wenn ich fertig geschrieben habe, klicke ich einfach rechts oben auf ›Veröffentlichen‹ und schon ist mein Beitrag online.

Unter dem Zahnrad rechts oben kann ich weitere Einstellungen zum Dokument vornehmen, wie z.B. Sichtbarkeit, Veröffentlichungsdatum, Beitragsformat, Kategorien, Schlagwörter, usw.

Ebenso kann ich hier die Einstellungen der Blöcke verändern.

Erster Eindruck: Durch die obere Seitenleiste ist der Gutenberg Editor übersichtlicher. Wenn ich einen Beitrag am Smartphone oder Tablet schreibe, muss ich nicht nach oben scrollen, wie bisher, um meinen Beitrag vorab zu sehen. Doch wo ist der „Speichern“- Button geblieben? Erst später komme ich drauf, dass mein Beitrag automatisch gespeichert worden ist.

Neuer Blog-Beitrag

So, jetzt mal genug von der oberen Seitenleiste. Gehen wir ans richtige Handwerk, nämlich einen Blogbeitrag schreiben.

Sobald ich auf „Return“ drücke, macht der Gutenberg Editor automatisch einen neuen Block, den er als „Absatz“ einstuft.

Über dem Block erscheint eine Leiste mit mehreren Möglichkeiten: ich kann den Block-Typ ändern, die Position des Textes ändern, fett/kursiv schreiben oder den Text durchstreichen. Was ich wunderbar finde: es gibt hier die Möglichkeit, direkt im Text einen Link einzufügen. Falls man einen Beitrag am Smartphone oder Tablet verfasst, muss man im TinyMCE Editor immer ganz nach oben scrollen, um einen Link einfügen zu können. Das hat mich immer genervt. Jetzt kann ich das viel schneller machen. Ein großer Pluspunkt!

Gutenberg-Editor – Texte schreiben

Ebenso kann ich die Blöcke rauf- und runterschieben. Das ist ganz schön praktisch… Ich muss nicht mehr mit „Ausschneiden“ und „Einfügen“ arbeiten.

Der Nachteil: Wenn ich mehrere Blöcke entfernen möchte, muss ich bei jedem einzelnen Block auf die drei Punkte rechts und auf »entfernen« klicken. Ich kann leider nicht mehrere Blöcke auf einmal entfernen. Oder zumindest habe ich noch nicht herausgefunden, wie es funktioniert.

Was ich ebenfalls sehr praktisch finde: Wenn ich bei einem Block auf die drei Punkte klicke, kann ich ihn als wiederverwendbar markieren: „In wiederverwendbaren Block umwandeln“. Somit kann ich diesen Block immer wieder an einer anderen Stelle einfügen.

Texteinstellungen

Gutenberg-Editor – Texteinstellungen

Wenn ich meinen Text in einem Block schreibe, und auf das Zahnrad in der oberen Seitenleiste klicke, habe ich unter „Blöcke“ mehrere Formatierungsmöglichkeiten für meinen Text.

Ich kann Text größer oder kleiner machen, ich kann die Hintergrundfarbe meines Blocks ändern, oder nur die Textfarbe.

Ich finde es allerdings etwas verwirrend, dass die Text-Einstellungen sowohl beim Block selbst, als auch rechts zu finden sind. Schöner wäre es, das alles unter einem Punkt zu haben.

Layout-Möglichkeiten

Spalten

Ich habe die Möglichkeit, meinen Text in zwei Spalten zu unterteilen. Leider befindet sich dieser Block noch in der Beta-Version und funktioniert noch nicht einwandfrei. Füge ich nämlich Spalten hinzu, kann ich sie nicht mehr löschen. Da bleibt mir nur noch übrig, auf den „Rückgängig-Pfeil“ zu klicken. Schade!

Den Page-Builder ersetzt der Gutenberg-Editor somit wohl nicht.

Gutenberg-Editor – Spalten

Buttons

Dafür finde ich die Option, Buttons einzufügen sehr gut. Eignet sich super für Call-to-Actions, also Handlungsaufrufe. Damit kann ich Besucher dazu animieren, sich anzumelden, zu kaufen oder mehr zu lesen. Die Buttons kann ich individuell benennen und ihre Farbe in den Einstellungen ändern, wenn ich auf das Zahnrad rechts oben in der Seitenleiste klicke. Ebenso kann ich die Textfarbe ändern. Falls ich ein individuelles Design des Buttons erstellen möchte, kann ich zusätzliche CSS-Klassen einfügen, was allerdings nur Profis vorbehalten ist.

Gutenberg-Editor – Buttons

Bilder

Als ich versucht habe, im Beitrag ein Titelbild einzufügen, hat das leider nur teilweise geklappt. Es hätte sich über die gesamte Bildschirmbreite erstrecken sollen. Das Bild ist hingegen leider klein geblieben, obwohl es viel größer und breiter hätte sein müssen für ein Titelbild. Erst nach einer kurzen Recherche im Team haben wir gemeinsam festgestellt, wie es tatsächlich funktioniert. Das ist also ebenfalls nur Profis vorbehalten, denn dazu muss ein wenig in der Datei functions.php des Themes vorbereitet werden, falls das Theme die Fähigkeit nicht mitbringt. Schade eigentlich… (Anm.: mittlerweile kein Problem)

Gutenberg-Editor - Bilder
Gutenberg-Editor – Cover

Dafür klappt es mit kleineren Beitrags-Bildern einwandfrei, und ich konnte sie auch gleich betiteln. Ebenso kann ich Bilder mit dem Gutenberg Editor viel flexibler einfügen, als im aktuellen Editor.

Auch eine Bildergalerie kann ich rasch und problemlos erstellen.

Gutenberg-Editor - Bildgalerie
Gutenberg-Editor – Bildgalerie

Fazit aus meiner Sicht

Der Gutenberg Editor befindet sich noch in der Entwicklung. Bis zur Fertigstellung wird sicher noch einiges passieren. Ich habe jetzt auch nicht alle Funktionen getestet, wollte mir vorerst nur einen Überblick verschaffen.

Vorteile:

  • Die Flexibilität: ich kann Content nun viel rascher und problemloser einfügen als bisher
  • Es ist alles viel besser sichtbar und intuitiver
  • Ich kann Blöcke verschieben
  • Texte lassen sich leichter formatieren
  • Texte und Bilder lassen sich problemlos aus Word kopieren und einfügen
  • Links lassen sich direkt im Text einfügen – sehr praktisch, wenn man auf anderen Geräten als am Desktop arbeitet
  • Mit neuen Elementen wie Spalten, Buttons gibt es mehr Möglichkeiten, meinen Content zu gestalten
  • Gestaltete Blocks lassen sich zur Wiederverwendung speichern

Nachteile:

  • Die Spalten funktionieren nicht einwandfrei, ich kann sie auch nicht löschen (Anm.: mittlerweile machbar)
  • Das Einstellen des Titelbildes über die gesamte Bildschirmbreite klappt nur mit Expertise (Anm.: mittlerweile machbar)
  • Ich kann nicht mehrere Blöcke auf einmal entfernen (Anm.: mittlerweile machbar)
  • Viele Layout-Arbeiten kann der durchschnittliche User nicht selbst erledigen und benötigt die Hilfe von Profis mit PHP und/oder CSS-Kenntnissen. (Anm.: mittlerweile machbar bzw. gibt es Block-Plugins wie Stackable)

Ich empfehle Ihnen, den Gutenberg-Editor unbedingt selbst zu testen. Aber Vorsicht: da sich das Plugin noch in der Entwicklungsphase befindet, sollten Sie das nicht auf Ihrer Live-Website, sondern auf einer Test-Website machen. Wir stehen Ihnen aber gerne auch hier und bei Fragen gerne zur Verfügung!

In unserem Praxiskurs WordPress Basic behandeln wir den Gutenberg-Editor jedenfalls ausführlich.

Empfehlen Sie diesen Artikel weiter:
Avatar-Foto
Natalie Eichinger

11 Kommentare

  1. Hallo, ich habe den Gutenberg Editor installiert und verzweifle gerade an meinen neuen Texten. Lässt sich irgendwo einstellen, dass die Haupttextfarbe schwarz sein soll? Wenn ich bei jedem Block die Seitenleiste mit Textfarbe verwenden muss und da neben bunten Farben nur dunkelgrau standardmäßig angeboten wird, ist es wirklich sehr mühsam, jeden Text zu markieren und manuell auf schwarz umzustellen. So ist es nicht praktikabel!

    • Hallo Sandra,

      Du nutzt offensichtlich das Theme »Spacious«. Vielleicht findest Du dort die Einstellung für Schriftfarbe generell »Schwarz«. Denn ansonsten dürften die Spacious Entwickler in der Gratis Version das Grau (Farbcode: #666666) einsetzen.

      Oder Du setzt eine CSS-Regel im Abschnitt »Design« / »Customizer« / »Benutzderdefiniertes CSS«:

      body,
      button,
      input,
      select,
      textarea {
      color: #000000;
      }

      p {
      color: #000000;
      }

      Alles Gute.

  2. Ich probiere mich auch gerade einige Zeit an Gutenberg. Bei mir ist es scheinbar nicht möglich, ein Bild von Nextgen Gallery einzubinden. Wenn ich ein Bild (-Block) einfügen möchte, dann habe ich als Optionen nur die Standard-Mediathek von WordPress oder ein Bild hochzuladen. Andere Möglichkeiten werden mir nicht angeboten. Für mich ein klarer Nachteil.

    • Rückt Nextgen Gallery nicht einen Shortcode dafür heraus, der dann im Textblock nutzbar ist? (Wir selbst nutzen die NextGen Gallery nicht)

  3. für komplette »Gallerien« ja – nicht aber für einzelne Bilder. Bisher fand ich jedenfalls keine Lösung für den Fall, dass man Bilder in selbst erstellten Unterodnern verwenden möchte – oder eben z.B. aus Nextgen Gallery. Ein wechsel zwischen klassischem Editor und Gutenberg führte bei mir zu Chaos im Beitrag. Ein Teil der Bilder war noch ein »Bild-Block« ein Teil eher ein »Text-Block« – zumindest wenn man den Formatierungssymbolen oben links (Text bzw Bild links – zentriert – rechts) und den Möglichkeiten in der rechten Leiste (URL zum/vom Bild ) glauben darf.
    Die URL Möglichkeite stand bei einigen Bildern nicht zur Verfügung, und oben war auch nur die Variante für Textausrichtung zu sehen, nicht für Bildausrichtng

  4. So mit WP 5.0 wurde ich nun auch mit dem Gutenberg Editor beglückt. Es gibt sicherlich viele Nutzer die den toll finden und neue WP Nutzer kennen dann ja nix anderes. Für mich ist das Ding ein grauen. Zuerst einmal alles auf englisch obwohl ich die deutsche WP Version installiert habe. Dann funktioniert das zwischenspeichern nicht, habe ständig eine Fehlermeldung eingeblendet dazu. Das veröffentlichen eines Beitrages geht auch nicht. Eine vernünftige Bedienungsanleitung hab ich auch nicht gefunden. Aus meiner persönlichen Sicht ist das Teil müll und wäre ein Grund die Nutzung von WP zu beenden. Ich habe nun das Classic Plugin installiert um mit dem alten Editoroberfläche weiter arbeiten zu können.

    • Das mit englisch ist seltsam. Bei unseren Websites, wo wir bereits umgestellt haben, ist Gutenberg komplett in Deutsch nutzbar.

      Stimmt, mitten im Beitrag würden wir nicht wechseln. Entweder das Plugin »Classic Editor« installieren und aktivieren (wie Sie es schon getan haben) und dann wie gewohnt mit WordPress vor 5 (Editor TinyMCE) weiterarbeiten, oder eben zur Gänze Gutenberg nutzen.

      Wenn aber das Veröffentlichen eines Beitrags auch nicht mehr klappt, dann hat’s ein gröberes Problem, das nicht auf Gutenberg zurückzuführen ist. Legen Sie mal Plugins der Reihe nach lahm, und wechseln eventuell auch mal für ein paar Minuten das Theme (auf Twenty Nineteen), um zu sehen, ob der Fehler durch eine der Aktionen verschwindet. Denn wenn ein grundlegender Fehler drin ist, dann wurde das durch Gutenberg aufgezeigt, aber eine Fehlerbeseitigung haben Sie mit Weiternutzung des Classic Editors ja nicht erreicht.

  5. Hallo

    Das mit den Plugins deaktivieren hab ich schon gemacht ohne erfolg. Als Theme hab ich Twenty Fifteen. Sind auch alle Plugins und das Theme aktuell. Ich ärgere mich da jetzt nicht weiter mit rum. Solange es der Classic Editor macht, bleib ich dabei. Ansonsten öffne ich doch noch den virtuellen Müllkorb und entsorg alles dahinein^^. Aufgrund des Wahnsinns mit der DSGVO hab ich schon alle Webseiten entsorgt, die letzte nutzt meine Frau aber lange ärgern tu ich mich da nicht mit.

  6. Hallo,
    hab eine Frage zu Gutenberg. Bei allen Beiträgen die vor Gutenberg erstellt wurden wird wenn ich Beitragsformat Galerie auswähle auf der Startseite eine Vorschaugalerie angezeigt, seit den Blöcken nicht mehr. Gibts da eine Lösung?

    Danke für eure Hilfe

    • Das sollte wohl nicht so sein, weil das gewählte Format mit den Inhalten nichts zu tun hat. Vermutlich liegt das am gewählten Theme, bei dem die Entwickler noch nicht nachgezogen haben.

      Im Beitrag selbst befindet sich eine Galerie?

Schreibe einen Kommentar zu E-WerkstattAntworten abbrechen

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