WordPress – Teil 2 Gutenberg

So nutzen Sie den neuen Block-Editor

Jessica Lyschik
Jessica Lyschik

Jessica Lyschik ist Frontend-Entwicklerin bei der result gmbh in Köln. Als gelernte Fachinformatikerin für Anwendungsentwicklung hat sie bereits über 13 Jahre Erfahrung in der Webentwicklung gesammelt. Seit 2015 liegt der Fokus auf WordPress, das System kennt sie schon seit etwa 2006. Sie ist aktives Mitglied der WordPress-Community und teilt ihr Wissen regelmäßig auf Meetups und Konferenzen. Im November 2018 veröffentlichte sie die Gutenberg-Fibel, das deutsche „Missing Manual“ zum neuen Block-Editor von WordPress.

Mehr von diesem AutorArtikel als PDF laden

Nichts wurde in den vergangenen zwei Jahren in der WordPress-Welt kontroverser diskutiert als der neue Block-Editor, auch bekannt unter dem Entwicklungsnamen „Gutenberg”. Nicht ohne Grund: Die Überarbeitung der in die Jahre gekommenen Editor-Oberfläche verlässt alte Pfade und bricht nicht nur technisch zu neuen Ufern auf. Auch wenn die Einführung im Dezember 2018 unter viel Kritik und Ablehnung stattfand, so hat sich der Block-Editor seitdem stetig weiterentwickelt und ist zu einer echten Alternative für Page Builder geworden. Von daher lohnt es sich auf jeden Fall, einen ausführlichen Blick auf den aktuellen Stand und die Möglichkeiten zu werfen, die der Standard-Editor von WordPress mit sich bringt.

Vielen dürfte der neue Standard-Editor von WordPress als „Gutenberg” oder „Gutenberg-Editor” bekannt sein. Im Rahmen der Veröffentlichung von WordPress 5.0 wurde der offizielle Name „Block-Editor” eingeführt. Dieser ist angelehnt an den „Block” bzw. die „Blöcke”, wie die einzelnen Inhaltskomponenten bezeichnet werden. Dennoch ist der Name „Gutenberg” weiterhin in Gebrauch. Die Weiterentwicklung findet, wie von Beginn an, als Plug-in statt, das sich optional installieren lässt. Allerdings ist davon abzuraten, das Plug-in auf produktiven Seiten einzusetzen. Es handelt sich wirklich um einen Entwicklungsstand und dementsprechend können auch Probleme auftreten. Im weiteren Verlauf dieses Artikels wird die offizielle Bezeichnung „Block-Editor” verwendet.

Auch wenn Page Builder weiterhin in Sachen Funktionalität dem Block-Editor überlegen sind, kann dieser gerade für kleinere Websites eine echte Alternative sein. Die wichtigsten Features sind bereits vorhanden und können eingesetzt werden. Dabei ist ein kleines Umdenken notwendig: Aus dem bisherigen Inhaltskoloss wird ein modulares System. Jeder einzelne Absatz, jedes einzelne Bild, jedes weitere Element ist ein eigener Block. Es ist ein bisschen wie Lego: Stein für Stein wird zusammengesetzt und es entsteht ein Gesamtbauwerk. Oder im Kontext von WordPress: ein neuer Beitrag oder eine neue Seite.

Der Block-Editor (Abb. 1) sieht auch etwas aufgeräumter aus. Neu hinzugekommen ist eine Werkzeugleiste oben, in der viele nützliche Funktionen versteckt sind. Der Inhaltsbereich nimmt den größten Teil ein, rechts befindet sich eine Seitenleiste. Ist kein Block ausgewählt, erscheinen dort Informationen zum Dokument, wie sie bisher bekannt sind: Einstellungen zur Sichtbarkeit und Veröffentlichung, Kategorien, Schlagwörter, Beitragsbild, Textauszug, Diskussion und Beitrags- bzw. Seiten-Attribute. Ist ein Block aus dem Inhalt ausgewählt, erscheinen dort spezifische Einstellungen passend zum Block. Auch am unteren Rand des Inhaltsbereichs können sich Plug-ins einhaken und ihre Inhalte darstellen. Der allgemeine Aufbau zur Erstellung eines Beitrags oder einer Seite im Block-Editor ist also dem bisherigen Editor relativ ähnlich.

Wichtig zu wissen: Derzeit (Stand März 2020) kann nur der eigentliche Inhaltsbereich mit dem Block-Editor editiert werden. Kopf-, Fuß- und Seitenbereiche lassen sich noch nicht mit dem Block-Editor anpassen. Diese müssen wie bisher vom Theme bereitgestellt werden. Daher ist die Auswahl eines passendes Themes aktuell noch nötig. Dennoch wird bereits daran gearbeitet, die gesamte Website mit Blöcken gestalten zu können. Das Projekt nennt sich „Full Site Editing” und wird auch eine neue Art von Themes benötigen, die unter dem Namen „Block-Based Themes” entworfen werden. Derzeit wird an diesem System gearbeitet, dennoch ist beides weit davon entfernt, veröffentlicht zu werden. In diesem Artikel wird der aktuelle Weg, wie eine Website heute mit dem Block-Editor erstellt werden kann, aufgezeigt.

Das passende Theme für den Block-Editor finden

Die gute Nachricht vorweg: Keine Website sieht schlecht aus, nur weil die Version auf 5.0 oder höher aktualisiert wurde. Der Block-Editor bringt ein eigenes CSS-Stile für seine Blöcke mit, daher werden die Inhalte auf jeden Fall entsprechend lesbar angezeigt. Natürlich liegt es an den Theme-Autoren, das CSS an ihre Themes anzupassen, damit alles auch wie aus einem Guss aussieht. Dies wurde inzwischen von vielen Theme-Herstellern umgesetzt. Bei kostenlosen Themes kann es jedoch auch passieren, dass diese nicht mehr aktualisiert werden und somit keine Anpassungen erhalten. Bei den sog. Premium-Themes wird die Block-Editor-Kompatibilität oftmals nur nebenbei erwähnt und die Funktionalität mit Page Buildern weiter hervorgehoben. Dennoch gibt es inzwischen eine Handvoll Themes, die sich ganz auf den Block-Editor fokussieren und daher recht leichtgewichtig sind.

Mit der Version WordPress 5.3, die im November 2019 erschien, wurde ein neues Standard-Theme mit dem Namen Twenty Twenty (de.wordpress.org/themes/twentytwenty/, Demo: 2020.wordpress.net) veröffentlicht. Es schöpft das Potenzial des Block-Editors voll aus. Mit drei verschiedenen Templates lassen sich Beiträge und Seiten unterschiedlich gestalten. Die Standard-Blöcke sind ansprechend zu dem vorgegebenen Grundlayout gestaltet. Die Auswahl der Einstellungsmöglichkeiten ist recht übersichtlich, bietet aber trotzdem ausreichend Möglichkeiten zur individuellen Gestaltung. Die technische Basis für das Theme „Twenty Twenty” lieferte das Theme Chaplin (de.wordpress.org/themes/chaplin/, Demo: andersnoren.se/themes/chaplin/, Abb. 2) von Anders Norén, der auch Design Lead für das „Twenty Twenty”-Theme war. Es bietet mehr Einstellungsmöglichkeiten und Templates und lässt somit eine große Bandbreite an Individualität zu.

Noch einen Schritt weiter geht das Theme Go (de.wordpress.org/themes/go/, Informationen zu Demos: github.com/godaddy-wordpress/go/) von GoDaddy. Der bekannte Domain- und Hosting-Anbieter hat ein Team verschiedenster WordPress-Entwickler ins Unternehmen geholt. Neben fünf Design-Stilen lassen sich Kopf- und Fußbereiche in verschiedenen Varianten einstellen. Somit ist für eine Vielzahl an unterschiedlichen Designs nur ein Theme nötig.

Im Theme-Verzeichnis auf wordpress.org gibt es die Möglichkeit, sich speziell für den Block-Editor angepasste Themes anzeigen zu lassen (Abb. 3). Mit Klick auf den Button „Nach Funktionen filtern” lässt sich in der mittleren Spalte „Block-Editor-Stile” auswählen. Nach einem Klick auf „Filter anwenden” werden alle passenden Themes angezeigt (de.wordpress.org/themes/tags/block-styles/). Knapp 100 Themes sind bereits in dieser Liste vorhanden, die mit der Zeit auch größer werden wird.

Welche Features bietet der Block-Editor?

Wenn das passende Theme ausgewählt wurde, wird es Zeit, sich den Block-Editor genauer anzuschauen. Dabei liegt der Schlüssel zur effizienten Nutzung des Editors tatsächlich darin zu wissen, welche Möglichkeiten ohne zusätzliche Plug-in-Erweiterungen bereits gegeben sind. Auch wächst mit jeder Hauptversion, z. B. 5.3 oder die für März 2020 geplante Version 5.4, der Funktionsumfang durch die kontinuierliche Weiterentwicklung.

Viele Funktionalitäten sind ein klein wenig versteckt und nicht auf den ersten Blick ersichtlich. Dabei gibt es ganz praktische Helfer, wie die Inhaltliche Struktur (Abb. 4) auf der linken Seite der oberen Werkzeugleiste, versteckt hinter dem Info-Icon. Dort werden nützliche Informationen zum Beitrag angezeigt: die Anzahl der Wörter, Überschriften, Absätze und Blöcke insgesamt. Außerdem ist dort eine vollständige Übersicht zu finden, die sich aus den verwendeten Überschriften generiert. So lässt sich auf einen Blick feststellen, ob der Artikel semantisch korrekt aufgebaut ist. Direkt rechts daneben befindet sich die Block-Navigation (Abb. 5) hinter dem versetzten Listen-Icon. Diese zeigt eine Übersicht aller verwendeten Blöcke an, die direkt in diesem Menü ausgewählt werden können. Ein weiteres Feature: Bei verschachtelten Blöcken wie dem Spalten- oder Gruppen-Block werden alle innerhalb liegenden Blöcke mit entsprechender Hierarchie dargestellt.

Ganz auf der rechten Seite befindet sich ein weiteres Menü mit verschiedenen Werkzeugen und Optionen, dass sich hinter den drei übereinander stehenden Punkten versteckt (Abb. 6). Dort gibt es verschiedene Modi für das Arbeiten: obere Werkzeugleiste, Spotlight-Modus und Vollbildmodus. Auch lässt sich wie beim alten Editor zwischen dem visuellen Editor und dem Code-Editor wählen. Aber Vorsicht! Eigenständiges Arbeiten im Code-Editor ist nur mit fortgeschrittenen Kenntnissen zu empfehlen! Der Block-Editor arbeitet mit einer eigenen Syntax und bei fehlerhaften Anpassungen können die Blöcke nicht mehr im visuellen Editor bearbeitet werden.

Ein weiteres nützliches Feature ist der Block-Manager. Mit diesem kann jeder Benutzer einstellen, welche Blöcke im Inserter-Werkzeug ausgeblendet werden sollen. Das ist z. B. hilfreich beim Einbetten-Block: Die wenigsten Nutzer werden alle vorhandenen sozialen Netzwerke nutzen. Über den Block-Manager können diese deaktiviert werden. Auch Blöcke, die durch zusätzliche Plug-ins hinzugefügt wurden, lassen sich deaktivieren. So bleibt das Inserter-Werkzeug aufgeräumt.

Welche Standard-Blöcke gibt es?

Die wichtigste Zutat des Block-Editors sind natürlich die Blöcke. Standardmäßig werden 35 verschiedene Blöcke mitgeliefert. Diese teilen sich in insgesamt fünf Kategorien auf, die Werte in Klammern geben die enthaltenen Blöcke wieder:

  • Allgemeine Blöcke (10)
  • Formatierung (7)
  • Layout-Elemente (8)
  • Widgets (9)
  • Einbetten (1)

Eine Besonderheit ist dabei der Einbetten-Block, der als einzelner Block zählt, aber insgesamt 31 Varianten (soziale Netzwerke und Dienste) unterstützt. Es spielt daher keine Rolle, ob beispielsweise speziell der YouTube-Block zum Einbetten eines YouTube-Videos ausgewählt wird oder einfach nur der Einbetten-Block. In beiden Fällen wird das Video entsprechend eingebettet.

Mit dem Inserter-Werkzeug (Abb. 7) lassen sich die Blöcke zum Beitrag hinzufügen. Dieses findet sich entweder in der oberen Editor-Leiste wie in Abbildung 7, zu Beginn einer neuen Zeile auf der linken Seite oder mittig zwischen zwei Blöcken. Mit der Suchfunktion lässt sich schnell der gesuchte Block finden. Über den Kategorien befindet sich der Abschnitt „Meistgenutzt”, in dem die am häufigsten genutzten Blöcke für einen schnelleren Zugriff angezeigt werden.

Unter „Allgemeine Blöcke” befinden sich die Basis-Blöcke: Absatz, Audio, Bild, Cover, Datei, Galerie, Liste, Überschrift, Video, Zitat. Der Absatz-Block ist der einfachste aller Blöcke, damit wird der Fließtext erstellt. Mit dem Bild-Block kann ein einzelnes Bild hinzugefügt werden. Mehrere Bilder lassen sich bequem mit dem Galerie-Block darstellen. Der Cover-Block bietet die Möglichkeit, Hero-Bereiche zu erstellen: Als Hintergrund kann entweder ein Bild, ein Video oder nur eine Farbe genutzt werden. Innerhalb des Blocks können alle vorhandenen Blöcke verwendet werden. Mit dem Listen-Block kann schnell eine Liste, auch mit verschiedenen Aufzählungszeichen, erstellt werden. Durch Überschriften-Blöcke wird ein Artikel ordentlich gegliedert und ist für Leser schneller erfassbar. Auch Suchmaschinen freuen sich über richtig gesetzte Überschriften. Für etwas Abwechslung können Zitate mit dem Zitat-Block eingesetzt werden. Standardmäßig sind zwei verschiedene Zitat-Varianten vorgegeben. Die Blöcke Audio, Datei und Video sind ausschließlich für die in der WordPress-Mediathek hochgeladenen Dateien zuständig.

Hinweis

Wenn eine bestehende WordPress-Installation auf den Block-Editor umgestellt wird, werden alle vorhandenen Inhalte zuerst in einem Classic-Block dargestellt. Dieser kann beibehalten und die Inhalte wie gewohnt bearbeitet werden. Vom Classic-Block ist ebenso eine Umwandlung in Blöcke möglich.

Die Kategorie „Formatierung” enthält folgende Blöcke: Classic, Code, HTML, Pullquote, Tabelle, Vers, Vorformatiert. Hinter dem Classic-Block verbirgt sich eine einfache Variante des bisherigen Editors. Mit dem HTML-Block lassen sich kleinere HTML-Schnipsel eintragen, die im Frontend ausgegeben werden. Der Pullquote-Block ähnelt dem Zitat-Block, nimmt jedoch mehr Raum ein. Mit dem Tabellen-Block können einfache Tabellen erstellt werden, die wichtigsten Funktionen sind vorhanden. Code, Vers und Vorformatiert sind spezielle Blöcke, die je nach persönlichem Bedarf verwendet werden können.

In der Kategorie „Layout-Elemente” finden sich verschiedenste Blöcke, die das Aussehen beeinflussen können: Abstandshalter, Button, Gruppe, Medien und Text, Mehr, Seitenumbruch, Spalten, Trennzeichen. Mit dem Abstandshalter-Block kann zusätzlicher vertikaler Abstand eingefügt werden. Der Button-Block erstellt einen Link mit dem Aussehen eines Buttons. Mit dem Gruppen-Block lassen sich ein oder mehrere Blöcke zusammenfassen und beispielsweise mit einer anderen Hintergrundfarbe vom restlichen Artikel abheben. Der Medien-und-Text-Block kann auf der einen Seite ein Bild oder Video, auf der anderen Text oder weitere Blöcke enthalten. Die Blöcke Mehr und Seitenumbruch sind alte Bekannte aus dem bisherigen Editor: Der Mehr-Block hatte früher die Bezeichnung „Weiterlesen” und erzeugt auf Übersichts- und Archivseiten eine verkürzte Darstellung. Mit dem Seitenumbruch-Block lässt sich der Inhalt auf mehrere Unterseiten verteilen. Der Spalten-Block kann Inhalte in zwei bis sechs Spalten nebeneinander darstellen. Der Trennzeichen-Block fügt Trenner ein, die je nach Theme unterschiedlich dargestellt werden können.

Die letzte große Kategorie sind die Widgets, also jene Elemente, die bereits aus dem Widgets-Bereich unter Design im Admin-Menü bekannt sind: Archive, Kalender, Kategorien, Neueste Beiträge, Neueste Kommentare, RSS, Schlagwörter-Wolke und Suchen. Zusätzlich findet sich in dieser Kategorie der Shortcodes-Block, mit dem einfache Shortcodes, z. B. aus Plug-ins, im Block-Editor eingefügt werden können. Ein Shortcode ist immer von eckigen Klammern umschlossen und führt zusätzlichen Code aus, um beispielsweise ein Formular darzustellen.

Es gibt noch eine weitere Kategorie, die zu Beginn nicht sichtbar ist: Wiederverwendbare Blöcke. Diese Funktionalität konnte der alte Editor in WordPress nicht. Ein oder mehrere Blöcke können zu einem wiederverwendbaren Block generiert werden. Dieser wird einmalig angelegt und kann in beliebig vielen weiteren Beiträgen und Seiten wie die Standard-Blöcke eingefügt werden. Bei einer nachträglichen Änderung des wiederverwendbaren Blocks werden so alle genutzten Instanzen automatisch angepasst. Dies ist z. B. nützlich, um mehrfach wiederkehrende Elemente wie Kontaktinformationen oder weiterführende Ressourcen einzusetzen, ohne bei jeder Änderung zig Beiträge anpassen zu müssen.

Es gibt einige wenige Blöcke, die selbst keine weiteren Einstellungsmöglichkeiten haben. Die meisten Blöcke jedoch haben eine eigene Block-Werkzeugleiste (Abb. 8), die über dem Block erscheint, wenn dieser fokussiert ist. Diese unterscheidet sich je nach verwendetem Block und den zur Verfügung stehenden Funktionen. Weitere Einstellungsmöglichkeiten sind in der rechten Seitenleiste zu finden, die sich ebenfalls je nach gewähltem Block anpasst. Bei fast allen Blöcken lassen sich zudem eigene CSS-Klassen eintragen, die unter dem Punkt „Erweitert” in der Seitenleiste zu finden sind.

Der beste Weg, die Blöcke besser kennenzulernen, ist, diese auszuprobieren. Ein bereits vorhandener Inhalt, der im alten Editor oder einem Page Builder erstellt wurde, bietet da eine gute Ausgangsbasis. Wie kann der Inhalt mit dem neuen Block-Editor nahezu identisch reproduziert werden? Welche Blöcke müssen verwendet und welche Einstellungen dort ausgewählt werden? Wer weitere Informationen benötigt, der kann sich in der offiziellen WordPress-Dokumentation (wordpress.org/support/article/wordpress-editor/) auf Englisch oder beispielsweise der Gutenberg-Fibel (gutenberg-fibel.de) auf Deutsch näher informieren.

Mit zusätzlichen Plug-ins den Block-Editor verbessern

Auch wenn der Block-Editor bereits viel von Haus aus mitbringt, es wird immer Anforderungen geben, die (noch) nicht abgedeckt werden können. Inzwischen hat sich bereits ein kleines Ökosystem mit zusätzlichen Plug-ins für den Block-Editor gebildet. Das Plug-in-Verzeichnis auf wordpress.org hat bereits einen eigenen Bereich, in dem speziell die Plug-ins gelistet werden, die neue Blöcke oder die eigene Plug-in-Funktionalität in Blöcken mitbringen (wordpress.org/plugins/browse/blocks/). Grob kann zwischen drei verschiedenen Varianten bei diesen Plug-ins unterschieden werden:

  • Plug-ins, die über den Editor hinaus Funktionalität bereitstellen und diese in einem eigenen Block verfügbar machen, wie z. B. Yoast SEO, WooCommerce oder Ninja Forms
  • Plug-ins, die einen einzelnen oder eine Bibliothek von eigens entwickelten Blöcken bereitstellen, wie z. B. CoBlocks, Kadence Blocks oder LuckyWP Table of Contents
  • Plug-ins, die keine eigenen Blöcke, aber erweiternde Funktionalität für den Block-Editor bereitstellen, z. B. EditorsKit oder TinyMCE Advanced

Hier gelten die gleichen Regeln wie bei den normalen Plug-ins auch: Es sollte nur das installiert werden, was tatsächlich gebraucht wird. Außerdem unterscheiden sich die Anforderungen für jede Website.

Ein Plug-in ist besonders hervorzuheben: EditorsKit (wordpress.org/plugins/block-options/). Es bietet eine Vielzahl nützlicher Funktionen an, die der Block-Editor bisher nicht beherrscht, was oft als Nachteil gegenüber Page Buildern dargestellt wird. Beispielsweise das Ändern der Textfarbe einzelner Wörter (Abb. 9), verschiedenste Textformatierungen oder das Setzen von Link-Relationen wie noopener oder noreferrer. Ebenso besteht die Möglichkeit, für jeden Block die Sichtbarkeit auf unterschiedlichen Gerätegrößen (Mobil, Tablet, Desktop) festzulegen (Abb. 9). Auch nach Log-in-Status können Blöcke angezeigt oder versteckt werden. Für viele Blöcke gibt es sinnvolle Funktionserweiterungen. Ebenso kann die Sichtbarkeit des Beitrags-Titels im Frontend nicht angezeigt werden, was z. B. für die Gestaltung einer Landingpage sinnvoll sein kann.

Fazit und wo geht die Reise hin?

Wer vor der Entscheidung steht, eine neue Website mit WordPress zu erstellen, oder einen kompletten Relaunch der eigenen Website plant, der sollte in jedem Fall einen Blick auf die Möglichkeiten des Block-Editors werfen. Viele Websites brauchen gar nicht den Overhead eines Page Builders mit Hunderten Funktionen, oft werden nur wenige davon wirklich genutzt. Durch den schlanken Aufbau als Core-Feature ist auch die Performance einer mit dem Block-Editor gestalteten Website um einiges besser als mit einem Page Builder. Ebenso tragen viele weitere Details dazu bei, dass auch unter dem Aspekt SEO der Block-Editor besser abschneidet als ein Page Builder: Auch ohne Theme-Anpassungen sind die Inhalte für Mobilgeräte optimiert, die inhaltliche Struktur kann schnell erfasst und angepasst werden und viele relevante SEO-Stellschrauben sind unkompliziert zu erreichen.

Und wo geht nun die Reise hin? Die Weiterentwicklung im Kleinen und Großen geht kontinuierlich voran, zwischen Redaktionsschluss und Veröffentlichung dieses Artikels wird vermutlich die nächste WordPress-Version 5.4 erschienen sein. Wie bereits am Anfang des Artikels erwähnt, wird am „Full Site Editing” gearbeitet. Das wird aber noch etwas länger dauern, bis eine stabile Version verfügbar ist – dies war beim Block-Editor selbst nicht anders. Dennoch ist ein besonderes Feature für den Spätsommer in Planung: das „Block Directory”. Ähnlich wie für Themes und Plug-ins soll es eine zentrale Stelle geben, über die Blöcke verwaltet werden können. Statt in Plug-ins sollen die Blöcke in Zukunft einzeln installierbar sein, mit eigener Verwaltungsoberfläche.