ewerkzeug ewerkzeug

Der Gutenberg Editor – ein Erfahrungsbericht

Der Gutenberg Editor – ein Erfahrungsbericht

Von |2018-07-11T18:14:18+00:0011. Juli 2018|2 Kommentare

Ich schreibe diesen Blogbeitrag bereits im neuen Gutenberg 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 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.

Den Gutenberg Editor Installieren:

Unter „Plugins“ in der linken Seitenleiste des Dashboards finde ich das WordPress.org Plugin Verzeichnis und installiere das Plugin des Gutenberg Teams.

Gutenberg-Editor - Installation

Gutenberg-Editor – Installation

Jetzt muss ich das Plugin nur noch aktivieren. Bald darauf erscheint es in der linken Seitenleiste unter „Gutenberg“. Hier kann man sich die Demo-Version anschauen. Doch ich mache es mir nicht so leicht und gehe gleich zu den Beiträgen. Also auf „Beitrag erstellen“.

Sofort erscheint ein Text, der mich in die „wunderbare Welt der Blöcke“ willkommen heißt. Wie schön!

Die obere Seitenleiste: Blöcke einfügen, Vorschau, Veröffentlichen und Einstellungen

Gutenberg-Editor - Arbeit mit Blöcken

Gutenberg-Editor – Arbeit mit Blöcken

Obere Seitenleiste, links:

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
  • Ü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.

Einen neuen Blog-Beitrag im Gutenberg Editor schreiben

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

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

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

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

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…

Gutenberg-Editor - Bilder

Gutenberg-Editor – Bilder

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: Vor- und Nachteile des Gutenberg Editors

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.

Als Vorteile des Gutenberg Editors sehe ich:

  • 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

Als Nachteile des Editors empfinde ich:

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

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

2 Comments

  1. Sandra Schleicher 15. September 2018 um 11:45 Uhr - Antworten

    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!

    • E-Werkstatt 17. September 2018 um 9:31 Uhr - Antworten

      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.

Hinterlassen Sie einen Kommentar

Bitte nehmen Sie unsere Datenschutzerklärung zur Kenntnis.