Gutenberg Editor | Tutorial Teil 1 – Einführung

Vorbemerkungen zum Gutenberg Editor

In meinen WordPress Tutorials habe ich den generellen Aufbau des Redaktionssystems von WordPress.org beschrieben. Dabei bin ich jedoch nicht näher auf den eigentlichen Text-Editor eingegangen. Denn der wichtigste Teil des CMS verdient sein eigenes Tutorial. Deshalb folgt nun meine Anleitung für das Arbeiten mit dem Gutenberg Editor (WordPress Version 6.0). Teil 1 beschäftigt sich mit dem äußeren Rahmen der Texteingabe- und -bearbeitungsoberfläche.

INHALT

• Vorbemerkungen zum Gutenberg Editor
  • Umstrittene Neuerung
• Gutenberg Editor – der Einstieg
  • Linker Teil der Kopfleiste
  • Rechter Teil der Kopfleiste
• Gutenberg Editor – Ansicht anpassen
  • Werkzeuge anpassen

WordPress startete sein Redaktionssystem 2003. Seit dem haben die Entwickler das › CMS kontinuierlich ausgebaut. Zunächst unterschied sich die Text-Eingabe-Maske nicht wesentlich von anderen klassischen Editoren, auch wenn sie immer wieder modernisiert wurde. Der große Umbruch kam 2018 mit Gutenberg.

Im Gegensatz zu den klassischen Editoren, die mit einem „zusammenhängenden“ Text und „eingeschobenen“ Elementen arbeitet, setzt der Gutenberg Editor auf Blöcke. Das bedeutet, dass nicht nur Bilder oder Listen etc. Einzelelemente sind. Sondern auch jede Überschrift und jeder Textabschnitt bildet ein Element bzw. einen Block.

Deshalb ist es z. B. möglich, die Reihenfolge der Elemente beliebig per Drag&Drop zu ändern. Insofern erinnert das System an Baukastensysteme (Page Builder) zur Gestaltung einer Webseite / Landing Page. Jedoch erstellen Sie mit dem Gutenberg Editor nicht Ihre Website als solche. Dafür benötigen Sie ein Theme / Template bzw. eine eigene Programmierung.

Aber Sie können relativ schnell und einfach jede Seite oder jeden Beitrag individuell gestalten. Bisher waren dafür HTML- (und CSS-Kenntnisse) nahezu unerlässlich.

Umstrittene Neuerung

Zunächst wurde der › Gutenberg Editor nur als Plugin angeboten und konnte ab der WordPress Version 4.8 eingesetzt werden. Seit 2019 und der WordPress Version 5.0 ist er der Standard Editor. Doch bis heute scheiden sich die Geister, ob der Gutenberg Editor eine Verbesserung darstellt. Zwar sind die Stimmen der Gegner inzwischen etwas leiser geworden, aber nicht vollkommen verstummt.

Wie bei allen Innovationen gab es auch hier einige Kinderkrankheiten. Aber mit jedem Update wurden es weniger, so dass inzwischen ein komfortables Arbeiten möglich ist. Auf jeden Fall bietet der Gutenberg Editor denjenigen einen Vorteil, die keine eigenen Codes schreiben möchten/können. Denn für viele Optionen, die früher nur mittels eigener HTML-Codes realisierbar waren, reicht nun ein Klick. Mehr dazu in meinen Tutorials zu den einzelnen Blöcken.

Natürlich gibt es nichts, was nicht verbessert werden könnte. So arbeiten die Entwickler auch weiterhin daran, Schwächen zu beseitigen, bestehende Optionen auszubauen und neue hinzuzufügen. Und wer sich so überhaupt nicht an die Arbeitsweise mit Blöcken gewöhnen kann, hat die Möglichkeit zum klassischen Editor zurückzukehren. Nachdem das › Classic Editor Plugin installiert ist, können Sie jederzeit zwischen Gutenberg und dem klassischen Editor wechseln.

Gutenberg Editor – der Einstieg

Wenn Sie auf dem WordPress Dashboard auf Beiträge > Erstellen klicken, öffnet sich ein neues Fenster. Jedoch erwartet Sie hier keine leere Seite mehr. So befindet sich oben eine Art Menü, darunter das Eingabe-Feld und rechts davon eine Seitenleiste. Letztere ist sozusagen das Herz des Gutenberg Editors. Einerseits nehmen Sie dort die Einstellungen für das gesamte Dokument vor. Andererseits aber auch die meisten Anpassungen für die einzelnen Blöcke.

Auch zeigt Ihnen der Gutenberg Editor im Eingabe-Feld bereits einen Block – die H1-Überschrift. Und darunter eine Zeile, in der Sie mit Ihrem ersten eigenen Block beginnen können. Doch zunächst zum äußeren Rahmen.

Linker Teil der Kopfleiste

Über die Kopfleiste haben Sie Zugriff auf Steuerelemente, die das gesamte Dokument betreffen. Von links nach rechts beginnt es mit einem + im Kreis. Hierüber rufen Sie alle Blöcke auf, die im Gutenberg Editor (die Auswahl wird immer mal wieder erweitert bzw. überarbeitet) zur Verfügung stehen. Diese sind in Gruppen zusammengefasst und erscheinen in einer ausklappbaren Liste:

• Meistgenutzt
• Allgemeine Blöcke (Bild, Liste, Zitat …)
• Formatierung (Tabelle, HTML, Classic …)
• Layout-Elemente (Button, Spalten, Abstandshalter …)
• Widgets (Neue Beiträge, Archiv, Kalender …)
• Einbettungen (Twitter, YouTube, Spotify …)

Nachdem Sie auf einen dieser Blöcke geklickt haben, erscheint er automatisch unterhalb der bereits in Ihrem Beitrag vorhandenen Blöcke. Um Ihnen das Suchen zu erleichtern, sind die Blöcke Überschrift (T) und Text (Absatz) sowie die Blöcke, die Sie am häufigsten genutzt haben (auch) unter Meistgenutzt zu finden. Abhängig davon, welche Art Beträge Sie verfassen, brauchen Sie sicherlich einige der angebotenen Blöcke nie. Deshalb können Sie festlegen, welche Blöcke überhaupt in der Liste aufgeführt sind (s. Werkzeuge anpassen).

Darüber hinaus befinden sich in dieser Übersichtsleiste neben den Blöcken zwei weitere Menüpunkte. Einerseits haben Sie unter Vorlagen die Möglichkeit, zu dem von Ihnen gewünschten Block aus einer Auswahl vorprogrammierter Designs etwas passendes auszuwählen. Das Angebot an Designs wird mit jedem WP-Versions-Update kontinuierlich erweitert.

Andererseits können Sie auch von Ihnen selbst erstellte Block-Designs für eine erneute Verwendung speichern. Wenn Sie anschließend dieses spezielle Block-Design an anderer Stelle oder in einem anderen Beitrag erneut einsetzen möchten, finden Sie es unter ebenfalls in dieser Leiste unter Wiederverwendbar.

Rechts neben der Blockauswahl für den Gutenberg Editor befinden sich zwei Pfeile. Sie dienen dazu, Ihre letzte Eingabe rückgängig zu machen oder eine gelöschte Eingabe wieder herzustellen. Ein Klick auf Info i zeigt Ihnen die Anzahl der

• Wörter
• Überschriften
• Absätze und
• Blöcke

in Ihrem Beitrag. Darüber hinaus sehen Sie die verwendeten Überschriften, also die Gliederung des Dokuments. Hinter dem Listen-Symbol verbirgt sich eine Übersicht über die Struktur Ihres Beitrags. So ist dort die Reihenfolge Ihrer Blöcke aufgeführt, z. B. Absatz (Text-Block) – Bild – Überschrift – Absatz – Absatz – Liste etc.

Rechter Teil der Kopfleiste

Wenn Sie einen neuen Beitrag erstellen möchten, also ein leeres Fenster öffnen, sehen Sie zunächst nur zwei selbsterklärende Buttons. Einerseits die Vorschau: Nachdem Sie auf diesen Button geklickt haben, wird Ihr Beitrag zwischengespeichert und in einem neuen Browser-Tab geöffnet. Dort sehen Sie, wie Besucher später Ihren Beitrag sehen werden. Außerdem eignet sich diese Ansicht gut, um zu erkennen, wo noch Korrekturen notwendig sind.

Anderseits befindet sich daneben der Button zum Veröffentlichen. Falls Sie zuvor in den WordPress Einstellungen nicht einen Haken bei Suchmaschinen davon abhalten, diese Seite zu indexieren gesetzt haben, ist Ihr Beitrag online, sobald Sie auf den Button klicken. Allerdings können Sie festlegen, dass Sie das endgültige Veröffentlichen noch einmal bestätigen müssen. Zwar bedarf es dann eines zweiten Klicks, aber es schützt davor, einen unvollständigen Beitrag aus Versehen freizugeben.

Sobald Sie die ersten Blöcke im Gutenberg Editor erstellt haben, erscheint links neben dem Vorschau-Button ein weiterer Link: Speichern. Wenn Sie die Arbeit an einem Beitrag unterbrechen wollen / müssen, klicken Sie darauf. Anschließend ist der Beitrag zwar intern gespeichert, aber noch nicht öffentlich. Sowohl auf diese Art als auch über Vorschau gespeicherte Beiträge sind in deiner Beitrags-Übersicht als Entwurf gekennzeichnet. Von dort rufen Sie sie jeder Zeit wieder auf und arbeiten daran weiter.

Falls Sie einen bereits veröffentlichten Beitrag aufrufen, erscheint anstelle des Speichern-Links ein Link, mit dem Sie diesen Beitrag wieder auf Entwurf umstellen können. Dies kann sinnvoll sein, wenn Sie größere Änderungen vornehmen und Ihre Besucher nicht irritieren möchten. Denn dann ändern Sie den Beitrag quasi offline und veröffentlichen ihn erst wieder, wenn er in neuer Frische erstrahlt.

Während das Einstellungs-Symbol im Gutenberg Editor lediglich zum Ein- bzw. Ausblenden der rechten Seitenleiste dient, öffnen Sie über die drei Punkte ganz rechts ein weiteres Menü.

Gutenberg Editor – Ansicht anpassen

In diesem Menü finden Sie unterschiedliche Optionen, um den Gutenberg Editor an Ihre Bedürfnisse anzupassen. Diese aktivieren oder deaktivieren Sie, indem Sie auf die gewünschte Funktion klicken.

Normalerweise werden die Bearbeitungswerkzeuge direkt über dem jeweiligen Block eingeblendet, den Sie gerade erstellen oder bearbeiten. Allerdings verdeckt bei manchen Blöcken die Bearbeitungsleiste u. U. einen Teil des Textes.

Um weniger abgelenkt zu werden, gibt es zwei Optionen. Einerseits der Spotlight Modus, der alle Blöcke außer dem, an dem Sie gerade arbeiten, aufhellt. Andererseits der Vollbildmodus, der die linke Seitenleiste mit dem WordPress-Menü ausblendet (bei der neusten WP-Version ist dies bereits automatisch aktiviert). Des weiteren haben Sie die Möglichkeit vom voreingestellten visuellen Gutenberg Editor zum Code Editor zu wechseln. Jedoch haben Sie auch bei jedem Block über die Bearbeitungswerkzeuge Zugriff auf den HTML-Code.

Falls Sie ein Plugin wie beispielsweise Yoast SEO oder › Rank Math nutzen, wird es ebenfalls hier aufgeführt (s. rote Schaltfläche auf der Abbildung linke Spalte oben rechts). Bei Yoast befinden sich die Analyse-Ergebnisse zur Suchmaschinenoptimierung unterhalb des Text-Eingabe-Feldes. Jedoch können Sie die Ergebnissewie bei Rank Math auch durch einen Klick auf den entsprechenden Button in der rechten Seitenleiste ansehen.

Werkzeuge anpassen

Zuletzt bietet Ihnen das Menü noch mehrere Werkzeug-bezogene Optionen an. Zunächst den Blockmanager: Wie bereits oben erwähnt, wird es einige Blöcke geben, die Sie nie verwenden. Nachdem Sie auf den Blockmanager geklickt haben, öffnet sich eine Liste aller Blöcke. Durch Setzen oder Entfernen des Hakens vor der Blockbezeichnung passen Sie die im Gutenberg Editor über das + erreichbare Übersicht an Ihre Bedürfnisse an.

Vielleicht gibt es Blöcke, deren Inhalt und Formatierung Sie immer mal wieder verwenden möchten. Deshalb bietet Ihnen der Gutenberg Editor die Möglichkeit, diese als wiederverwendbare Blöcke zu speichern. Falls Sie kontrollieren möchten, welche Sie im Laufe der Zeit erstellt haben, klicken Sie auf Alle wiederverwendbaren Blöcke verwalten. Daraufhin öffnet sich ein neues Fenster mit einer Liste, wie Sie sie bereits von Beiträgen und Seiten kennen. Dort können Sie sie bearbeiten oder löschen.

Wer nicht so gerne mit dem Cursor arbeitet, sondern lieber Befehle über die Tastatur eingibt, findet eine Liste der im Gutenberg Editor möglichen Tastaturkürzel. Ob Sie die Kürzel auswendig lernen möchten, bleibt Ihnen überlassen.

Hingegen ist meiner Meinung nach die darunter stehende Option, den kompletten Inhalt zu kopieren, sehr nützlich. Da zumindest ich immer eine Kopie des, für WordPress formatierten, finalen Beitrags lokal speichere, spart das Kopieren mit einem Klick deutlich Zeit. Und es ist zuverlässiger. Denn die Kopie enthält, abgesehen vom Beitrags-Titel (H1-Überschrift), alle Elemente inklusive Codierung.

Doch dazu sowie zur (Anpassung der) rechten Seitenleiste im Gutenberg Editor mehr in weiteren Teilen meines Tutorials.

PDF: Beitrag herunterladen

WEITERE GUTENBERG-TUTORIALS

• Bedienfelder
• Überschriften
• Textblock
• Bilder, Cover, Galerie
• Layout Elemente, Listen, Zitate
• Spezialelemente und Widgets

Abbildungen © eb, Gutenberg Team, WordPress.org | › Externe Verlinkungen: Dieser Beitrag enthält keine Affiliate-/Partner-Links.