WordPress Block Editor: das ist der neueste Stand

Der WordPress Block-Editor und das Gutenberg-Plugin: Geschichte und Entwicklung

In WordPress kommt seit der Version 5.0 der Block-Editor zum Einsatz. Leider gibt es immer wieder Verwirrungen bezüglich der Begrifflichkeiten: Gutenberg war ehemals die Bezeichnung für das gesamte Projekt. In der Regel wird der WordPress Block Editor auch als Gutenberg bezeichnet. Das ist so nicht korrekt, weil es zusätzlich ein Gutenberg-Plugin gibt. Dieses Plugin bietet bestimmte Funktionen an, die du als experimentell betrachten kannst und die noch nicht endgültig getestet sind. Bei diesen neuen Optionen ist es unklar, ob und/oder wann diese Optionen in den Core (Kern) von WordPress einfließen. Daher solltest du das Plugin nicht auf Produktivseiten einsetzen. Der Block-Editor ist dagegen der Standard-Editor von WordPress und steht ab der Version 5.0 automatisch als Editor zur Verfügung. Leider gibt es immer wieder Nutzer, denen das nicht bekannt ist und die das Gutenberg-Plugin auf Produktivseiten einsetzen. Wenn diese Nutzer dann verschiedene Probleme mit ihrer Website haben, werden bei den Bewertungen für das Gutenberg-Plugin negative Kommentare in der Art gepostet, dass der Block-Editor nicht richtig funktioniert.

Der Block-Editor war zu Beginn der Entwicklung in WordPress 5.0 (Veröffentlichung 2018) tatsächlich noch ziemlich fehlerhaft und umstritten. Ich kann mich noch sehr gut an die Diskussionen zum Block-Editor beim WordCamp Retreat 2018 erinnern, als bereits erste Betaversionen verfügbar waren. Damals hätte ich mir nicht vorstellen können, den Block-Editor einzusetzen. Auch wenn die weitere Entwicklung kontrovers diskutiert wird (siehe z. B. hier ein Beispiel für die Diskussion um das Full Site Editing), bietet der Block-Editor mittlerweile so viele Möglichkeiten und läuft inzwischen so stabil, dass der Einsatz von meistens kostenpflichtigen Page Buildern an sich nicht notwendig ist. Bei unseren eigenen Projekten setzen wir fast ausschließlich den Block-Editor ein.

Das Block-Editor Projekt befindet sich gerade in der zweiten Phase eines vierphasigen Prozesses, der jeden Teil von WordPress betreffen wird:

• Bearbeitung
• Anpassung (einschließlich vollständiger Site-Bearbeitung, Blockmuster, Blockverzeichnis und Block Themes)
• Zusammenarbeit
• Mehrsprachigkeit

Funktionen des Block Editors

Der WordPress Block-Editor ist der eingebaute Standard-Editor von WordPress seit der Version 5.0. Wenn du den „alten“ Editor einsetzen möchtest, kannst du das Plugin Classic Editor installieren und aktivieren. Auf der Plugin-Seite heißt es: „Classic Editor ist ein offizielles WordPress-Plugin. Es wird mindestens bis 2022 oder so lange wie nötig unterstützt und gepflegt werden.“
Zunächst war eigentlich eine Unterstützung bis 2021 geplant. Aufgrund der Diskussionen rund um den Block-Editor wurde die Frist verlängert.

Als Blöcke werden alle Inhaltselemente wie z. B. Absätze, Überschriften, Bilder  bezeichnet.

Wenn du einen Beitrag oder eine Seite erstellt, sieht das wie folgt aus:

1. Mit diesem Symbol kann die Listenansicht aktiviert werden. Die Listenansicht ist sehr sinnvoll, weil du damit einen viel besseren Überblick hast. Leider muss die Listenansicht in der Regel erst aktiviert werden. Das kannst du entweder über das Symbol, oder aber auch mit der Tastenkombination SHIFT+ALT+O, erreichen.
2. Anschließend siehst du in der Listenansicht die jeweils aktiven Blöcke. In unserem Fall ist das eine Spalte mit den darin enthaltenen Blöcken Abstandhalter, Bild, Abstandhalter und Bild.
3. In der Mitte ist die Ansicht zu sehen. Der aktive Block wird automatisch durch einen Rahmen markiert. Im Beispiel ist das eine Spalte mit den darin enthaltenen Blöcken.
4. Rechts sind die Eigenschaften für den jeweilig aktiven Block zu sehen. Hier kannst du also beispielsweise die Farbe und die Breite der Spalte einstellen.

Ein Beispiel für die Erstellung eines Beitrags mit dem Block-Editor

Im nachfolgenden Beispiel möchte ich dir zeigen, wie du mit dem Block-Editor einen Beitrag mit einer Überschrift, einem Bild und einem Absatz erstellst, wobei ich der Einfachheit halber das Standard-Theme „Twenty Twenty“ aktiviert habe. Die Erstellung eines Beitrags mit dem Block-Editor ist unabhängig von dem verwendeten Theme.

Zunächst klickst du wie gewohnt im Dashboard links unter Beiträge auf „Erstellen“:

Um einen Block auszuwählen, kannst du entweder auf das Zeichen (+) klicken oder – wenn du schon weißt, welchen Block du einfügen möchtest – die Blockbezeichnung hinter dem Slash (/) eingeben. Wir wollen zunächst eine Überschrift erfassen. Daher klicke ich auf das „+“ und erhalte eine erste Übersicht mit Blöcken, die ich nutzen kann:

Den Block „Überschrift“ kannst du hier direkt auswählen. Sollte der gewünschte Block nicht zu sehen sein, kannst du auf die Schaltfläche „Alle durchsuchen“ klicken.

Sobald ich den Block „Überschrift“ ausgewählt habe, kann ich sofort die Überschrift eintippen. Die Überschrift erscheint automatisch als Überschrift der 2. Kategorie (H2). Eine Änderung der Kategorie ist an der Stelle denkbar, aber nicht notwendig.

Bei jedem Block kannst du einerseits die Einstellungen über die Block-Symbolleiste und andererseits in der Seitenleiste ändern. Über die Block-Symbolleiste für die Überschrift könntest du z. B. die Ausrichtung (Breite), die Textausrichtung (zentriert, rechts- oder linksbündig) und u. a. die Verlinkung ändern. Über die Seitenleiste besteht die Möglichkeit, die Farbe, die Schriftgröße oder das Design zu ändern.

Wenn du die Überschrift erfasst und mit ENTER abgeschlossen hast, kannst du entweder einen neuen Block (z. B. ein Bild) auswählen oder direkt einen Text eingeben. Wir erfassen zunächst ein Bild und danach einen Text.

Das Bild kann wie üblich zunächst hochgeladen werden oder direkt aus den Medien eingefügt werden. Auch hier gibt es wieder die Block-Symbolleiste und die Seitenleiste. Die Block-Symbolleiste bietet in dem Fall natürlich andere Optionen als bei der Überschrift. Das betrifft auch die Seitenleiste mit den Eigenschaften.

Abgeschlossen wird die Erfassung dieses einfachen Beispielbeitrags mit einem Text, der einfach eingetippt werden kann, nachdem das Bild eingefügt wurde.

Im Frontend sieht das dann wie folgt aus:

Im nachfolgenden Youtube-Video, das ich aus Anlass eines Vortrags bei einem Online-Meetup erstellt habe, zeige ich, wie man auch aufwendigere Designs mit dem Block-Editor umsetzen kann. Auch wenn das Youtube-Video schon etwas älter ist, haben sich die Grundstrukturen nicht geändert. Allerdings funktionieren einige Dinge etwas anders, weil der Block-Editor auch hinsichtlich der Benutzerfreundlichkeit wesentlich verbessert wurde. So stand z. B. die Listenansicht zum damaligen Zeitpunkt noch nicht zur Verfügung.

Block Patterns – „Textbausteine“ für WordPress

Block Patterns sind Vorlagen von Blockgruppen, die du in veränderter Form weiter verwenden kannst. Du könntest also beispielsweise die o. g. Form für einen Beitrag bestehend aus Überschrift, Bild und Text als Vorlage für weitere Beiträge nutzen und sozusagen als Textbausteine verwenden. Das macht an sich allerdings nur Sinn, wenn du eine Vorlage hast, die ganz besonders aufwendig formatiert ist. Wir nutzen beispielsweise auf meiner Website für Bilder immer einen relativ aufwendig gestalteten Block Pattern:

Während der Text ca. die Hälfte der Breite einnimmt, ist der Block mit den beiden Bildern so gestaltet, dass der graue Hintergrund die gesamte Breite einnimmt. Die beiden Bilder werden dagegen ebenfalls in der Mitte gezeigt. Den Block Pattern brauche ich lediglich einzufügen und die beiden Bilder durch die gewünschten Bilder ersetzen. Block Patterns können entweder über Plugins oder über entsprechende Funktionen z. B. bei einem Child Theme in der functions.php erstellt werden. Die Erstellung eines Block Patterns konnte ich hier im Rahmen dieses Beitrags nur kurz anreißen. Mehr Infos zu dem Thema gibt es im folgenden Beitrag.

Full Site Editing (FSE) und Block Themes

Mit WordPress 5.9 gibt es jetzt das Full Site Editing (FSE). Mit Full Site Editing steht der neue Editor (allerdings noch in der Betaversion) zur Verfügung, mit dem du Templates z. B. für Seiten und Beiträge erstellen oder anpassen kannst. Zusätzlich können noch Template-Teile wie beispielsweise die Navigationsleiste bearbeitet werden. Wenn du also auf der Hauptseite ein anderes Layout und/oder eine geänderte Navigationsleiste haben möchtest als z. B. bei Einzelbeiträgen, dann kannst du das damit umsetzen. Dazu werden allerdings entsprechende Themes (sogenannte Block Themes) benötigt.

Interessant sind in dem Zusammenhang auch die Global Styles. Das ist eine Datei (theme.json), die bei Block Themes im Themeordner liegt und z. B. bestimmte Angaben zu Farben, Schriften, etc. enthält.

Allerdings ist die Entwicklung in dieser Hinsicht sicher noch nicht abgeschlossen, weil es doch einige Stellen gibt, die noch nicht so benutzerfreundlich sind. Aufgrund der Erfahrungen mit WordPress und dem Block-Editor, der am Anfang ja auch sehr umstritten war, bin ich mir mittlerweile sicher, dass auch Full Site Editing in der Zukunft sich weiter entwickeln wird. Ich halte FSE für eine sehr interessante Option. Produktive Websites habe ich mit FSE allerdings bis dato noch nicht erstellt. Und natürlich wird es auch noch lange die sogenannten klassischen Themes geben.

Fazit

Sicher: Der WordPress Block-Editor hat hier und da noch kleinere Macken, aber grundsätzlich finde ich den Editor richtig gut. Natürlich habe ich mir auch vor einiger Zeit Elementor angesehen, konnte mich damals aber mit diesem Page-Builder nicht anfreunden. Der klare Vorteil bei dem Block-Editor besteht darin, dass er im Core verankert ist, d. h. der Block-Editor ist ein Bordmittel, das automatisch zur Verfügung steht. Damit ist bist auf jeden Fall auf der sicheren und kostenfreien Seite.

Die Nutzung von Block Patterns und Full Site Editing (FSE) runden das Bild ab, auch wenn die Entwicklung – wie bereits beschrieben – nicht abgeschlossen ist. Dieser Vorteil ist für meine Begriffe schwerwiegender als die vielleicht größere Vielfalt an Möglichkeiten bei Elementor. Bei Elementor weiß man nicht, wo die Reise hingeht und ob nicht doch eines Tages daraus ein eigener WordPress-Ableger entsteht.

Zum Abschluss dieses Beitrags hier noch ein interessantes Youtube-Video von Jamie Marsland – ein Vergleich von Elementor und dem Block-Editor:

Quellen, Links und weitere Infos:

• … auf deutsch:
  • Die Gutenberg-Fibel: https://gutenberg-fibel.de/
  • WP Sofa (ein empfehlenswerter WordPress-Podcast): https://wp-sofa.de
  • Viele Beiträge zum Block-Editor, Full Site Editing, etc.: https://www.elmastudio.de/blog/
  • Wöchentliche Neuigkeiten rund um WordPress: https://wpletter.de/
• … auf englisch:
  • Block-Editor-Handbuch: https://developer.wordpress.org/block-editor/
  • Der Block-Editor: https://wordpress.org/support/article/wordpress-editor/
  • Umfassende Website zu allen möglichen Themen rund um Full Site Editing (FSE): https://fullsiteediting.com/
  • Website mit allen möglichen Informationen rund um Gutenberg und den Block-Editor: https://gutenbergtimes.com/
  • Gutenberg Hub ist eine zentrale Ressource für die Arbeit mit dem Gutenberg und dem Block-Editor: https://gutenberghub.com/
  • Der Youtube-Kanal von Jamie Marsland: https://www.youtube.com/channel/UC8uTMlOeXtwxstq8UPjHgTw
  • Neuigkeiten rund um WordPress: https://wordpress.org/news/
  • Block Patterns zum direkten Einsatz im Block-Editor: https://wordpress.org/patterns/
  • Workshops zu allen möglichen Themenbereichen rund um WordPress, den Block-Editor und Full Site Editing (FSE): https://learn.wordpress.org/