Les thèmes basés sur des blocs

Introduction

Comme nous l’avons vu au chapitre Introduction à WordPress section Apparence - Thèmes, WordPress dispose de différents thèmes. Dans ce chapitre, nous allons voir comment fonctionnent les thèmes basés sur des blocs, dits block themes en anglais.

Depuis l’intégration de Gutenberg, WordPress met à disposition de nouveaux outils et une nouvelle façon de concevoir un site, en intégrant le Full Site Editing (édition complète du site) qui permet, tel un page builder, de pouvoir concevoir un site grâce à un système de blocs, et ainsi modifier et personnaliser toutes les parties de votre site.

Ainsi, vous êtes en mesure d’utiliser des blocs dans les modèles fournis par un thème ou une extension, par exemple une page d’archive ou une page 404. Enfin, vous avez la possibilité de créer vos propres modèles.

C’est bien une nouvelle façon de penser qui change complètement de ce qui se faisait jusqu’alors sur WordPress : vous avez un nouveau fichier theme.json et une interaction avec les fichiers qui est différente.

Pour savoir comment les fichiers sont structurés dans les thèmes basés sur des blocs, allez au chapitre WordPress et PHP - Les fichiers et dossiers des thèmes basés sur des blocs.

Mais WordPress vous laisse le choix avec les anciennes...

Qu’est-ce qu’un thème basé sur des blocs ?

Un thème WordPress basé sur les blocs fonctionne avec des modèles entièrement composés de blocs avec Gutenberg de telle sorte que l’éditeur peut être utilisé pour modifier non seulement le contenu des publications (pages, articles...), mais aussi toutes les zones du site : en-tête, pied de page, barres latérales... C’est ce que l’on appelle le Full Site Editing.

La structure des fichiers est différente, comme vous l’avez vu au chapitre WordPress et PHP - Les fichiers et dossiers des thèmes basés sur des blocs, et la différence principale avec les thèmes classiques réside dans le fait que les modèles et éléments de modèles relatifs à la hiérarchie classique de WordPress sont au format HTML au lieu d’être au format PHP et qu’ils sont intégralement composés de blocs.

Comme vous avez pu le voir, l’outil de personnalisation n’est pas accessible avec un thème basé sur des blocs, à moins que vous utilisiez une extension ou un thème qui nécessite qu’il soit activé. En effet, les blocs proposés dans l’éditeur de modèles ou l’éditeur de sites, vous permettent d’effectuer les mêmes modifications....

Qu’est-ce qu’un modèle de bloc ?

Un modèle de bloc est composé d’une liste de blocs. Tout bloc WordPress peut être utilisé dans un modèle. Les modèles peuvent également partager des parties de leur contenu en utilisant les « éléments de modèles ». Par exemple, tous les modèles de blocs peuvent utiliser le même en-tête en incluant un élément de modèle distinct header.html ou footer.html.

Le commentaire suivant appelle le fichier header.html contenu dans le dossier Parts :

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

Ces différents commentaires ressemblent à des commentaires HTML, et ils ont une fonction spécifique : délimiter des blocs. Les délimiteurs de blocs indiquent à WordPress quel bloc doit être rendu à l’écran. Ils fournissent également des valeurs pour les propriétés du bloc dans un objet JSON. Ces propriétés déterminent la manière dont le bloc doit être rendu à l’écran.

Voici quelques exemples pour comprendre le code de l’exemple suivant :

<!-- wp:group --> correspond à un bloc groupe.

<!-- wp:query --> correspond à un bloc boucle de requête....

Écrire et modifier des modèles

Pour écrire, modifier ou exporter des modèles, vous devez le faire via l’administration du site. Pour cela, vous devez accéder à la modification des modèles via le menu Apparence - Éditeur (bêta). Vous pouvez ajouter les blocs que vous souhaitez et créer la page qui vous convient. Pour le détail de tous les blocs, voir le chapitre Introduction à WordPress - L’administration et les menus - Articles - Gutenberg et le système de blocs.

Vous avez la possibilité de passer en mode éditeur de code pour récupérer le code HTML du modèle. Vous pouvez également cliquer sur l’outil Exporter accessible via le bouton Options (trois points verticaux), situé à la droite de la barre supérieure de l’éditeur de site.

Vous pourrez ainsi télécharger un fichier ZIP contenant tous les modèles et éléments de modèles que vous avez créés sous l’éditeur et que vous pourrez placer dans le dossier de votre thème.

Vous pouvez ainsi créer des thèmes avec des modèles personnalisés et créer vos propres modèles pour le dossier Templates et le dossier Parts, si votre thème en dispose.

Veuillez noter que lorsque vous faites cet export, le balisage du bloc Élément...

La structure de base

Le fichier theme.json a une structure de base :

{  
   "version": 2,  
   "settings": {},  
   "styles": {},  
   "customTemplates": {},  
   "templateParts": {}  
} 

version permet de spécifier la version de la structure du fichier. La version est actuellement la 2, introduite lors de la version 5.9 de WordPress. Elle permet de spécifier le format de la structure du fichier theme.json. Si vous avez déjà utilisé la v1, vous n’avez pas besoin de mettre à jour la version du fichier v1 vers la v2, car elle sera mise à jour automatiquement. Il est important d’inclure l’attribut version, sinon les données seront analysées en tant que "version 0" et les données risquent d’être mal interprétées.

settings permet de définir les paramètres pour configurer l’éditeur et active ou désactive des fonctionnalités telles que les tailles de police personnalisées, les marges personnalisées et les couleurs. Ce paramètre définit des valeurs telles que des palettes de couleurs qui génèrent des propriétés personnalisées CSS que vous pouvez...

La structure des préréglages

La section settings définit les réglages au niveau global ou au niveau du bloc.

La section des préréglages settings a la structure suivante :

{  
   "version": 2,  
   "settings": {  
       "border": {  
           "radius": false,  
           "color": false,  
           "style": false,  
           "width": false  
       },  
       "color": {  
           "custom": true,  
           "customDuotone": true,  
           "customGradient": true,  
           "duotone": [],  
           "gradients": [],  
           "link": false,  
           "palette": [],  
           "text": true,  
           "background": true,  
           "defaultGradients": true,  
           "defaultPalette": true  
       },  
       "custom": {},  
       "layout": {  
           "contentSize": "800px",  
           "wideSize": "1000px"  
       },  
       "spacing": {  
           "margin": false,  
           "padding": false,  
           "blockGap": null,  
         ...

Les couleurs

Pour ajouter des couleurs avec le fichier theme.json, nous allons voir comment paramétrer settings.

Vous pouvez cibler à la fois le site web et les blocs avec des paramètres et des styles, soit en plaçant les paramètres globaux du site au niveau racine d’une section, soit en plaçant les paramètres de bloc à l’intérieur de blocks, suivis du nom du bloc :

{  
   "version": 2,  
   "settings": {  
           "color": { ... }, // Réglages généraux  
           "blocks": {  
                  "core/group": {   
                           "color": { ... }, //réglages de couleur 
pour le bloc  
                           "typography": { ... } //réglages de la 
typographie pour le bloc  
                   }  
           }  
   }  
} 

WordPress utilise les données du fichier theme.json pour ajouter des paramètres au bloc et créer des propriétés personnalisées CSS, comme avec la palette de couleurs. Les valeurs sont utilisées pour fournir à l’utilisateur des options de palette de couleurs et pour générer des propriétés CSS que vous pouvez utiliser ailleurs dans le fichier theme.json ou dans le CSS du thème.

Cet exemple montre une palette de couleurs avec une seule couleur noire :

{  
   "version": 2,  
   "settings": {  
       "color": {  
           "palette": [  ...

Les typographies

Le contrôle de la famille de polices permet aux utilisateurs de modifier le style de police d’un bloc. Ce paramètre n’est disponible que pour des blocs spécifiques et n’est pas activé par défaut. Le thème doit définir des familles de polices pour que cet élément d’interface apparaisse.

Pour ajouter des polices, il faut utiliser le paramètre fontFamilies qui accepte trois valeurs : name, slug et fontFamily.

{  
   "version": 2,  
       "settings": {  
            "typography": {  
                  "fontFamilies": [  
                        {  
                        "fontFamily": "sans-serif",  
                        "name": "Sans Serif",  
                        "slug": "sans-serif"  
                        },  
       ...

{  
       "version": 2,  
       "settings": {  
               "layout": {  
                       "contentSize": "840px",  
                       "wideSize": "1100px"  
               }  
       }  
} 

Les espacements

Vous pouvez activer la prise en charge des marges externes et internes :

{  
       "version": 2,  
       "settings": {  
                  "spacing": {  
                         "padding": true,  
                         "margin": true  
                  }  
       }  
} 

Vous pouvez activer les unités des marges externes, des marges internes et d’espacement personnalisées à l’aide du code :

{  
       "version": 2,  
       "settings": {  
               "spacing": {  
                       "padding": true,  
                       "margin": true,  
                       "units": [ "px"...

{  
       "version": 2,  
       "settings": {                  
                  "border": {  
                         "color": true,  
                         "radius": true,  
                         "style": true,  
                         "width": true  
                  }  
       }  
} 

Activer et désactiver des paramètres

Dans le fichier theme.json, vous pouvez activer ou désactiver les contrôles de bloc et ainsi n’activer que les fonctionnalités dont votre thème a besoin.

Les fonctionnalités suivantes sont activées par défaut :

Pour les désactiver, vous devez définir la valeur du paramètre sur false.

Cet exemple désactive le sélecteur de couleurs personnalisé pour la palette de couleurs et les dégradés :

{  
       "version": 2,  
       "settings": {  
               "color": {  
                       "custom": false,  
                       "customGradient": false  
                }  
        }  
} 

Vous avez la possibilité de désactiver certaines...

La structure des styles

La section styles est l’endroit où les thèmes définissent les styles par défaut des blocs et des éléments.

La section des styles styles a la structure suivante :

{  
   "version": 2,  
   "styles": {  
       "border": {  
           "radius": "value",  
           "color": "value",  
           "style": "value",  
           "width": "value"  
       },  
       "filter": {  
           "duotone": "value"  
       },  
       "color": {  
           "background": "value",  
           "gradient": "value",  
           "text": "value"  
       },  
       "spacing": {  
           "blockGap": "value",  
           "margin": {  
               "top": "value",  
 ...

Faire référence à un style

Vous remarquerez que les propriétés personnalisées CSS peuvent être utilisées dans les déclarations de propriétés. Ainsi, on peut utiliser la référence à une classe définie dans settings de la façon suivante :

{  
      "version": 2,  
       "settings": {  
                "color": {  
                         "palette": [  
                        {  
                               "name": "Primary",  
                               "slug": "primary",  
                               "color": "#000000"  
                        }  
                         ]  ...

Les éléments

Les blocs peuvent avoir plusieurs éléments HTML comme des en-têtes (H1-H6) et des liens afin de les styliser par des couleurs, fond, espacements... Dans cet exemple, la couleur d’arrière-plan et le rembourrage sont ajoutés au lien Lire la suite à l’intérieur du bloc d’extrait de message :

{  
   "version": 2,  
   "settings": { ... },  
   "styles": {  
       "blocks": {  
           "core/post-excerpt": {  
               "elements": {  
                   "link": {  
                       "color": {  
                           "background": "var(--wp--preset
--color--light-grey)"  
                       },  
                       "spacing": {  
           ...