Utilisation de l’outil create-block

Bonjour et bienvenue sur Learn WordPress.

Dans ce tutoriel, vous allez apprendre à utiliser l’outil create-block pour créer la structure de base d’une nouvelle extension de bloc. Dans cette vidéo, nous verrons ce qu’est l’outil create-block, quels logiciels sont nécessaires pour l’utiliser, comment créer la structure de base d’un nouveau bloc avec create-block et le code généré par create-block.

Create-block est un outil officiel en ligne de commande développé par les contributeurs de WordPress pour créer la structure de base ou une nouvelle extension de bloc. Il génère tout ce dont vous avez besoin pour commencer une nouvelle extension de blog et intègre une configuration de build moderne, sans configuration supplémentaire. Vous pouvez en savoir plus sur create-block en consultant le manuel de l’éditeur de blocs dans les ressources destinées aux développeurs WordPress, sous Guides de référence -> Packages -> @wordpress/create-block.

Pour utiliser l’outil create-block, vous aurez besoin d’une installation locale de WordPress, d’un terminal pour exécuter les commandes, ainsi que de Node.js et npm. Vous pouvez utiliser n’importe quelle installation locale de WordPress avec laquelle vous êtes à l’aise, comme LocalWP ou DesktopServer. Si vous ne disposez pas déjà d’une installation locale de WordPress, consultez le tutoriel Installations locales de WordPress pour débutants sur learn.wordpress.org.

Si vous utilisez Mac OS ou un système d’exploitation Linux, vous pouvez utiliser le terminal intégré. Pour les utilisateurs de Windows, nous recommandons d’installer et d’utiliser PowerShell, que vous trouverez sur microsoft.com/powershell.

Enfin, vous devez installer Node.js, qui installe également npm. L’outil create-block fonctionne avec toute version stable de Node.js supérieure à la version 12. Cependant, selon vos besoins en matière de développement, vous devrez peut-être pouvoir changer rapidement de version de Node.js entre différents projets. Heureusement, vous pouvez le faire à l’aide du gestionnaire de versions de Node open source, également appelé nvm. Pour le trouver, rendez-vous sur nvm.sh, qui vous redirigera vers la page GitHub. L’avantage de nvm est que si vos exigences de version changent, il est très facile de mettre à jour votre version de Node.js avec nvm. Pour les besoins de ce tutoriel, nous installerons la même version que celle requise pour le développement du cœur de WordPress, indiquée dans le manuel de l’éditeur de blocs, à la page Environnement de développement – Premiers pas.

Actuellement, il est recommandé d’installer la version 14 de Node.js. Si vous utilisez macOS ou Linux, vous pouvez ouvrir votre application de terminal par défaut et installer nvm en exécutant le script d’installation npm que vous copiez depuis la documentation de nvm.

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

Une fois npm installé, vous devez fermer votre terminal et le rouvrir.

Vous pouvez ensuite utiliser la commande nvm install pour installer les versions de Node.js et de npm dont vous avez besoin.

nvm install 14

Si vous utilisez un ordinateur Windows, vous devrez installer le gestionnaire de paquets Chocolatey pour Windows afin d’installer nvm. Commencez par ouvrir PowerShell avec des privilèges d’administrateur en faisant un clic droit sur l’élément de menu PowerShell et en sélectionnant Exécuter en tant qu’administrateur. Consultez ensuite la documentation d’installation de Chocolatey et faites défiler la page jusqu’aux instructions d’installation avec PowerShell. Copiez les instructions et faites un clic droit dans la fenêtre PowerShell pour les coller.

Une fois Chocolatey installé, utilisez la commande suivante pour installer nvm :

choco install -y nvm

Une fois nvm installé, utilisez la commande nvm install pour installer les versions requises de Node.js et de npm ;

nvm install 14

Enfin, exécutez la commande nvm use pour utiliser la version de Node.js et de npm que vous venez d’installer.

nvm use 14.20.0

Vous êtes maintenant prêt à utiliser l’outil create-block pour créer votre premier bloc. Dans votre terminal, accédez au répertoire des extensions de contenu WP de votre installation locale de WordPress. Dans mon cas, il s’agit de :

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

Exécutez ensuite la commande create-block et transmettez-lui un identifiant d’extension. Cet identifiant est le nom unique de l’extension.

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

Cette commande crée une nouvelle extension dans le répertoire wp-learn-todo, installe les paquets requis et crée les fichiers nécessaires. Vous remarquerez que nous n’avons pas eu besoin d’installer le paquet create-block. La commande npx nous permet d’exécuter le paquet depuis l’endroit où il est hébergé dans le cloud.

Une fois la structure de base de la nouvelle extension créée, vous devriez avoir un nouveau dossier d’extension dans votre installation WordPress, portant le nom de l’identifiant transmis à create-block.

Le voici : wp-learn-todo. Examinons les répertoires et fichiers les plus importants de cette extension.

Le répertoire build est l’emplacement où les fichiers de ressources finaux du bloc seront générés pour la distribution. node_modules contient les paquets ou modules Node dont vous avez besoin pour le développement. Le répertoire src, ou répertoire source, est l’endroit où vous effectuerez la majeure partie de votre codage : tout le code de votre bloc s’y trouve. Le fichier package.json détermine les paquets nécessaires à votre code. Le fichier readme.txt est utilisé par le répertoire des extensions de WordPress.org pour gérer votre extension. Et le fichier wp-learn-todo.php est le fichier principal de l’extension qui indique à WordPress qu’il s’agit d’une extension.

Si nous ouvrons WordPress et accédons à l’éditeur de blocs, nous devrions pouvoir ajouter ce bloc. Nous devons d’abord activer le bloc, et learn-todo est activé. Créons maintenant un nouvel article et ajoutons un nouveau bloc. Le voilà. Pour le moment, il contient simplement un paragraphe avec du texte.

Et voilà qui conclut ce tutoriel sur l’utilisation de create-block. Si vous êtes prêt à commencer à créer des blocs personnalisés, consultez le tutoriel Ajouter la prise en charge des blocs à une extension existante. Pour découvrir d’autres tutoriels de développement WordPress, rendez-vous sur learn.wordpress.org.

Bon codage.