En 2019, nous avons travaillé sur une extension nommée Reusable Blocks Extended, qui permet d’étendre la fonctionnalité Blocs réutilisables de l’éditeur Gutenberg. Nous avions présenté cette extension lors du WordCamp Marseille 2019. Elle est disponible gratuitement sur le répertoire officiel des extensions WordPress.

Aujourd’hui je vous propose une astuce qui peut être très utile si votre site ne tourne pas sur Gutenberg mais sur l’éditeur classique ou sur un autre constructeur de pages. Nous allons voir comment profiter de la fonctionnalité blocs réutilisables de Gutenberg même si Gutenberg n’est pas activé sur le site ! C’est la magie de Noël ! 🎅 😅

À quoi servent les blocs réutilisables ?

Le principe des blocs réutilisables, c’est de permettre d’enregistrer un ensemble de blocs de contenus de façon indépendante afin de pouvoir le réutiliser sur n’importe quel contenu du site.

Le contenu et la mise en forme de chaque instance de chaque bloc réutilisable est alors synchronisé à l’échelle du site : si vous modifiez le bloc réutilisable, cela modifie son contenu et sa mise en forme sur chaque page ou article où le bloc est utilisé.

Voici les 4 grands principes des blocs réutilisables :

  • Simplicité : une interface accessible dans l’éditeur, sans compétence technique
  • Universalité : les blocs réutilisables sont disponibles sur tous les contenus du site
  • Synchronisation : le contenu des blocs est synchronisé, si vous modifiez le contenu du bloc réutilisable, toutes les occurrences du bloc sur le site sont modifiées
  • Désynchronisation : la synchronisation peut être coupée en un clic en utilisant l’option « convertir en bloc normal ». Son contenu est alors modifiable sans altérer les autres contenus utilisant le même bloc réutilisable d’origine

Pour en savoir plus, consultez la vidéo de notre conférence sur les blocs réutilisables Gutenberg, donnée au WordCamp Marseille 2019.

Cette fonctionnalité est donc assez puissante. Pour rendre encore plus intéressante, notre extension Reusable Blocks Extended ajoute un écran de gestion des blocs réutilisables et plusieurs fonctionnalités étendues, notamment un affichage de l’aperçu des blocs réutilisables, la possibilité de convertir les blocs réutilisables en compositions de blocs ou de les utiliser via une fonction PHP, via un widget dédié ou encore via un shortcode. C’est cette dernière fonctionnalité qui nous intéresse 🤓

Tutoriel : bénéficier des blocs réutilisables de Gutenberg sur un site n’utilisant pas l’éditeur Gutenberg ✨

Hé oui, c’est possible ! Et même plutôt simple.

À quoi ça sert ? A plein de choses !

Voici comment implémenter en 5 minutes un bloc réutilisable fait sur Gutenberg sur des publications sur lesquelles l’éditeur de bloc n’est pas activé

Temps nécessaire : 5 minutes.

Pour mettre en place une composition de blocs Gutenberg sur un type de publication n’utilisant pas l’éditeur de blocs, suivez ces quelques étapes.

  1. Installer l’extension Reusable Blocks Extended et l’activer sur le site

    Vous pourrez la trouver sur le répertoire officiel des extensions WP, ou en recherchant « Reusable Blocks Extended » dans le champs de recherche de l’écran Extensions > Ajouter de votre interface d’administration.

  2. Aller dans le menu « Blocs réutilisables » dans l’administration de votre site WordPress

    Sur cet écran, tous vos blocs réutilisables seront listés.

  3. Créer un nouveau bloc réutilisable en cliquant sur le bouton « Ajouter »

    Magie : Gutenberg est disponible pour ce type de publication (et uniquement celui-ci) 🌟

  4. Revenir sur l’écran de gestion des blocs réutilisables

  5. Récupérer le code court de votre bloc réutilisable

    Tout simplement en copiant le code fourni sur l’interface.

  6. Créer un nouvel article ou modifier un article existant sur lequel vous souhaitez insérer votre bloc réutilisable

  7. Collez-y le shortcode où vous souhaitez qu’il apparaisse, enregistrez l’article…

    Et voilà, c’est tout ! Si vous modifiez votre bloc réutilisable, cela synchronisera sa modification à tous les endroits où il est utilisé !