Niveau : Débutant
Objectif de cette astuce
Comprendre ce que sont les compositions (anciennement “blocs réutilisables”), savoir les créer depuis l’éditeur, les insérer dans n’importe quelle page ou article, maîtriser la différence entre composition synchronisée et non synchronisée, et les gérer depuis le gestionnaire dédié.
Pourquoi utiliser des compositions ?
Sur la plupart des sites WordPress, certains éléments reviennent sur plusieurs pages : un encart d’appel à l’action, un bloc de contact, une bannière promotionnelle, un encadré d’avertissement, une carte auteur. Sans compositions, on copie-colle ces blocs d’une page à l’autre — et quand il faut les modifier, on doit repasser sur chaque page une par une.
Les compositions résolvent ce problème : on crée le bloc une fois, on l’insère partout où il est nécessaire, et une seule modification suffit pour le mettre à jour sur l’ensemble du site.
Vocabulaire : Depuis WordPress 6.3, les “blocs réutilisables” ont été renommés “compositions” (patterns en anglais). Le fonctionnement est identique, seul le nom a changé.
Compositions et Atomic Design
Les compositions Gutenberg s’inscrivent naturellement dans la logique de l’Atomic Design, une méthodologie de design système formalisée par Brad Frost en 2013. Elle organise les interfaces en niveaux hiérarchiques, du plus petit élément au plus grand.
En appliquant cette logique à Gutenberg, les atomes sont les blocs natifs WordPress (Paragraphe, Image, Bouton).
Les molécules sont des groupes de blocs combinés qui forment une unité fonctionnelle — un CTA Newsletter (titre + texte + bouton), une carte auteur (photo + nom + biographie).
Les organismes sont des sections plus complexes — une section Hero, un bloc de pricing, une section équipe complète. C’est précisément à ces niveaux molécule et organisme que les compositions Gutenberg interviennent.
Compatibilité selon le type de thème :
Les compositions fonctionnent dans les deux contextes — thème classique et thème FSE. La différence est que sur un thème FSE (Twenty Twenty-Five et tout thème bloc), les compositions peuvent également être utilisées dans les templates (modèles de page) et dans les parties de modèle comme l’en-tête et le pied de page — ce qui n’est pas possible avec un thème classique.
Étape 1 — Créer une composition
La création se fait directement depuis l’éditeur Gutenberg, à partir d’un bloc ou d’un groupe de blocs existant.
Marche à suivre :
- Dans l’éditeur, sélectionner le bloc ou le groupe de blocs à transformer en composition (ex. un groupe contenant un titre, un texte et un bouton)
- Cliquer sur ⋮ dans la barre d’outils du bloc → “Créer un modèle de composition”
- Dans la modale qui s’ouvre, nommer la composition — choisir un nom clair et descriptif (ex. “CTA Newsletter”, “Bloc contact”, “Encadré avertissement”)
- Choisir si la composition est synchronisée ou non (voir ci-dessous)
- Cliquer sur Créer
Le bloc est maintenant enregistré comme composition et disponible dans toutes les pages et articles du site.
Conseil de nommage : Préfixer les compositions par leur type pour faciliter la recherche dans le panneau d’insertion — par exemple “CTA —”, “Bloc —”, “Section —”. Cela crée un classement naturel dans la liste.
Étape 2 — Insérer une composition
Une fois créée, la composition est accessible depuis le panneau d’insertion de blocs dans n’importe quel éditeur du site.
Marche à suivre :
- Dans l’éditeur, cliquer sur ⊕ (ajouter un bloc) pour ouvrir le panneau d’insertion
- Cliquer sur l’onglet “Compositions”
- Les compositions créées apparaissent dans la section “Vos compositions”. Cliquer sur celle à insérer — elle apparaît immédiatement dans le canvas
- Les compositions synchronisées sont identifiées par un badge 🔗 Synchronisée
Une composition synchronisée est reconnaissable dans l’éditeur à son contour bleu et à son badge — un rappel visuel que toute modification sera propagée sur tout le site.
Étape 3 — Comprendre la synchronisation
C’est le mécanisme central des compositions. Le choix entre composition synchronisée et non synchronisée détermine le comportement de chaque instance.
Composition synchronisée — une seule source, plusieurs instances. Modifier la composition originale depuis le gestionnaire met à jour automatiquement toutes les pages où elle est utilisée, sans aucune action supplémentaire. C’est la puissance de cet outil : changer le texte d’un CTA Newsletter sur une seule composition peut le mettre à jour sur 12 pages en une opération.
Composition non synchronisée — fonctionne comme un modèle ou un point de départ. À l’insertion, une copie indépendante est créée. Chaque instance peut être modifiée séparément sans affecter les autres. Utile pour des blocs qui doivent varier selon le contexte (un encart produit avec des prix différents par page, une section personnalisée par service).
| Synchronisée | Non synchronisée | |
|---|---|---|
| Modification propagée | Automatiquement sur toutes les instances | À modifier manuellement page par page |
| Personnalisation par page | Non possible | Chaque instance est indépendante |
| Cas d’usage | CTA, contact, bannière promo, avertissement | Template de départ, blocs contextuels |
Attention avant de modifier une composition synchronisée : vérifier dans le gestionnaire sur combien de pages elle est utilisée. Une modification impacte immédiatement toutes ces pages — y compris les pages publiées visibles par les visiteurs.
Étape 4 — Gérer les compositions
Le gestionnaire de compositions centralise toutes les opérations : modifier, dupliquer, supprimer, filtrer par type de synchronisation.
Accéder au gestionnaire :
Depuis le menu WordPress : Apparence → Éditeur → Compositions. Depuis l’éditeur de contenu : ⋮ (options en haut à droite) → “Gérer les compositions”.
Le gestionnaire affiche pour chaque composition son nom, son statut de synchronisation, le nombre de pages où elle est utilisée et la date de dernière modification. Ces informations permettent de décider quand et comment modifier une composition en connaissance de cause.
Modifier une composition : cliquer sur son nom pour l’ouvrir dans l’éditeur de blocs. Les modifications sont appliquées en temps réel sur toutes les instances (si synchronisée) dès l’enregistrement.
Dupliquer une composition : utile pour créer une variante à partir d’une composition existante — par exemple créer “CTA Newsletter — Version Noël” à partir de “CTA Newsletter” sans modifier l’original.
Supprimer une composition : les blocs déjà insérés dans les pages restent en place mais deviennent des blocs statiques indépendants, plus reliés à aucune composition.
Récapitulatif — Quand utiliser les compositions ?
Les compositions sont particulièrement efficaces dans ces situations :
Éléments identiques répétés sur plusieurs pages — CTA, bloc de contact, encart légal, bannière promotionnelle en cours, carte auteur.
Équipe multi-rédacteurs — créer des compositions validées par le responsable éditorial que les rédacteurs peuvent insérer sans risque de modifier la structure.
Mise à jour rapide — une promotion, une information urgente ou un changement de coordonnées peuvent être répercutés sur tout le site en modifiant une seule composition.
Cohérence graphique — garantir que certains éléments conservent toujours la même mise en forme, quelle que soit la page où ils apparaissent.
Ce qu’il faut retenir
Les compositions Gutenberg sont l’équivalent des composants réutilisables dans les frameworks de développement modernes — appliqués à l’édition WordPress sans code. La synchronisation est leur fonctionnalité clé : elle transforme une tâche de maintenance qui pourrait prendre une heure (mettre à jour un bloc sur 12 pages) en une opération de quelques secondes. Choisir entre synchronisée et non synchronisée est la décision principale à prendre à la création — synchronisée pour tout ce qui doit rester identique partout, non synchronisée pour tout ce qui sert de point de départ personnalisable.