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

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

Der mit WordPress 5.0 neu eingeführte Block-Editor Gutenberg unterscheidet sich in der Bedienung erheblich vom bisherigen Editor TinyMCE. Teil 2 dieser Serie bietet einen kurzen Überblick über die Funktionsweise des neuen Editors.

Bevor es losgeht

Der neue Editor ist viel mehr als ein reiner Editor. Mit #gutenberg lässt sich das Layout von Seiten wesentlich umfangreicher anpassen als dies bisher mit WordPress Bordmitteln der Fall war.

Dazu arbeitet der neue #editor mit sogenannten Blöcken. Jeder Block ist ein in sich geschlossener Inhaltsbereich. Jedes dieser Elemente ist unabhängig von den anderen Elementen auf einer Seite und lässt sich individuell anpassen.

Jeder Block hat einen Block-Typ. Ein Block vom Typ „Bild“ beispielsweise kann auch nur ein Bild enthalten. Aus solchen Blöcken wird der Inhalt einer Seite wie aus Bausteinen aufgebaut.

Der neue WordPress Editor arbeitet mit Blöcken

Beim Bearbeiten eines Blocks werden nur die Werkzeuge angezeigt, die für den gerade aktiven Block auch tatsächlich verwendet werden können. Beim Bearbeiten eines Text-Block werden also beispielsweise keine Einstellungen angezeigt, die nur für Bilder möglich sind.

Es gibt verschachtelte Blöcke um beispielsweise mehrspaltige Layouts zu realisieren. Widget-Blöcke bieten die Möglichkeit, dynamischen Inhalt wie beispielsweise eine Auflistung der letzten Beiträge anzuzeigen.

WordPress bietet eine ganze Anzahl an Block-Typen, Plugins können aber zusätzliche Blöcke definieren. So lässt sich der Editor umfangreich erweitern.

Die Oberfläche des Block-Editors

Nicht nur in der Funktionsweise unterscheidet sich der neue vom alten Editor. Auch optisch hat sich der Editor komplett verändert. Im Prinzip besteht er aus vier Bereichen.

Die vier Bereiche des neuen WordPress Block-Editors Gutenberg

Die obere Editor-Leiste

Ganz bewusst nenne ich diesen Bereich nicht Werkzeugleiste, denn die eigentliche Werkzeugleiste ist zumindest standardmäßig nicht Teil der oberen Editor-Leiste.

Die obere Editor-Leiste des neuen WordPress Block-Editors Gutenberg

Im linken Bereich der Editor-Leiste befinden sich fünf Buttons. Der erste dient zum Hinzufügen eines neuen Blocks. Die beiden Symbole danach sind aus meiner Sicht selbsterklärend, es handelt sich um die Funktionen „Rückgängig“ und „Wiederherstellen“.

Auch das Info-Symbol ist gut als solches zu erkennen. Ein Klick auf diesen Button zeigt einige Informationen zum Umfang sowie zur Gliederung des Beitrags an.

Das letzt Symbol auf der linken Seite blendet die Block-Navigation ein, die eine Übersicht über alle im Beitrag verwendeten Blöcke zeigt. Diese Funktion scheint wenig hilfreich zu sein, aber beim Bearbeiten von verschachtelten Blöcken ist sie ein unverzichtbares Werkzeug.

Die ersten drei Buttons im rechten Bereich der Editor-Leiste bedürfen wohl keiner Erklärung, „Speichern“, „Vorschau“ und „Veröffentlichen“ geben wohl kaum Rätsel auf. Wie auch bisher schon gewohnt, ändern sich der Button „Veröffentlichen“ in „Aktualisieren“ sobald ein Beitrag veröffentlicht wurde.

Das Zahnrad-Symbol dient dazu, die Leiste auf der rechten Seite mit den Einstellungen aus- und wieder einzublenden. Mir persönlich erscheint das Ausblenden wenig sinnvoll, da man die Einstellungen doch häufig benötigt.

Hinter den drei Punkten ganz am rechten Rand verbirgt sich ein Menü. Hier lässt sich der Editor anpassen. Auf die einzelnen Punkte in diesem Menü gehe ich im Rahmen dieser kurzen Einleitung nicht ein.

Lediglich die erste Einstellung „Obere Werkzeugleiste“ möchte ich kurz erwähnen. Wenn diese Einstellung aktiv ist, wird die Werkzeugleiste in den mittleren Teil der oberen Editor-Leiste integriert. Ist diese Einstellung nicht aktiv, dann wird die Werkzeugleiste immer direkt beim gerade bearbeiteten Block angezeigt.

Einstellungen

Die rechte Leiste mit den Einstellungen gliedert sich in zwei Tabs – „Dokument“ und „Block“. Im Tab „Dokument“ befinden sich generelle Einstellungen zum Beitrag wie beispielsweise die Sichtbarkeit oder das Beitragsbild.

Der Bereich mit den Einstellungen des neuen WordPress Block-Editors Gutenberg

Im Tab „Block“ finden sich die Einstellungen zum gerade bearbeiteten Block. Es ist einer der großen Pluspunkte des neuen Editors, dass nur mehr das angezeigt wird, was für den jeweiligen Block gerade benötigt wird.

Wird gerade ein Text-Block bearbeitet, dann lässt sich hier beispielsweise Schriftgröße und -farbe anpassen. Wird ein Bild bearbeitet, kann hier zum Beispiel die Größe eingestellt werden. Bei einem Titel kann eingestellt werden, um welche Überschriften-Ebene es sich handelt.

Titel

Wie auch bisher ist der Titel nicht Bestandteil des eigentlichen Inhalts. Es handelt sich dabei nicht um einen Block. Dementsprechend gibt es auch keine Einstellungen.

Wenn der Titel eines bereits gespeicherten Beitrags aktiv ist, wird darüber eine Leiste angezeigt, in der sich der Permalink ändern lässt. Diese Leiste wird immer direkt oberhalb des Titels angezeigt – auch wenn die Integration der Werkzeugleiste in die obere Leiste aktiv ist.

Der Permalink lässt sich aber auch in den Dokumenten-Einstellungen ändern. Dazu muss man nicht ganz nach oben scrollen, die Änderung ist an jeder Stelle möglich.

Inhalt

In diesem Bereich werden – wenig verwunderlich – die Blöcke eingefügt. Beim Anlegen eines neuen Beitrags wird automatisch schon ein normaler Text-Block angezeigt – „Absatz“ heißt dieser Block-Typ. Jeder Absatz ist somit ein eigener Block.

Das Drücken der Eingabetaste erzeugt einen neuen Absatz-Block. Somit kann auch im neuen Block-Editor flüssig getippt werden, ohne dass man jedesmal erst einen neuen Block anlegen müsste, um einen Absatz zu erzeugen.

Ein neuer leerer Block im WordPress Block-Editor Gutenberg

Solange man noch nicht zu tippen beginnt, werden auf der rechten Seite des neuen Blocks drei Symbole angezeigt. Damit lässt sich der Block in einen Überschrift- einen Bild- oder einen Zitat-Block umwandeln. Ein Klick auf das Plus-Symbol auf der linken Seite des neuen Blocks öffnet die komplette Blockauswahl. Hier sind alle verfügbaren Block-Typen auswählbar.

Das Arbeiten mit Blöcken

Wenn man sich erst einmal an das Konzept mit den Blöcken gewöhnt hat, geht das Erstellen und Bearbeiten von Beiträgen und Seiten im neuen Editor flott von der Hand. Zu Beginn ist es noch etwas mühsam, weil man sich nicht gleich zurechtfindet. Schon nach kurzer Eingewöhnung wird das Arbeiten aber flüssiger.

Einen neuen Block anlegen

Um einen neuen Block anzulegen, gibt es mehrere Möglichkeiten. Die erste Variante habe ich bereits erwähnt. Beim Tippen eines Artikels ist es am praktischsten, einen neuen Block am Ende einfach durch Drücken der Eingabetaste zu erzeugen.

Bewegt man die Maus in den Bereich zwischen zwei Blöcken, dann wird an dieser Stelle ein Plus-Symbol angezeigt. Mit einem Klick darauf kann an dieser Stelle eine neuer Block eingefügt werden.

Einfügen eines Blocks im WordPress Block-Editor Gutenberg

So kann ein Block an einer anderen Stelle als am Ende eingefügt werden. Hier wird allerdings immer die Blockauswahl angezeigt und nicht sofort ein leerer Absatz-Block erzeugt.

Ebenso kann mit dem Plus-Symbol ganz links in der oberen Editor-Leiste ein neuer Block eingefügt werden. Dieser wird immer nach dem gerade aktiven Block eingefügt.

Einen Block bearbeiten

Neben den Einstellungen, die man auf der rechten Seite in der Einstellungs-Leiste ändern kann, gibt es einige Werkzeuge, mit denen sich ein Block bearbeiten lässt. Diese befinden sich in der Werkzeugleiste.

Bearbeiten eines Blocks im WordPress Block-Editor Gutenberg

Die Werkzeugleiste wird oberhalb des gerade aktiven Blocks angezeigt und beim Tippen ausgeblendet, um nicht zu stören. Ist die Option „Obere Werkzeugleiste“ aktiviert, dann wird die Werkzeugleiste in die obere Editor-Leiste integriert und befindet sich damit immer an der selben Stelle. Dafür sind die Wege, die mit der Maus zu fahren sind, weiter. Es ist eine Frage des persönlichen Geschmacks, was man bevorzugt.

Der erste und der letzte Button in der Werkzeugleiste sind immer identisch. Die Werkzeuge dazwischen sind abhängig davon, welcher Block gerade aktiv ist. Bei einem Text-Block ist das beispielsweise die Wahl der Ausrichtung sowie Fett- und Kursivschrift, ein Button für durchgestrichenen Text und das Werkzeug zum Bearbeiten von Links.

Der erste Button ändert sein Aussehen je nach Block-Typ, was etwas verwirrend sein kann. Jeder Block-Typ hat sein eigenes Symbol. Dieses wird hier angezeigt. Die Funktion ist jedoch immer die selbe.

Mit diesem Werkzeug kann der Block in einen anderen Typ umgewandelt werden. Dabei stehen sinnvollerweise nur Block-Typen zur Auswahl, die auch für die Umwandlung möglich sind. Ein Text kann beispielsweise in einen Titel umgewandelt werden, aber nicht in ein Bild.

Hinter dem letzten Symbol in der Werkzeugleiste verbirgt sich wieder ein Menü mit weiteren Funktionen. In diesem Menü versteckt sich beispielsweise die Funktion zum Löschen eines kompletten Blocks. Meiner Meinung nach etwas zu gut versteckt.

Einen Block verschieben

Ein weiterer großer Vorteil des Block-Editors gegenüber dem bisherigen Editor ist, dass Blöcke ganz einfach verschoben werden können. Dazu muss die Maus nur an den linken Rand eines Blocks bewegt werden.

Verschieben eines Blocks im WordPress Block-Editor Gutenberg

Dadurch werden bis zu drei Symbole links vom Block angezeigt. Die beiden Pfeile nach oben und nach unten dienen zum Verschieben um einen Block nach vorne oder nach hinten. Beim ersten und beim letzten Block fehlt jeweils ein Pfeil.

Mit dem mittleren Symbol lässt sich ein Block mit der Maus greifen und per Drag & Drop an eine andere Stelle verschieben. Das richtige Positionieren ist anfangs etwas Spielerei, aber man kommt schnell dahinter, wohin man die Maus bewegen muss um den Block an die gewünschte Stelle zu verschieben.

Die wichtigsten Blöcke im Überblick

Im dritten Teil dieser Reihe folgt ein kurzer Überblick über die wichtigsten Blöcke.

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.