Insérer des blocs dans un bloc grâce à InnerBlocks • Formation WordPress Capitaine WP

Formation « Créer des blocs avec Gutenberg »

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

Lecture :3 minutes •0

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 seront 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 conseilde 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 d’absolument tous les blocs disponibles dans l’éditeur (les natifs comme les blocs tiers).

Parfois, vous aurez 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.

Conseil

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

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.

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.


Ce chapitre est maintenant terminé. Dans la prochaine partie on va s’attarder sur des études de cas avec notamment mon extension Advanced Gutenberg Blocks.

0

Questions, réponses et commentaires

Laisser un commentaire