So gelingt der Einstieg in den neuen WordPress 5.0 Block Editor Gutenberg – Teil 4
So gelingt der Einstieg in den neuen WordPress 5.0 Block Editor Gutenberg – Teil 4

So gelingt der Einstieg in den neuen WordPress 5.0 Block Editor Gutenberg – Teil 4

Im vierten und letzten Teil dieser Serie gebe ich einige Tipps zur Anpassung des neuen Block Editors von WordPress. Außerdem zeige ich, wie man effizienter und schneller damit arbeiten kann.

Wie schon die vorhergehenden Artikel dieser Reihe enthält auch dieser Beitrag keine vollständige Auflistung, sondern ich beschränke mich wieder auf eine aus meiner Sicht hilfreiche Auswahl.

Die Werkzeugleiste in der oberen Editor-Leiste fixieren

Die Einstellung zum Fixieren der Werkzeugleiste findest Du in der rechten Ecke der oberen Editor-Leiste. Hinter den drei Punkten verbirgt sich ein erweitertest Menü.

Die erweiterten Werkzeuge im WordPress Block Editor Gutenberg

Bei den ersten drei Einträgen in diesem Menü – zusammengefasst in dem Bereich „Ansicht“ – handelt es sich um Optionen, die sich ein- und ausschalten lassen. Ist eine Option aktiviert, so ist das an einem Haken erkennbar.

Die erste Option „Obere Werkzeugleiste“ fixiert die Werkzeugleiste oben im mittleren Bereich der Editor-Leiste (eine Einführung in die Oberfläche findest Du in Teil 2 dieser Reihe).

Die Option "Obere Werkzeugleiste" fixiert die Werkzeugleiste im mittleren Bereich der Editor-Leiste

Ist diese option nicht aktiviert, dann wird die Werkzeugleiste jeweils oberhalb des gerade aktiven Blocks angezeigt. Die Werkzeugleiste befindet sich damit zwar in der Nähe, aber immer an einer anderen Position am Bildschirm.

Zum Teil überlagert die Werkzeugleiste auch Inhalte. Um beim Tippen nicht zu stören, wird sie ausgeblendet, sobald man mit dem Tippen beginnt. Eine Bewegung mit der Maus reicht aus, um sie wieder einzublenden.

Ist die Werkzeugleiste fixiert, befindet sie sich immer an der selben Position oben in der Editor-Leiste. Außerdem ist sie immer sichtbar – sofern ein Block aktiv ist.

Es ist eine Frage der persönlichen Vorlieben, was man bevorzugt. Mir persönlich ist es lieber, wenn sich die Werkzeugleiste immer an der selben Position befindet. Die längeren Wege mit der Maus nehme ich gerne in Kauf.

Hervorheben des aktiven Blocks

Standardmäßig wird der gerade aktive Block durch einen schmalen hellgrauen Rahmen hervorgehoben. Wer den aktiven Block besser sichtbar machen möchte, aktiviert die zweite Option im erweiterten Menü, den „Spotlight-Modus“.

Der "Spotlight-Modus" hebt den gerade aktiven Block besser hervor

Im Spotlight-Modus werden alle Blöcke, die sich nicht in Bearbeitung befindenden, leicht ausgegraut. Der aktive Block rückt dadurch deutlich in den Fokus. Das erleichtert die Orientierung und hilft dabei, sich auf den gerade bearbeiteten Block zu konzentrieren.

Vollbildmodus

Die dritte Option im erweiterten Menü aktiviert den Vollbildmodus. Dabei wird die Admin-Leiste von WordPress ganz oben sowie das Menü auf der linken Seite komplett ausgeblendet. Der Editor nimmt dann das komplette Fenster in Anspruch.

Dies soll ablenkungsfreies Arbeiten ermöglichen. Tatsächlich hat der Vollbildmodus seinen Reiz, mag aber etwas gewöhnungsbedürftig sein. In der Regel sind Admin-Leiste und -Menü immer sichtbar – mit Ausnahme des Customizers.

Diese Art der Ansicht kennen wir in WordPress seit #wpversion 3.4 vom #customizer. Der Vollbildmodus des Gutenberg Block Editors geht ebenfalls in diese Richtung. Möglicherweise sehen wir ähnliches in künftigen Versionen von WordPress noch öfters.

Meiner Meinung nach fehlt eine Möglichkeit zum schnelleren Umschalten zwischen Vollbild und klassischer Ansicht. Den Umweg über das erweiterte Menü finde ich etwas unpraktisch. Ein Button direkt in der oberen Editor-Leiste wäre praktischer. Leider gibt es auch kein Tastaturkürzel zum schnellen Wechsel zwischen den Modi.

Wiederverwendbare Blöcke

Die wiederverwendbaren Blöcke sind ein echtes Highlight des neuen Block Editors. Damit lässt sich ein Block – oder eine Gruppe von Blöcken – anlegen, der sich dann in jedem Beitrag einfügen lässt.

Die Erstellung bzw. Verwaltung wiederverwendbarer Blöcke ist etwas gewöhnungsbedürftig. Man muss dazu in jedem Fall den Umweg über den Editor nehmen. Die Funktion verbirgt sich ebenfalls im erweiterten Menü. Zu finden ist sie relativ weit unten im Abschnitt „Werkzeuge“ unter dem Namen „Alle wiederverwendbaren Blöcke verwalten“.

Meiner Meinung nach ist das etwas umständlich. So muss man immer einen Beitrag (oder eine Seite) bearbeiten, um zu den wiederverwendbaren Blöcken zu gelangen. Ein eigener Eintrag im Menü wäre da aus meiner Sicht sinnvoller.

Hat man die Verwaltung der wiederverwendbaren Blöcke erst einmal aufgerufen, landet man auf einer Seite, die genauso aussieht wie die Liste mit den Beiträgen. Hier können die Blöcke bearbeitet oder neue wiederverwendbare Blöcke angelegt werden.

Zum Anlegen und Bearbeiten solcher Blöcke wird natürlich ebenfalls der Gutenberg Editor geöffnet. Ein wiederverwendbarer Block ist nicht auf einen einzelnen Block beschränkt sondern kann aus beliebigen Blöcken bestehen.

Das Anlegen eines wiederverwendbaren Blocks in Gutenberg

Sobald mindestens ein wiederverwendbarer Block vorhanden ist wird in der Blockauswahl eine zusätzliche Kategorie „Wiederverwendbar“ angezeigt. Hier werden alle vorhandenen wiederverwendbaren Blöcke angezeigt. Sie können wie jeder andere Block in den Inhalt eingefügt werden.

Das Einfügen eines wiederverwendbaren Blocks in Gutenberg

Ein in den Inhalt eingefügter wiederverwendbarer Block ist an einem entsprechenden Symbol erkennbar, das in der rechten oberen Ecke des Blocks angezeigt wird.

Ein eingefügter wiederverwendbarer Block

Wiederverwendbare Blöcke unterscheiden sich in einem ganz wesentlichen Punkt von reinen Vorlagen. Das ist wahrscheinlich auch der Grund, warum sie nicht Vorlagen heißen.

Ein wiederverwendbarer Block wird nicht statisch in den Artikel eingefügt sondern dynamisch eingebunden. Soll heißen, dass bei einer Änderung eines solchen Blocks in einem Artikel nicht dieser Block geändert wird. Dadurch wird der wiederverwendbare Block selbst geändert. Die Änderung wirkt sich auf alle Artikel aus, in denen dieser Block eingebunden ist.

Ein sehr praktisches Feature, das einer bloßen Vorlage weit überlegen ist. Möchte man genau das nicht, dann lässt sich der Block über das erweiterte Menü der Werkzeugleiste in einen normalen Block umwandeln.

Einen wiederverwendbaren Block in einen normalen Block umwandeln

Dadurch wird der Inhalt des wiederverwendbaren Blocks als entsprechender Block in den Inhalt direkt eingefügt. Die Verknüpfung zum wiederverwendbaren Block geht verloren. Der Block lässt sich bearbeiten, ohne dass die Änderungen sich auf andere Artikel auswirken.

Beinhaltet der wiederverwendbare Block mehrere Blöcke, dann entstehen durch die Umwandlung natürlich einzelne Blöcke.

Alte Inhalte in Blöcke umwandeln

Inhalte, die noch mit dem „alten“ Editor #tinymce erstellt worden sind, werden beim Öffnen mit dem neuen Editor zur Gänze in einen einzigen Block geladen. Dieser Classic Block bindet den bisherigen Editor in #gutenberg ein.

Durch diese Integration lässt sich alter Inhalt wie gewohnt innerhalb des Block Editors weiter bearbeiten. Davor und danach können weitere Blöcke eingefügt werden. So kann bestehender Inhalt um neue Inhalte, die mit dem bisherigen Editor nicht machbar waren, erweitert werden.

Darüber hinaus gibt es auch die Möglichkeit, den alten Inhalt in Blöcke umzuwandeln. Dabei wird der Inhalt absatzweise in die entsprechenden Gutenberg-Blöcke umgewandelt.

Alte Inhalte in einem Classic Block in neue Gutenberg Blöcke umwandeln

In meinem Tests hat das immer gut geklappt. Trotzdem empfiehlt es sich, vor dem Speichern den gesamten Beitrag genau durchzusehen, ob alle Inhalte richtig umgesetzt wurden. Noch besser ist es, vorher eine Kopie des Beitrags anzulegen.

Schneller Tippen mit Format Shortcuts

Mit Format Shortcuts lässt sich ein neuer Block schnell in den gewünschten Blocktyp umwandeln ohne den Umweg über die Blockauswahl nehmen zu müssen. So lässt sich ein Artikel sehr schnell tippen.

Dazu wird ein neuer leerer Block mit einem Tastaturkürzel begonnen und danach die Leertaste gedrückt. Die Eingabe verschwindet sofort wieder und der Block wird umgewandelt. Es stehen einige Format Shortcuts zur Verfügung – die übrigens auch im alten Editor bereits funktioniert haben.

Mit zwei Rautezeichen beispielsweise lässt sich eine Überschrift zweiter Ordnung (H2) erzeugen. Drei Rautezeichen erzeugen eine Überschrift dritter Ordnung (H3) und so weiter. Die folgende Auflistung enthält alle mir bekannten Shortcuts.

##‌##Überschrift H2
##‌##‌##Überschrift H3
##‌##‌##‌##Überschrift H4
##‌##‌##‌##‌##Überschrift H5
##‌##‌##‌##‌##‌##Überschrift H6
* oder -Aufzählung (Liste)
1. oder 1)Nummerierte Aufzählung
>Zitat

Die folgende Bildschirmaufnahme zeigt einige Format Shortcuts in Aktion.

Gutenberg Format Shortcuts

Schnelle Blockauswahl mit der Tastatur

Einige wichtige Blocktypen lassen sich über die vorher beschriebenen Shortcuts erzeugen. Es gibt aber noch eine weitere Möglichkeit, um einen neuen Block zu erzeugen ohne die Maus verwenden zu müssen. Dabei stehen alle verfügbaren Blöcke zur Auswahl.

Die Blockauswahl lässt sich nämlich auch mit der Tastatur einblenden und bedienen. Dazu muss lediglich am Beginn eines neuen Blocks ein Schrägstrich eingetippt werden. Dadurch wird sofort eine vereinfachte Blockauswahl eingeblendet.

Hier fehlt die Einteilung der Kategorien und es werden auch nur einige der verfügbaren Blöcke in einer Liste angezeigt. Durch Eintippen des Block-Names lässt sich der gewünschte Block auswählen, mit /bild also beispielsweise ein Bild-Block.

Dabei stehen nicht nur die in der Liste angezeigten Blöcke zur Auswahl, sondern alle. Durch Drücken der Eingabetaste wird der gewünschte Block sofort erzeugt.

Beim Tippen wird die Liste auf passende Einträge gefiltert. Sobald der gewünschte Block gefunden ist, kann die Eingabetaste gedrückt werden. So reicht in der Regel zum Beispiel schon /b aus, um einen Bild-Block zu erzeugen.

Die folgende Bildschirmaufnahme zeigt die schnelle Blockauswahl mit der Tastatur.

Schnelle Blockauswahl mit der Tastatur im WordPress Block Editor Gutenberg

Fazit

Der WordPress Block Editor bietet einige Einstellungsmöglichkeiten um ihn den eigenen Vorlieben anzupassen. Außerdem gibt es einige Funktionen, um effizienter und schneller damit arbeiten zu können.

Affiliatelinks

Bei Links, die mit einem  gekennzeichnet sind, handelt es sich um sogenannte Affiliate- oder Provisions-Links. Wenn du auf so einen Link klickst und über diesen Link einkaufst, dann erhalte ich für Deinen Einkauf eine Provision vom jeweiligen Anbieter. Für dich verändert sich der Preis dadurch selbstverständlich nicht. Diese Links tragen dazu bei, einen Teil der Kosten, die mit dem Betrieb dieser Website verbunden sind, zu decken.