Create block ne créé qu’un seul bloc par défaut. Mais il est tout à fait possible d’organiser ses fichiers pour que l’extension en accueille plusieurs. Il suffira pour cela de modifier très légèrement la structure de l’extension.
Sommaire du cours
Lorsqu’on souhaite réaliser plusieurs blocs, on pourrait très bien créer une extension par bloc. Mais bien souvent, ce sera plus efficace de regrouper tous les blocs au sein d’une seule et même extension.
C’est le cas de WooCommerce par exemple, qui propose une dizaine de blocs pour la boutique. Cela évite d’installer une pléthore d’extensions de blocs en parallèle.
Lorsqu’on regarde l’architecture des fichiers de notre extension de blocs, on remarque que, par défaut, notre bloc est déclaré dans le dossier /src/
.
On retrouve différents fichiers comme block.json
et index.js
, que l’on va étudier d’ici les prochains cours.
Ces fichiers appartiennent tous au seul bloc de l’extension.
Alors afin d’accueillir plusieurs blocs au sein du même plugin, on va faire de très légères modifications dans l’architecture des fichiers, ainsi que dans le code. On va procéder en 2 étapes :
- Modifier l’organisation des fichiers JS ;
- Et changer le chemin lors de la déclaration de nos blocs en PHP.
Modifications côté Javascript
Le premier objectif va être d’isoler chaque bloc dans des sous-dossiers.
D’ailleurs, pour couper le compilateur, positionnez vous dans votre ligne de commande et appuyez sur CTRL+C
. C’est la commande universelle pour couper une commande en cours.
Passer en sous-dossiers
Tout d’abord, on va passer les fichiers de notre bloc dans un sous-dossier que l’on va appeler par exemple src/1-block
.
Chaque nouveau bloc aura son propre dossier, qui contiendra les mêmes fichiers.
Voici à quoi ressemblera notre nouvelle architecture, avec tous les sous-dossiers, une fois qu’on aura vu tous les exemples de la formation :
Vérifier la compilation
On va vérifier qu’avec ces changements, la compilation continue de bien fonctionner. Relancez la commande suivante :
Et contrôlez qu’aucune erreur en rouge n’est apparue :
Il n’y a d’ailleurs aucune raison que cela ne marche pas, car create-block est tout à fait capable de comprendre cette structure, et de compiler plusieurs blocs à la fois.
Vous pouvez également aller regarder dans le dossier /build/
pour voir vos blocs en version compilée.
Déclarer d’autres blocs
Pour créer un nouveau bloc, dupliquez simplement le dossier 1-block
ainsi que son contenu, et modifiez son nom pour 2-second-block
par exemple.
Il faudra ensuite bien penser à changer le nom du bloc dans block.json
:
Mais également dans index.js
lors de la déclaration du bloc :
De cette manière, vous vous assurez que chacun de votre bloc a bien un nom unique !
Notez également que par défaut, create-block donne un nom du type : create-block/capitainewp-gut-bases
. Le bon nommage serait plutôt nom-extension/nom-bloc
.
C’est pour cela que pour la suite de la formation, vous verrez mes blocs nommés capitainewp/nom-bloc
. Je vous invite à en faire de même.
Modifications côté PHP
Côté PHP, on a également une toute petite modification à faire dans le fichier PHP de base, qui porte le nom du projet. Il s’appelle dans mon exemple capitainewp-gut-bases.php
. Initialement, vous aviez :
La fonction register_block_type()
indique à WordPress d’aller chercher les fichiers du bloc dans le dossier /build/
, c’est ici que se trouvent les fichiers compilés de notre premier bloc.
Avec notre nouvelle structure JS, le compilateur va s’adapter et créer plusieurs sous-dossiers pour chacun de nos blocs, il va donc falloir adapter notre code et indiquer les mêmes noms de dossiers que dans /src/
:
Notez que j’ai également simplifié le nom de la fonction et le hook correspondant.
Aparté: Styles, scripts et performances
Il n’y a pas besoin de déclarer les scripts et les styles de nos blocs, comme on le ferait pour le thème avec enqueue_scripts
et enqueue_styles
.
Ici tout est automatisé grâce à la fonction register_block_type
justement. On n’a qu’à lui donner le chemin du dossier contenant les ressources compilées, et le système s’occupe du reste.
Et pas d’inquiétude à avoir côté performances, car les ressources ne seront chargées dans une page que si le bloc y est présent.
En cas d’erreur
Si vous ne voyez pas votre bloc apparaitre dans l’éditeur, voici une liste de choses à vérifier pour tenter de trouver l’erreur, ou l’oubli !
- Avez-vous bien ajouté l’import de votre bloc dans
index.js
à la racine du dossiersrc
? - Avez-vous bien ajouté l’appel au bloc en PHP via
register_block_type()
? - Avez-vous bien pensé à donner un nom unique à votre bloc dans
block.json
etindex.js
? - Avez-vous bien coupé puis relancé le compilateur avec
npm run start
? - Y a-t-il une erreur dans la console du navigateur lorsque vous chargez l’éditeur de bloc ?
Et voilà, votre extension est maintenant prête à accueillir autant de nouveaux blocs que vous voudrez. Dans le prochain cours, on va découvrir les fonctions qui permettent de déclarer notre premier bloc ainsi que leurs paramètres disponibles.
Fred - FLQ
Le 5 avril 2024
Hello Maxime,
Après avoir tout épluché pour m’imprégner des concepts, je mets enfin les mains dans le cambouis !
Si je ne dis pas de bêtises, dans la partie « Déclarer d’autres blocs », la 2ème modification dans index.js n’est plus nécessaire. Index.js va désormais chercher le nom tout seul dans block.json (import de metadata, puis référence à metadata.name).
Maxime BJ
Le 5 avril 2024
Oui tout à fait ! J’ai prévu une grosse mise à jour de la formation ce printemps, histoire d’être à jour avec les concepts les plus récents. Il va y avoir du changement du coup.
Fred - FLQ
Le 6 juin 2024
Autre détail pratique que je viens d’apprendre : dans la partie « Déclarer d’autres blocs », plutôt que de dupliquer/renommer un dossier de bloc existant, on peut relancer le package « Create-block » depuis le dossier « src » avec l’option «
--no-plugin
« . Ca indique au package qu’on a déjà tout ce qu’il faut et qu’il nous faut juste un nouveau bloc. 😉En espérant que cela soit utile à d’autres en attendant la mise à jour du cours. 🙂
Maxime BJ
Le 6 juin 2024
Ouais en effet c’est une bonne idée ! J’avais vu passer le paramètre no-plugin Mais ça m’était sorti de la tête. Merci pour la recommandation, je l’intégrerai au cours !
Fred - FLQ
Le 5 avril 2024
Cool ! Et plutôt content d’avoir compris ça tout seul : c’est grâce à tes cours ! 🙂
David
Le 7 juin 2024
Attention : suite à la dernière maj de WordPress les blocks créés avec createblock n’apparaissent plus. Cf. https://github.com/WordPress/gutenberg/issues/62202
La solution : dans package.json de votre block :
– edit package.json set devedepencies « @wordpress/scripts » to « ^27.9.0 »
– npm install
– npm start
– refresh and edit a page
– add the new block « /mon-nom-de-block »