Avec l’arrivée du Full Site Editing dans WordPress, il existe une nouvelle façon de développer des thèmes WordPress, et on a donc maintenant deux grands types de thèmes qui vont fonctionner différemment : les thèmes dit “classiques“, et les Block Themes (ou thèmes basés sur les blocs)
Les thèmes classiques sont les thèmes comme on les a toujours connus avant WordPress 5.9. Ils sont constitués de différents modèles PHP exploitant une certaine hiérarchie des modèles, et d’une ou plusieurs feuilles de styles (style.css) et d’un ou plusieurs fichiers de fonctions personnalisées (functions.php).
Ils ont l’avantage d’être très simples à réaliser : les modèles PHP ne demandent pas de grandes connaissances en PHP, et WordPress fournit tous les templates_tags nécessaires pour afficher la majorité des informations dont on pourrait avoir besoin. Sinon, il suffit de créer nos fonctions personnalisées dans functions.php. Nos styles vont dans style.css, ou d’autres feuilles de styles que l’on pourra charger au besoin.
D’ailleurs, si vous souhaitez apprendre à en créer, je vous invite à jeter un oeil à ma formation Développer son thème WordPress Classique, qui vous montrera tout de A à Z !
Les blocks themes, quant à eux, sont constitués de modèles HTML qui référencent des blocs. C’est-à-dire que le site entier est construit à l’aide des blocs natifs disponibles dans l’éditeur de WordPress: groupes, colonnes, rangées, titre, logo, boucle de requête, image, etc…
Le code dans les modèles va ressembler à ça :
<!-- wp:template-part {"slug":"header","theme":"my-block-theme"} /-->
<!-- wp:query {"queryId":30,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"displayLayout":{"type":"list"},"layout":{"type":"default"}} -->
<div class="wp-block-query">
<!-- wp:post-template -->
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide">
<!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%">
<!-- wp:post-featured-image {"isLink":true} /-->
</div>
<!-- /wp:column -->
<!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%">
<!-- wp:post-title {"isLink":true} /-->
<!-- wp:post-excerpt /-->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
<!-- /wp:post-template -->
</div>
<!-- /wp:query -->
<!-- wp:template-part {"slug":"footer","theme":"my-block-theme"} /-->En gros, on a quelques balises HTML pour les blocs qui en ont besoin, mais surtout des commentaires HTML pour que WordPress puisse reconnaître les blocs et lire leurs attributs.
Concernant les styles, les block themes exigent aussi la présence d’un fichier style.css, mais il contiendra moins de styles qu’un thème classique, grâce à un fichier magique : theme.json.
Le fichier theme.json
Le fichier theme.json est simplement le fichier de configuration de votre thème.
Il va contenir les réglages de votre thème (couleurs disponibles, options de typographie disponibles, etc… ) et les styles à appliquer au site et aux blocs. Il va permettre aussi d’éviter toute la série de add_theme_support() que l’on doit ajouter dans un thème classique pour intégrer votre thème à l’éditeur.
Sa structure de base est très simple :
{
"version": 2,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"settings": {},
"styles":{}
}Vous fournissez un numéro de version, qui sera 2 depuis WordPress 5.9, une entrée settings qui va contenir les réglages de votre thème et une entrée styles qui va contenir les styles à appliquer au site et aux blocs.
L’entrée settings
Dans l’entrée settings, vous aller lister toutes les options disponibles globalement pour votre site et si besoin les options spécifiques aux blocs.
colors
Le premier besoin le plus courant est la mise en place d’une palette de couleurs :
{
"version": 2,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"settings": {
"color": {
"palette": [
{
"slug": "purple",
"color": "#e803fc",
"name": "Purple"
},
{
"slug": "yellow",
"color": "#fcf403",
"name": "Yellow"
},
...
]
},
},
"styles": {
"color":{
"text":"var(--wp--preset--color--purple)"
},
}
}Dans settings, on déclare une palette avec nos couleurs, et dans styles, on applique notre purple au texte globalement. La variable CSS --wp--preset--color--purple sera automatiquement imprimée par WordPress sur la balise <body>.
Quand vous déclarez une valeur de réglage, WordPress crée la variable CSS correspondant au slug automatiquement. Ensuite, c’est à vous de l’utiliser dans l’entrée styles ou dans votre feuille de styles.
Toujours dans settings.color, vous pouvez aussi déclarer vos gradients et vos duotones disponibles.
{
"version": 2,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"settings": {
"color": {
"palette": [ ... ],
"gradients": [
{
"slug": "purple-to-yellow",
"gradient": "linear-gradient(160deg, var(--wp--preset--color--purple), var(--wp--preset--color--yellow))",
"name": "Purple to Yellow"
}
],
"duotone": [
{
"slug": "purple-and-yellow",
"colors": [ "#e803fc", "#fcf403" ],
"name": "Purple and yellow"
}
]
},
},
"styles": { ... }
}typography
Vous pouvez aussi déclarer vos réglages de typographie: plus spécifiquement les polices disponibles et les tailles de texte disponibles.
{
"version": 2,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"settings": {
"color": { ... },
"typography": {
"fontSizes": [
{
"slug": "small",
"size": "1rem",
"name": "Small"
},
{
"slug": "medium",
"size": "1.5rem",
"name": "medium"
}
...
],
"fontFamilies": [
{
"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
"name": "System Font",
"slug": "system-font"
},
{
"fontFamily": "Muli, sans-serif",
"name": "Muli",
"slug": "muli",
"fontFace": [
{
"fontFamily": "Muli",
"fontStyle": "normal",
"fontWeight": "400",
"src": [
"file:./assets/fonts/muli/muli-Regular.woff2"
]
},
{
"fontFamily": "Muli",
"fontStyle": "italic",
"fontWeight": "400",
"src": [
"file:./assets/fonts/muli/muli-Regular-Italic.woff2"
]
},
{
"fontFamily": "Muli",
"fontStyle": "normal",
"fontWeight": "700",
"src": [
"file:./assets/fonts/muli/muli-Bold.woff2"
]
},
{
"fontFamily": "Muli",
"fontStyle": "italic",
"fontWeight": "700",
"src": [
"file:./assets/fonts/muli/muli-Bold-Italic.woff2"
]
}
]
}
]
},
},
"styles": { ... }
}Ici, on déclare nos tailles de polices et deux polices disponibles : Muli et la police système. Muli est hébergée dans le thème, il faut donc fournir à WordPress la déclaration @font-face qu’il doit générer, et fournir le chemin vers les sources pour les différentes variantes.
layout
La gestion des alignements wide et full se fait en fournissant une entrée layout.
{
"version": 2,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"settings": {
"color": { ... },
"typography": { ... },
"layout" : {
"contentSize": "768px",
"wideSize": "1024px"
}
},
"styles": { ... }
}Cela permet définir la largeur du contenu par défaut, et la largeur des blocs ayant l’alignement wide. Des variables CSS --wp--style--global--content-size et --wp--style--global--wide-size seront imprimées sur le devant du site. Par contre, à vous de les exploiter ! C’est un réglage qui ne fonctionnera pas automagiquement comme un réglage de typographie ou de couleur.
spacing
Pour activer les réglages d’espacement pour les blocs les supportant, on ajoute une entrée spacing.
{
"version": 2,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"settings": {
"color": { ... },
"typography": { ... },
"layout" : { ... },
"spacing": {
"padding": true,
"margin": true,
"units": [ "px", "em", "rem", "vh", "vw", "%" ]
}
},
"styles": { ... }
}Des classes CSS –wp–preset–spacing–20, –wp–preset–spacing–30 etc… qui définissent l’échelle d’espacement par défaut sont générées automatiquement.
On peut aussi définir une échelle d’espacement personnalisée. Pour ça, vous avez deux possibilités, vous pouvez soit passer des valeurs spécifiques sous spacingSizes, comme pour les tailles de texte :
{
"version": 2,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"settings": {
"color": { ... },
"typography": { ... },
"layout" : { ... },
"spacing": {
"padding": true,
"margin": true,
"units": [ "px", "em", "rem", "vh", "vw", "%" ],
"spacingSizes": [
{
"name": "Extra-small",
"size": "0.25rem",
"slug": "xs"
},
{
"name": "Small",
"size": "0.5rem",
"slug": "s"
},
{
"name": "Medium",
"size": "1rem",
"slug": "m"
},
{
"name": "Large",
"size": "2rem",
"slug": "l"
},
...
]
},
},
"styles": { ... }
}Cela génère des variables CSS de la forme --wp--preset--spacing--${slug}.
Ou alors, au lieu de définir un ensemble de valeurs spécifiques, vous pouvez définir la façon dont les valeurs sont calculées les unes par rapport aux autres, et laisser WordPress générer l’échelle pour vous.
{
"version": 2,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"settings": {
"color": { ... },
"typography": { ... },
"layout" : { ... },
"spacing": {
"padding": true,
"margin": true,
"units": [ "px", "em", "rem", "vh", "vw", "%" ],
"spacingScale": {
"operator": "+",
"increment": 0.25,
"steps": 10,
"mediumStep": 1,
"unit": "rem"
}
},
},
"styles": { ... }
}Ici, on définit une échelle en rem (paramètre unit), de 10 pas (paramètre steps). A chaque pas, on ajoutera (paramètre operator) 0.25rem (paramètre increment) à la valeur du pas précédent. La valeur intermédiaire par défaut (mediumStep) vaut 1rem. Cette valeur correspondra à la variable CSS --wp--preset--spacing--50. Les autres variables CSS, de --wp--preset--spacing--10 à -wp--preset--spacing--100 (ou plus) seront générées automatiquement.
Le paramètre operator peut aussi valoir *, si vous souhaitez multiplier les valeurs à chaque pas au lieu de les incrémenter.
Désactiver certains réglages
Exactement comme avec les add_theme_support(), vous pouvez désactiver certaines fonctionnalités. Il suffit de passer false.
{
"version": 2,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"settings": {
"color": {
"custom": false,
"customGradient": false,
"link": false,
},
"typography": {
"dropCap": false,
"lineHeight": false
},
"layout" : { ... },
"spacing": {
"customSpacingSize": false,
"padding": false,
"margin": false,
},
},
"styles": { ... }
}Ici, on désactive tout ! Par contre, notez que les réglages de couleur des liens, de marges et paddings, et de hauteur de ligne sont désactivés par défaut. Donc pour les activer, il faut les passer explicitement sur true.
Variables CSS personnalisées
Vous pouvez aussi générer des valeurs pour des variables CSS personnalisées dans une entrée custom, que vous pourrez utiliser dans votre feuille de styles, ou dans l’entrée styles de ce fichier theme.json.
{
"version": 2,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"settings": {
"color": { ... },
"typography": {...},
"custom": {
"base-line-height": "1.5"
}
},
"styles": {
"color":{
"text":"var(--wp--preset--color--purple)",
"lineHeight":"var(--wp--custom--base-line-height)"
},
}
}Ici, on déclare une variable personnalisée base-line-height, et WordPress va automatiquement créer une variable CSS nommée --wp--custom--base-line-height, et lui affecter la bonne valeur. On peut donc l’utiliser dans notre feuille de styles ou dans l’entrée styles.
Réglages globaux et réglages des blocs
Vous pouvez aussi déclarer des réglages par bloc, en fournissant une entrée blocks dans settings. Par exemple, on va déclarer une palette de couleurs spécifique pour le bloc paragraphe :
{
"version": 2,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"settings": {
"color": { ... },
"typography": { ... },
"layout" : { ... },
"spacing": { ... },
"blocks": {
"core/paragraph": {
"color": {
"palette": [
{
"slug": "cyan",
"color": "#03cffc",
"name": "Cyan"
}
]
}
}
}
},
...
}L’entrée styles
L’entrée styles est structurée exactement de la même façon. Vous allez fournir des styles à appliquer globalement à la racine de l’entrée, et des styles spécifiques aux blocs dans une entrée blocks.
{
"version": 2,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"settings": { ... },
"styles":{
"color":{
"text":"var(--wp--preset--color--purple)"
},
"typography":{
"fontSize":"var(--wp--preset--font-size--medium)",
"fontFamily":"var(--wp--preset--font-family--system-fonts)",
"lineHeight":"var(--wp--custom--base-line-height)"
},
"blocks": {
"core/heading": {
"color": {
"text":"var(--wp--preset--color--black)"
}
}
}
}
}Ici, on définit des styles globaux de couleurs et typographie, et une couleur de texte différente pour le bloc titre spécifiquement.
Vous pouvez fournir des styles de marges et padding, de couleur de background, etc… ce que vous voulez ! Et tout est géré automatiquement par WordPress, via des attributs style.
{
"version": 2,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"settings": { ... },
"styles":{
"color":{ ... },
"typography":{ ... },
"blocks": {
"core/heading": {
"color": {
"text":"var(--wp--preset--color--yellow)"
},
"spacing": {
"margin": {
"top": "0",
"bottom": "var(--wp--preset--spacing--50)"
}
}
}
}
}
}Elements HTML
Vous pouvez aussi fournir des styles pour les éléments HTML à l’intérieur des blocs. Vous pouvez placer ces styles à la racine de l’entrée styles pour les appliquer de façon globale, et/ou dans blocks pour cibler les éléments de ces blocs.
{
"version": 2,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"settings": { ... },
"styles":{
"color":{ ... },
"typography":{ ... },
"elements": {
"link": {
"color": {
"text": "blue"
},
":hover": {
"color": {
"text": "white",
"background": "blue"
}
}
}
},
"blocks": {
"core/heading": {
"elements": {
"link": {
"color": {
"text": "inherit"
},
":hover": {
"color": {
"text": "blue"
}
}
}
}
}
}
}
}Dans cet exemple, on définit le comportement des liens par défaut (et au survol), mais on surcharge les styles des liens dans les blocs titres.
Modèles et partiels
Si vous créez un block theme, vous aurez besoin de déclarer vos partiels disponibles dans l’entrée templateParts :
{
"version": 2,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"settings": { ... },
"styles":{ ... },
"templateParts": [
{
"name": "header",
"title": "Header",
"area": "header"
},
{
"name": "footer",
"title": "Footer",
"area": "footer"
}
]
}Pour chaque partiel :
namecorrespond au nom du fichier de modèle sans son extensiontitlecorrespond à son label utilisé dans l’administrationareacorrespond à la zone à laquelle appartient ce modèle. Pour le moment, ce paramètre accepteheader,footer, etuncategorized
Par exemple, si vous avez créé plusieurs modèles d’entête, vous pouvez tous les déclarer sous la zone header :
{
"version": 2,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"settings": { ... },
"styles":{ ... },
"templateParts": [
{
"name": "header",
"title": "Header",
"area": "header"
},
{
"name": "header-shop",
"title": "Shop header",
"area": "header"
},
{
"name": "footer",
"title": "Footer",
"area": "footer"
}
]
}Pour les modèles de pages non-standards, dans les thèmes classiques, une simple entrée dans l’entête du modèle suffit pour le rendre disponible dans l’administration. Pour un Block Theme, vous aurez besoin de les déclarer sous customTemplates.
{
"version": 2,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"settings": { ... },
"styles":{ ... },
"templateParts": [ ... ],
"customTemplates": [
{
"name": "page-contact",
"title": "Contact",
"postTypes": [ "page" ]
}
]
}Comme pour les partiels, name correspond au nom du fichier sans son extension, et postTypes permet de choisir pour quels types de publication autoriser l’utilisation du modèle.
Variations
Si vous déclarez tout dans le fichier theme.json, le fichier va être plutôt long. Mais quoi de plus sympa qu’un énorme fichier JSON ? Plusieurs énormes fichiers JSON !
Eh oui ! Si vous le souhaitez, vous pouvez fournir plusieurs fichiers JSON qui vont correspondre aux variations de votre thème.
Ces fichiers JSON doivent être placés dans un dossier styles/ et peuvent être appelés comme vous le souhaitez. Ils peuvent aussi avoir une entrée title pour définir leur label dans l’administration, sinon le nom du fichier sera utilisé pour titre.
Une fois mis en place, si l’utilisateur du thème choisit d’utiliser cette variation, les styles et réglages déclarés viendront simplement surcharger ceux déclarés dans theme.json.
{
"version": 2,
"title": "Alternate",
"settings": { ... }, // vos nouveaux réglages
"styles": { ... } // vos nouveaux styles
}Utiliser theme.json avec un thème classique
Le fichier theme.json est utilisé principalement pour les thèmes basés sur les blocs, pour optimiser l’intégration avec l’éditeur de contenu et l’éditeur de site, ainsi que réduire la quantité de styles à écrire dans style.css.
Mais vous pouvez aussi l’utiliser avec un thème classique !
Vous n’aurez probablement pas besoin des entrées customTemplates ni templateParts, mais tout ce que vous déclarez dans theme.json vous permettra de vous débarrasser des add_theme_support() présent dans functions.php, ainsi que de nombreux styles dans style.css devenu inutiles.
Par contre, attention, selon la façon dont est construit votre thème, certaines mises en page peuvent casser. Je pense notamment à l’alignement des blocs, qui peut ne plus fonctionner sur le devant du site sans intervention de votre part.
Le plus simple est d’y aller progressivement et de remplacer vos add_theme_support() par les réglages correspondants dans theme.json un à un, et de tester pas à pas.
Ainsi, vous créerez un thème hybride, qui gère ses réglages et styles dans theme.json, mais qui utilise toujours des modèles PHP classiques.
La création de Block Themes est un sujet bien plus vaste, mais la première étape est de bien comprendre comment fonctionne le fichier theme.json, et j’espère vraiment que cette vue d’ensemble du fichier vous a aidé à comprendre à quoi sert ce fichier et comment l’exploiter !
Enjoy !
PS : Si vous voulez apprendre comment développer un thème WordPress, je vous invite à jeter un œil à ma formation Développer son thème WordPress Classique. Dans cette formation vous pourrez comprendre mon process en entier et vous verrez en détails comment développer un thème de A à Z, en partant d’un dossier vide, en respectant toutes les bonnes pratiques de développement de thèmes. Je suis sûr que ça vous plaira !