Si vous êtes un utilisateur de WordPress et de Gutenberg, vous vous êtes sûrement déjà familiarisé avec le principe des blocs.
Pour construire vos pages et vos articles, vous avez à votre disposition désormais plein de blocs natifs vous permettant de créer plein de mises en pages différentes. Vous pouvez également ajouter via des extensions d’autres blocs à votre bibliothèque.
Mais connaissez-vous les compositions de blocs ?
Cette fonctionnalité encore sous exploitée de Gutenberg vous permet de gagner du temps dans vos mise en page de contenu tout en vous aidant à garder une cohérence graphique entre vos pages.
La composition de blocs Gutenberg, qu’est-ce c’est ?
Il s’agit d’une une disposition (d’où le mot composition) pré-construite de blocs.
Cette composition peut contenir à peu près tous les blocs : colonnes, titres, images, … ou des blocs provenant d’extension.
Certains thèmes WordPress vous proposent des premières compositions de blocs ce qui vous permet de commencer la mise en page de votre site.
Un peu comme les Design library de Stackable ou d’Elementor que les non-développeurs adorent car ils garantissent une conception rapide des pages.
Mais ici l’avantage est que c’est du WordPress natif donc aligné sur la structure globale du reste de WordPress 🙂
Pour nos clients, nous intégrons de plus en plus les compositions de blocs sur mesure afin de permettre aux contributeurs du site de pouvoir facilement reproduire des mises en forme prévues sur les maquettes et gagner beaucoup de temps. Ils conservent la flexibilité de Gutenberg, tout en conservant l’homogénéité graphique du site.
En fait, au lieu d’intégrer manuellement bloc par bloc pour reproduire une mise en page, vous pouvez ainsi créer facilement une disposition complexe de blocs en quelques secondes et l’appeler n’importe ou sur votre site !
Quelle est la différence entre une composition de bloc et un bloc réutilisable ?
Le bloc réutilisable est en ensemble de blocs (comme une composition tout à fait mais attendez la suite :)) sauvegardé et réutilisable sur toutes les pages du site (oui comme la composition toujours).
Mais le bloc réutilisable contient fond et forme : c’est-à dire que sur toutes les pages où vous placerez votre bloc, le contenu (y compris le texte) sera identique. Très pratique par exemple pour vos CTA (appel à l’action).
Si vous changez le texte, une couleur ou autre chose de votre bloc réutilisable, il sera changé sur toutes les pages ou ce bloc est utilisé.
A contrario, la composition de bloc contient uniquement la forme. Vous avez sur chaque page la même mise en page, le même style, mais pas le même contenu.
C’est plus clair ? 🙂
Où se trouvent les compositions de blocs Gutenberg
Depuis une page ou un article en haut à gauche, depuis le menu +, sur la droite des blocs, vous pouvez trouver vos compositions de blocs et les blocs réutilisables.
A partir de la version 5.9 de WordPress, vous aurez également la possibilité d’utiliser Explorer pour encore mieux visualiser vos compositions.
Comme les autres blocs, vous pouvez également utiliser lors de la rédaction de votre contenu le plus et accéder à la recherche pour obtenir votre composition.
Comment créer des compositions de blocs Gutenberg
Pouvoir avoir à disposition des compositions de blocs, vous avez plusieurs options, selon votre métier et votre niveau.
Cela peut être fait par des développeurs à l’aide de code (c’est notamment ce que Whodunit fait pour nos clients).
Comme l’article s’intitule Comment créer des compositions de blocs Gutenberg sans être développeur je vais sauter cette partie et vous conseiller cet article qui vous expliquera en détail comment développer vos compositions de blocs : https://fullsiteediting.com/lessons/introduction-to-block-patterns/
Afin de faciliter la création et l’utilisation des compositions de blocs Gutenberg, Whodunit a créé deux extensions gratuites disponible depuis WordPress.org
Reusable Blocks Extended
Cette première extension WordPress développée par notre CTO Jean-Baptiste Audras étend les fonctionnalités natives des blocs réutilisables.
En plus de vous permettre de gérer facilement vos blocs réutilisables, elle vous donne la possibilité en un clic de transformer un bloc réutilisable en composition.
Une fois que vous avez téléchargé, installé et activé le plugin, accédez à Blocs > Gérer les blocs réutilisables dans votre barre latérale WordPress.
Là, vous verrez une liste de vos blocs actuellement enregistrés. Pour en convertir un en composition de bloc, cliquez simplement sur le gros bouton bleu Convertir en composition 🙂
Et vous les retrouvez ensuite dans vos compositions.
Simple non? 🙂
MyWP Custom Patterns
Dans le cadre de notre solution MyWP, nous avons réalisé l’extension MyWP Custom Patterns qui vous propose de créer en un clic vos compositions de blocs.
Avec MyWP Custom Patterns, vous pouvez facilement :
- sauvegarder tout le contenu de votre page faite à partir de blocs Gutenberg sous forme de composition de blocs.
- créer une composition de blocs et la charger depuis votre page, article ou type de publication personnalisé.
- faire un clic sur un ou plusieurs blocs Gutenberg, et les ajouter en composition.
C’est très pratique notamment quand vous avez des modèles de pages ou d’articles à reproduire.
Par exemple, pour nos articles Podcast basés sur la même organisation de contenu, j’ai sauvegardé toute ma page comme une composition, que je peux appeler lorsque je crée un nouvel article (un peu comme avant avec les templates/gabarits et autres noms pour désigner les modèles de pages).
J’utilise aussi les catégories afin de bien organiser mes compositions dans mon back-office.
Pour Club Med, nous avons également utilisé cette extension car notre client avait différents modèles d’articles avec des mises en page complexes. Depuis un article, il peut appeler le modèle de son choix (la composition) et cela charge tous les blocs correspondants.
Sans se préoccuper de la mise en page. Il ne reste plus qu’à changer texte et image.
C’est à vous de jouer maintenant avec vos compositions de blocs Gutenberg, et si vous avez des questions, utilisez les commentaires ci-dessous.
