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 !
- Vous avez désactivé Gutenberg car vous préférez l’ancien éditeur, mais vous avez un besoin ponctuel de mise en page avancée que vous souhaitez faire avec Gutenberg, sans pour autant l’activer pour toutes les pages et articles de votre site.
- Vous avez désactivé Gutenberg car vous avez peur de casser vos contenus existants (pourtant, pas d’inquiétude à avoir de ce côté-là, les blocs existants sont automatiquement migrés vers le bloc « Classique » une fois Gutenberg activé).
- Vous avez désactivé Gutenberg car vous utilisez un autre constructeur de page / page builder, mais vous aimeriez bien pouvoir ponctuellement utiliser un bloc Gutenberg spécifique qui n’existe pas dans votre page builder.
- Vous avez désactivé Gutenberg car votre site utilise Advanced Custom Fields de partout pour la gestion des contenus, mais vous avez ponctuellement un besoin de mise en page plus libre : insérez un bloc réutilisable que vous pourrez modifier avec Gutenberg !
- Vous utilisez WooCommerce qui malheureusement n’active pas encore l’éditeur de blocs pour les pages produits, alors que vous avez besoin de faire une mise en page avancée pour votre page produit ? Pas de souci, préparez un bloc réutilisable et insérez-le dans le champs « contenu » de votre page produit.
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.
- 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.
- 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.
- 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) 🌟
- Revenir sur l’écran de gestion des blocs réutilisables
- Récupérer le code court de votre bloc réutilisable
Tout simplement en copiant le code fourni sur l’interface.
- Créer un nouvel article ou modifier un article existant sur lequel vous souhaitez insérer votre bloc réutilisable
- 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é !
