« On peut vraiment se passer d’un thème sur mesure pour ça ? » La question venait du gérant d’une agence immobilière locale, habitué à voir chaque site web se traduire par plusieurs semaines de développement PHP dédié. La réponse, en ce début d’année 2021, tenait à une fonctionnalité relativement récente : les patterns de blocs, introduits dans WordPress 5.5 quelques mois plus tôt.
Plutôt que de commander un thème sur mesure avec ses gabarits figés, l’agence a vu sa page d’accueil composée entièrement à partir de patterns : un bandeau de recherche de biens, une grille de trois annonces phares, un bloc « pourquoi nous choisir » en trois colonnes, une citation d’un client satisfait, une carte des zones couvertes en texte structuré, et un pied de page de contact.
Pourquoi les patterns plutôt qu’un thème sur mesure
Le raisonnement tenait en un point simple : la structure de cette page d’accueil n’avait rien de spécifique à un métier particulier. Un bandeau de recherche, une grille d’annonces, une section de réassurance et une citation client se retrouvent sur d’innombrables sites vitrines, quel que soit le secteur. Reconstruire ces éléments depuis zéro en PHP aurait représenté un effort disproportionné par rapport au résultat visé.
- Chaque pattern reste modifiable directement dans l’éditeur, sans compétence technique requise pour l’agence.
- Le temps de conception s’est trouvé concentré sur l’assemblage plutôt que sur le développement de gabarits.
- Aucune dépendance à un futur éditeur de site : les patterns fonctionnent sur un thème classique ordinaire.
La composition, pattern par pattern
Le bandeau de recherche a été construit à partir d’un pattern maison enregistré via register_block_pattern(), combinant un bloc de groupe en pleine largeur, un titre et un champ de recherche stylisé. La grille de trois annonces reposait sur un pattern de colonnes, dupliqué et rempli manuellement avec les trois biens à mettre en avant.
register_block_pattern(
'agence/bandeau-recherche',
array(
'title' => __( 'Bandeau de recherche de biens', 'agence' ),
'categories' => array( 'agence-immobiliere' ),
'content' => '<!-- wp:cover {"dimRatio":40,"align":"full"} -->
<div class="wp-block-cover alignfull">
<div class="wp-block-cover__inner-container">
<!-- wp:heading {"textAlign":"center"} -->
<h2 class="has-text-align-center">Trouvez votre prochain logement</h2>
<!-- /wp:heading -->
</div>
</div>
<!-- /wp:cover -->',
)
);
Ce que cette approche a demandé côté équipe
Une discipline de nommage
Chaque pattern a reçu un préfixe cohérent, agence/, afin d’éviter toute collision avec les patterns fournis par défaut dans WordPress ou dans le thème parent choisi comme base.
Un temps de calage visuel non négligeable
L’assemblage n’a pas éliminé tout effort de mise en forme : plusieurs allers-retours ont été nécessaires pour ajuster les espacements entre patterns consécutifs, chacun ayant été conçu indépendamment des autres.
Une limite assumée sur les patterns synchronisés
Cette fonctionnalité n’existant pas encore à ce stade, chaque pattern reste une copie indépendante une fois inséré : modifier le pattern source dans le thème ne répercute rien sur les instances déjà utilisées sur la page publiée.
Le résultat pour l’agence
La page d’accueil a été livrée en une fraction du temps qu’aurait demandé un développement de gabarit sur mesure, tout en laissant à l’agence la possibilité de réorganiser elle-même les sections si son offre évoluait, sans dépendre d’une nouvelle intervention de développement.
Un pattern bien conçu déplace la valeur du développeur : moins de code répété, plus de réflexion sur des blocs de construction que le client pourra réellement s’approprier.
Notre verdict
Pour une page d’accueil composée de sections génériques et réutilisables, les patterns de blocs constituent déjà, début 2021, une alternative crédible à un développement de thème sur mesure classique. La limite principale reste l’absence de synchronisation entre patterns, qui obligera à revenir manuellement sur chaque page si un ajustement global de design devient nécessaire plus tard.
