Formation « Créer des blocs avec Gutenberg »

Insérer des blocs dans un bloc grâce à InnerBlocks

Lecture : 3 minutes • 7

Afin d’aller encore plus loin, on va voir comment insérer des blocs dans nos blocs grâce au composant InnerBlocks. Et vous verrez que c’est hyper facile. On va donc pouvoir créer des blocs structurels, et choisir quels blocs pourront être utilisés à l’intérieur.

Lorsque vous utilisez le bloc groupe, bannière ou encore colonne de WordPress, vous pouvez insérer à l’intérieur d’autres blocs. On a donc des blocs imbriqués.

Eh bien on peut tout à fait reproduire ce comportement dans nos blocs, et cela pour plusieurs utilités :

  • Créer un élément de structure (section, colonnes) sur mesure ;
  • Permettre d’écrire un contenu riche (titres, textes, images…) dans votre bloc.

D’ailleurs, Florian Truchot, de l’agence Fantassin, n’utilise quasiment plus le composant RichText dans ses blocs, et préfère utiliser plutôt InnerBlocks, ce qui offre plus de possibilités à ses clients.

Florian Truchot
Directeur technique
Formateur

Le conseil de Florian Truchot

Creative Developer chez Fantassin

Depuis l’apparition des blocs imbriqués, je les utilise dans quasiment tous mes blocs, en remplacement du composant RichText. De cette manière, j’offre la possibilité à mes clients d’insérer du texte riche même à l’intérieur de nos blocs maison.

Chez Fantassin, on croit 100% en Gutenberg. Du coup, toutes nos pages sont basées sur l’éditeur de WordPress. Nos clients bénéficient donc d’une expérience en temps réel et parfaitement intégrée à l’interface de WordPress.

Grâce à l’API développeurs de Gutenberg et un peu de R&D, on a pu réussir à mettre cela en place pour tous nos projets. C’est aujourd’hui un énorme gain de temps pour nous, et une satisfaction client sans précédent.

Suivez-moi sur Twitter : @floriantruchot • Mon site : Fantassin

Je remercie d’ailleurs Florian qui m’a été d’une grande aide dans la rédaction de la nouvelle version de cette formation dédiée aux blocs Gutenberg.

Pour connaitre tous les paramètres offerts par les blocs imbriqués, consultez la documentation officielle à ce sujet :

Documentation de InnerBlocks

Utiliser InnerBlocks dans notre code

L’utilisation des blocs imbriqués est très puissante, et à la fois extrêmement simple à l’usage. Vous trouverez le code de mon exemple dans src/16-innerblocks.

Voici ce que l’on retrouve dans edit.js :

JSX
src/16-innerblocks/edit.js

Il nous suffit d’utiliser le composant InnerBlocks à l’endroit où vous voulez pouvoir ajouter des blocs. Mon exemple est simple puisque mon bloc sert simplement de conteneur pour ajouter d’autres blocs.

Pour cela j’ai chargé la librairie depuis @wordpress/block-editor en début de fichier.

D’ailleurs, si vous regardez dans les styles, j’ai simplement appliqué une bordure rose épaisse pour délimiter mon bloc.

Du côté du save.js, ce n’est pas bien plus compliqué :

JSX
src/16-innerblocks/save.js

Ici c’est presque la même chose : on indique via le composant InnerBlocks.Content là où seront enregistrés les blocs enfants.

Avec ça, libre à vous de faire des blocs plus évolués, des éléments de structures comme des sections, colonnes… Avec les blocs imbriqués, vous n’avez plus de limites !

Limiter les blocs utilisables

Par contre, avec cette technique vous autorisez l’import de tous les blocs disponibles dans l’éditeur (les natifs comme les blocs tiers).

Parfois, vous pourriez avoir envie de limiter le choix à des blocs simples par exemple. C’est tout à fait possible grâce au paramètre allowedBlocks :

JSX
src/16-innerblocks/edit.js

Voilà ! Grâce à ce paramètre j’ai limité l’ajout de paragraphes, titres et images uniquement.

Information

Les blocs natifs ont tous pour slug : core/<quelquechose>

Appliquer un template par défaut

Maintenant, si vous voulez mâcher le travail du rédacteur en préparant une structure de blocs enfants, c’est également possible grâce au paramètre template.

JSX
src/16-innerblocks/edit.js

Dans cet exemple, lorsque vous ajouterez le bloc parent, vous verrez automatiquement une image suivie d’un titre, puis d’un texte à l’intérieur de la zone.

Et si vous ajoutez templateLock="all", cela va verrouiller le template et le rédacteur ne pourra pas ajouter d’autres blocs.

Cela peut s’avérer pratique lorsque vous souhaitez proposer une mise en page stricte.

Gérer les colonnes dans votre template

Vous pourrez également imbriquer plusieurs niveaux de blocs grâce aux groupes et aux colonnes. Dans ce cas, utilisez core/columns qui dispose d’un troisième argument, vous permettant d’indiquer quels blocs insérer à l’intérieur :

JSX
src/16-innerblocks/edit.js

Faites très attention aux crochets, car comme vous pouvez le voir dans l’exemple ci-dessus, il y en a beaucoup qui s’imbriquent ensemble, et ce n’est pas très facile à lire où à manipuler !

Créer un bloc enfant uniquement

Et enfin, pour terminer la présentation des blocs imbriqués, voici une dernière option intéressante :

Imaginez que vous souhaitez faire un bloc qui puisse être exclusivement un enfant d’un autre bloc. En d’autres termes, vous ne pouvez pas utiliser ce bloc à la racine de l’éditeur, mais seulement dans votre parent.

Je pense par exemple à un bloc enfant colonne qui ne peut-être ajouté que dans un bloc parent section de votre création.

JSX
index.js

Pas mal non ? Avec ça vous pourriez vous construire votre propre constructeur de pages maison, complètement sur mesure et entièrement réalisé avec Gutenberg, à l’image de ce que propose l’agence Fantassin.


Dans le prochain cours, on va aborder un concept très important de WordPress et de l’éditeur : les Hooks, qui vont nous permettre de modifier le comportement de blocs blocs existants, comme par exemple ajouter des paramètres.

7

Questions, réponses et commentaires

  1. GINESTE Bernard

    Le 23 août 2023

    Bonjour,
    Cet article est très intéressant. Mais je voudrais insérer plusieurs InnerBlocks dans un bloc. Pour cela j’ai dupliqué les séquences d’insertion dans edit.js et save.js
    Le problème, c’est que, lorsqu’on insère un block dans un des InnerBlocks, cela se répercute sur tous les autres.
    Connaissez vous la raison de ce comportement et le moyen d’y remédier ?
    Merci d’avance.

    1. Maxime BJ

      Le 23 août 2023

      Il est impossible d’avoir plusieurs InnerBlocks, c’est pour cela ! Ce n’est pas une limitation de WordPress, c’est le fonctionnement de React qui est en cause ici. Il faut alors que tu penses tes blocs autrement du coup. Comme par exemple ajouter un autre niveau de blocs (qui seraient répétables et qui auraient chacun leurs enfants).

      1. GINESTE Bernard

        Le 24 août 2023

        Merci beaucoup pour cette réponse.
        Du coup, j’ai remarqué que InnerBlocks est au pluriel, ce qui laisse entendre que ce “réceptacle””peut contenir plusieurs blocs.
        Aussi, j’ai tenté ceci :
        après avoir défini un premier bloc dans l’InnerBlocks, j’ai déployé le menu de ce premier bloc et j’ai pu choisir ‘ajouter avant’ ou ‘ajouter après’ pour insérer un nouveau bloc, et ainsi de suite.
        C’était ce que je voulais faire et ça fonctionne !

        Je profite de cette réponse pour vous féliciter de la clarté de vos exposés, qui permettent vraiment de s’initier à la réalisation des blocs personnalisés, sans être bloqué par des insuffisances d’information.
        Et en plus vous répondez aux questions qu’on vous soumet !

        Bien cordialement

  2. Gaëtan

    Le 20 septembre 2023

    Bonjour,
    J’ai une question concernant la partie $template :

    Dans le cas où on veut insérer un bloc acf custom dans cette variable $template, comment peut-on récupérer les champs acf de ce bloc ?

    Ex : j’ai un bloc acf appelé par exemple ‘testimonial’, comprenant 2 acf fields ‘citation’ et ‘auteur’.

    Je veux inclure ce bloc dans $template, et mettre une citation et un auteur par défaut.

    Je pensais écrire comme ça :
    [ ‘acf/testimonial’, { citation: ‘Hello !’, auteur: ‘Jean-Michel’ } ],

    Mais ça ne fonctionne pas… Tu crois que c’est possible de le faire ?

    merci pour ta réponse

    1. Maxime BJ

      Le 20 septembre 2023

      Ah très bonne question ! Malheureusement je n’ai pas la réponse. C’est super mal documenté côté WP déjà ça. Mais en tous cas j’aurais fait comme tu as dit, c’est ce qui m’aurait semblé le plus judicieux. Il faut bien que citation et auteur soient les “slugs” de tes champs ACF mais je pense que tu as bien vérifié que c’était le cas. Si tu trouves la solution, je suis preneur !

      1. Gaëtan

        Le 21 septembre 2023

        La réponse ici >> https://twitter.com/BillErickson/status/1704862320751472931

        Ça fonctionne, c’est cool !

        1. Maxime BJ

          Le 22 septembre 2023

          Ok ! Il fallait viser l’identifiant du champ, et non pas son nom directement ! Bien vu !

Laisser un commentaire