• Plugins allgemein
• Gutenberg Block Starter Plugin

Plugins allgemein

Ein Plugin ist eine Erweiterung für eine WordPress Seite, die neue Funktionen zu Verfügung stellt.

• Ein Plugin kann aus einer PHP Datei bestehen, die einen passenden DocBlock hat. Das ist eine spezielle Kopfzeile in der Plugin PHP Datei, die WordPress mitteilt, dass diese Datei ein Plugin ist.

Um ein neues Plugin zu erstellen, geht man in den Plugins Ordner einer WordPress Installation und erstellt einen neuen Ordner mit dem Namen des neuen Plugins.

In diese neue Datei müssen wir den oben erwähnten DocBlock schreiben, damit WordPress diese Datei als Plugin erkennt:

Jetzt kann man das Plugin schon im Adminbereich der WordPressinstallatin sehen:

Es wird empfohlen, die Entwicklung von Plugins und Themes in einer speziellen lokalen WordPress Entwicklerumgebung vorzunehmen. In folgendem Artikel wird die Einrichtung genauer beschrieben: WordPress Entwicklungsumgebung einrichten

Gutenberg Block Starter Plugin

Ich habe ein einfaches Gutenberg Block Starter Plugin erstellt, das über Github herunterladen werden kann:

git clone https://github.com/Sulkar/us-gb-blocks-plugin.git

Da es empfohlen wird, die WordPress Plugins mittels ESNext (neuere Javascript Bibliothek) zu programmieren, ist auch eine „package.json“ Datei enthalten, die mit folgendem Befehl die benötigten Transcompiler herunterlädt:

npm install

Nach dem die NPM Module „installiert“ wurden, kann man den Code das erste Mal transcompilieren:

npm start

Jetzt kann die vorher eingerichtete virtuelle WordPress Entwicklungsumgebung mit folgendem Befehl aus dem neuen Ordner heraus gestartet werden:

wp-env start

Danach steht das Plugin in der virtuellen WordPress Instanz „http://localhost:8888/wp-login.php“ zur Verfügung:

Im Gutenberg Editor kann nun der neue Block genutzt werden.

Weitere Informationen

Die wichtigen Dateien des Plugins liegen im „src“ Ordner. Hier können Änderungen am Block vorgenommen werden. Am Anfang wird der benötigte Transcompiler mittels „npm start“ aktiviert, der dann automatisch veränderte Dateien neu baut und in den Ordner „build“ abspeichert.

Die Hauptplugin Datei „starter-block.php“ weist auf diesen „build“ Ordner und auch WordPress nutzt die dort transcompilierten Dateien.

Das Starter Plugin wurde weiterentwickelt, um vier verschiedene Infoboxen nutzen zu können. Des Weiteren gibt es spezielle wieder erkennbare H2 Überschriften mit Icons:

Plugin bauen und nutzen

Nachdem die Entwicklung abgeschlossen wurde, muss man den Build Code für die Veröffentlichung bauen:

npm run build

Im Anschluss kann man folgende Dateien auswählen und ins Pluginverzeichnis einer produktiv genutzten WordPressinstallation kopieren:

Links

• unsere-schule.org Gutenberg-Block-Plugin
• Introduction to Plugin Development (wordpress.org)
• WordPress Entwicklungsumgebung einrichten
• Github: Gutenberg Blocks Examples