Playbook
Gutenberg

Créer une bibliothèque de blocs réutilisables dans WordPress

Si tu bosses sur WordPress, tu as sûrement déjà pesté dans ton coin à refaire les mêmes mises en page encore et encore. Copier-coller des blocs d’une page à l’autre, tout en ajustant les styles et le contenu, ça devient vite une corvée. Et pire encore, si un client te demande de modifier une section récurrente sur tout le site, c’est le moment où tu commences à regretter certaines décisions.

Heureusement, Gutenberg a pensé à nous avec la notion de "Block Pattern" (composition de blocs chez les frenchies). Utilisés intelligemment, ils permettent de :

  • Éviter les répétitions inutiles et automatiser la mise en page.
  • Assurer une cohérence visuelle à travers toutes les pages.
  • Faciliter les mises à jour, sans avoir à retoucher chaque page à la main.
  • Gagner un temps fou en structurant des blocs réutilisables.

Maintenant, voyons comment WordPress gère tout ça sous le capot.

Où se trouvent les block patterns et comment WordPress les gère ?

Si tu ouvres l’éditeur Gutenberg, tu retrouveras les block patterns sous l’onglet Compositions. C’est là que WordPress te permet d’ajouter en un clic des sections pré-construites. Mais derrière cette simplicité, il y a une implémentation technique bien pensée.

Sous le capot, comment ça marche ?

Un block pattern est une simple structure de blocs enregistrée sous forme de JSON en base de données.

WordPress permet d’enregistrer ces patterns de 3 manières différentes.

Avant WordPress 5.8, on passait obligatoirement par register_block_pattern() en PHP.

Depuis le Full Site Editing (FSE), on peut maintenant déclarer directement des fichiers HTML dans un dossier /patterns/ d’un thème ou via l'interface d'administration de WordPress.

Surtout, ne confonds pas composition et bloc réutilisable !

  • Composition = une mise en page préconçue qu’on peut insérer et modifier à chaque utilisation, un bête copier/coller quoi.
  • Bloc réutilisable = une instance synchronisée, où toute modification impacte toutes les occurrences sur le site.

Alors forcément pour rien arrangé dans cette confusion, à la sortie de WordPress 6.3, en août 2023, ils ont renommé les "blocs réutilisables" en "composition synchronisée". Techniquement rien a changé, UXment parlant fallait bien regrouper ça au meme endroit pour simplifier la compréhension.

Désormais tout cette granularité se joue à une checkbox près, cochée ou non.

WordPress propose aussi des compositions de blocs depuis son répertoire officiel

Depuis WordPress 5.9, l’éditeur de blocs peut suggérer des block patterns directement issus du répertoire officiel de WordPress. Cela permet d’accéder à une large sélection de compositions prêtes à l’emploi pour structurer rapidement un site.

Si cette fonctionnalité n’est pas pertinente pour ton projet, sache que tu peux la désactiver en ajoutant ce filtre dans functions.php :

remove_theme_support( 'core-block-patterns' );

Cela empêchera WordPress de charger et suggérer des modèles externes (qui ne respectent pas nécessairement la charte graphique de ton client).

Alors, maintenant que tu as compris les bases, voyons comment créer tes propres compositions de blocs.

Les 3 manières d’ajouter un block pattern

1. Via l’interface d’administration (méthode ultra simple)

Si tu veux créer un pattern sans coder :

  1. Sélectionne tes blocs dans l’éditeur Gutenberg.
  2. Clique sur les trois points ⋮ dans la barre d'outils et choisis "Créer une composition".
  3. Donne-lui un nom et valide.
  4. Il apparaît dans Compositions, prêt à être utilisé.

Pratique, mais limité : ces compositions peuvent se répéter de projet en projet. Il est grand temps de les industrialiser.

2. Via un thème (méthodes HTML & PHP)

Méthode PHP (compatible avec tous les thèmes)

Si ton thème ne supporte pas le Full Site Editing, ou si tu veux tout gérer en PHP, utilise register_block_pattern() :

register_block_pattern(
    'mon-theme/hero-section',
    array(
        'title'       => __( 'Section Hero', 'mon-theme' ),
        'description' => __( 'Une section d’en-tête avec un titre et un bouton.', 'mon-theme' ),
        'content'     => '<!-- wp:group {"align":"full","className":"hero-section"} -->
<div class="wp-block-group alignfull hero-section">
    <!-- wp:heading {"level":2} -->
    <h2>Bienvenue sur notre site</h2>
    <!-- /wp:heading -->
 
    <!-- wp:paragraph -->
    <p>Découvrez nos services.</p>
    <!-- /wp:paragraph -->
 
    <!-- wp:buttons -->
    <div class="wp-block-buttons">
        <!-- wp:button -->
        <div class="wp-block-button"><a class="wp-block-button__link">En savoir plus</a></div>
        <!-- /wp:button -->
    </div>
    <!-- /wp:buttons -->
</div>
<!-- /wp:group -->',
    )
);

Ajoute ce code dans functions.php, et ton pattern sera immédiatement disponible.

Méthode HTML (pour les thèmes Full Site Editing)

Si ton thème supporte le FSE, tu peux ajouter des block patterns directement dans un dossier /patterns/ :

mon-theme/
├── patterns/
│   ├── hero-section.html
│   ├── testimonials.html
│   └── cta.html

Voici un exemple de fichier hero-section.html :

<!--
Title: Section Hero
Slug: mon-theme/hero-section
Categories: mise-en-page
Description: Une composition pour une section d’en-tête.
-->
<!-- wp:group {"align":"full","className":"hero-section"} -->
<div class="wp-block-group alignfull hero-section">
    <!-- wp:heading {"level":2} -->
    <h2>Bienvenue sur notre site</h2>
    <!-- /wp:heading -->
 
    <!-- wp:paragraph -->
    <p>Découvrez nos services.</p>
    <!-- /wp:paragraph -->
 
    <!-- wp:buttons -->
    <div class="wp-block-buttons">
        <!-- wp:button -->
        <div class="wp-block-button"><a class="wp-block-button__link">En savoir plus</a></div>
        <!-- /wp:button -->
    </div>
    <!-- /wp:buttons -->
</div>
<!-- /wp:group -->

WordPress détecte automatiquement ce fichier et l’ajoute à l’éditeur dans la bibliothèque de bloc sous l'onglet "Compositions".

3. Via un plugin (pour partager des patterns sur plusieurs sites)

Si tu veux un catalogue de block patterns accessible sur plusieurs sites, l’idéal est d’utiliser un plugin.

  1. Crée un plugin avec cette structure :
mon-plugin/
├── patterns/
│   └── hero-section.php
└── mon-plugin.php
  1. Dans le fichier à la racine mon-plugin.php :
<?php
/**
 * Plugin Name: Bibliothèque de compositions
 */
 
function selina_load_block_pattern() {
    register_block_pattern_category( 'custom-patterns', array( 'label' => __( 'Compositions personnalisées', 'mon-plugin' ) ) );
 
    require plugin_dir_path(__FILE__) . 'patterns/hero-section.php';
}
add_action( 'init', 'selina_load_block_pattern' );

Une fois activé, le plugin rendra tous ses block patterns disponibles sur le site.

En bref, voici ce qu'il se passe dans les coulisses :

  1. WordPress charge le plugin.
  2. À l’initialisation init, WordPress execute la fonction selina_load_block_pattern() :
    • Crée une catégorie de block patterns appelée “Compositions personnalisées”.
    • Charge le fichier hero-section.php contenant la définition du bloc synchronisé.
  3. Ce pattern sera alors accessible dans l’éditeur Gutenberg sous la catégorie “Compositions personnalisées”.

Et puisque t'es gentil, voici quelques améliorations possible pour avoir une extension mieux structurée :

  • Séparer l’enregistrement de la catégorie et le chargement des patterns pour une meilleure organisation.
  • Ajouter plus de patterns en incluant plusieurs fichiers require dans selina_load_block_pattern().
  • Vérifier si le fichier du bloc réutilisable existe avant de le charger pour éviter quelques surprises inutiles :
$pattern_file = plugin_dir_path(__FILE__) . 'patterns/hero-section.php';
if ( file_exists($pattern_file) ) {
    require $pattern_file;
}

Conclusion

Les block patterns sont une des meilleures fonctionnalités de WordPress pour gagner en productivité et structurer tes sites de façon efficace. Grâce à eux, tu peux éviter la répétition fastidieuse de blocs et créer des mises en page modulaires et cohérentes.

En résumé :

  • Gagne du temps en réutilisant des sections pré-construites.
  • Garde une cohérence visuelle sur tout ton site.
  • Facilite les mises à jour sans prise de tête.
  • Adapte tes compositions en fonction de ton projet (interface, thème ou plugin).

Que tu sois développeur freelance ou en agence, bien maîtriser les block patterns te permettra de structurer tes projets WordPress de manière plus efficace.

Alors, prêt à tester ça sur ton prochain projet ?