Créer son premier thème bloc avec Twenty Twenty-Two, pas à pas

WordPress 5.9 est sorti fin janvier, et il change vraiment la manière dont on construit un thème. Fini les get_header(), get_footer() et autres the_loop() disséminés dans des fichiers PHP : la Full Site Editing introduit les thèmes blocs, où toute la structure du site (en-tête, contenu, pied de page) se définit avec des blocs Gutenberg, dans des fichiers HTML.

Twenty Twenty-Two, le thème par défaut livré avec cette version, est le premier thème par défaut entièrement construit sur ce nouveau modèle. C’est une excellente base pour comprendre comment fonctionne un thème bloc de l’intérieur. Dans cet article, je vous montre comment en construire un vous-même, à partir de zéro, en vous appuyant sur la structure de Twenty Twenty-Two.

Ce qui change fondamentalement

Un thème classique repose sur la hiérarchie de templates PHP (index.php, single.php, page.php…) et sur le customizer pour les réglages visuels. Un thème bloc remplace ces fichiers PHP par des fichiers HTML contenant des commentaires de bloc, et centralise les réglages dans un fichier unique : theme.json.

La structure minimale d’un thème bloc

Un thème bloc fonctionnel tient dans une poignée de fichiers. Voici l’arborescence minimale que je pars créer pour un nouveau projet :

mon-theme-bloc/
├── style.css
├── theme.json
├── templates/
│   ├── index.html
│   ├── single.html
│   └── page.html
└── parts/
    ├── header.html
    └── footer.html

Le fichier style.css garde son rôle habituel : il porte l’en-tête de déclaration du thème (nom, auteur, version) lu par WordPress, même si les styles eux-mêmes sont largement pilotés par theme.json désormais.

• style.css : métadonnées du thème (obligatoire, comme pour un thème classique)
• theme.json : réglages globaux et styles, désormais obligatoire pour activer pleinement la Full Site Editing
• templates/ : les gabarits complets d’une page, équivalents des anciens fichiers PHP
• parts/ : les portions réutilisables comme l’en-tête ou le pied de page

Le dossier templates, cœur du thème

Chaque fichier du dossier templates/ correspond à un type de gabarit, exactement comme dans la hiérarchie de templates classique, mais écrit en HTML avec des commentaires de bloc au lieu de PHP. Voici un index.html minimal :

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group">
  <!-- wp:query -->
    <!-- wp:post-template -->
      <!-- wp:post-title /-->
      <!-- wp:post-excerpt /-->
    <!-- /wp:post-template -->
  <!-- /wp:query -->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Chaque bloc est déclaré avec la syntaxe wp:nom-du-bloc, suivie éventuellement d’un objet JSON d’attributs. C’est exactement ce que Gutenberg génère quand on assemble ces blocs visuellement dans l’éditeur de site, mais on peut tout à fait les écrire à la main.

Le dossier parts pour les éléments réutilisables

Le dossier parts/ contient les portions de gabarit partagées entre plusieurs templates, typiquement l’en-tête et le pied de page. Un header.html basique ressemble à ceci :

<!-- wp:group {"tagName":"header"} -->
<header class="wp-block-group">
  <!-- wp:site-title /-->
  <!-- wp:navigation /-->
</header>
<!-- /wp:group -->

Le bloc wp:site-title affiche automatiquement le titre du site configuré dans les réglages, et wp:navigation insère le menu de navigation géré directement dans l’éditeur de site, sans passer par wp_nav_menu().

theme.json, le fichier qui pilote tout

Depuis WordPress 5.9, theme.json devient quasiment incontournable pour un thème bloc. Il définit les couleurs disponibles, la typographie, les espacements, et active ou désactive certaines fonctionnalités de l’éditeur. Un exemple minimal :

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primary", "color": "#1e3a5f", "name": "Bleu principal" }
      ]
    }
  }
}

Sans ce fichier, WordPress reste dans un mode de compatibilité limité : l’éditeur de site complet ne s’active pleinement qu’en présence d’un theme.json et d’un dossier templates/ valide.

Mon conseil pour démarrer : ne partez jamais d’une page blanche. Copiez la structure de Twenty Twenty-Two, videz les fichiers un par un, et reconstruisez votre thème bloc pièce par pièce. C’est la meilleure façon de comprendre comment chaque fichier interagit avec les autres.

Pour aller plus loin

Ce thème minimal n’utilise quasiment aucun PHP, hormis éventuellement un functions.php pour enregistrer des supports de thème comme add_theme_support( 'wp-block-styles' ). C’est une rupture nette avec dix-huit ans d’habitudes de développement de thèmes WordPress. La Full Site Editing est encore jeune et certains outils du customizer classique restent plus complets pour l’instant, mais la direction est claire : les futurs thèmes par défaut seront tous construits sur ce modèle bloc.