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

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

Der WordPress Block-Editor Gutenberg kommt bereits von Haus aus mit mehr als 60 Blöcken. Weitere Blöcke können durch Plugins hinzugefügt werden. Im dritten Teil dieser Serie werden die wichtigsten Standard-Blöcke kurz vorgestellt.

Wer den neuen Block Editor, der mit WordPress 5.0 eingeführt wurde, zum ersten Mal verwendet, ist von der Vielzahl der verfügbaren Blöcke wahrscheinlich überfordert. Die meisten Anwender werden tatsächlich mit einer relativ kleinen Auswahl daraus auskommen.

Zur besseren Übersicht sind die Block-Typen in der Blockauswahl in fünf Kategorien unterteilt. Auch die Kategorien sind durch Plugins erweiterbar. Zusätzlich dazu gibt es noch die Kategorie „Meistgenutzt“. Diese befindet sich ganz oben in der Auswahl und hier werden die neun zuletzt verwendeten Blöcke angezeigt.

Übersicht über die Blöcke des WordPress 5.0 Block Editors Gutenberg

Im Rahmen dieser Artikel-Serie möchte ich nur einen kurzen Überblick über #gutenberg geben. Deshalb werde ich nicht auf alle Blöcke im Detail eingehen, sondern mich auf einige wesentliche beschränken. Die folgende Aufstellung orientiert sich an den Kategorien, in die die Standard-Blöcke eingeteilt sind.

Allgemeine Blöcke

Die Allgemeinen Blöcke des WordPress Block Editors Gutenberg

Absatz

Mit dem Absatz-Block lässt sich ein normaler Textblock erstellen. Dieser Block-Typ kommt in der Regel – außer vielleicht im Fall von Foto- oder Video-Blogs – am häufigsten zum Einsatz.

Sinnvollerweise wird daher beim Drücken der Eingabetaste auch sofort ein neuer Absatz-Block erzeugt. Das spart unnötige Aktionen mit der Maus und ermöglicht das rasche Tippen von Text – fast so wie man das vom bisherigen WordPress Editor #tinymce gewohnt war.

Text lässt sich wie gewohnt links- oder rechtsbündig bzw. mittig ausrichten. Diese Einstellung wirkt sich natürlich immer auf den gesamten Absatz aus. Hier ist das Bedienkonzept des Editors nicht ganz durchgängig, denn diese Funktionen befinden sich in der Werkzeugleiste, während sich alle anderen Einstellungen, die den ganzen Block betreffen, in der Seitenleiste befinden.

Die Werkzeugleiste beim Block Allgemein

Diese Inkonsistenz macht aber durchaus Sinn, die meisten Anwender werden die Funktionen genau hier erwarten und nicht in der Seitenleiste.

Die weiteren Icons dienen wenig überraschend dazu, Textteile fett, kursiv oder durchgestrichen darzustellen. Dazwischen befindet sich noch der Button zum Erzeugen eines Links, der wie gewohnt funktioniert.

In der Seitenleiste lässt sich die Schriftgröße sowie Vorder- und Hintergrundfarbe des gesamten Absatzes festlegen. Eine recht nette Funktion ist dabei die automatische Überprüfung des Kontrasts zwischen Vorder- und Hintergrundfarbe. Bei Auswahl einer schlecht lesbaren Farbkombination zeigt WordPress einen entsprechenden Hinweis an.

Die verfügbaren Farben können durch das aktive Theme definiert werden, damit diese auch zum Design der Seite passen. Wer einzelne Wörter farbig markieren möchte – was man meiner Meinung nach sowieso nicht machen sollte – wird schnell feststellen, dass das nicht möglich ist. Diese Funktion lässt sich aber beispielsweise mit dem #plugin Extra Gutenberg Blocks Options nachrüsten.

Bild

Es dürfte keine große Überraschung sein, dass dieser Block zum Einfügen eines einzelnen Bildes verwendet wird. Die Funktion gibt keinerlei Rätsel auf, wie auch bisher schon gewohnt stehen drei Optionen zur Auswahl.

Ein Bild einfügen mit dem WordPress Block Editor

Nach dem Einfügen eines Bildes lässt sich dieses über die Werkzeugleiste
linksbündig, zentriert oder rechtsbündig ausrichten. Weitere Optionen, die das Bild über den Textbereich hinausragen lassen, sind verfügbar, sofern Dein Theme das unterstützt.

Bei links- oder rechtsbündiger Ausrichtung fließen nachfolgende Elemente um das Bild. Die Bildgröße lässt sich bequem mit der Maus anpassen.

In der Seitenleiste finden sich bekannte Einstellungen zur Bildgröße und zum Verlinken des Bildes. Auch der Alternativtext lässt sich hier festlegen. Unverständlich ist, dass es hier keine Verknüpfung zur Mediathek gibt. Der
Alternativtext wird nicht in die Mediathek übernommen, auch die Angabe eines Titles ist nicht mehr möglich. Das erschwert das Auffinden von Bildern in der Mediathek.

Liste

Mit diesem Block lassen sich ungeordnete Listen und nummerierte Aufzählungen erstellen. Unterpunkte können eingerückt werden. Alles wie bisher gewohnt. Diese Funktionen sind alle über die Werkzeugleiste erreichbar, in der Seitenleiste gibt es keine Einstellungen.

Das ist aus meiner Sicht unverständlich. Warum lassen sich normale Text-Absätze farbig formatieren, Listen aber nicht? Das gleiche gilt für die Schriftgröße. Zwar bin ich persönlich prinzipiell kein Freund davon, dass solche Formatierungen im #editor möglich sind, aber unabhängig davon sollte es für alle Text-Blöcke die gleichen Formatierungsmöglichkeiten geben. Das ist – zumindest derzeit – nicht der Fall.

Außerdem ist es zur Zeit noch nicht möglich, einen Zeilenumbruch innerhalb eines Aufzählungspunkts zu erzeugen. Im bisherigen Editor war das möglich. Es ist unverständlich, dass diese Funktionalität nicht von Anfang an auch im neuen Editor verfügbar ist. Das wird aber meines Wissens nach bald nachgebessert.

Überschrift

Bei Überschriften lässt sich sowohl über die Werkzeugleiste als auch über die Seitenleiste die Ebene festlegen. Dabei sind in der Werkzeugleiste die Ebenen H2 bis H4 auswählbar, in der Seitenleiste die Ebenen H1 bis H6. Meiner Meinung nach ein Fehler, dass es hier nach wie vor die Möglichkeit gibt, die erste Ebene auszuwählen. Diese sollte einzig und allein dem Titel vorbehalten sein.

Gleich wie beim Absatz lassen sich auch Überschriften linksbündig, rechtsbündig oder mittig ausrichten. Im Gegensatz zum Absatz-Block befindet sich diese Einstellung beim Überschrifts-Block aber in der Seitenleiste und nicht in der Werkzeugleiste. Ein durchgängiges Bedienkonzept sieht anders aus.

Textteile können fett, kursiv oder durchgestrichen formatiert werden. Links können analog zum Absatz-Block eingefügt werden. Auch bei der Überschrift steht keine Farbauswahl zur Verfügung.

Cover

Der Cover-Block ist ein nettes Feature des Block-Editors. Damit lässt sich ein Bild mit einer Farbe überlagern und Text darüber setzen. Die Farbe sowie die Deckkraft kann in der Seitenleiste geändert werden. Bild und Text lassen sich unabhängig voneinander ausrichten. Die Schriftgröße ist nicht änderbar.

Wie so ein Cover-Block im Einsatz aussieht, ist auf meiner Demo-Seite zum Twenty Nineteen Theme zu sehen.

Formatierung

Die Formatierungs-Blöcke des WordPress Block Editors Gutenberg

Classic

Mit dem Classic-Block lässt sich der alte WordPress-Editor TinyMCE in einen Block innerhalb von Gutenberg integrieren. Der Classic-Block hat seine eigene bekannte Werkzeugleiste. Einstellungen in der Seitenleiste gibt es natürlich keine.

Der Classic Block

Den Classic-Block in neuen Beiträgen zu verwenden macht wahrscheinlich wenig Sinn. Wenn Du einen bestehenden Beitrag – oder eine Seite – öffnest, die mit dem alten Editor erstellt wurde, dann wird der gesamte Inhalt in einem einzigen Classic-Block dargestellt und kann wie gewohnt weiter bearbeitet werden.

Der gesamte Inhalt eines Classic-Blocks lässt sich in die entsprechenden neuen Blöcke umwandeln. Das ist aber nicht zwingend nötig. So kann man selbst entscheiden ob man ältere Beiträge und Seiten in Blöcke umwandelt oder als Classic-Block bearbeitet.

Tabelle

Der Tabellen-Block ist eine feine Sache. Dass mit Gutenberg nun endlich auch Tabellen standardmäßig möglich sind ist eine sehr sinnvolle und von vielen lange vermisste Erweiterung.

Der Tabellen Block im WordPress Block Editor Gutenberg

Beim Anlegen einer Tabelle muss die gewünschte Anzahl Spalten und Zeilen angegeben werden. Selbstverständlich lässt sich die Tabelle danach noch erweitern.

Das Einfügen neuer Spalten oder Zeilen in die Tabelle ist über einen entsprechenden Button in der Werkzeugleiste komfortabel möglich. Ebenso das Löschen einer Spalte oder Zeile. Das halte ich persönlich für ziemlich gut gelungen.

Zwischen den einzelnen Zellen kann mit der Tabulator-Taste gewechselt werden – ganz so, wie man das beispielsweise auch von Excel gewohnt ist. Schade ist, dass durch das Drücken der Tabulator-Taste in der letzten Zelle nicht eine neue Zeile angelegt wird.

Gewöhnungsbedürftig ist, dass innerhalb einer Tabelle das Drücken der Eingabetaste eine neue Zeile erzeugt. Sonst wird überall ein neuer Absatz erzeugt, wenn die Eingabetaste gedrückt wird.

Die Breite der Spalten lässt sich nicht anpassen, sondern richtet sich nach dem Inhalt. In der Seitenleiste lässt sich einstellen, dass die Spalten eine fixe Breite haben sollen. In dem Fall erhalten alle Spalten die gleiche Breite.

Ebenfalls in der Seitenleiste lässt sich der „Streifen“ genannte Stil aktivieren. Dann erhält jede zweite Zeile eine Hintergrundfarbe, was die Lesbarkeit erleichtert. Weitere Einstellungen sind nicht möglich.

Layout-Elemente

Die Layout-Blöcke des WordPress Block Editors Gutenberg

Spalten

Mit dem Spalten-Block lassen sich zwei bis sechs Spalten definieren. Die Einstellung dazu befindet sich in der Seitenleiste. Weitere Einstellungen sind nicht möglich.

Beim Spalten-Block handelt es sich um einen verschachtelten Block. Dieser enthält weitere Blöcke. Der Spalten-Block selbst ist ein Block, jede Spalte ist ein eigener Block und in jeder Spalte befindet sich wieder mindestens ein Block. Eine Spalte kann beliebige Blöcke enthalten.

Diese Verschachtelung macht es schwierig, den gewünschten Block zu markieren, um dafür Einstellungen vorzunehmen. Der Spalten-Block selbst oder auch die einzelnen Spalten lassen sich mit der Maus nicht erreichen. Hier kommt die Block-Navigation in der oberen Editor-Leiste zum Einsatz.

Diese Funktion, die bei nicht verschachtelten Blöcken wenig Sinn zu machen scheint, ist bei verschachtelten Blöcken ein unverzichtbares Werkzeug zur Navigation. Sobald ein verschachtelter Block ausgewählt wird, zeigt die Block-Navigation nur mehr diesen Block mit seiner untergeordneten Struktur an.

Der Screenshot zeigt beispielhaft die Block-Navigation in einem Spalten-Block mit zwei Spalten und jeweils unterschiedlichen enthaltenen Blöcken.

Medien und Text

Dieser Block dient dazu, Text neben ein Bild oder Video zu positionieren. Dabei kann ausgewählt werden, ob das Bild – oder das Video – auf der linken Seite und der Text rechts stehen soll oder umgekehrt.

Im Unterschied zu einem Bild mit links- oder rechtsbündiger Ausrichtung fließt der Text in diesem Block nicht um das Bild herum. Ist der Textblock höher als das Bild, behält dieser die Breite bei. Das Bild wird dann vertikal mittig zum Text ausgerichtet.

Anders als beim Spalten-Block lässt sich die Größe des Bildes anpassen, der Text nimmt automatisch den restlichen Teil der Breite ein. Der Textteil kann einen Absatz-, ein Überschrifts- oder einen Listen-Block enthalten.

Widgets

Die Widget-Blöcke des WordPress Block Editors Gutenberg

Widgets sind in WordPress alte Bekannte, die bisher schon in Sidebars und anderen Widget-Bereichen Verwendung gefunden haben. Einige der
Standard-Widgets sind nun im Block-Editor auch als Blöcke vorhanden.

Widget-Blöcke sind dynamisch, der Inhalt wird von WordPress automatisch erzeugt. Diese Widget-Blöcke zeigen, wie mächtig der neue Editor ist und geben einen Ausblick darauf, was das Gutenberg-Projekt in Zukunft noch so alles hervorbringen wird.

Da die Funktionsweise der Widgets jedem WordPress-Anwender bekannt ist, bedürfen diese Blöcke keiner näheren Erklärung. Einen Sonderfall stellt der Shortcode-Block dar.

Der Shortcode-Block dient dazu, Shortcodes von Plugins einzufügen, die derzeit noch keinen entsprechenden Block für Gutenberg zur Verfügung stellen. Damit können Plugins, die nicht für Gutenberg angepasst wurden, weiterhin verwendet werden.

Ein Nachteil ist, dass diese Shortcodes nun nur als eigener Block eingefügt werden können. Die Verwendung von Shortcodes einfach im Text – wie das bisher möglich war – funktioniert mit dem neuen Block Editor nicht mehr. Wenn das zwingend erforderlich ist, bleibt nur der Weg über einen Classic-Block.

Einbettungen

Die Einbettungs-Blöcke des WordPress Block Editors Gutenberg

Mit den Blöcken zum Einbetten können Inhalte von anderen Websites auf der eigenen Seite eingebettet werden – sofern diese eine solche Funktion zur Verfügung stellen (über das oEmbed Protokoll).

Eingebettete Inhalte werden von der jeweiligen Website direkt an den Browser ausgeliefert. Die Darstellung ist vom Anbieter abhängig und kann daher nicht beeinflusst werden.

Das Einbetten von Inhalten in WordPress Seiten war auch bisher schon möglich, allerdings musste dazu ein Shortcode verwendet werden. Die Blöcke zum Einbetten sind da wesentlich komfortabler.

Die Einbetten-Blöcke funktionieren alle gleich. Es muss lediglich die einzubettende URL angegeben werden.

Das Einbetten einer Facebook-URL in Gutenberg

Der Screenshot zeigt das Einbetten eines Beitrags von Facebook. Mit Ausnahme der Ausrichtung lässt sich nichts einstellen. Je nach Anbieter ist im Editor eine Live-Vorschau möglich oder nicht. Im Fall von Facebook beispielsweise gibt es keine Live-Vorschau im Editor, der eingebettete Inhalt wird nur auf der Webseite angezeigt.

Der Screenshot zeigt mein letztes Posting auf Facebook als Einbettung.

Im Hintergrund funktionieren alle diese Einbettungs-Blöcke identisch. Dass es für jeden unterstützen Dienst einen eigenen Block gibt, ist lediglich für weniger versierte Anwender gedacht. So ist gleich ersichtlich, welche Dienste von WordPress unterstützt werden.

Prinzipiell würde sich jeder Inhalt, der über das oEmbed Protokoll zur Verfügung gestellt wird, auf diese Weise einbetten lassen. Aus Sicherheitsgründen lässt WordPress dies aber nicht zu, sondern beschränkt das Einbetten auf die angezeigten Dienste.

Der erste Block in dieser Kategorie, der einfach nur „Einbetten“ heißt, kann also nicht für jeden beliebigen Dienst verwendet werden. Es handelt sich dabei um einen allgemeinen Block, der verwendet werden kann, um jeden der angeführten Dienste einzubetten.

Es ist also nicht nötig, beispielsweise den Facebook-Block zu verwenden um einen Inhalt von Facebook einzubetten. Es kann genauso der allgemeine Einbetten-Block verwendet werden. Aber Du kannst auch genauso den Twitter-Block verwenden, um Facebook einzubinden. Oder eben jeden anderen Einbettungs-Block, es spielt keine Rolle.

Einige Tipps zum neuen Block Editor

Im vierten und letzten Teil dieser gebe ich einige Tipps für den Einsatz des Gutenberg-Editors.

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.