Formation « Créer des blocs avec Gutenberg »

Créer plusieurs blocs dans une extension

Lecture : 4 minutes • 6

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 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.

6

Questions, réponses et commentaires

  1. 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).

    1. 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.

      1. 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. 🙂

        1. 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 !

      2. Fred - FLQ

        Le 5 avril 2024

        Cool ! Et plutôt content d’avoir compris ça tout seul : c’est grâce à tes cours ! 🙂

  2. 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”

Laisser un commentaire