Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Block-Plugins für WordPress mit Node.js erstellen


Block-Plugins für WordPress mit Node.js erstellen


Um Block-Plugins für WordPress mit Node.js zu erstellen, befolgen Sie diese Schritte:

1. Node.js und npm installieren:
– Stellen Sie sicher, dass Node.js auf Ihrem Computer installiert ist. Wenn nicht, laden Sie es von der offiziellen Node.js-Website herunter und installieren Sie es[1][2].

2. Ein Starter-Block-Plugin einrichten:
- Navigieren Sie zum Verzeichnis „wp-content/plugins“ Ihrer lokalen Entwicklungsinstallation. Führen Sie dann den Befehl „npx @wordpress/create-block“ aus, um ein Gerüst für ein Block-Plugin zu erstellen. Dieser Befehl generiert den gesamten notwendigen Code zum Starten eines Projekts und integriert ein modernes JavaScript-Build-Setup, ohne dass eine Konfiguration erforderlich ist[3][4].

3. Konfigurieren Sie das Block-Plugin:
- Der Befehl „create-block“ fordert Sie Schritt für Schritt zu Eingaben auf. Sie können den Schnellstartmodus auch verwenden, um bestimmte Optionen direkt in der Befehlszeile zu übergeben, sodass keine interaktiven Eingabeaufforderungen erforderlich sind[4].

4. Erstellen und Ausführen des Block-Plugins:
- Führen Sie „npm start“ aus, um einen Entwicklungsserver zu starten und den Block automatisch neu zu erstellen, wenn eine Codeänderung erkannt wird. Wenn Sie bereit sind, Ihren Block bereitzustellen, verwenden Sie „npm run build“, um Ihren Code zu optimieren und ihn produktionsbereit zu machen[4].

5. In WordPress integrieren:
- Aktivieren Sie das generierte Plugin in WordPress. Dadurch wird der Block im Editor[4] verfügbar gemacht.

6. Anpassen und Erweitern des Blocks:
- Ändern Sie den Boilerplate-Code, um den Block nach Bedarf anzupassen und zu erweitern. Dazu gehört die Verwendung von modernem JavaScript (ESNext und JSX) und die Nutzung des „wp-scripts“-Pakets für Build- und Linting-Aufgaben[4].

Wenn Sie diese Schritte befolgen, können Sie mit Node.js und dem Paket „@wordpress/create-block“ benutzerdefinierte Block-Plugins für WordPress erstellen und verwalten.

Zitate:
[1] https://wpdevelopment.courses/articles/wordpress-create-block/
[2] https://kinsta.com/courses/gutenberg-block-development/setting-up-a-block-plugin/
[3] https://www.npmjs.com/package/%40wordpress/create-block
[4] https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-create-block/
[5] https://www.youtube.com/watch?v=-aa4F4Dn9GY