Die Entwicklung für den Gutenberg-Editor unterscheidet sich grundsätzlich von der herkömmlichen Entwicklung für WordPress, denn dieser setzt auf moderne Technologien wie JavaScript, Node.js, React und REST API. Also braucht es eine Entwicklungs-Umgebung, welche mit all diesen Javascript-Erweiterungen umgehen kann, und diese gegebenenfalls in die Sprachversion ES5 transformieren kann, denn die meisten Browser verstehen nur diese. Mit Docker kann man dies tun, hier beschreibe ich mein Setting.
Wie eine Entwicklungsumgebung für WordPress per wp-env unter Windows aufgesetzt werden kann, ist in unserem Blogbeitrag Lokale WordPress-Umgebung mit wp-env beschrieben.
1 Docker einrichten
1.1 Docker herunterladen
Docker-Desktop ist eine Open Source-Software, welche Linux-Container erstellen und ausführen kann. Die Software kann hier heruntergeladen werden.
1.2. Container erstellen
Um einen ersten – oder neuen – Container zu anzulegen, erstellst du zuerst ein Verzeichnis. Wo du dieses erstellst und wie dieses heisst, ist Docker egal. Nennen wir es mal my_wordpress
.
mkdir my_wordpress
Damit Docker weiss, was zu tun ist – z. B. eine WordPress-Instanz zu erstellen, benötigt es eine Datei mit dem Namen docker-compose.yml
, die bequem gerade aus dem Terminal erstellt werden kann:
cd my_wordpress
touch docker-compose.yml
In dieser Datei wird die Konfiguration der WordPress-Instanz festgelegt, aber auch, welche Verzeichnisse als Volumes vorhanden sein sollen. Im Folgenden der Inhalt unserer docker-compose.yml
Datei:
version: '3'
services:
db:
image: mysql:5.7
volumes:
- db_data:/var/lib/mysql
restart: always
environment:
MYSQL_ROOT_PASSWORD: somewordpress
MYSQL_DATABASE: wordpress
MYSQL_USER: wordpress
MYSQL_PASSWORD: wordpress
wordpress:
depends_on:
- db
image: wordpress:5.7-php7.3-apache
ports:
- "8000:80"
restart: always
environment:
WORDPRESS_DB_HOST: db:3306
WORDPRESS_DB_USER: wordpress
WORDPRESS_DB_PASSWORD: wordpress
working_dir: /var/www/html
volumes:
- ./wp-content:/var/www/html/wp-content
- ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini
volumes:
db_data:
Unser aktuelles docker-compose.yml File findest du hier.
In Docker ist es möglich anzugeben, welche Dateien quasi versteckt im Container angelegt werden und welche offen im Dateisytem. Dies beschreibt man im docker-compose.yml
File unter volumes
1.3 Container starten und beenden
Nun kann der Docker-Container gestartet werden. Dies geschieht mit dem folgendem Befehl:
// Docker starten
docker-compose up -d
// Docker beenden
docker-compose down
Im Verzeichnis my_wordpress
sind nun zwei Neulinge dazugekommen:
- uploads.ini
- wp-content
Was es mit der uploads.ini Datei auf sich hat, erkläre ich vielleicht ein andermal. Docker ist nun soweit eingerichtet, dass man mir der Entwicklung beginnen kann.
2. Homebrew, Node.js und nginx
Damit die WordPress-Instanz im Browser aufgerufen werden kann, muss ein Webserver installiert sein. Dafür kann nginx
zum Einsatz kommen. nginx installiert man bequemerweise mit Homebrew:
// Homebrew installieren, falls noch nicht vorhanden
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
// Homebrew wenn nötig aktualisieren
$ brew update
// Mit Homebrew nginx installieren
$ brew install nginx
Nun ist nginx verfügbar und die WordPress-Instanz ist unter http://localhost:8000
abrufbar.
Bevor Du loslegen kannst, solltest Du dich vergewissern, dass du Node.js
und npx
(den Node Package Manager) installiert hast. Hier gehts zum Download.
Wie die eigentliche Entwicklung eines Blocks gemacht werden kann, haben wir hier beschrieben.