Gutenberg et les blocs réutilisables : deux plugins indispensables

Aujourd’hui, nous vous présentons deux extensions WordPress permettant de tirer profit de la fonctionnalité Blocs Réutilisables de Gutenberg, le nouvel éditeur de WordPress.

Comme la plupart des extensions que nous créons, tout part très souvent d’un besoin client, et encore plus souvent d’un client en maintenance – et la maintenance WordPress est une part importante de notre activité d’agence. Quand ce besoin nous semble suffisamment universel et qu’il n’y a aucune solution existante sur le marché, nous essayons de le sortir sur la forme d’une extension gratuite disponible pour l’ensemble de la communauté sur WordPress.org.

Gutenberg et la fonctionnalité blocs réutilisables

Le principe des blocs réutilisables, c’est de pouvoir sauvegarder un bloc – ou un ensemble de blocs – pour pouvoir les réutiliser en dehors du contexte dans lequel ils ont été créés.

Une fois votre bloc réutilisable enregistré, il pourra être inséré dans n’importe quelle publication en allant dans la section « blocs réutilisables » de l’outil d’insertion de blocs, ou en le recherchant par le nom que vous lui avez donné.

Le contenu des blocs réutilisables est synchronisé sur l’ensemble du site. Si vous modifiez le contenu à un endroit, cette modification sera automatiquement faite sur toutes les publications utilisant ce bloc réutilisable.

Il est possible de désynchroniser un bloc réutilisable en utilisant l’option “Convertir en bloc Gutenberg normal”. Le contenu pourra alors être modifié sans que cela ne mette à jour les autres occurrences du bloc réutilisable partout sur le site.

Concrètement, les blocs réutilisables de Gutenberg sont très utiles dans de nombreux cas. Voici deux exemples d’application de ce concept :

  • Bloc Call to Action réutilisé sur plusieurs pages du site.
    Vous avez un call to action avec un lien vers un produit dédié ou un formulaire de prise de contact que vous affichez un peu partout sur votre site ? Il vous suffit de l’enregistrer en tant que bloc réutilisable et vous pourrez alors l’insérer dans vos contenus en un clic !
  • Bloc de présentation de l’auteur d’un article.
    Vous pouvez créer plusieurs blocs contenant une photo + texte de présentation d’une personne et les enregistrer en tant que blocs réutilisables. Vous n’aurez ensuite qu’à aller chercher la fiche auteur à ajouter au pied de votre article parmi vos blocs réutilisables.

Gérer vos blocs Gutenberg réutilisables avec notre plugin Reusable Blocks Extended

La fonctionnalité Blocs réutilisables est puissante, mais elle n’est pas très accessible. Si un écran de gestion des contenus réutilisables est bien disponible en back-office, celui-ci est caché par défaut : il n’est pas accessible via le menu de l’interface d’administration.

Pour faciliter l’utilisation des blocs réutilisables, nous avons publié une extension sur le répertoire WordPress.org destinée à donner accès à toutes ces fonctionnalités sans avoir à utiliser le moindre bout de code.

Cette extension s’appelle Reusable Blocks Extended et elle est disponible gratuitement.

Tout d’abord, ce plugin ajoutera un menu dans l’administration WordPress qui vous permettra d’accéder directement à la liste de vos blocs réutilisables afin de les gérer indépendamment de l’éditeur Gutenberg.

L’extension améliore grandement cette interface de liste des blocs réutilisables existants, en y ajoutant, pour chaque bloc réutilisable :

  • La liste des publications (articles, pages, etc) où le bloc est utilisé
    Cela est très utile pour savoir où un bloc est utilisé avant de le modifier (car le contenu sera synchronisé partout sur le site) ou de le supprimer
  • Une prévisualisation dynamique du rendu de votre bloc
  • Un code court (ou shortcode) ainsi qu’une petite fonction PHP permettant d’intégrer votre bloc réutilisable n’importe où sur le site !

Cette dernière fonctionnalité semble anodine comme ça, mais elle est très puissante car elle permet d’intégrer des blocs Gutenberg à volonté sur votre site, y compris sur des contenus qui n’utilisent pas Gutenberg.

Vous n’avez qu’à copier le shortcode et le coller où vous voulez (dans un widget, dans un champ de l’éditeur classique ou autre) et votre bloc s’y affichera !

Ci-dessus, démonstration de la prévisualisation des blocs réutilisables en back-office

Insertion de blocs réutilisables en dehors de l’éditeur Gutenberg : les widgets

Avec cette extension, vous avez également la possibilité d’intégrer vos blocs réutilisables en utilisant un widget dédié : Reusable Blocks. Vous pouvez donc créer des blocs avec Gutenberg, les enregistrer en tant que bloc réutilisable et les insérer dans le pied de page ou la sidebar de votre site.

Insérer automatiquement des blocs avant ou après le contenu de vos pages articles

En plus de Reusable Blocks Extended, nous avons mis à disposition une autre extension dédiée à l’utilisation des blocs réutilisables : Insert Blocks Before or After Posts Content.

Cette extension permet d’insérer automatiquement des blocs éditoriaux réalisés avec Gutenberg avant ou après le contenu de toutes vos pages, tous vos articles ou sur n’importe quel type de publication.

Ajout automatique d’un call to action avant ou après vos contenus, ajout d’inserts publicitaires… les cas concrets d’utilisation sont nombreux !

L’extension permet également de gérer des exceptions : vous pouvez alors choisir d’afficher vos blocs avant/après le contenu sur certaines pages mais pas sur d’autres, et ainsi de suite.

Capture d’écran des réglages de notre plugin permettant d’insérer des blocs Gutenberg avant ou après votre contenu

Notre conférence sur les Blocs Réutilisables Gutenberg au WordCamp Marseille 2019

Cet article est partiellement issu de la conférence que nous avons donné au WordCamp Marseille 2019. Nous y avons présenté le fonctionnement des blocs réutilisables et pourquoi nous pensons qu’il s’agit d’une des fonctionnalités les plus puissantes de l’éditeur Gutenberg.

Un compte-rendu détaillé (et technique) de cette conférence est disponible sur mon site perso.

Cerise sur le gâteau, les slides du support de la conférence ont eux-mêmes été réalisées avec Gutenberg !

Vous avez aimé ? Partagez !

2 commentaires

    • Bonjour @mad,

      L’extension Reusable Blocks Extended permet effectivement aussi d’afficher les blocs réutilisables avec des shortcodes, mais ce n’est au final qu’une fonctionnalité complémentaire de l’extension, en plus de la fonction PHP ou du widget dédié 🙂

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *