Gutenberg-Block erstellen ohne React-Kenntnisse? Ja, aber …

Veröffentlicht: 7. April 2021 von Matze – Kommentar hinterlassen Letzte Aktualisierung: 16. Februar 2025

Bereits während der Entwicklung von Gutenberg und auch danach hörte ich sehr oft, dass man selbst ebenso Blöcke erstellen kann, ohne React zu können. Eine spannende Aussage, wie ich schon damals fand. Auch, weil ich mich zu dieser Zeit damit beschäftigen musste, einige umfangreiche Blöcke selbst zu erstellen. Jetzt, einige Zeit später, möchte ich diese Aussage einmal evaluieren.

Am Anfang

Direkt zu Beginn war es für mich, ohne jegliche React-Kenntnisse, sehr schwierig, überhaupt ein Projekt aufzusetzen, mit dem ich erfolgreich eine Struktur bekam, mit der man wirklich arbeiten konnte. Denn auch wenn man theoretisch mit reinem JavaScript auf Basis von ES5 auskommt – was man vorher kennen muss – so sind viele Tutorials und Anleitungen (die zu diesem Zeitpunkt nur spärlich vorhanden waren) auf die Verwendung von JSX ausgelegt, einer Erweiterung von JavaScript, die die Ausgabe von HTML erleichtert, indem sie die Verwendung von HTML-Tags zulässt (erfahre hier mehr (engl.)).

Zumindest mit JSX sollte man sich also vorher auseinandersetzen, wenn man wirklich wissen möchte, was man da tut. Und es ist auch erforderlich, wenn man nur wenige oder keinerlei JavaScript-Kenntnisse besitzt.

Da JSX jedoch zu JavaScript kompiliert werden muss und das Styling via SCSS stattfindet, was wiederum zu CSS kompiliert werden muss, benötigt man entsprechende Skripte, um dies während der Entwicklung und vor der Veröffentlichung/Nutzung eines Blocks auch tun zu können, der sogenannte „Build“ des Projekts.

Zu diesem Zeitpunkt wollte ich mich nicht damit auseinandersetzen, also wich ich auf das fertige Paket Create Guten Block aus. Das bringt bereits alles erforderliche mit und man kann direkt loslegen.

Bis hierhin benötigt man wirklich noch keine React-Kenntnisse. Das war rund ein Jahr vor WordPress 5.0 und damit vor der ersten Veröffentlichung von Gutenberg innerhalb des WordPress-Projekts.

Glücklicherweise gab es zu diesem Zeitpunkt bereits einige Tutorials, wie man eigene Blöcke anlegt und eine Ausgabe sowohl im Editor als auch im Frontend hinbekommt. Diese Tutorials waren aber trickreich, da sie einen unterschiedlichen Stand der Gutenberg-Entwicklung widerspiegelten und daher immer wieder Teile daraus nicht (mehr) funktionierten, weil sie veraltet waren.

Na also, geht doch …

Wer hier genau aufgepasst hat, wird bereits die initiale Antwort auf die Frage im Titel gefunden haben: Ja, man kann einen Block erstellen, ohne React-Kenntnisse zu besitzen. Zumindest, wenn es um reinen Text geht, der nicht veränderbar ist. Selbst, wenn man ihn veränderbar haben will, also ein Eingabefeld im Editor, das im Frontend ausgegeben wird, kam man mit Tutorials und ohne React-Kenntnisse weiter. Damit war es demnach auch möglich, dynamische Blöcke zu erstellen, die individuellen Inhalt zuließen.

Und das Aber?

Das große Aber ist, dass die Aussage, man könne Blöcke auch ohne React-Kenntnisse erstellen, ziemlich kurzsichtig ist. Gerade zu eine Marketing-Aussage, die mehr Akzeptanz und Willen schafft, sich mit Gutenberg auseinanderzusetzen. Das war zu dieser Zeit wichtiger denn je.

Kurzsichtig deshalb, weil man ohne React-Kenntnisse eben nicht viel mehr machen konnte als das: Im Editor individuellen Text angeben, vielleicht noch ein paar Einstellungen über die Sidebar erledigen – wobei wir da schon an die Grenze kommen – und dann einfache (Text-)Inhalte im Frontend ausgeben. Das reicht für viele Blöcke, die es heute gibt, bei weitem nicht aus.

Ich war beispielsweise sehr früh damit konfrontiert, einen Kontaktformular-Block und einen Google-Maps-Block zu erstellen. Auch wenn das grundlegend einfach klingen mag, so war es am Ende doch sowohl schwierig als auch aufwendig. Dabei bezeichne ich mich weder als Profi in JavaScript noch hatte ich vorher irgendeine Berührung mit React.

Beim Kontaktformular-Block war es beispielsweise erforderlich (er war aufgebaut in dem Formular-Block selbst und zusätzliche Blöcke für Eingabefelder, Auswahl-Listen und mehrzeilige Textfelder), dass auf Basis der Eingabefelder weitere Verarbeitungen innerhalb des Formular-Block selbst stattfanden. Im Nachhinein hätte ich das anders gelöst, aber so war damals mein Stand. Dies ohne React-Kenntnisse umzusetzen, war praktisch unmöglich, ein Crashkurs zeitlich nicht möglich. Also blieb nur probieren und einlesen, wie genau so etwas zu bewerkstelligen sei. Also ein Punkt, an dem ich mir React-Kenntnisse aneignen musste, um diese Funktionalität bereitstellen zu können.

Ähnlich war es beim Google-Maps-Block. Hier musste ich zwei verschiedene APIs von Google Maps einbinden. Der Wechsel musste dabei auf Basis bestimmter eingegebener Daten durchgeführt werden, die als Adressdaten in einem untergeordneten Block standen. Ohne Kenntnisse in React war es mir nicht möglich, im Google-Maps-Block zu erkennen, wann diese Adressdaten-Blöcke verändert wurden.

Stand heute

Während die grundlegende Problematik nach wie vor vorhanden ist, dass für umfangreich dynamische Blöcke React-Kenntnisse an einem gewissen Punkt erforderlich sind, hat sich zumindest das Thema rund um den Build des Blocks, um JavaScript und SCSS zu kompilieren, hat sich verbessert. Für die Blöcke, die wir seit einiger Zeit mit Impressum Plus ausliefern, war das sehr hilfreich. Dafür gibt es mittlerweile ein einzelnes Paket @wordpress/scripts, das diese Aufgabe übernimmt. Ebenfalls gibt es mittlerweile dafür ein sauberes Handbuch in den WordPress Developer Resources.

Generell ist die Dokumentation aber bis heute der Teil, den ich am schmerzlichsten in einer sauberen Form vermisse. Vielleicht bin ich von den bisherigen Dokumentationen rund um das WordPress-Projekt verwöhnt, aber bei vielem fehlt es bei Gutenberg nach wie vor und man muss viel ausprobieren, im Git-Repository oder bei Google suchen, um auf eine Lösung zu kommen.

Fazit

Ja, man kann Gutenberg-Blöcke ohne React-Kenntnisse erstellen, aber eben nur bis zu einem gewissen Punkt, bis zu einer gewissen Komplexität und Funktionalität. Alles, was darüber hinaus geht, kann man praktisch nur mit React-Kenntnissen umsetzen. Meistens lohnt sich aber nur dann auch eine Entwicklung eines Blocks, denn andernfalls gibt es vieles bereits oder es gibt keinen Anwendungsfall für den x-ten Block, der einfach nur Text ausgeben kann.

Daher finde ich diese Aussage, man könne einen Gutenberg-Block ohne React-Kenntnisse erstellen, schwierig. Auch wenn sie nüchtern betrachtet wahr ist.