Chapitre 6.5 — Créer un thème bloc (FSE)

⏱️ TL;DR — Un thème bloc (FSE) remplace les fichiers PHP par : un style.css (en-tête), un theme.json (le design system, ch. 3.4), un dossier templates/ (gabarits en HTML de blocs) et parts/ (en-tête, pied). Pas de Boucle PHP à écrire : les gabarits utilisent des blocs de thème (Query Loop, Post Title…). C’est plus déclaratif, plus rapide à produire, et c’est la direction de WordPress. On construit ici le fil rouge theme-nextdev.

🎯 Objectifs

• Connaître la structure minimale d’un thème bloc.
• Écrire un theme.json de base.
• Créer des gabarits et parties en HTML de blocs.
• Comprendre ce qui remplace functions.php/la Boucle.

1. Structure minimale

theme-nextdev/
├── style.css          ← en-tête (déclare le thème)
├── theme.json         ← design system (obligatoire de fait)
├── templates/
│   ├── index.html     ← gabarit universel (obligatoire)
│   ├── single.html
│   └── page.html
├── parts/
│   ├── header.html
│   └── footer.html
├── functions.php      ← optionnel (enqueue, supports, motifs…)
└── screenshot.png

Un thème bloc valide au minimum = style.css (en-tête) + templates/index.html. Mais en pratique, theme.json est indispensable (il pilote tout le design) et on ajoute des parties/gabarits.

style.css (identique à un thème classique, mais sans styles obligatoires) :

/*
Theme Name: NextDev
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: theme-nextdev
*/

2. theme.json : le cœur

Rappel (ch. 3.4) : theme.json déclare palette, typo, espacements, largeurs, supports, styles par défaut. Un exemple compact :

{
  "version": 3,
  "settings": {
    "layout": { "contentSize": "720px", "wideSize": "1100px" },
    "color": {
      "palette": [
        { "slug": "primary", "color": "#3858e9", "name": "Primaire" },
        { "slug": "base",    "color": "#ffffff", "name": "Fond" },
        { "slug": "contrast","color": "#111111", "name": "Texte" }
      ]
    },
    "typography": {
      "fontSizes": [
        { "slug": "medium", "size": "1rem",   "name": "Normal" },
        { "slug": "large",  "size": "1.5rem", "name": "Grand" },
        { "slug": "x-large","size": "2.25rem","name": "Très grand" }
      ]
    },
    "spacing": { "units": ["px", "rem", "%", "vw", "vh"] },
    "appearanceTools": true
  },
  "styles": {
    "color": { "background": "var(--wp--preset--color--base)", "text": "var(--wp--preset--color--contrast)" },
    "typography": { "lineHeight": "1.6" },
    "elements": {
      "link":   { "color": { "text": "var(--wp--preset--color--primary)" } },
      "button": { "color": { "background": "var(--wp--preset--color--primary)", "text": "#fff" } }
    }
  }
}

appearanceTools: true active d’un coup les contrôles de bordures, dimensions, etc., dans l’éditeur.

💡 Pour un dev React — theme.json est votre design tokens + config Tailwind réunis, en JSON. Les gabarits (ci-dessous) sont des arbres de composants sérialisés. Un thème bloc, c’est un système de design déclaratif + des compositions de blocs — beaucoup plus proche de votre façon de penser qu’un thème PHP classique. Souvent, on démarre un thème bloc plus vite qu’un thème classique.

3. Les gabarits en HTML de blocs

Un gabarit est un fichier .html contenant la sérialisation de blocs (ch. 3.1), avec les blocs de thème. templates/index.html minimal :

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
 
  <!-- wp:query {"queryId":1,"query":{"perPage":10,"postType":"post"}} -->
  <div class="wp-block-query">
    <!-- wp:post-template -->
      <!-- wp:post-title {"isLink":true} /-->
      <!-- wp:post-excerpt /-->
    <!-- /wp:post-template -->
    <!-- wp:query-pagination -->
      <!-- wp:query-pagination-previous /-->
      <!-- wp:query-pagination-next /-->
    <!-- /wp:query-pagination -->
  </div>
  <!-- /wp:query -->
 
</main>
<!-- /wp:group -->
 
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

• wp:template-part inclut parts/header.html / parts/footer.html.
• wp:query + wp:post-template = la Boucle en blocs (le Query Loop, ch. 3.3) : plus de PHP à écrire.
• wp:post-title, wp:post-excerpt = les données du post courant.

parts/header.html :

<!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group">
  <!-- wp:site-title /-->
  <!-- wp:navigation /-->
</div>
<!-- /wp:group -->

⚠️ Piège — Écrire cette sérialisation à la main est fastidieux et source d’erreurs. La bonne méthode : composer le gabarit dans l’éditeur de site (Apparence → Éditeur), puis exporter ou copier le markup dans le fichier .html. On code rarement ce HTML de blocs à la main ; on le génère via l’éditeur, puis on le versionne.

4. Ce qui remplace functions.php et la Boucle

functions.php reste utile dans un thème bloc pour : enregistrer des motifs/styles de blocs (ch. 6.6), enqueue d’assets spécifiques, supports non couverts par theme.json. Mais il est beaucoup plus léger.

5. Tester le thème bloc

• Activez-le ; ouvrez Apparence → Éditeur : vous éditez gabarits/parties/styles visuellement.
• Vérifiez que templates/index.html existe (sinon le thème n’a pas de filet de sécurité).
• Ajustez theme.json et observez l’effet dans l’onglet Styles.
• Rappel (ch. 3.3) : les éditions faites dans l’éditeur sont stockées en base et surchargent vos fichiers — pour repartir des fichiers, Effacer les personnalisations.

✏️ Exercices

1. Quels sont les fichiers/dossiers clés d’un thème bloc et à quoi sert chacun ?
2. Comment obtient-on une liste paginée d’articles dans un gabarit bloc, sans PHP ?
3. Quelle est la méthode recommandée pour produire le HTML de blocs d’un gabarit ?

🧠 Quiz de révision

Chapitre suivant : Motifs, styles & parties de gabarit.