Comment créer et gérer des compositions de blocs dans WordPress ?

Une fois. Deux fois. Dix fois. Cinquante fois. Créer le même contenu sur des dizaines et des dizaines de publications différentes peut vite devenir fastidieux. Et surtout, c’est long. Très long. 

Cette perte de temps et d’énergie, vous pouvez l’éviter en quelques clics grâce à une fonctionnalité super pratique : les compositions de WordPress.

Vous voulez créer un petit encart de texte à intégrer dans tous vos articles de blog ? Cette fonctionnalité peut vous faciliter la vie. Idem si vous souhaitez ajouter un appel à l’action ou un tableau personnalisé sur toutes vos pages.

Ça vous botte ? À la fin de cet article, vous saurez comment créer, personnaliser et gérer une composition de blocs comme un as. Prêt ? Suivez le guide.

Hébergez votre site chez o2switch

Faites comme WPMarmite, choisissez o2switch. Non seulement les performances sont au rendez-vous mais le support est exceptionnel.

ESSAYEZ O2SWITCH

Qu’est-ce qu’une composition de blocs sur WordPress ?

Une composition de blocs (block pattern, en anglais) est un ensemble de blocs (ex : un bloc Titre + un bloc Image + un bloc Bouton) créé à l’aide de l’éditeur de contenu – Gutenberg – de WordPress.

Une fois son contenu et sa mise en forme enregistrés sous l’option « Créer une composition », vous pouvez choisir de synchroniser cet ensemble de blocs afin de le réutiliser sur les différentes publications de votre site : articles, pages et autres types de contenus personnalisés (custom post types), via un simple interrupteur.

Si vous choisissez de la synchroniser, alors, lorsque vous la modifierez, le contenu de cette composition sera automatiquement mis à jour partout où elle est intégrée sur votre site.

Un bloc Gutenberg est un conteneur proposé par l’éditeur de contenu de WordPress (Gutenberg). Il permet d’afficher du texte, des médias, des widgets et des contenus embarqués. Il permet aussi de créer des structures et de personnaliser le style de vos publications.

Les blocs réutilisables, disponibles avant la sortie de la version 6.3 de WordPress en août 2023, ont été renommées en « compositions synchronisées ». Vous pouvez les retrouver dans l’outil d’insertion de blocs, onglet « Compositions synchronisées », ou dans l’Éditeur de site, menu « Compositions ».
Les éléments de modèle sont également devenus des compositions depuis WordPress 6.3, à retrouver dans l’Éditeur de site (Apparence > Éditeur), menu « Compositions ».
Pour en savoir plus sur WordPress 6.3, visionnez notre vidéo à ce sujet, sur la chaîne YouTube de WPMarmite.

Zoom sur les compositions synchronisées

Avant d’entrer dans les détails de création d’une composition sur WordPress, faisons le point sur certaines spécificités des compositions synchronisées : 

• la fonctionnalité « compositions synchronisées » est présente nativement dans l’éditeur de contenu de WordPress depuis la sortie de sa version 6.3, en août 2023, date à laquelle elle a remplacé l’ancienne fonctionnalité « blocs réutilisables » ; 
• une composition synchronisée permet d’éviter de recréer à chaque fois un contenu identique sur tout votre site ; 
• les compositions synchronisées servent la plupart du temps à modifier des blocs situés dans la zone de contenu principale de vos publications ;
• le contenu d’une composition synchronisée est synchronisé sur tout votre site WordPress. Si vous modifiez une composition synchronisée à un endroit de votre site (ex : sur un article de blog), la modification se répercutera sur toutes les autres publications contenant votre composition synchronisée ; 
• une composition synchronisée se crée et s’enregistre en quelques clics, directement depuis l’interface de l’éditeur de contenu de WordPress ou de l’Éditeur de site (on va y revenir).

Le saviez-vous ? Vous pouvez copier-coller des compositions de blocs sur votre site à partir du répertoire officiel proposé par WordPress.

Pourquoi utiliser une composition synchronisée ?

La fonctionnalité composition synchronisée de WordPress (ex bloc réutilisable) va présenter un intérêt pour vous si vous avez l’habitude d’utiliser le même contenu sur plusieurs pages ou articles de votre site. 

Grâce à elle, vous n’aurez plus besoin de recréer un bloc à chaque ajout d’un nouveau type de contenu.

Pour vous aider à y voir plus clair, voici plusieurs cas de figure pour lesquels l’usage d’une composition est judicieux. Pensez-y si vous devez ajouter :  

• un encart « Auteur » à la fin de tous vos articles de blog, avec une petite photo de vous et un texte de présentation succinct ; 
• des liens vers vos réseaux sociaux à la fin de vos articles de blog, afin d’inciter vos lecteurs à vous suivre sur ces plateformes ; 
• des appels à l’action (CTA, call to action) pour inciter vos visiteurs à réaliser une action particulière comme l’inscription à votre newsletter, ou le téléchargement d’un livre blanc ; 
• un formulaire de contact à différents endroits stratégiques, en plus de votre page Contact. On peut penser à l’intégration de ce formulaire sur une page Services et/ou À Propos, par exemple ;
• un formulaire de réservation ou des horaires d’ouverture pour votre commerce sur vos publications ;
• des encarts contenant des liens affiliés pour promouvoir des produits et services que vous recommandez à vos lecteurs.

C’est tout bon pour vous ? Alors, passons tout de suite au plat de résistance !

Si vous vous servez d’Elementor, sachez que ce constructeur de page propose une extension se rapprochant des compositions synchronisées proposées par WordPress. Appelé Elementor Blocks for Gutenberg, ce plugin permet d’ajouter directement dans une page ou un article un ensemble de widgets assemblés avec Elementor.
Chez WPMarmite, on s’en sert pour nos différents appels à l’action, à l’image de celui-ci pour promouvoir notre formation sur Elementor, justement. Regardez 👇👇👇:

Formez-vous à Elementor

Apprenez à créer votre site WordPress grâce au constructeur de page le plus populaire du marché.

Découvrir la formation

Comment créer une composition de blocs sur WordPress ?

Voici la méthode étape par étape pour créer une composition en quelques clics, très simplement.

Pour les besoins de ce tutoriel, on va se servir d’un cas pratique : la création d’un encart d’appel à l’action.

Étape 1 : Créer ou modifier un contenu

Pour commencer, ajoutez un nouvel article en allant dans Articles > Ajouter (vous pouvez aussi modifier l’article ou la page de votre choix).

Donnez un titre à votre publication, puis intégrez-y le texte de votre choix.

Étape 2 : Créer une composition sur WordPress

Pour concevoir notre encart d’appel à l’action, nous avons besoin d’agréger plusieurs blocs en un. Pour cela, on va se servir du bloc « Bannière », qui permet d’ajouter une image d’arrière-plan très facilement.

Mais vous pouvez aussi opter pour le bloc « Groupe », afin de grouper plusieurs blocs dans le même conteneur.

Ajoutez le bloc « Bannière » en passant par l’inserteur de bloc, en haut à gauche de votre page :

Cliquez sur le bouton « Téléverser » pour incorporer l’image d’arrière-plan (background) de votre choix. Pour l’exemple, j’ai trouvé une image sur la banque d’images libres de droits appelée Unsplash.

Poursuivez en rédigeant le titre de votre choix, puis personnalisez-le en passant par les réglages du bloc :

Il ne vous reste plus qu’à ajouter un bloc « Bouton » à l’intérieur de votre bloc « Bannière ». Pour cela, cliquez n’importe où à l’intérieur du bloc « Bannière » afin de faire apparaître un inserteur, et intégrez le bloc « Bouton ». 

Personnalisez ce bloc exactement comme vous l’avez fait pour votre titre. Il est par exemple possible de modifier sa taille, sa couleur d’arrière-plan, ses marges, sa bordure etc.

Au final, voilà le résultat que vous pourriez obtenir :

Vous pouvez bien sûr créer une composition unique, composée d’un seul bloc. La procédure est exactement la même que pour une composition de plusieurs blocs. Sauf que cette fois, vous ajoutez le bloc que vous voulez (ex : bloc « Paragraphe », bloc « Tableau », bloc « Image » etc.).

Étape 3 : Enregistrer la composition

Lorsque vous êtes satisfait du résultat, cliquez sur le bloc « Bannière » pour faire apparaître les options du bloc (les trois petits points). 

Cliquez dessus et sélectionnez l’option « Créer une composition ». Donnez-lui un nom (ex : « Mon CTA »), choisissez de la synchroniser ou non, puis cliquez sur « Enregistrer » :

Bravo, votre composition WordPress (synchronisée ou non) est désormais sauvegardée et prête à être utilisée dans les publications de votre choix.

Pour information, il existe une autre option pour ajouter des compositions sur votre site WordPress à partir de l’éditeur de contenu. Lorsque vous éditez un article ou une page, cliquez sur les options de la page (trois petits points) en haut, à droite. Puis, au niveau de la section « Outils », sélectionnez « Gérer les compositions ». Vous vous trouvez ainsi sur l’interface de l’Éditeur de site. Créez votre bloc en cliquant sur l’icône « + » à côté du menu « Compositions » :

Enfin, sachez que vous pouvez convertir une composition en blocs « normaux » en cliquant sur celle-ci, puis sur l’icône du bloc représentant les 3 petits points, et en choississant l’option « Détacher la composition » :

Étape 4 : Ajouter une composition dans une publication

Maintenant, imaginons que vous souhaitez ajouter votre composition à la fin de votre nouvel article de blog. 

Créez un nouvel article (vous connaissez à présent la procédure). Sélectionnez l’endroit où vous souhaitez intégrer votre composition. On peut imaginer la glisser à la fin de votre publication, ou bien au milieu du contenu. 

Ensuite, dirigez-vous dans l’inserteur de blocs. Dans l’onglet représentant deux losanges superposés (chiffre 2 sur la capture ci-dessous), vous retrouverez vos compositions synchronisées (ex blocs réutilisables), tandis que l’onglet « Compositions » (chiffre 1) vous affiche le reste des compositions disponibles.

Vous y retrouverez les compositions (non synchronisées, donc) que vous avez créées dans la première catégorie : « Mes compositions ». Les catégories suivantes contiennent des compositions prêtes à l’emploi, réparties en différentes catégories : Texte, Galerie, En-têtes, etc.

Il vous suffit de cliquer sur la composition de votre choix pour l’ajouter dans votre contenu. Si cette fonctionnalité de compositions vous plaît et répond à vos besoins, vous obtiendrez rapidement une liste qui peut s’avérer assez conséquente.

Il sera alors utile de gérer vos blocs au fur et à mesure, afin de les organiser au mieux.

Je vous en dis plus dans la partie suivante.

Votre site WordPress est précieux. Nous en prenons soin.

WPSitter gère pour vous l’entretien, la sécurité, la résolution de bugs et l’optimisation de votre site WordPress 24h/24, 7j/7.

Contacter WPSitter

Comment utiliser vos compositions sur WordPress ?

Comment gérer vos compositions de blocs dans l’administration de WordPress ?

Afin de gérer au mieux vos compositions, vous devez passer par l’écran appelé « Compositions ». Pour cela, vous pouvez passer par l’éditeur de contenu, et cliquer sur le bouton « Gérer mes compositions », dans l’onglet « Compositions synchronisées » (ex « Blocs réutilisables ») de l’inserteur de blocs :

Vous tomberez alors sur une liste de toutes les compositions que vous avez créées. Sont notamment recensés les éléments suivants : 

• le nom de la composition ; 
• sa date de création.

Notez que vous pouvez aussi choisir d’afficher ou non la date, puis de choisir le nombre d’éléments par page en cliquant sur « Options de l’écran » :

Les actions que vous pouvez effectuer sur une composition s’affichent au survol de la souris sur le nom de la composition concernée. Vous pouvez au choix : 

• modifier le bloc ; 
• le supprimer (Corbeille) ; 
• l’exporter en fichier JSON, afin de pouvoir l’importer sur un autre site, par exemple.

Enfin, en sélectionnant plusieurs compositions sur WordPress, vous pouvez procéder à des actions groupées. Il est par exemple possible de supprimer plusieurs compositions à la fois, ou bien de les modifier.

Cette dernière action permet par exemple de modifier l’état de votre composition (publiée, privée, en attente de relecture, brouillon). 

Comment gérer vos compositions de blocs dans l’Éditeur de site ?

Vous pouvez également gérer toutes vos compositions dans l’Éditeur de site (dans le menu Apparence > Éditeur), rubrique « Mes compositions ».

Elles y sont rangées dans deux catégories distinctes : « Synchronisée » et « Standard ».

À partir de cette interface, vous pouvez cliquer sur les trois petits points en dessous de votre composition afin de :

• la renommer ;
• la dupliquer ;
• la supprimer.

Pour en modifier le contenu, cliquez sur votre composition, et faites les ajustements nécessaires.

Conclusion

Tout au long de ces lignes, vous avez découvert les compositions de blocs de WordPress. 

Vous savez désormais comment créer et gérer une composition sur votre site. Servez-vous-en à l’envi si vous avez besoin de créer des sections de contenu identiques à plusieurs endroits de votre site. 

Vous gagnerez un temps précieux, tout en assurant une uniformité au niveau de la présentation visuelle de vos publications.

Si vous avez l’habitude de vous servir des compositions, partagez-nous vos retours et autres bonnes pratiques en publiant un commentaire. 😉

Recevez gratuitement les prochains articles et accédez à des ressources exclusives. Plus de 20000 personnes l'ont fait, pourquoi pas vous ?

Je m'inscris

À propos de l'auteur

Équipe WPMarmite