Diese kurze Anleitung wird dir dabei helfen, die optimale Entwicklungsumgebung einzurichten, um Blöcke und andere Plugins für WordPress zu erstellen, die den Block-Editor erweitern und anpassen.
Eine Block-Entwicklungsumgebung umfasst die Tools, die du auf deinem Rechner benötigst, um erfolgreich für den Block-Editor zu entwickeln. Die drei wesentlichen Anforderungen sind:
- Code-Editor
- Entwicklungstools für Node.js
- Lokale WordPress-Umgebung
Machen wir uns an das Herunterladen der benötigten Komponenten, letztlich soll die Entwicklungsumgebung bei mir unter Windows ausgeführt werden.
- Code-Editor, ich arbeite mit Visual Studio Code
- Node.js (node) ist eine Open-Source Laufzeitumgebung, die es dir ermöglicht, JavaScript ausserhalb des Webbrowsers auszuführen.
- Docker (zum virtualisieren von Anwendungen in platzsparenden Software-Containern)
- Dann wird noch Git für die simple-git Module benötigt

Das wp-env-Werkzeug wird verwendet, um eine lokale WordPress-Umgebung mit Docker zu erstellen. Das ist nur ein Weg um eine WordPress Entwicklungsumgebung zu erstellen, eine Alternative per Homebrew und nginx ist unserem Blogbeitrag Entwickeln mit Docker beschrieben.
Was ist wp-env?
wp-env ist ein Befehlszeilenwerkzeug für die Entwicklung von WordPress-Plugins und -Themes. Es ermöglicht Entwicklern, schnell und einfach lokale Entwicklungsumgebungen für ihre WordPress-Projekte einzurichten. Mit wp-env können Entwickler eine isolierte WordPress-Instanz auf ihrem lokalen Rechner starten, die speziell für die Entwicklung eines Plugins oder Themes konfiguriert ist. Dadurch können sie Änderungen am Code testen, ohne ihre Live-Website zu beeinträchtigen. Ausserdem bietet wp-env die Möglichkeit, Plugins und Themes automatisch zu aktivieren und einzubinden, wenn sie sich in einem bestimmten Verzeichnis befinden, was den Entwicklungsprozess weiter vereinfacht.
Nachdem du die Komponenten installiert und Docker Desktop eingerichtet hast, öffne das Terminal (VS Code: Anzeigen -> Terminal) und installiere wp-env, indem du folgenden Befehl ausführst:
npm -g install @wordpress/env

Wenn du stattdessen die unten stehende Fehlermeldung bekommen solltest, dann fehlen dir die entsprechenden Rechte um das Script auszuführen.

Über die PowerShell lässt sich «als Administrator» wie folgt die Execution Policy ändern:
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
Nach erfolgreicher Installation, wurde wp-env global installiert, was bedeutet, dass das Werkzeug von jedem Verzeichnis aus ausgeführt werden kann. Um zu prüfen, ob wp-env verfügbar ist, kannst du:
wp-env --version
ausführen, und bei Erfolg sollte die Versionsnummer (z.B. 9.6.0) erscheinen. Damit ist die Einrichtung der Entwicklungsumgebung abgeschlossen und wir könnten mit dem Entwickeln beginnen. Doch davor testen wir, ob die Testumgebung auch problemlos läuft.
Mit wp-env kannst du praktisch überall arbeiten. Wenn du an der Entwicklung eines einzelnen Plugins arbeitest, kann wp-env start
automatisch das Plugin einbinden und aktivieren, wenn du es aus dem entsprechenden Verzeichnis herausführst. Das gleiche gilt für Themes – wenn du an einem Theme arbeitest und wp-env start
aus dem entsprechenden Verzeichnis herausführst, wird das Theme automatisch eingebunden und aktiviert.
Wenn du wp-env start
jedoch aus einem Verzeichnis herausführst, das weder ein Plugin noch ein Theme enthält, wird eine allgemeine WordPress-Umgebung erstellt. Das bedeutet, dass du ohne spezifisches Plugin- oder Theme-Entwicklungsverzeichnis eine grundlegende WordPress-Instanz einrichten kannst.
Ich navigiere im Terminal zu meinem vorhandenen Plugin-Verzeichnis und führe:
wp-env start
aus. Sobald das Skript läuft, kannst du auf die lokale Umgebung unter folgender Adresse zugreifen: http://localhost:8888.

Ins WordPress-Dashboard meldest du dich mit dem Benutzernamen «admin» und dem Passwort «password» an.