Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Création de plugins de bloc pour WordPress avec Node.js


Création de plugins de bloc pour WordPress avec Node.js


Pour créer des plugins de bloc pour WordPress à l'aide de Node.js, suivez ces étapes :

1. Installez Node.js et npm :
- Assurez-vous que Node.js est installé sur votre machine. Sinon, téléchargez-le et installez-le depuis le site officiel de Node.js[1][2].

2. Configurer un plugin Starter Block :
- Accédez au répertoire `wp-content/plugins` de votre installation de développement local. Ensuite, exécutez la commande « npx @wordpress/create-block » pour créer un plugin de bloc. Cette commande génère tout le code nécessaire pour démarrer un projet et intègre une configuration de construction JavaScript moderne sans configuration requise[3][4].

3. Configurez le plugin de bloc :
- La commande `create-block` vous demande des entrées étape par étape. Vous pouvez également utiliser le mode de démarrage rapide pour transmettre des options spécifiques directement dans la ligne de commande, éliminant ainsi le besoin d'invites interactives[4].

4. Créez et exécutez le plugin Block :
- Exécutez `npm start` pour démarrer un serveur de développement et reconstruire automatiquement le bloc chaque fois qu'un changement de code est détecté. Lorsque vous êtes prêt à déployer votre bloc, utilisez « npm run build » pour optimiser votre code et le rendre prêt pour la production[4].

5. Intégrez avec WordPress :
- Activez le plugin généré dans WordPress. Cela rendra le bloc disponible dans l'éditeur[4].

6. Personnalisez et étendez le bloc :
- Modifiez le code passe-partout pour personnaliser et étendre le bloc si nécessaire. Cela implique l'utilisation de JavaScript moderne (ESNext et JSX) et l'exploitation du package « wp-scripts » pour les tâches de construction et de linting[4].

En suivant ces étapes, vous pouvez créer et gérer des plugins de blocs personnalisés pour WordPress à l'aide de Node.js et du package `@wordpress/create-block`.

Citations :
[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