Eigenen WordPress Block entwickeln – Teil 1: Einstieg in die Programmierung mit Gutenberg

Veröffentlicht am von / Lesezeit: 4 Minuten

In dieser Artikelserie zeige ich, wie du von Grund auf deinen eigenen WordPress Block entwickeln kannst. Im ersten Teil geht es um den Aufbau und Architektur eines Gutenberg Block Plugins und die Vorstellung aller benötigter Tools für die Entwicklung in modernem JavaScript.

Image Card Block

Das Ziel der kompletten Reihe ist die Entwicklung eines Image Card Blocks für den neuen WordPress Gutenberg Editor. Es soll möglich sein, Bild, Titel und Text zu bestimmen und mit einigen Optionen das Layout, die Farben und das Design des Blocks anzupassen.

Image Card WordPress Block

Zum Einstieg definieren wir erst einmal einige theoretische Grundlagen:

  • Woraus besteht ein Block Plugin?
  • Was ist React und JSX?
  • Warum brauche ich Tools?
  • Wozu ist Webpack, Babel und Sass da?

Aufbau eines Gutenberg Blocks

Als Erstes möchte ich einen Blick auf die Architektur eines Gutenberg Blocks werfen.

Für einen WordPress Block wird grundsätzlich nur eine JavaScript-Datei im Editor eingebunden. Die Einbindung der Block JS erfolgt wie in WordPress üblich mit wp_enqueue_script() und sollte in einem WordPress Plugin (nicht Theme) erfolgen.

Ein sehr einfaches WordPress Block Plugin könnte aus nur vier Dateien bestehen:

  • Block JavaScript – block.js

    Hier wird der Block mit der Funktion registerBlockType() erstellt und programmiert. Vom Block-Interface im Editor, HTML-Markup im Frontend bis hin zu den Block-Optionen findet alles hier in JavaScript und React statt. In den restlichen Tutorials dieser Artikelreihe werden wir uns ausführlich diesem Teil der Block Entwicklung widmen.

  • Block Stylesheet – block.css

    Das Styling des Blocks wird mit einer eigenen CSS-Datei sowohl im Editor als auch im Frontend (Theme) eingebunden.

  • Editor Stylesheet – block-editor.css

    Im Gegensatz zur block.css wird dieses Stylesheet nur im Editor geladen. Es beinhaltet extra Styling für Block-Optionen und das Block-Interface, welches im Frontend nicht benötigt wird.

  • Plugin File – plugin.php

    Die Main Plugin File mit dem normalen WordPress Plugin Header. Hier werden unsere Block JavaScript und Block Stylesheets mit den neuen Action Hooks enqueue_block_assets und enqueue_block_editor_assets im Theme und Editor eingebunden.

Diese grundlegende Block-Architektur funktioniert auch für die derzeit sehr populären Block Collections. Statt einem Block werden einfach mehrere Blocks in der JavaScript-Datei registriert.

React and JSX

Wer Gutenberg hört, denkt als Entwickler unweigerlich an React.

React ist eine JavaScript Library von Facebook zum Erstellen von User Interfaces. Der Gutenberg Editor ist komplett in React geschrieben, wie auch alle Core Blocks. Theoretisch kannst du eigene Blöcke auch ohne React realisieren, Stand heute nutzt aber nahezu jeder das Framework.

React setzt auf Komponenten, welche ineinander verschachtelt werden. Eine Komponente ist eine Funktion oder Klasse, welche ein React Element zurückgibt und rendert.

class Welcome extends React.Component {
	render() {
		return <h1>Hello, {this.props.name}</h1>;
	}
}

Der Return-Value der render-Funktion sieht erst einmal komisch aus und ist weder ein String noch HTML, sondern JSX. Es ist die bevorzugte Form zu Erstellung eines React Elements.

JSX ist eine Syntax-Erweiterung für JavaScript und für die Entwicklung mit React empfohlen. Es bringt JavaScript und HTML zusammen und erlaubt uns prinzipiell, HTML-Tags, JavaScript-Code und React Komponenten zu mixen, ähnlich einer Template-Sprache.

Modern JavaScript Tooling

Die Entwicklung von WordPress Themes und Plugins ist mit geringen Hürden verbunden und sehr leicht möglich, weil nicht mehr als ein Texteditor und eine lokale Entwicklungsumgebung dafür notwendig ist. Selbst WordPress Einsteiger können so relativ einfach den Code anpassen.

Auch für WordPress Blocks braucht es in Theorie nicht mehr als das. Das Gutenberg Handbook zeigt Code-Beispiele in ES5, welche komplett ohne Tooling auskommen. Richtig sinnvoll ist die Entwicklung für Gutenberg meiner Meinung nach aber nur in ESNext und mit JSX, wofür eine Reihe von Tools benötigt werden:

  • Webpack

    Es wäre sehr mühsam, einen kompletten Block oder gar mehrere Blocks in einer JavaScript-Datei zu erstellen. Webpack ist ein sogenannter Bundler und dient dazu, mehrere JS-Files wieder zu einer Datei zusammenzuführen. Wir können damit unseren JavaScript-Code in beliebig viele Dateien aufteilen und als Module importieren und exportieren.

  • Babel

    Unter modernem JavaScript versteht man meistens den Einsatz der neuesten ES6-Features. ES6 ist der neueste Standard für JavaScript mit vielen großartigen Features, funktioniert aber nicht in älteren Browsern. Hier kommt Babel ins Spiel. Das Tool kompiliert deinen modernen ES6- und JSX-Code und verwandelt ihn in kompatibles JavaScript für alle Browser.

  • Sass

    Sass ist CSS mit Superkräften und erleichtert dir das Schreiben von Stylesheets mit nützlichen Features wie Variablen, Verschachtelung und Mixins.

Webpack ist der Kern des Build-Prozesses, d.h. neben dem Bündeln von Dateien werden mit sogenannten Webpack Loaders – unter anderem für Babel und Sass – der Code transformiert. Man kann es sich wie einen Trichter vorstellen. Oben kippt man jede Menge an Source-Dateien und Code (ES6, JSX, SCSS) rein, unten kommen unsere block.js und block.css heraus.

WordPress Block entwickeln: Ausblick auf Teil 2

Puh, ich hoffe die Vielzahl an Begriffen und Buzzwords haben dich nicht sofort abgeschreckt.

Im nächsten Tutorial lassen wir die Theorie hinter uns und erstellen unser eigenes Block Plugin. Die Struktur des Plugins und die Funktionsweise des Toolings sollte etwas verständlicher und klarer werden, sobald wir mit dem Praxisteil beginnen. Auch React und JSX ist kein Hexenwerk, wie wir mit den ersten Code-Beispielen sehen werden.

Überblick über alle Beiträge dieser Serie