Chapitre 3.2 — Compositions, motifs & blocs synchronisés

⏱️ TL;DR — Au-dessus du bloc unitaire, WordPress offre des mécanismes de réutilisation : la composition (imbriquer des blocs dans Groupe/Colonnes), les motifs (patterns : agencements pré-conçus, insérés puis modifiables librement), les blocs synchronisés (source unique propagée partout), et les styles de blocs (variantes visuelles nommées). Bien les distinguer évite les confusions coûteuses et prépare le développement : en Partie 6/8, vous enregistrerez vos propres motifs et styles.

🎯 Objectifs

• Composer par imbrication (Groupe, Colonnes, Ligne/Pile).
• Distinguer motif (copie) et bloc synchronisé (source unique).
• Utiliser les styles de blocs (variantes).
• Voir comment ces notions se déclarent en code (aperçu Parties 6 & 8).

1. La composition par imbrication

Les blocs conteneurs structurent la page :

L’imbrication crée un arbre — exactement l’InnerBlocks que vous coderez (Partie 8). La vue en liste permet de sélectionner et réordonner les blocs imbriqués sans se perdre.

2. Motifs (patterns) : des agencements réutilisables

Un motif est un ensemble de blocs pré-assemblés (ex. une section « héros », une grille de tarifs, un pied de page). On l’insère depuis l’onglet Motifs de l’inséreur ; une fois inséré, il devient du contenu normal, librement modifiable — et indépendant des autres insertions du même motif.

• WordPress et les thèmes fournissent des motifs.
• Il existe un répertoire de motifs en ligne à copier-coller.
• On peut créer ses propres motifs (en code : register_block_pattern(), Partie 6) — très utile pour livrer à un client une bibliothèque de sections prêtes à l’emploi, cohérentes avec sa charte.

3. Blocs synchronisés : une source unique

Un bloc synchronisé (anciennement « bloc réutilisable ») a une source unique : modifiez-le une fois, il change partout où il est inséré. Idéal pour un CTA, un encart de mentions, un bandeau promo identiques sur plusieurs pages.

⚠️ Piège — motif vs bloc synchronisé. Le motif est copié (chaque insertion vit sa vie) ; le bloc synchronisé est partagé (une seule source). Attendre l’un et avoir l’autre est une confusion fréquente : « j’ai modifié mon encart sur une page et il a changé partout ! » (c’était synchronisé) ou « j’ai corrigé le motif mais les anciennes pages n’ont pas bougé » (c’était une copie). Choisissez consciemment.

💡 Pour un dev React — Le bloc synchronisé = un composant partagé (une seule définition, réutilisée). Le motif = un snippet à coller (comme copier du JSX depuis un starter, puis le diverger). Même intuition que « composant réutilisable » vs « bout de code d’exemple ».

4. Styles de blocs (variantes visuelles)

Un style de bloc est une variante visuelle nommée d’un même bloc. Exemple natif : le bloc Citation propose Par défaut et Uni. Le bloc Bouton peut avoir Rempli / Contour. Choisir un style ajoute simplement une classe CSS (is-style-…).

On peut enregistrer ses propres styles en code (register_block_style(), Partie 6) : par exemple un style « Encadré » pour les paragraphes, ou « Bouton fantôme » — le client choisit alors la variante d’un clic, sans toucher au CSS. C’est un excellent moyen de livrer une charte exploitable par des non-développeurs.

5. Ce que ça prépare pour le développement

En livrant à un client une bibliothèque de motifs + des styles de blocs cohérents avec sa charte, vous transformez WordPress en un système de design exploitable sans code — une prestation à forte valeur.

✏️ Exercices

1. Vous voulez un même bandeau « Soldes » identique sur 8 pages, modifiable en un endroit. Motif ou bloc synchronisé ?
2. Vous livrez à un client 5 sections types (héros, tarifs, FAQ…) qu’il pourra adapter page par page. Motif ou bloc synchronisé ?
3. Comment offrir à un client une variante « bouton contour » d’un clic, sans qu’il touche au CSS ?

🧠 Quiz de révision

Chapitre suivant : Full Site Editing : l’éditeur de site.