Le Full Site Editing WordPress : la révolution de la construction de thèmes
Le Full Site Editing (FSE) WordPress a atteint une maturité remarquable en 2026. Introduit expérimentalement dans WordPress 5.9, il est désormais la méthode recommandée pour créer des thèmes sur WordPress 6.5+. Les constructeurs de page classiques comme Elementor et Divi restent populaires, mais une génération de développeurs découvre les avantages considérables du FSE natif.
Le FSE repose sur trois piliers : les Block Themes (thèmes entièrement construits avec des blocs), le Site Editor (éditeur visuel du template complet, pas juste du contenu), et les Block Patterns (compositions de blocs réutilisables). Ensemble, ils permettent de créer des thèmes WordPress sans écrire de PHP, uniquement avec JSON et des blocs HTML structurés.
Ce guide couvre les concepts fondamentaux pour les débutants et les techniques avancées (theme.json, block.json, variation de styles) pour les développeurs souhaitant maîtriser le FSE et créer des thèmes professionnels en 2026.
Créer votre premier Block Theme : structure minimale
Un Block Theme minimal nécessite seulement 4 fichiers : `style.css` (avec le header de thème WordPress), `index.html` dans le dossier `templates/` (template par défaut), `functions.php` (pour déclarer le support des features FSE), et `theme.json` (configuration globale du design).
Le fichier `templates/index.html` est le coeur du FSE. Plutôt que du PHP traditionnel, il contient des commentaires HTML spéciaux qui référencent des blocs WordPress : « . Ces balises sont parsées par WordPress pour assembler la page finale. L’éditeur de site les rend visuellement modifiables dans le navigateur.
La puissance du FSE vient de la séparation claire entre le contenu (blocs dans les posts) et la mise en page (blocs dans les templates). Un éditeur de contenu ne peut modifier que les zones de contenu ; un designer peut modifier les templates sans toucher au PHP. Cette séparation des responsabilités est un bond architectural majeur pour WordPress.
theme.json : le fichier de configuration qui change tout
Le fichier `theme.json` est le coeur technique du FSE. Il définit : la palette de couleurs globale, la typographie (familles, tailles), les espacements (padding, margin standards), les styles par défaut pour chaque bloc (paragraphes, headings, boutons), et les variations de styles (dark mode, high contrast).
Une innovation majeure de `theme.json` : toutes les valeurs définies sont automatiquement exposées comme CSS Custom Properties et disponibles dans l’interface d’édition. Définir ` »palette »: [{« color »: « #0F172A », « name »: « Marine », « slug »: « marine »}]` crée automatiquement `–wp–preset–color–marine: #0F172A` en CSS et ajoute ‘Marine’ dans le sélecteur de couleur Gutenberg. Zéro code PHP nécessaire.
Les styles globaux configurés dans `theme.json` peuvent être overridés par l’utilisateur via Site Editor → Styles, et ces overrides sont sauvegardés dans la base de données sans modifier les fichiers du thème. C’est une architecture propre : le thème définit les valeurs par défaut, l’utilisateur les personnalise, et les deux couches restent indépendantes.
Block Patterns : créer des compositions réutilisables
Les Block Patterns sont des groupes de blocs pré-assemblés que les éditeurs peuvent insérer en un clic. Un hero section, une grille de témoignages, un CTA deux colonnes — ces compositions récurrentes peuvent être définies une fois et réutilisées sur tout le site, avec du contenu modifiable mais une mise en page cohérente.
Créer un Block Pattern se fait soit en PHP (fonction `register_block_pattern`), soit via le fichier `patterns/mon-pattern.php` dans votre thème (auto-découverte depuis WordPress 6.0). Le contenu du fichier est du HTML de commentaires de blocs, facilement généré en construisant visuellement dans l’éditeur puis en copiant le markup HTML.
Les Block Patterns peuvent être synchronisés (modifications répercutées partout) ou non synchronisés (chaque instance est indépendante). Les patterns synchronisés sont l’équivalent FSE des ‘global elements’ d’Elementor — modifiez le pattern source et tous les sites qui l’utilisent se mettent à jour. Parfait pour des éléments de marque qui doivent rester cohérents.
Migrer un thème classique vers le FSE : stratégie progressive
La migration complète d’un thème classique vers FSE est un projet significatif, mais elle peut se faire progressivement. La première étape recommandée : créer un Block Theme minimal qui hérite de votre thème classique via la fonctionnalité de thème enfant hybride. Vous bénéficiez du Site Editor pour les nouvelles pages sans modifier l’existant.
La deuxième étape : migrer vos templates les plus consultés en commençant par le template d’articles (single.html) et la page d’accueil (front-page.html). Utilisez le bloc ‘HTML classique’ pour wrapper temporairement les zones qui utilisent encore des shortcodes PHP — ils continueront de fonctionner le temps de la migration.
La migration complète du CSS est souvent la partie la plus longue. Les classes CSS générées par FSE (`wp-block-*`, `has-*-color`) ont une spécificité différente des classes de thème classique. Prévoyez une phase de recette visuelle approfondie et utilisez les outils de comparaison de screenshots (Playwright, BackstopJS) pour détecter les régressions.
Performances et SEO avec les Block Themes FSE
Un avantage méconnu des Block Themes est leur impact positif sur les performances. Le markup HTML généré par les blocs natifs est plus propre et plus léger que celui des constructeurs tiers, qui ajoutent souvent 50 à 150 Ko de JS et CSS même sur les pages qui n’utilisent qu’une fraction de leurs fonctionnalités.
Les Block Themes FSE supportent nativement le ‘Block-based styles loading’ : seuls les CSS des blocs effectivement présents sur une page sont chargés. Une page qui n’utilise pas le bloc Tableau ne charge pas les styles du tableau. Cette granularité réduit le CSS inutile de 40 à 70 % selon la complexité du thème.
Pour le SEO, les Block Themes génèrent un HTML sémantiquement correct avec les balises `
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"color": {
"palette": [
{"color": "#0F172A", "name": "Marine", "slug": "marine"},
{"color": "#3B82F6", "name": "Bleu", "slug": "bleu"},
{"color": "#F8FAFC", "name": "Blanc cassé", "slug": "blanc-casse"},
{"color": "#1E293B", "name": "Ardoise", "slug": "ardoise"}
]
},
"typography": {
"fontFamilies": [
{
"fontFamily": "Inter, system-ui, sans-serif",
"name": "Inter",
"slug": "inter",
"fontFace": [{
"fontFamily": "Inter",
"fontWeight": "300 700",
"fontStyle": "normal",
"src": ["file:./assets/fonts/Inter-Variable.woff2"]
}]
}
],
"fontSizes": [
{"size": "0.875rem", "name": "Petit", "slug": "small"},
{"size": "1rem", "name": "Normal", "slug": "normal"},
{"size": "1.25rem", "name": "Moyen", "slug": "medium"},
{"size": "1.875rem", "name": "Grand", "slug": "large"},
{"size": "3rem", "name": "Très grand", "slug": "x-large"}
]
},
"spacing": {
"spacingSizes": [
{"size": "1rem", "name": "S", "slug": "s"},
{"size": "2rem", "name": "M", "slug": "m"},
{"size": "4rem", "name": "L", "slug": "l"},
{"size": "8rem", "name": "XL", "slug": "xl"}
]
}
},
"styles": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--inter)",
"fontSize": "var(--wp--preset--font-size--normal)",
"lineHeight": "1.7"
},
"color": {
"background": "var(--wp--preset--color--blanc-casse)",
"text": "var(--wp--preset--color--marine)"
}
}
}
Commentaires (0)
Laisser un commentaire
Les commentaires sont modérés. Questions WordPress, cybersécurité ou dev web bienvenues.