# Thème enfant d’un thème bloc : ce qui change par rapport au classique

> theme.json enfant fusionné avec celui du parent, surcharge de templates HTML et de parts, et les limites actuelles à connaître avant de se lancer.

- Auteur : Clément Hadrot
- Publié le : 2022-10-31
- Mis à jour le : 2022-10-31
- Catégorie : Thèmes
- URL : https://wpmoderne.dev.wordpress-developpement.fr/themes/theme-enfant-theme-bloc-differences-classique/

## L’essentiel

- Le theme.json enfant fusionne avec celui du parent, il ne le remplace pas
- Un template HTML enfant écrase entièrement l'équivalent du parent
- Les template parts se surchargent fichier par fichier

Après plusieurs années à créer des thèmes enfants classiques quasiment les yeux fermés, l'équipe a dû réapprendre les règles du jeu en construisant son premier thème enfant d'un thème bloc, pour un projet de librairie souhaitant partir de Twenty Twenty-Two sans en modifier directement les fichiers. Le mécanisme d'héritage n'est pas identique : là où un thème enfant classique se contente de surcharger des fichiers PHP un par un, un thème enfant bloc doit composer avec deux logiques de fusion différentes selon qu'il s'agit des réglages ou des templates.

Ce tutoriel ne reprend pas la création d'un thème enfant classique, déjà bien connue ; il se concentre uniquement sur ce qui change avec un thème parent basé sur `theme.json` et des templates blocs.

## Le theme.json enfant fusionne, il ne remplace pas

Première différence majeure : quand un thème enfant bloc déclare son propre `theme.json`, WordPress ne l'utilise pas à la place de celui du parent, il fusionne les deux, propriété par propriété. Si le thème enfant ne déclare qu'une nouvelle couleur d'accent, toutes les autres valeurs héritées du parent — tailles de police, largeurs de contenu, autres couleurs de palette — restent actives sans avoir besoin d'être recopiées :

```
{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"color": {
			"palette": [
				{ "slug": "accent", "color": "#7a3b2e", "name": "Brun librairie" }
			]
		}
	}
}
```

Le lien vers le thème parent se déclare de la même façon que pour un thème enfant classique, via `Template:` dans l'en-tête de `style.css` :

```
/*
Theme Name: Librairie du Marais Enfant
Template: twentytwentytwo
*/
```

Attention néanmoins : dans certains cas, notamment sur des tableaux de valeurs comme la palette de couleurs complète, cette fusion se comporte différemment selon la version de WordPress utilisée. À cette date, la palette de couleurs du thème enfant s'ajoute à celle du parent plutôt que de la remplacer entièrement, un détail qu'il vaut mieux vérifier directement dans l'éditeur de style global avant de supposer un comportement plutôt qu'un autre.

## Les templates HTML se surchargent entièrement, fichier par fichier

> L'essentiel à retenir : Le theme.json enfant fusionne avec celui du parent, il ne le remplace pas ; Un template HTML enfant écrase entièrement l'équivalent du parent ; Les template parts se surchargent fichier par fichier

À l'inverse des réglages, la logique des fichiers de templates suit un principe plus proche du thème enfant classique : si le thème enfant contient un fichier `block-templates/single.html`, celui-ci remplace intégralement l'équivalent du thème parent, sans aucune fusion partielle. Il faut donc recopier l'ensemble du contenu du template avant de le modifier, pas seulement la portion qu'on souhaite changer :

```
<!-- block-templates/single.html (thème enfant) -->
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group">
	<!-- wp:post-title /-->
	<!-- wp:post-featured-image /-->
	<!-- wp:post-content /-->
</main>
<!-- /wp:group -->

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

Sur le projet de la librairie, seul le fichier `single.html` a été surchargé pour ajouter un bloc d'affichage de l'image mise en avant absent du template d'origine de Twenty Twenty-Two ; tous les autres templates continuent d'être hérités tels quels depuis le thème parent, sans qu'aucun fichier correspondant n'existe dans le thème enfant.

## Les template parts suivent la même logique de remplacement complet

Les fichiers du dossier `block-template-parts/` se comportent exactement comme les templates : un `footer.html` présent dans le thème enfant remplace entièrement celui du parent. C'est ce qui a permis, sur ce projet, de ne surcharger que le pied de page pour y ajouter un bloc listant les horaires d'ouverture, sans devoir toucher à l'en-tête ni aux templates de contenu, restés hérités.

### Une limite rencontrée à cette période

Un point de friction identifié : il n'existait pas encore de moyen simple d'hériter partiellement d'un template — impossible, par exemple, de ne surcharger qu'un seul bloc à l'intérieur d'un template hérité sans recopier l'intégralité du fichier. Pour un thème parent aux templates complexes, cela signifie qu'une surcharge, même minime, oblige à maintenir une copie complète susceptible de diverger du parent lors d'une future mise à jour de celui-ci.

| Élément | Comportement d'héritage |
| --- | --- |
| theme.json (settings et styles) | Fusion propriété par propriété avec le parent |
| Templates HTML (block-templates/) | Remplacement complet, fichier par fichier |
| Template parts (block-template-parts/) | Remplacement complet, fichier par fichier |

> Fusionner les réglages et remplacer les templates : retenir cette seule distinction évite la majorité des surprises lors d'un premier thème enfant bloc.

## En résumé

Un thème enfant bloc combine deux logiques différentes selon la nature du fichier concerné : fusion fine pour `theme.json`, remplacement intégral pour les templates et les template parts. Cette distinction, une fois comprise, rend l'ensemble prévisible ; ignorée, elle mène presque toujours à des templates copiés inutilement ou à des surprises de palette de couleurs découvertes tardivement dans le projet.