Zum Inhalt springen Zur Fußzeile springen
0345 52485943 r.rosanke@webfluence.de

Gutenberg-Editor

Aufbau und die ersten Schritte mit dem neuen WordPress-Editor

„In dieser Anleitung zum Gutenberg-Editor gehen wir gemeinsam Schritt für Schritt durch die wichtigsten Neuerungen und Einstellungsmöglichkeiten der Bearbeitungsoberfläche.

Ebenso zeige ich am Ende des Artikels, warum ich den sogenannten Block-Editor mittlerweile dem Classic-Editor und den bekannten Page Buildern vorziehe.“

Robert Rosanke,
Webdesigner

Inhaltsverzeichnis

  1. Voraussetzungen für den Gutenberg-Editor
  2. Der Aufbau des neuen Editors
  3. So funktioniert die Inhalts-Erstellung mit den Blöcken
  4. Die wichtigsten Tastenkürzel auf einen Blick
  5. Diese Blöcke gibt es im Gutenberg-Editor
  6. Vor- und Nachteile des Gutenberg-Editors

Voraussetzungen für den Gutenberg-Editor

Ab WordPress Version 5.0 ist der Editor standardmäßig in den Core integriert und aktiviert.

Falls dir der Umstieg auf WordPress 5.0 aus technischen Gründen nicht möglich ist oder du bereits einige Beta-Features der neuen Bearbeitungsoberfläche testen willst, dann könnte das das offizielle Gutenberg-Plugin Abhilfe schaffen.

Außerdem kannst du Gutenberg auf der offiziellen Testumgebung ausprobieren. Ohne Anmeldung. Ohne eigene Webseite.

Bei einigen Theme– und Plugin-Konfigurationen kann es zu Fehlern in Kombination mit Gutenberg kommen.
Erstelle vor dem Upgrade der WordPress-Version oder der Installation des Plugins am besten ein Backup, um das ehemals funktionierende System bei aufkommenden Fehlern wiederherzustellen.

Der Aufbau des neuen Editors

Die Umstellung vom Classic-Editor auf den Gutenberg-Editor scheint auf den ersten Blick groß, ja schon fast unüberwindbar.

Ich kenne das nur zu gut von meinem ersten Kontakt mit dem neuen Editor. Für 3 Minuten Gutenberg getestet, funktioniert nicht wie erwünscht und direkt die Idee auf ClassicPress zu wechseln im Hinterkopf.

Doch wenn wir mal genauer und weniger emotional auf die neue Bedienoberfläche schauen, dann hat sich – zumindest rein funktional – relativ wenig geändert.

  1. Die Obere Werkzeugleiste
  2. Der Inhaltsbereich
  3. Die Seitenleiste
Aufbau des Gutenberg-Editors

Die obere Werkzeugleiste

Gehen wir die einzelnen Buttons und Funktionen der oberen Werkzeugleiste einmal gemeinsam von links nach rechts durch

Die obere Werkzeugleiste des Gutenberg-Editors

Block hinzufügen

Mit einem Klick auf das Plus-Symbol öffnet sich die Block-Auswahl. In der Block-Auswahl sind alle aktiven Blocks übersichtlich nach Kategorie sortiert. Dank der integrierten Suchleiste kannst du gezielt nach einem Block suchen.

Meine meist genutzten Blöcke

Rückgängig

Mit einem Klick auf den Rückgängig-Pfeil machst du die letzte Änderung rückgängig. Ausversehen gelöschte HTML-Blöcke treiben dich nun nicht mehr zur Verzweiflung.

Wiederholen

Die Wiederholen Funktion wird erst freigeschaltet, nachdem die Rückgängig-Funktion einmal benutzt wurde. Mit einem Klick auf den Wiederholen-Pfeil machst du die rückgängig gemachte Änderung rückgängig, sodass der Status vor dem Rückgängig-machen wiederhergestellt wird.

Inhaltliche Struktur

Prüfe auf einen Blick, ob die inhaltliche Struktur sinnvoll ist und springe mit einem Klick auf die Überschrift zum entsprechenden Abschnitt im Dokument

Hier gibt es die Zahlen, Daten und Fakten zum aktuellen Dokument

Block-Navigation

Mit der Block-Navigation lässt sich ein gesuchter Block direkt auswählen. Ich selber habe diese Funktion noch nie genutzt und wüsste ehrlichgesagt nicht wozu.

Speichern

Speichere deinen Seitenentwurf. Dieser Button wird nach dem Klick auf den nebenstehenden Veröffentlichungs-Button verschwinden.

Vorschau

Schaue dir die Vorschau des Beitrags in einem neuen Fenster an.

Veröffentlichen und Aktualisieren

Mit einem Klick auf Veröffentlichen, werden deine Inhalte für deine Leser sichtbar. Bei bereits veröffentlichten Artikeln steht auf dem Button Aktualisieren anstatt Veröffentlichen.

Einstellungen

Mit einem Klick auf das Zahnrad-Symbol wird die Seitenleiste, je nach aktuellem Status, ein- oder ausgeblendet.

Weitere Werkzeuge und Optionen

Hinter den drei untereinander angeordneten Punkten verstecken sich einige Einstellungen, mit denen du den Gutenberg-Editor ein klein wenig an deine Bedürfnisse anpassen kannst.

Die erweiterten Einstellungen in der oberen Werkzeugleiste
Obere Werkzeugleiste

Fixiere die Block-Einstellungen an der oberen Werkzeugleiste anstatt direkt am Block. Je nach Bildschirmgröße empfehlenswert bei mehrspaltigen Layouts.

Die Positionen der Block-Einstellungen im Vergleich. Links: direkt am Block, rechts: in der oberen Werkzeugleiste
Spotlight-Modus

Hebe den fokussierten Block visuell hervor. Empfehlenswert bei direkt aufeinanderfolgenden HTML-Blocks ohne visuelle Ansicht.

Vollbildmodus

Blende die typische Backend-Umgebung, sprich die Menüleiste und adminbar aus, um ablenkungsfrei zu arbeiten.

Visueller Editor

Die visuelle Ansicht des Gutenberg-Editors ist die voreingestellte Ansicht und für den Basis-Anwender meist ausreichend.

Code Editor

Die Code-Ansicht ist zur Anordnung von nicht verschiebbaren Blöcken nützlich und erfordert ein gutes Auge, damit die visuelle Ansicht nach dem Eingriff in den Code weiterhin funktioniert.

Block-Manager

Schließe ungenutzte Blocks von der Block-Auswahl und den Block-Vorschlägen im Editor aus.

Besonders empfehlenswert, wenn du Block-Bibliotheken mit Plugins hinzugefügt hast und nun gefühlt hunderte Blocks verfügbar sind, die du voraussichtlich niemals nutzen wirst.

Mit dem Block-Manager kannst du selten verwendete Blöcke einfach deaktivieren, und somit die Übersichtlichkeit im Backend steigern
Alle wiederverwendbaren Blöcke verwalten

Erhalte eine Übersicht über alle wiederverwendbaren Blöcke und verändere mit nur einem Klick auf deren Bezeichnung die hinterlegten Inhalte.

Tastaturkürzel

Mit einem Klick auf Tastaturkürzel erhältst du eine Übersicht über alle im verfügbaren Tastenkürzel.

Im weiteren Verlauf des Artikels stelle ich dir die Tastenkürzel, die sich in für mich als besonders wertvoll erwiesen haben, in einer übersichtlichen Liste zusammen.

Kompletten Inhalt kopieren

Kopiere den gesamten Inhalt deines Beitrags in die Zwischenablage.

Gespeichert wird genau der HTML-Code, der dir bei der visuellen Ansicht gezeigt wird.

Dementsprechend kannst du ganz einfach einen neuen Beitrag erstellen und das bestehende Layout dort einfügen ohne die Blöcke neu konfigurieren und mit CSS-Klassen ausstatten zu müssen.

Ansicht anpassen

Lege fest, welche Einstellungs-Widgets, auch Meta Boxen genannt, du unter den Dokument-Einstellungen in der Seitenleiste angezeigt haben willst.

Das Social Sharing Tool Shariff bringt beispielsweise eine Meta Box mit, die ich endlich aus meinem Sichtbereich entfernen konnte.

Der Inhaltsbereich

Der Inhaltsbereich besteht während der Erstellung eines neuen Beitrags lediglich aus dem Seitentitel, der für die Erstellung des Permalinks und der Bezeichnung des Beitrags in Menüpunkten verwendet wird.

Solange du keine Inhalte hinzufügst, gibt es hier erst einmal nicht mehr zu sehen.

Deshalb gehen wir direkt zu den seitenspezifischen Einstellungen, die du nach der Wahl des passenden Seitentitels für jeden Beitrag in der Seitenleiste der Gutenberg-Oberfläche treffen solltest.

Ein Ausschnitt meiner Kontaktseite aus dem Backend

Die Seitenleiste

Die allgemeinen Einstellungen zu Seiten und Beiträgen befinden sich, wie gewohnt, auf der rechten Seite des Bildschirms.

Um die Meta Boxen mit den seitenspezifischen Einstellungen sichtbar zu machen, muss direkt in der ersten Zeile der Seitenleiste der Dokument-Button ausgewählt sein.

Anschließend kannst du die Einstellungsmöglichkeiten bequem mit nur einem Klick auf den Namen der Meta Box öffnen und schließen, um den Fokus auf das wesentliche zu behalten.

Schauen wir uns am besten direkt die standardmäßigen Meta Boxen an. Da die von Themes und Plugins integrierten Meta Boxen variieren, lasse ich dieser erst einmal außen vor.

Die Meta Boxen in der Seitenleiste

Status und Sichtbarkeit

Lege fest, ob und wann dein Beitrag veröffentlicht werden soll

Permalink

Ändere den Link zu deinem Beitrag.

Falls an dieser Stelle etwas wie www.deinewebseite.de/?p=155 steht und du noch keine Beiträge veröffentlicht hast, dann empfehle ich dir die Permalink-Einstellungen unter Einstellungen -> Permalinks auf Beitragsname zu stellen, damit die Links zu Unterseiten für deine Nutzer lesbar werden.

Beitragsbild

Lege ein Bild fest, dass beispielsweise bei der Anzeige der neusten Beiträge oder auf Archivseiten mit dem Seitentitel angezeigt werden soll.

Diskussion

Erlaube oder verbiete Kommentare für diesen Beitrag.

Seiten-Attribute

Wähle ein Template oder einen Elternbeitrag für diesen Beitrag aus.

So funktioniert die Inhalts-Erstellung mit den Blöcken

Um Texte, Fotos und Überschriften in den Inhaltsbereich einzupflegen benötigen wir Blöcke.

Vereinfacht gesagt ist ein Block lediglich die Hülle, in die du die Daten, sprich Texte, Fotos und Verlinkungen, für deinen Artikel einträgst.

Ähnlich einem Shortcode werden im Hintergrund die entsprechenden Funktionen ausgeführt, damit beispielsweise dein YouTube Video-Link automatisch zu einem eingebetteten Video wird.

Als Anwender musst du dich also nicht mehr um die technischen Sachen kümmern, sodass die Seite leichter zu bedienen und potentiell weniger Fehleranfällig ist, weil du nicht mehr im Markup der Seite arbeiten musst.

Nun zur Praxis.

Blöcke einfügen

Um einen Block in den Inhaltsbereich einzufügen, können wir standardmäßig über das Plus-Symbol in der oberen Werkzeugleiste einen Block suchen und hinzufügen.

Das ist für den Anfang vielleicht ganz nett, um die Kategorisierungen der Blöcke zu sehen und sich die Bezeichnungen einzuprägen, doch im alltäglichen Gebrauch geht gibt es eine deutlich zeitsparendere Möglichkeit:

  1. Klicke auf den leeren Block mit dem Platzhalter „Schreibe oder Tippe / zur Blockauswahl“ und gib lediglich einen Schrägstrich in das Eingabefeld ein.
  2. Mit dem Schrägstrich öffnet sich die Block-Auswahl, sodass direkt im Inhaltsbereich selbst den richtigen Block suchen, finden und mit den Pfeiltasten und der Eingabetaste direkt einfügen kannst.
  3. Sobald der entsprechende Block eingefügt ist, kannst du den Inhalt in den Block reinschreiben, oder beim Bild-Block direkt ein Foto aus der Mediathek auswählen und einfügen.
Ein Beispiel: Mit /Ü wird mir der Überschriften-Block vorgeschlagen, den ich anschließend mit der Enter-Taste einfüge. Schneller geht es wohl nur mit einer fehlerfreien Spracherkennung.

Einstellungen für einzelne Blöcke

Direkt links neben dem ausgewählten Block findest du die Steuerungselemte. Mit den Pfeilen kannst du die Block-Reihenfolge ändern und mit dem dazwischenliegenden Anfasser den Block direkt durch den gesamten Inhalt ziehen und frei platzieren.

Außerdem werden über dem fokussierten Block häufig verwendete Style-Elemente bereitgestellt.

Im Fall meiner Überschrift kann ich neben dem HTML-Tag die Ausrichtung, Text-Stile wie fettgedruckt oder kursiv sowie eine Verlinkung hinzufügen.

Die Einstellungensmöglichkeiten eines Überschriften-Blocks

Außerdem sind, soweit ich das bis jetzt feststellen konnte, bei jedem Block folgende weiteren nützlichen Optionen verfügbar:

Ganz nebenbei haben sich derzeit in der Seitenleiste die blockspezifischen Einstellungen geöffnet.

Die Block-Einstellungen für Überschriften in der Seitenleiste.

In den blockspezifischen Einstellungen kannst du in der Regel CSS-Klassen und Text- sowie Hintergrundfarben festlegen ohne im HTML-Code herumdoktoren zu müssen.

Je nach Block kommen zudem weitere Einstellungen wie HTML-Anker für Überschriften oder Größenverhältnisse für Medien dazu.

Die wichtigsten Tastenkürzel auf einen Blick

Block hinzufügen: /[Blockname]

Block duplizieren: Strg + Shift + D

Einen leeren Block vor dem aktuellen einfügen: Strg + Alt + T

Einen leeren Block nach dem aktuellen einfügen: Strg + Alt + Y

Den aktuellen Block samt Inhalt entfernen: Shift + Alt + Z

Durch Blöcke navigieren: Tab oder Pfeiltaste nach oben und unten

Dokument speichern: Strg + S

Textauswahl fett machen: Strg + B

Textauswahl kursiv machen: Strg + I

Textauswahl unterstreichen: Strg + U

Diese Blöcke gibt es im Gutenberg-Editor

Allgemeine Blöcke

Formatierung

Layout-Elemente

Widgets

Einbettungen

Mit dem allgemeinen Einbetten-Block integrierst du Iframes, wie z.B. Google Maps oder Playlists von Streaming-Diensten, mit einem einfachen Einbettungslink in deine Webseite.

Außerdem gibt es einzelne Blöcke für die komfortable Einbettung folgender Dienste:

Vor- und Nachteile des Gutenberg-Editors

Vorteile

Nachteile

Wenn du einfach nicht mit dem Gutenberg-Editor warm wirst, dann kannst du die neue Bearbeitungsoberfläche einfach mit dem Classic Editor Plugin deaktivieren.

Alternativ tut es auch eine Zeile Code in der functions.php:

add_filter('use_block_editor_for_post', '__return_false');