Gutenberg Editor

Gutenberg Editor
Tutorial Teil 1 – Einführung

Aktualisiert am 28-11-2019

Gutenberg Editor: Tutorial für Anfänger und Fortgeschrittene. Detaillierte Beschreibung aller Optionen sowie zahlreiche Tipps aus der Praxis.

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 5.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 Webseite als solche. Dafür benötigst du ein Theme / Template. 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 (s. Abb. 01). 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 + im Kreis. Hierüber rufst du alle Blöcke auf, die momentan im Gutenberg Editor zur Verfügung stehen (s. Abb. 02, 03). 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 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 (auch) unter Meistgenutzt zu finden. Abhängig davon, welche Art Beträge du verfasst, brauchst du sicherlich einige der angebotenen Blöcke nie. Deshalb kannst du festlegen, welche Blöcke überhaupt in der Liste aufgeführt sind (s. Werkzeuge anpassen).

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

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

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

Rechter Teil der Kopfleiste

Wenn du einen neuen Beitrag erstellen möchtest, also ein leeres Fenster öffnest, siehst du zunächst nur zwei selbsterklärende Buttons. Einerseits die Vorschau: Nachdem du auf diesen Button geklickt hast, wird dein Beitrag zwischengespeichert und in einem neuen Browser-Tab geöffnet. Dort siehst du, wie Besucher später deinen 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 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 kannst du festlegen, dass du das endgültige Veröffentlichen noch einmal bestätigen musst. Zwar bedarf es dann eines zweiten Klicks, aber es schützt davor, einen unvollständigen Beitrag aus Versehen freizugeben.

Sobald du die ersten Blöcke im Gutenberg Editor erstellt hast, erscheint links neben dem Vorschau-Button ein weiterer Link: 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.

Falls du einen bereits veröffentlichten Beitrag aufrufst, erscheint anstelle des Speichern-Links ein Link, mit dem du diesen Beitrag wieder auf Entwurf umstellen kannst. Dies kann sinnvoll sein, wenn du größere Änderungen vornehmen und deine Besucher nicht irritiert möchtest. Denn dann änderst du den Beitrag quasi offline und veröffentlichst 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, öffnest du ü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 (s. Abb. 04). Diese aktivierst oder deaktivierst du, indem du auf die gewünschte Funktion klickst.

Normalerweise werden die Bearbeitungswerkzeuge direkt über dem jeweiligen Block eingeblendet, den du gerade erstellst oder bearbeitest. Wenn du jedoch einen Haken bei Obere Werkzeugleiste setzt, erscheinen sie in der Kopfleiste des Fensters. Nachdem du auf einen beliebigen Block klickst, sind die Werkzeuge also bequem immer an der gleichen Stelle zu erreichen. Da bei manchen Blöcken die Bearbeitungsleiste u. U. einen Teil des Textes verdeckt, kann diese Option ein Vorteil sein.

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. Des weiteren hast du die Möglichkeit vom voreingestellten visuellen Gutenberg Editor zum Code Editor zu wechseln. Jedoch hast du auch bei jedem Block über die Bearbeitungswerkzeuge Zugriff auf den Code.

Falls du ein Plugin wie beispielsweise Yoast SEO nutzt, wird es ebenfalls hier aufgeführt. Normalerweise befinden sich die Analyse-Ergebnisse zur Suchmaschinenoptimierung unterhalb des Text-Eingabe-Feldes. Jedoch kannst du durch einen Klick auf das Plugin die Ergebnisse auch in der rechten Seitenleiste anzeigen.

Editor

4 Abbildungen

Gutenberg Editor

Werkzeuge anpassen

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

Vielleicht gibt es Blöcke, deren Inhalt und Formatierung du immer mal wieder verwenden möchtest. Deshalb bietet dir der Gutenberg Editor die Möglichkeit, diese als wiederverwendbare Blöcke zu speichern. Falls du kontrollieren möchtest, welche du im Laufe der Zeit erstellt hast klickst du auf Alle wiederverwendbaren Blöcke verwalten. Daraufhin öffnet sich ein neues Fenster mit einer Liste, wie du sie bereits von Beiträgen und Seiten kennst. Dort kannst du 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 du die Kürzel auswendig lernen möchtest, bleibt dir ü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 den nächsten Teilen meines Tutorials.

Von Ellena © Grafiken: eb (Logos: WordPress / Gutenberg)

Gutenberg Tutorials:

2: Bedienfelder

android apple apps bloggen browser cloud dsl-wlan e-mail foto google internetsicherheit ios macOS messenger microsoft mobilfunk onlinedienste recht seo social tutorials updates windows wordpress

Schreibe einen Kommentar