Formation « Créer des blocs avec Gutenberg »

Créer plusieurs blocs dans une extension

Lecture : 4 minutes • 0

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.

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.

Fenêtre de l'explorateur de fichiers montrant l'organisation de create-block
L’arborescence de create-block

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 :

  1. Modifier l’organisation des fichiers JS ;
  2. 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.

Attention

Pensez à couper le compilateur pendant la manipulation. Il faudra de toutes manières le relancer afin qu’il prenne en compte la nouvelle architecture.

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 :

L'arborescence de l'extension avec cette fois-ci plusieurs blocs
Le dossier contient désormais plusieurs blocs

Conseil

Même s’il n’y a plus de fichier JS directement à la racine, le compilateur saura aller chercher dans les sous-dossiers.

Vérifier la compilation

On va vérifier qu’avec ces changements, la compilation continue de bien fonctionner. Relancez la commande suivante :

Shell

Et contrôlez qu’aucune erreur en rouge n’est apparue :

Le compilateur indique en vert que tout va bien
Aucune erreur, tout va bien !

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.

Information

Lorsque vous changez la structure des fichiers, et lorsque vous ajouterez un nouveau bloc, pensez à couper votre terminal, et relancer la commande npm start afin que les nouveaux fichiers soient pris en compte lors de la compilation.

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 :

JSON
2-autre-bloc/block.json

Mais également dans index.js lors de la déclaration du bloc :

JSX
2-autre-bloc/block.json

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 :

PHP
capitaine-gut-bases.php

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/ :

PHP
capitaine-gut-bases.php

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 dossier src ?
  • 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 et index.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 ?

Attention

Un seul petit oubli, et votre bloc n’apparaitra pas dans le menu d’insertion de l’éditeur. Pensez-donc à toujours vérifier tous ces points lorsque vous créez un nouveau bloc !


Et voilà, votre extensions 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.

0

Questions, réponses et commentaires

Laisser un commentaire