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.3). Teil 1 beschäftigt sich mit dem äußeren Rahmen der Texteingabe- und -bearbeitungsoberfläche.
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 erstellst du mit dem Gutenberg Editor nicht deine Website als solche. Dafür benötigst du zunächst ein Theme / Template bzw. eine eigene Programmierung.
Aber du kannst 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, kannst du jederzeit zwischen Gutenberg und dem klassischen Editor wechseln.
Gutenberg Editor – der Einstieg
Wenn du auf dem WordPress Dashboard auf Beiträge > Erstellen klickst, öffnet sich ein neues Fenster. Jedoch erwartet dich 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 nimmst du dort die Einstellungen für das gesamte Dokument vor. Andererseits aber auch die meisten Anpassungen für die einzelnen Blöcke.
Auch zeigt dir der Gutenberg Editor im Eingabe-Feld bereits einen Block – die H1-Überschrift. Und darunter eine Zeile, in der du mit deinem ersten eigenen Block beginnen kannst. Doch zunächst zum äußeren Rahmen.
Linker Teil der Kopfleiste
Über die Kopfleiste hast du Zugriff auf Steuerelemente, die das gesamte Dokument betreffen. Von links nach rechts beginnt es mit einem + in einem blauen Quadrat. Hierüber rufst du nicht nur alle Blöcke auf, die im Gutenberg Editor (die Auswahl wird immer mal wieder erweitert bzw. überarbeitet) zur Verfügung stehen. Am Anfang und/oder Ende der Liste findest du auch spezielle Blöcke, die durch installierte Plugins hinzugefügt wurden. Alle sind in Gruppen gegliedert und erscheinen in einer ausklappbaren Liste:
- Text (s. Abbildung unten) plus Fußnoten
- Medien (Bild, Galerie, Video, …)
- Design ( Buttons, Spalten, Seitenumbruch, …)
- Widgets (s. Abbildung unten) plus Social Icons
- Theme (besondere Blöcke, die dein Theme ggf. hinzufügt)
- Einbettungen (YouTube, Spotify …)
Nachdem du auf einen dieser Blöcke geklickt hast, erscheint er automatisch unterhalb der bereits in deinem Beitrag vorhandenen Blöcke. Um dir das Suchen zu erleichtern, sind die Blöcke Überschrift (T) und Text (Absatz) sowie die Blöcke, die du am häufigsten genutzt hast außerdem in der Liste zu finden, die du über das Plus-Symbol rechts in einer neuen Block-Zeile unter Meistgenutzt aufrufst. Abhängig davon, welche Art Beträge du verfasst, brauchst du sicherlich einige der angebotenen Blöcke nie. Über die Voreinstellungen im rechten Teil der Kopfleiste können nicht benötigte Blöcke jedoch ausgeblendet werden.
Darüber hinaus befinden sich in dieser Übersichtsleiste neben den Blöcken zwei weitere Menüpunkte. Einerseits hast du unter Vorlagen die Möglichkeit, zu dem von dir 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 kannst du hier auch von dir selbst erstellte Block-Designs für eine erneute Verwendung speichern. Wenn du anschließend dieses spezielle Block-Design an anderer Stelle oder in einem anderen Beitrag erneut einsetzen möchtest, findest du es unter ebenfalls in dieser Leiste.
Rechts neben der Blockauswahl für den Gutenberg Editor befinden sich ein Stift-Symbol sowie rechts davon zwei Pfeile. Über den Stift wechselst du für weitere Interaktionen mit dem jeweiligen Block zwischen Bearbeiten (betrifft den Inhalt des Blocks) und Auswählen (z. B. den gesamten Block verschieben). Die Pfeile dienen dazu, deine letzte Eingabe rückgängig zu machen oder beispielsweise eine gelöschte Eingabe wieder herzustellen. Hinter dem Hamburger Menü-Symbol verbergen sich zwei Buttons: Listenansicht und Übersicht.
Erstere zeigt dir alle Blöcke, die du in deinem Beitrag verwendet hast, mit Angabe der Art jedes Blocks. Der, an dem du gerade arbeitest ist blau hinterlegt. Ein Klick auf einen beliebigen Block führt dich direkt zu einem anderen, von dir ausgewählten Block. Unter der Übersicht erfährst du, wie viele Zeichen und Wörter du in dem Beitrag verwendet hast sowie die ungefähre Lesezeit. Darunter siehst du deine Überschriften. Sollte die Reihenfolge nicht der Standard-Hierarchie entsprechen, wird die die betreffende Überschrift hervorgehoben.
Rechter Teil der Kopfleiste
Links erscheinen zwei Symbol. Über das Laptop-Symbol kannst du dir eine Vorschau des geöffneten Beitrags in der Desktop-, Tablet- und Mobil-Version bzw. in einem neuen Tab anzeigen lassen. Über das Symbol rechts daneben zeigst du deinen Beitrag direkt in einem neuen Browser-Tab an. So hast du jederzeit die Möglichkeit, zu überprüfen, wie Besucher später deinen Beitrag sehen werden. Außerdem eignet sich diese Ansicht gut, um zu erkennen, wo noch Korrekturen notwendig sind.
Der nächste blaue Button dient zum Veröffentlichen. Falls du zuvor in den WordPress Einstellungen nicht einen Haken bei Suchmaschinen davon abhalten, diese Seite zu indexieren gesetzt hast, ist dein Beitrag online, sobald du auf den Button klickst. Allerdings musst du das endgültige Veröffentlichen anschließend noch einmal bestätigen, so dass du bei einem versehentlichen Klick die Veröffentlichung noch stoppen kannst. Wurde der Beitrag bereits veröffentlicht, wird nach einem Klick darauf der ursprüngliche Beitrag durch den ggf. überarbeiteten ersetzt.
Falls der im Gutenberg Editor erstellte Beitrag noch nicht veröffentlicht wurde, erscheint links neben dem Vorschau-Button ein weiterer Link: Entwurf speichern. Wenn du die Arbeit an einem Beitrag unterbrechen willst / musst, klickst du 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 rufst du sie jeder Zeit wieder auf und arbeitest daran weiter.
Um einen Beitrag, der vielleicht vor langer Zeit veröffentlicht wurde, inzwischen aber von dir maßgeblich überarbeitet wurde, erneut zu veröffentlichen, klickst du in der rechten Seitenleiste auf Beitrag und das Datum hinter Veröffentlichen. Dort wählst du dann das aktuelle Datum aus.
Uhrzeit beim erneuten Veröffentlichen
Da WordPress es mit der Zeitangabe nicht so genau nimmt, stell die Uhrzeit für ein erneutes Veröffentlichen am besten auf einen etwas früheren als den aktuellen Zeitpunkt ein. Sonst schaltet der Aktualisieren-Button auf „Planen“ und es ist ungewiss, wann der Beitrag tatsächlich veröffentlicht wird.
Falls du ein SEO-Plugin wie beispielsweise Yoast SEO oder › Rank Math nutzt, wird eine entsprechende Schaltfläche links des Drei-Punkte-Menüs angezeigt. Bei Yoast befinden sich die Analyse-Ergebnisse zur Suchmaschinen-Optimierung unterhalb des Text-Eingabe-Feldes. Jedoch kannst du die Ergebnisse wie bei Rank Math auch durch einen Klick auf den entsprechenden Button in der rechten Seitenleiste ansehen.
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ü findest du unterschiedliche Optionen, um den Gutenberg Editor an deine Bedürfnisse anzupassen. Diese aktivierst oder deaktivierst du, indem du auf die gewünschte Funktion klickst.
Normalerweise werden die Block-spezifischen Bearbeitungswerkzeuge direkt über dem jeweiligen Block eingeblendet, den du gerade erstellst oder bearbeitest. Allerdings verdeckt bei manchen Blöcken die Bearbeitungsleiste u. U. einen Teil des Textes.
Werkzeugleiste oben
Wenn du jedoch dort einen Haken setzen, erscheint diese in der Kopfleiste des Editors. Nachdem du auf einen beliebigen Block geklickt hast, sind die jeweiligen Werkzeuge bequem immer an der gleichen Stelle zu erreichen.
Um weniger abgelenkt zu werden, gibt es zwei Optionen. Einerseits der Spotlight Modus, der alle Blöcke außer dem, an dem du gerade arbeitest, 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 hast du die Möglichkeit vom voreingestellten visuellen Gutenberg Editor zum Code Editor (HTML-Code) zu wechseln. Jedoch wird diese Option auch bei jedem Block über das Drei-Punkt-Menü der Bearbeitungswerkzeuge angeboten.
Werkzeuge anpassen
Zuletzt bietet dir das Menü noch mehrere Werkzeug-bezogene Optionen an. Zunächst den Blockmanager, der sich hinter den Voreinstellungen > Blöcke verbirgt. Wie bereits oben erwähnt, wird es einige Blöcke geben, die du nie verwendest. In der Liste aller Blöcke setzt oder entfernst du den Haken vor der jeweiligen Blockbezeichnung, um die im Gutenberg Editor über das + erreichbare Übersicht an deine Bedürfnisse anzupassen. Dasselbe gilt für die Bedienfelder in der rechten Seitenleiste.
Wer nicht so gerne mit dem Cursor arbeitet, sondern lieber Befehle über die Tastatur eingibt, findet in dem Anpassungs-Menü eine Liste der im Gutenberg Editor möglichen Tastaturkürzel. Ob du die Kürzel auswendig lernen möchtest, bleibt dir überlassen.
Hingegen ist meiner Meinung nach die fast am Ende der Liste 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.
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.
