Screenshot vom WordPress Block Editor.

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.

Im WordPress Block Editor Bilder unterschiedlich anordnen.

 

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“:

Im WordPress Block Editor den ersten Inhaltsblock bauen

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:

Im WordPress Block Editor eine Überschrift anlegen

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.

Im WordPress Block Editor die Eigenschaften einer Überschrift verändern

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.

Im WordPress Block Editor bei einem Bild eine Beschriftung hinzufügen

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:

Ein erster Beitrag mit dem WordPress Block Editor erstellen

 

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.

WordPress: Der Block-Editor (Gutenberg) für Ein- und Umsteiger

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:

Block Patterns im WordPress Editor

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:

WordPress Gutenberg versus Elementor - The £20 Prize Beginners Challenge!

 

Quellen, Links und weitere Infos:

 

Wie hilfreich fanden Sie diese Seite?

Durchschnittliche Bewertung 4.8 / 5. Anzahl Bewertungen: 4

Ähnliche Beiträge

7 Kommentare

  1. Danke für die feine Übersicht! Ich war den Pagebuildern gegenüber schon immer skeptisch eingestellt, weil die meisten davon die grundlegende Regel missachten: Trenne Inhalt vom Design! Wenn der Inhalt so sehr im Design verschachtelt ist, dass man im Grunde die ganze Webseite neu aufsetzen muss, wenn man das Theme wechseln möchte – nein danke. Mir gefällt die Entwicklung des Block-Editors daher in den letzten Jahren sehr: So nahe am Kern wie möglich, und so viel mit Bordmitteln wie möglich.

  2. Der Block-Editor ist das Ende von WordPress. Kein Kunde will ihn verwenden. Er zeigt, welchen Weg wordpress.com gehen will: Den Weg von Webflow, Wix usw.

  3. Danke für die Antwort.
    Das sehe ich allerdings komplett anders. Insbesondere im deutschsprachigen WordPress-Forum (und da sind hauptsächlich Anwender unterwegs) ist die Resonanz weitestgehend positiv.

  4. Danke für die Antwort.
    Ich freue mich, dass Dir der Beitrag gefällt. Ich stimme mit Dir komplett überein: Dadurch, dass der Block-Editor der Standard-Editor von WordPress ist und damit – wie Du das ja auch angesprochen hast – im Core enthalten ist, kann man sich zurücklehnen und die weitere Entwicklung abwarten. Dagegen werden es die Entwickler von Page Buildern mit fortlaufender Entwicklung von WordPress immer schwerer haben. Natürlich gibt es manche Entwicklungen, die diskutiert werden und noch nicht rund laufen, aber das kennen wir doch grundsätzlich auch bei vielen anderen Entwicklungen. Man braucht sich ja nur die Entwicklung bei E-Autos oder E-Bikes anzusehen.
    Aber die Richtung stimmt – zumindest ist das meine Meinung.

  5. Mit dem damals „Gutenberg“ genannten Editor konnte ich mich auch nicht anfreunden. Für meine Kunden erstelle ich nach wie vor eigene Themes ohne irgendwelche Vorlagen und schon gar nicht irgendwelche Page Builder, um die Webseiten so performant und benutzerfreundlich wie möglich zu halten.

    Der heutige Block-Editor ist inzwischen und auch für normale Endanwender benutzerfreundlich. Meine Endanwender aktualisieren meistens nur einfach die Textinhalte.

    Der Full Site Editor (5.9) wäre dann wieder zu überfordernd für den Endanwender. Mit ein paar Zeilen in functions.php musste ich wieder das plötzlich verschwundene Navigationsmenü im Backend wiederherstellen.

  6. Danke für den Kommentar.
    In der Tat ist der Full Site Editor noch nicht ganz ausgereift. Allerdings wird der Full Site Editor nur bei Block Themes benötigt. Bei den klassischen Themes (wir nutzen z. B. sehr gerne GeneratePress) kann man die Darstellung weiterhin wie gewohnt mit dem Customizer unter Design bearbeiten.

  7. Danke dir für deine Zusammenfassung.
    Der Block Editor gewinnt mehr an Nutzerfreundlichkeit und meine Kund*innen finden den Editor mittlerweile verständlich. Außerdem finde ich es cool, dass WordPress diesen Bereich weiterhin optimiert .
    Beste Grüße

Sagen Sie uns Ihre Meinung

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert