Das create-block-Tool verwenden

Hallo und willkommen bei Learn WordPress.

In diesem Tutorial lernst du, wie du das create-block-Tool verwendest, um ein neues Block-Plugin zu erstellen. In diesem Video behandeln wir, was das create-block-Tool ist, welche Software du für die Verwendung von create-block benötigst, wie du mit create-block einen neuen Block erstellst und welchen Code create-block generiert.

Create-block ist ein offizielles Befehlszeilentool, das von WordPress-Mitwirkenden entwickelt wurde, um ein neues Block-Plugin zu erstellen. Es generiert alles, was du für den Start eines neuen Blog-Plugins benötigst, und integriert eine moderne Build-Umgebung ohne Konfiguration. Weitere Informationen zu create-block findest du im Block-Editor-Handbuch in den WordPress-Entwicklerressourcen unter „Referenzhandbücher“ -> „Pakete“ -> @wordpress/create-block.

Um das create-block-Tool zu verwenden, benötigst du eine lokale WordPress-Installation, ein Terminal zum Ausführen von Befehlen sowie Node.js und npm. Du kannst jede lokale WordPress-Installation verwenden, mit der du vertraut bist, zum Beispiel LocalWP oder DesktopServer. Falls du noch keine lokale WordPress-Installation hast, sieh dir bitte das Tutorial „Lokale WordPress-Installationen für Anfänger“ auf learn.wordpress.org an.

Wenn du Mac OS oder ein beliebiges Linux-Betriebssystem verwendest, kannst du das integrierte Terminal nutzen. Windows-Benutzern empfehlen wir, PowerShell zu installieren und zu verwenden. Du findest es unter microsoft.com/powershell.

Schließlich musst du Node.js installieren, wodurch auch npm installiert wird. Das create-block-Tool funktioniert mit jeder stabilen Node.js-Version ab Version 12. Abhängig von deinen Entwicklungsanforderungen musst du jedoch möglicherweise schnell zwischen Node.js-Versionen für verschiedene Projekte wechseln können. Glücklicherweise kannst du dies mit dem Open-Source-Node-Version-Manager, auch nvm genannt, tun. Besuche dazu nvm.sh, das dich zur GitHub-Seite weiterleitet. Das Tolle an nvm ist, dass du deine Node.js-Version sehr einfach aktualisieren kannst, wenn sich deine Versionsanforderungen ändern. Für dieses Tutorial installieren wir dieselbe Version, die für die Entwicklung des WordPress-Kerns benötigt wird und im Block-Editor-Handbuch auf der Seite zur Entwicklungsumgebung „Erste Schritte“ aufgeführt ist.

Derzeit wird empfohlen, Node.js Version 14 zu installieren. Wenn du macOS oder Linux verwendest, kannst du deine standardmäßige Terminalanwendung öffnen und nvm installieren, indem du das npm-Installationsskript ausführst, das du aus der nvm-Dokumentation kopierst.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

Sobald npm installiert ist, musst du dein Terminal schließen und erneut öffnen.

Anschließend kannst du den Befehl nvm install verwenden, um die benötigten Node.js- und npm-Versionen zu installieren.

nvm install 14

Wenn du einen Windows-Computer verwendest, musst du den Chocolatey-Paketmanager für Windows installieren, um nvm zu installieren. Öffne zunächst PowerShell mit Administratorrechten, indem du mit der rechten Maustaste auf den PowerShell-Menüeintrag klickst und „Als Administrator ausführen“ auswählst. Öffne anschließend die Chocolatey-Einrichtungsdokumentation und scrolle nach unten zu den Anweisungen „Install with PowerShell“. Kopiere die Anweisungen und klicke im PowerShell-Fenster mit der rechten Maustaste, um sie einzufügen.

Sobald Chocolatey installiert ist, verwende den folgenden Befehl, um nvm zu installieren:

choco install -y nvm

Sobald nvm installiert ist, verwende den Befehl nvm install, um die erforderlichen Node.js- und npm-Versionen zu installieren:

nvm install 14

Führe abschließend den Befehl nvm use aus, um die gerade installierte Version von Node.js und npm zu verwenden.

nvm use 14.20.0

Jetzt bist du bereit, das create-block-Tool zu verwenden, um deinen ersten Block zu erstellen. Wechsle in deinem Terminal in das Verzeichnis „wp-content/plugins“ deiner lokalen WordPress-Installation. In meinem Fall lautet es:

cd development/websites/wordpress/wp-content/plugins

Führe dann den Befehl create-block aus und übergib diesem Befehl einen Plugin-Slug. Der Slug ist der eindeutige Name des Plugins.

npx @wordpress/create-block wp-learn-todo

Dadurch wird im Verzeichnis wp-learn-todo ein neues Plugin erstellt, alle erforderlichen Pakete werden installiert und die notwendigen Dateien werden angelegt. Du wirst feststellen, dass wir das create-block-Paket nicht installieren mussten. Mit dem Befehl npx können wir das Paket von dem Ort ausführen, an dem es in der Cloud gehostet wird.

Sobald das neue Plugin erstellt wurde, solltest du in deiner WordPress-Installation einen neuen Plugin-Ordner haben, der nach dem an create-block übergebenen Slug benannt ist.

Da ist es: wp-learn-todo. Sehen wir uns die wichtigsten Verzeichnisse und Dateien in diesem Plugin an.

Das Build-Verzeichnis ist der Ort, an dem die finalen Block-Asset-Dateien für die Verteilung erstellt werden. node_modules enthält alle Node-Pakete oder Module, die du für die Entwicklung benötigst. Im src- bzw. Quellverzeichnis findet der größte Teil deiner Programmierung statt; der gesamte Code deines Blocks befindet sich hier. Die package.json legt fest, welche Pakete dein Code benötigt. Die readme.txt wird vom WordPress.org-Pluginverzeichnis zur Verwaltung deines Plugins verwendet. Und die Datei wp-learn-todo.php ist die Hauptdatei des Plugins, die WordPress mitteilt, dass es sich um ein Plugin handelt.

Wenn wir WordPress öffnen und zum Block-Editor gehen, sollten wir diesen Block hinzufügen können. Zuerst müssen wir den Block aktivieren; „learn-todo“ ist aktiviert. Erstellen wir nun einen neuen Beitrag und fügen einen neuen Block hinzu. Da ist er. Im Moment enthält er lediglich einen Absatz mit etwas Text.

Damit ist dieses Tutorial zur Verwendung von create-block abgeschlossen. Wenn du bereit bist, individuelle Blöcke zu erstellen, sieh dir das Tutorial „Block-Unterstützung zu einem bestehenden Plugin hinzufügen“ an. Weitere Tutorials für WordPress-Entwickler findest du auf learn.wordpress.org.

Viel Spaß beim Programmieren.