Block-Editor-Konfiguration mit der theme.json

Bisher ist es teilweise (sehr) frustrierend, einzelne Block-Optionen im Editor zu konfigurieren oder zu deaktivieren. Wollten wir etwa, dass für unterschiedliche Blöcke unterschiedliche Farbpaletten zur Verfügung stehen, müssten wir aktuell einige Umwege in Kauf nehmen. Und um zum Beispiel die Ausgabe der Initialbuchstabe-Option beim Absatz-Block zu deaktivieren, hilft nur das Ausblenden mit CSS, das auch nicht so einfach ist, weil die meisten Optionen nur sehr generische Klassen haben (zum Beispiel die Initiale-Option …).

Doch am Horizont erscheint, als Retterin in der Not: die theme.json (beziehungsweise aktuell noch experimental-theme.json).

Code in Gutenberg nach dem Speichern/Aktualisieren ausführen

Das Plugin Save Post. Check Links. prüft nach Speichern eines Inhalts, ob die enthaltenen Links gültig sind. Dafür wird in Gutenberg ein AJAX-Request abgeschickt und mit der Antwort eine gegebenenfalls notwendige Fehlermeldung ausgegeben.

Doch wie führen wir in Gutenberg am besten eine Aktion aus, nachdem ein Inhalt gespeichert wurde? Das ist eigentlich recht einfach.

Entwicklungsumgebung für Gutenberg-Blöcke einrichten

Ein Gutenberg-Block kann komplett ohne zusätzliche Tools mit klassischem JavaScript erstellt werden. Einfacher und übersichtlicher (zumindest nach meinem Empfinden) wird es aber durch den Einsatz von Dingen wie JSX, damit HTML-Elemente innerhalb von JavaScript fast wie normale HTML-Elemente erstellt werden können.

Weniger einfach ist an dem Teil die Einrichtung der Entwicklungsumgebung, um etwa JSX nutzen zu können. Inzwischen ist das aber deutlich leichter geworden, so gibt es ein NPM-Package, das eigentlich alles mitbringt, was für die Gutenberg-Entwicklung notwendig ist 🎉

Ein Block für Pattern-Poweruser

Eigentlich wollte ich einen Artikel darüber schreiben, wie einzelne Patterns in einem Block zur Auswahl dargestellt werden könnten, wie die Layout-Optionen im Spalten-Block.

Letztlich wurde es jetzt aber erst mal ein Block, der alle Block-Vorlagen zur Auswahl anbietet und gleichzeitig für jede Block-Vorlage eine Variation beinhaltet, sodass Patterns auch direkt über den Block-Inserter eingefügt werden können. So können sich Benutzerinnen und Benutzer, die häufig Patterns verwenden und nicht mehr die visuelle Vorschau des Pattern-Inserters benötigen, einige Zeit beim Einfügen der Patterns sparen. 🎉

Version 2 der Gutenberg-Block-API

WordPress 5.6 kommt mit einer neuen Block-API-Version, die es Blöcken ermöglicht, ihr eigenes Block-Wrapper-Element zu rendern. Dadurch wird es möglich, das Block-Markup im Editor dem im Frontend ähnlicher zu machen, wodurch das Styling der Editor-Ansicht vereinfacht wird.

Die neue API-Version freischalten

Die API ist nicht standardmäßig aktiv, sondern muss pro Block aktiviert werden. Dazu wird in dem Konfigurations-Objekt in registerBlockType der Wert für apiVersion auf 2 gesetzt:

WordPress 5.6: Neues für den Block-Editor

WordPress 5.6 wird am kommenden Dienstag gegen Abend deutscher Zeit veröffentlicht werden. Neben einem neuen Standard-Theme und Application Passwords gibt es, wie in den vergangenen Versionen, auch wieder neue Funktionen und Verbesserungen für den Block-Editor Gutenberg zu vermelden.

Verbesserungen für Block-Patterns

Die mit WordPress 5.5 im Sommer eingeführten Block-Patterns sind eine praktische Hilfestellung für die Erstellung aufwändigerer Seiten-Designs. Entwicklerinnen und Entwickler können eigene Patterns anlegen, aber auch der WordPress-Core selbst kommt mit einer kleinen Auswahl vorgefertigter Patterns.

Block-Patterns erstellen

Seit WordPress 5.5 können sogenannte Block-Patterns erstellt werden. Das sind Vorlagen von Inhaltselementen aus mehreren Blöcken (oder auch nur einem), die in einem Plugin oder Theme registriert und dann von der Benutzerin oder dem Benutzer über den Inserter eingefügt werden können.

So muss im Editor nicht mühsam zum Beispiel ein Hero-Element immer neu aus denselben Blöcken zusammengebaut oder von einer anderen Seite kopiert werden, sondern es kann ein Hero-Block-Pattern erstellt und dann genutzt werden.