Chapitre 6.6 — Motifs, styles & parties de gabarit

⏱️ TL;DR — Pour livrer un thème exploitable par un non-développeur, vous fournissez des motifs (sections pré-conçues, enregistrées via un fichier patterns/*.php ou register_block_pattern()), des styles de blocs (variantes visuelles nommées, register_block_style()), et éventuellement des variations de theme.json (thèmes de couleur alternatifs). Ces briques transforment votre thème en système de design : le client compose ses pages en cliquant, dans le respect de la charte. C’est une prestation à forte valeur (Partie 13).

🎯 Objectifs

• Enregistrer des motifs (patterns) livrés avec le thème.
• Créer des styles de blocs custom.
• Proposer des variations de styles globaux.
• Comprendre l’intérêt « produit » de ces briques.

1. Les motifs (patterns) livrés avec le thème

Un motif est un agencement de blocs prêt à insérer (ch. 3.2). Dans un thème, le moyen le plus simple est un fichier dans patterns/ avec un en-tête de commentaire :

<?php
/**
 * Title: Section héros
 * Slug: theme-nextdev/hero
 * Categories: featured
 * Description: Titre, sous-titre et bouton sur fond primaire.
 */
?>
<!-- wp:cover {"overlayColor":"primary","minHeight":420} -->
<div class="wp-block-cover">
  <div class="wp-block-cover__inner-container">
    <!-- wp:heading {"level":1,"textColor":"base"} -->
    <h1 class="has-base-color has-text-color">Votre titre percutant</h1>
    <!-- /wp:heading -->
    <!-- wp:paragraph {"textColor":"base"} -->
    <p class="has-base-color has-text-color">Un sous-titre qui explique la promesse.</p>
    <!-- /wp:paragraph -->
    <!-- wp:buttons -->
    <div class="wp-block-buttons"><!-- wp:button --><div class="wp-block-button"><a class="wp-block-button__link">Commencer</a></div><!-- /wp:button --></div>
    <!-- /wp:buttons -->
  </div>
</div>
<!-- /wp:cover -->

WordPress découvre automatiquement les fichiers de patterns/ (thème bloc). Alternative en code (ou pour un plugin) : register_block_pattern() sur init.

💡 Pour un dev React — Un motif = un snippet de composition (comme un preset de layout dans un design kit). En livrer une bibliothèque cohérente avec la charte, c’est offrir au client des sections prêtes à assembler — l’équivalent d’un Storybook de sections, mais utilisable directement dans l’éditeur, sans code.

2. Les styles de blocs (variantes)

Un style de bloc ajoute une variante visuelle sélectionnable dans le panneau Styles d’un bloc. On l’enregistre (souvent dans functions.php) et on lui associe du CSS :

add_action( 'init', function () {
    register_block_style( 'core/quote', array(
        'name'         => 'encadre',
        'label'        => __( 'Encadré', 'theme-nextdev' ),
        'inline_style' => '.wp-block-quote.is-style-encadre{border:2px solid var(--wp--preset--color--primary);padding:1rem;border-left-width:6px;}',
    ) );
} );

• Choisir ce style ajoute la classe is-style-encadre au bloc.
• On peut fournir le CSS via inline_style (rapide) ou une feuille enqueue (plus propre pour du volume).
• Utile pour offrir des variantes « maison » (bouton fantôme, carte ombrée, titre souligné) sans que le client touche au CSS.

3. Variations de styles globaux

Un thème bloc peut proposer plusieurs variations de theme.json dans un dossier styles/ : chacune est un petit JSON qui surcharge couleurs/typo. Le client les sélectionne en un clic dans Styles → Parcourir les styles (« mode sombre », « palette pastel »…).

// styles/sombre.json
{
  "version": 3,
  "title": "Sombre",
  "settings": {},
  "styles": {
    "color": { "background": "#111", "text": "#eee" },
    "elements": { "link": { "color": { "text": "#8ab4ff" } } }
  }
}

Un même thème offre ainsi plusieurs « ambiances » sans dupliquer le thème.

4. Verrouiller / guider (optionnel)

Livrer de l’autonomie sans chaos : on peut verrouiller des blocs (empêcher le déplacement/suppression) dans un motif/gabarit ("lock":{"move":true,"remove":true}), restreindre les réglages via theme.json, ou proposer une palette limitée. Le but : le client compose dans un cadre cohérent, sans casser le design.

⚠️ Piège — trop de liberté = incohérence. Sans garde-fous (palette large, tous les réglages ouverts, aucun motif), le client produit vite des pages hétérogènes. Une partie de la valeur d’un thème pro est justement de cadrer : palette maîtrisée, motifs prêts, styles nommés. Vous vendez de la cohérence, pas seulement de la liberté.

5. L’intérêt « produit »

Motifs + styles + variations font d’un thème un système de design exploitable sans code :

• pour un client : autonomie encadrée (il compose ses pages) ;
• pour un thème vendu (Partie 13) : c’est un argument de vente majeur (« 20 sections prêtes, 3 ambiances, styles maison ») ;
• pour vous : moins de tickets « peux-tu changer cette section ? », donc de la maintenance en moins.

✏️ Exercices

1. Un client veut pouvoir insérer lui-même une « section tarifs » cohérente sur plusieurs pages. Quelle brique lui livrez-vous ?
2. Vous voulez offrir une variante « bouton contour » sélectionnable dans l’éditeur. Quelle fonction, et qu’ajoute-t-elle au bloc ?
3. Comment proposer un « mode sombre » sélectionnable en un clic dans un thème bloc ?

🧠 Quiz de révision

Chapitre suivant : Distribuer un thème.