Block Themes
Avec l’introduction du Full Site Editing dans WordPress, une nouvelle approche pour le développement de thèmes WordPress a vu le jour, ce qui a conduit à la coexistence de deux principaux types de thèmes qui fonctionnent de manière distincte : les thèmes traditionnels, souvent appelés « classiques », et les Block Themes (ou thèmes basés sur les blocs).
Les thèmes classiques représentent la manière traditionnelle de créer des thèmes, telle qu’elle était connue avant l’arrivée de WordPress 5.9. Ils sont constitués de plusieurs modèles PHP suivant une hiérarchie spécifique, ainsi que d’une ou plusieurs feuilles de styles (style.css) et de fichiers de fonctions personnalisées (functions.php).
En revanche, les Block Themes sont conçus autour de modèles HTML qui font référence à des blocs. Cela signifie que l’ensemble du site est construit en utilisant les blocs natifs disponibles dans l’éditeur de WordPress, tels que les groupes, les colonnes, les rangées, les titres, les logos, les boucles de requêtes, les images, et bien d’autres.
Les thèmes basés sur les blocs de WordPress recourent à un fichier theme.json afin de paramétrer les configurations et l’apparence de votre thème.
Structure du fichier theme.json
Le fichier theme.json est composé de sections essentielles, telles que $schema, version, settings, style, ainsi que des sections facultatives, notamment customTemplates et templateParts, permettant ainsi de personnaliser et étendre les fonctionnalités du thème.
{
"$schema": "https://schemas.wp.org/wp/6.3/theme.json",
"version": 2,
"settings": { ... },
"styles": { ... },
"customTemplates": [ ... ],
"templateParts": [ ... ]
}Attention, les commentaires commençant par // ne sont pas autorisés au format JSON
Reglages
La section « settings » dans le fichier theme.json est un composant essentiel qui permet de définir les paramètres de configuration d’un thème WordPress. Cette section permet d’ajuster certaines de ses caractéristiques et fonctionnalités. Elle contient les réglages des couleurs du thème, les polices de caractères, la mise en page, les typographies, etc.
{
"$schema": "https://schemas.wp.org/wp/6.3/theme.json",
"version": 2,
"settings": {
// Outils de customisation
"appearanceTools": true,
//Les couleurs du theme
"color": {
// Customisation des couleurs de fond du site (true/false)
"background": true,
// Customisation de la palette de couleurs (true/false)
"custom": true,
// Customisation des gradients (true/false)
"customDuotone": true,
// Customisation des gradients (true/false)
"customGradient": true,
//Duotone par defaut de WordPress
"defaultDuotone": true,
//Gradient par defaut de WordPress
"defaultGradients": true,
//Palette de couleurs par defaut de WordPress
"defaultPalette": true,
// Palette de couleurs du theme
"palette": [
{
"color": "#241743",
"name": "Avant-plan",
"slug": "foreground"
},
{
"color": "#ffffff",
"name": "Arrière-plan",
"slug": "background"
},
{
"color": "#4b2d63",
"name": "Primaire",
"slug": "primary"
},
{
"color": "#fda937",
"name": "Secondaire",
"slug": "secondary"
}
],
// Filtres de couleurs (Images)
"duotone": [
{
"colors": [
"#000000",
"#ffffff"
],
"name": "Noir et blanc",
"slug": "black-and-white"
}
],
// Dégradé de couleurs
"gradients": [
{
"gradient": "linear-gradient(to bottom right,var(--wp--preset--color--primary) 0%,var(--wp--preset--color--foreground) 100%)",
"name": "Primaire en diagonale vers arrière-plan",
"slug": "diagonal-primary-to-foreground"
}
],
},
// Largeur du contenu
"layout": {
"contentSize": "1000px",
"wideSize": "1150px"
},
//Typographie du theme
"typography": {
"fontFamilies": [
// Typo par defaut
{
"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
"name": "Police système",
"slug": "system-font"
},
//Typo custom
{
"fontFace": [
{
"fontDisplay": "swap",
"fontFamily": "\"Montreal light\"",
"fontStretch": "normal",
"fontStyle": "normal",
"src": [
"file:./assets/fonts/Montreal-light.ttf"
],
"unicodeRange": "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
}
],
"fontFamily": "\"Montreal Light\"",
"name": "Montreal Light",
"slug": "montreal-light"
},
],
// Tailles des typographies
"fontSizes": [
{
"name": "Small",
"size": "1rem",
"slug": "small"
},
{
"name": "Medium",
"size": "1.125rem",
"slug": "medium"
},
{
"name": "Large",
"size": "1.75rem",
"slug": "large"
},
{
"name": "X-large",
"size": "2.15rem",
"slug": "x-large"
}
],
// Customisation du style de la typo (true/false)
"fontStyle": true,
// Customisation de l'apparence
"fontWeight": true,
// Customisation de l'espacement entre les lettres
"letterSpacing": true,
// Customisation de la décoration du texte
"textDecoration": true,
// Customisation de la typo (Majuscules...)
"textTransform": true
}
},
// Autres réglages
"styles": {},
"customTemplates": [],
"templateParts": []
}
Styles
Article en construction