Eigene Blocks für Gutenberg-Editor entwickeln

Wenn du schon immer mal davon geträumt hast, deinen eigenen WordPress-Block zu entwickeln, dann bist du hier genau richtig. Denn in diesem Beitrag zeigen wir dir, wie du mit dem offiziellen WordPress-Tool namens Create Block deinen eigenen Block als Plugin entwickeln kannst – ohne dabei in die Tasten zu beissen oder dir die Haare auszuraufen. Also schnapp dir eine Tasse Kaffee, lehn dich zurück und lass uns loslegen!

Um für den Gutenberg-Editor entwickeln zu können, muss eine Entwicklungsumgebung vorhanden sein, welche den Entwicklungscode in den Produktionscode transferieren kann. Wie man dies tut, haben wir hier beschrieben.

Ist die Entwicklungsumgebung erst mal eingerichtet, kann es mit der Erstellung eines eigenen Blocks losgehen. Damit man nicht selber webpack, Babel oder ESLint installieren und konfigurieren muss, gibt es verschiedene Tools, die einem diese Arbeit abnehmen, beispielsweise Create Block, das offizielle Tool der WordPress-Community.

1 Verzeichnisse erstellen

Um Create Block zu verwenden, navigiert man zuerst in das Verzeichnis wp-content, erstellt dort das Verzeichnis plugins und navigiert in dieses.

// in das Verzeichnis wp-content navigieren
cd wp-content 

// Verzeichnis plugins erstellen
mkdir plugins 

// in das Verzeichnis navigieren
cd plugins 

2 Entwickler-Code erstellen

Hier kann nun mit npx @wordpress/create-block ein Block erstellt werden:

npx @wordpress/create-block ((hier gewünschten Namen eingeben))

Das Tool erstellt nun ein Verzeichnis mit dem gewählten Namen und lädt nun alle benötigten Node-Modules usw. in dieses.

2.1 Entwickler-Modus starten

Um mit dem Entwickeln zu beginnen, muss nur noch in das soeben erstellte Verzeichnis navigiert werden, und mit npm start der Entwicklermodus angestossen werden:

// in das Verzeichnis des soeben erstellten Plugins navigieren
cd ((hier den oben definierten Namen eingeben))

// startet den Entwicklermodus
npm start

// stoppt den Entwicklermodus
[ctrl] c

Nun wird dein Code kompiliert und im Entwicklungsmodus ausgeführt, was bedeutet, dass alle Änderungen in Echtzeit überwacht werden und etwaige Fehler sofort gemeldet werden.

Nun kann die eigentliche Entwicklungsarbeit geleistet werden.

3 Produktions-Code erstellen

Ist man fertig muss nun der Produktions-Code erzeugt werden. Dies geschieht mit dem Befehl npm run build. Dieser erzeugt ein Verzeichnis build, welcher dein Produktions-Code enthält.

// Produktions-Code erzeugen
npm run build

Wird das Plugin veröffentlicht, braucht es den Entwickler-Code nicht. Mit dem praktischen Behfehl run plugin-zip kann eine ZIP-Datei generiert werden, welche alle benötigten Dateien beinhaltet.

// evtl. müssen zuerst die WordPress-Scripts installiert werden
npm install @wordpress/scripts --save-dev

In der package.json-Datei muss der Befehl und das dazugehörige Script definiert werden:

{
  "name": "custom-block-ulrich-digital-cgb-guten-block",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "cgb-scripts start",
    "build": "cgb-scripts build",
    "eject": "cgb-scripts eject",
    "plugin-zip": "wp-scripts plugin-zip"
  },
  "dependencies": {
    "@wordpress/icons": "^9.7.0",
    "cgb-scripts": "1.23.1",
    "classnames": "^2.3.1"
  },
  "devDependencies": {
    "@wordpress/scripts": "^24.0.0"
  }
}

Nun kann der Befehl aufgerufen werden:

// ZIP-File mit allen nötigen Dateien erstellen
npm run plugin-zip

4 Alternative Tools

Eine Alternative zum offiziellen Tool von WordPress ist zum Beispiel das bekannte create-guten-block von Ahmad Awais. Auch dieses Tool lädt die ganzen Preprozessoren wie Babel, Sass usw. Nach dem build-Prozess werden lediglich die Datei plugin.php, das Verzeichnis (mit Inhalt) dist, und die Datei src/init.php benötigt.

1 Star2 Stars3 Stars4 Stars5 Stars (0)

Deine Meinung ist uns wichtig! Auch wenn du denkst, dass unser Beitrag so spannend wie eine Präsentation über die Vorteile von Kalkulationstabellen ist, teile es uns mit!

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