L’introduction de l’édition complète de sites (FSE) dans WordPress souligne l’importance croissante du fichier theme.json. Il y a maintenant une toute nouvelle hiérarchie et structure à comprendre, ainsi que les différentes propriétés qui vous aideront à créer vos designs. En particulier, la propriété blocks dans theme.json est essentielle si vous souhaitez créer des thèmes WordPress modernes et flexibles avec des blocs uniques.
Dans ce guide, nous explorerons les tenants et les aboutissants de la propriété blocks dans theme.json afin que vous puissiez travailler avec, concevoir et styliser des blocs pour créer des expériences WordPress plus dynamiques et personnalisables.
Comprendre la propriété blocks dans theme.json
Avant de nous plonger dans les subtilités de la propriété blocks, commençons par comprendre son rôle au sein de theme.json et du développement de thèmes WordPress.
Tout d’abord, theme.json est le fichier de configuration qui vous permet de définir les styles et les réglages globaux de vos thèmes. Ce « hub central » vous permet de contrôler divers aspects de l’apparence et du comportement de votre thème, y compris la typographie, les couleurs et les options de mise en page. Cependant, il peut faire plus que vous offrir des modifications esthétiques programmatiques.
La propriété blocks vous permet d’appliquer un contrôle granulaire sur des types de blocs individuels plutôt que sur le site dans son ensemble. Vous pouvez définir des styles, des réglages et des comportements par défaut pour des blocs spécifiques, ce qui garantit la cohérence de votre thème et la flexibilité des propriétaires de sites.
La relation entre la propriété blocks et l’édition complète du site
FSE est une approche plus visuelle de la construction de votre site avec des blocs au cœur. Sur l’interface, vous disposez de la plupart des options de style et de personnalisation disponibles pour l’ensemble de votre site :
La propriété blocks est une partie cruciale du fichier theme.json pour plusieurs raisons :
- Elle fournit un moyen normalisé de définir les styles et les réglages des blocs.
- Vous pouvez créer des systèmes de conception cohérents à partir d’une base programmatique.
- Vous pouvez mieux contrôler l’apparence des blocs sans avoir recours à des feuilles de style CSS personnalisées.
- La propriété vous aide à créer des modèles de blocs.
Les développeurs peuvent utiliser la propriété blocks pour créer des thèmes qui tirent le meilleur parti de l’édition complète du site.
Comment structurer la propriété blocks (et sa syntaxe)
La normalisation qu’offre la propriété blocks est utile en termes de structure et de syntaxe. Vous l’imbriquerez toujours dans l’objet settings:
{
"version": 3,
"settings": {
"blocks": {
"core/paragraph": {
"typography": {
"fontSizes": [
{
"name": "Small",
"slug": "small",
"size": "13px"
},
{
"name": "Medium",
"slug": "medium",
"size": "20px"
}
]
…L’exemple ci-dessus définit des tailles de police personnalisées pour un bloc de paragraphe. La décomposition des composants clés est simple :
- Vous imbriquez la propriété
blockssous l’objetsettings. - Chaque type de bloc possède un espace de noms et un nom (
core/paragraphici). - Vous spécifiez ensuite les paramètres du bloc dans l’objet.
Les paramètres comprennent la plupart des éléments disponibles pour les styles globaux. Par exemple, ils peuvent inclure la typographie, la couleur, l’espacement et bien d’autres choses encore.
Configuration des réglages des blocs globaux
Voyons comment définir les réglages globaux, puis comment ils influencent la propriété blocks. C’est ainsi que vous établirez une base de conception cohérente pour l’ensemble de votre thème.
{
"version": 3,
"settings": {
"typography": {
"fontSizes": [
{
"name": "Small",
"slug": "small",
"size": "13px"
},
{
"name": "Medium",
"slug": "medium",
"size": "20px"
}
…Dans cet exemple, nous définissons les tailles de police globales disponibles pour tous les blocs. Dans l’éditeur de site WordPress, vous trouverez ces options dans l’écran Typographie > Éléments > Texte :
Chaque taille de police que vous définissez dans theme.json correspond à l’une des options de taille ici :
Bien entendu, il existe de nombreuses autres façons de personnaliser votre thème à partir d’ici. L’idée est de créer un design global qui fonctionne dans 80% des cas d’utilisation.
À l’aide de la propriété blocks, vous pouvez remplacer les styles de base du bloc pour couvrir les 20 % restants. L’écran Styles de l’éditeur de site vous permet également de personnaliser les réglages de conception de chaque bloc :
C’est excellent pour les utilisateurs finaux, mais moins utile pour un développeur. Nous nous concentrons sur l’utilisation de theme.json pour travailler avec la propriété blocks.
Comment personnaliser les différents types de blocs
Bien que les réglages globaux soient importants pour maintenir la cohérence, la véritable puissance réside dans la portée de la propriété blocks pour la personnalisation. Cette configuration granulaire vous permet d’adapter l’apparence et le comportement de blocs spécifiques à la conception de votre thème, tout comme l’Éditeur de site
Examinons un exemple de personnalisation du bloc Heading pour votre thème :
{
"version": 3,
"settings": {
"blocks": {
"core/heading": {
"typography": {
"fontSizes": [
{
"name": "Small",
"slug": "small",
"size": "20px"
},
{
"name": "Medium",
"slug": "medium",
"size": "30px"
},
{
"name": "Large",
"slug": "large",
"size": "40px"
}
],
"fontWeight": "bold"
},
"color": {
"palette": [
{
"name": "Heading Primary",
"slug": "heading-primary",
"color": "#333333"
},
{
"name": "Heading Secondary",
"slug": "heading-secondary",
"color": "#666666"
}
]
…Vous pouvez constater que les attributs reflètent la façon dont vous apporteriez des modifications globales. Résumons ce que nous faisons :
- Nous définissons des tailles de police spécifiques pour les titres et les assignons à des libellés de taille.
- Le poids de la police pour tous les titres sera simplement en gras.
- Ces titres recevront également une palette de couleurs personnalisée.
Cela garantit que nos titres auront un aspect cohérent tout au long de la conception. Nous pouvons également contrôler ces éléments lorsque nous ne savons pas comment l’utilisateur final les appliquera, ce qui renforce la cohérence de la conception.
Utiliser la bonne combinaison d’espace de noms et de slug
Lorsque vous appelez des types de blocs, il est essentiel d’utiliser la bonne combinaison d’espace de noms et d’extension. Sans cela, vos modifications ne s’appliqueront pas aux blocs que vous souhaitez cibler.
Chaque bloc dispose d’un espace de noms et de slug. Les blocs du cœur de WordPress auront typiquement l’espace de noms core. L’extension est le nom du bloc :
…
"blocks": {
"core/image": {
…Si vous avez besoin de connaitre le nom d’un bloc, vous pouvez consulter son fichier spécifique block.json. Ce fichier se trouve dans le répertoire wp-includes/blocks. Vous y trouverez plusieurs dossiers, chacun contenant un fichier block.json. Dans chacun d’eux, l’espace de noms et le slug du bloc doivent figurer en tête du fichier :
Si vous parcourez ces répertoires, vous remarquerez que le répertoire wp-includes possède son propre fichier theme.json. Bien que cela puisse sembler déroutant, c’est simple à expliquer.
Pourquoi theme.json inclut par défaut les réglages des blocs personnalisés ?
Le fichier theme.json de WordPress peut sembler étrange à première vue, notamment parce qu’il ne s’agit pas d’un thème. Cependant, ce n’est pas un hasard. La raison principale est d’assurer la rétrocompatibilité avec les anciennes versions de WordPress.
Par exemple, le bloc Bouton définit un rayon de bordure :
…
"blocks": {
"core/button": {
"border": {
"radius": true
}
},
…D’autres blocs auront des réglages similaires afin d’assurer la cohérence entre les différentes versions de WordPress. Cependant, cela peut poser des problèmes si vous n’en êtes pas conscient.
Si vous essayez de définir des réglages globaux et que vous vous demandez pourquoi ces changements ne s’appliquent pas à des blocs spécifiques, la compatibilité ascendante pourrait être la réponse. Bien entendu, vous pouvez remplacer ces réglages dans votre propre fichier theme.json sans problème.
Développement de blocs personnalisés avec theme.json
Le fichier theme.json est idéal pour personnaliser les blocs existants, mais ses capacités s’étendent également au développement de blocs personnalisés. Vous pouvez utiliser theme.json pour définir des styles et des réglages par défaut pour tous vos blocs personnalisés. Cela vous permet d’assurer une intégration transparente dans la conception de votre thème.
Cependant, vous devez d’abord créer le bloc lui-même. Cela dépasse le cadre de cet article, mais en résumé, il y a quelques facettes :
- L’échafaudage du bloc. Cela implique la mise en place d’un environnement de développement local et la création de la structure de fichiers pour l’ensemble du module.
- Mise à jour du fichier
block.json. Ici, vous devrez changer l’identité de la blockchain et ajouter des supports. Ces derniers permettent de déclarer la prise en charge de fonctionnalités spécifiques de WordPress. Par exemple, vous pouvez gérer l’alignement, mettre en œuvre des champs d’ancrage, travailler avec divers réglages de typographie, et plus encore. - Modifiez les fichiers JavaScript du bloc. Les sites
index.jsetedit.jsont tous deux besoin de code pour indiquer à WordPress comment le bloc fonctionne et pour qu’il apparaisse dans l’éditeur de site.
Vous devrez peut-être également modifier render.php, ajouter un rendu statique et effectuer toute une série d’autres tâches. À ce stade, vous pouvez appliquer des modifications stylistiques à theme.json comme à n’importe quel autre bloc. Pour l’instant, examinons de plus près block.json.
Le fichier block.json
Ce fichier est ce que l’équipe de développement de WordPress appelle la manière « canonique » d’enregistrer les blocs pour le serveur et le client. Les métadonnées que vous incluez ici indiquent à WordPress tout ce qui concerne le type de bloc et les fichiers qui l’accompagnent :
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "my-plugin/notice",
"title": "Notice",
"category": "text",
"parent": [ "core/group" ],
"icon": "star",
"description": "Shows warning, error or success notices...",
"keywords": [ "alert", "message" ],
"version": "1.0.3",
"textdomain": "my-plugin",
"attributes": {
"message": {
"type": "string",
"source": "html",
"selector": ".message"
}
},
…Elles s’apparentent aux métadonnées que vous placeriez en haut d’un fichier PHP pour les thèmes et les extensions. Bien que le fichier utilise exclusivement des données JSON, vous pouvez toujours partager du code en PHP, JavaScript et CSS :
…
"editorScript": "file:./index.js",
"script": "file:./script.js",
"viewScript": [ "file:./view.js", "example-shared-view-script" ],
"editorStyle": "file:./index.css",
"style": [ "file:./style.css", "example-shared-style" ],
"viewStyle": [ "file:./view.css", "example-view-style" ],
"render": "file:./render.php"
…Nous y reviendrons plus tard dans la section sur les variations. Pour terminer cette section, vous devez savoir comment définir votre bloc personnalisé comme valeur par défaut dans WordPress. Il y a plusieurs façons d’y parvenir. La méthode classique consiste à enregistrer un type de publication personnalisé et à y inclure les blocs. Cependant, il existe quelques autres méthodes.
Par exemple, vous pouvez mettre à jour un type de publication existant pour y ajouter un modèle de bloc. Voici un exemple simple :
…
function load_post_type_patterns() {
// Define an initial pattern for the 'HypnoToad' post type
$post_type_object = get_post_type_object( 'hypnoToad' );
$post_type_object->template = array(
array(
'core/block',
…Une autre façon de procéder consiste à appeler le hook default_content et à définir le bloc à l’aide de balises :
function toad_content( $content, $post ) {
if ( $post->post_type === 'hypnoToad' ) {
$content ='
<div class="is-layout-flex wp-container-1 wp-block-columns"><!-- wp:column →
<div class="wp-block-column">
<p></p>
</div>
<div class="is-layout-flow wp-block-column">
<p></p>
</div>
</div>
';
}
return $content;
}
add_filter( 'default_content', 'toad_content', 10, 2 );Bien entendu, vous n’utiliserez pas seulement JSON, HTML et PHP. Vous utiliserez également d’autres langages pour faciliter la conception et l’interactivité. La bonne nouvelle, c’est que WordPress vous offre un moyen simple de le faire.
Utiliser des propriétés CSS personnalisées pour vos blocs
Vous pouvez réaliser beaucoup de choses en utilisant les propriétés, attributs et objets existants de theme.json, mais cela ne couvrira pas tous les cas d’utilisation. Le fichier vous donne la propriété custom qui vous aidera à créer des propriétés CSS pertinentes :
{
"version": 3,
"settings": {
"custom": {
"toad": "hypno"
}
}
}Ici, vous donnez une paire clé-valeur, qui se transforme en une variable CSS sur l’interface publique :
body {
--wp--custom--toad: hypno;
}Notez que la variable utilisera des doubles traits d’union pour séparer ses éléments. En général, vous verrez toujours --wp--custom--, qui marquera la clé à la fin. Parfois, vous définirez des variables et des propriétés en utilisant la casse camel :
{
"version": 3,
"settings": {
"custom": {
"hypnoToad": "active"
}
}
}Dans ce cas, WordPress utilisera des traits d’union pour séparer les mots :
body {
--wp--custom--hypno-toad: active;
}Entre la propriété custom et block.json, vous avez toute latitude pour construire vos blocs comme vous l’entendez, y compris les variations que vous souhaitez inclure.
Coup d’œil rapide sur le bloc, le style et les variations de style du bloc
Avant de passer au style à l’aide de la propriété blocks, examinons les variations. Vous disposez de plusieurs types de variations pour vos modèles, et les conventions d’appellation peuvent vous amener à utiliser le mauvais type en fonction de vos besoins. Voici un aperçu des différences :
- Variations de blocs. Si votre bloc a des versions alternatives (pensez à un bloc qui affiche de nombreux liens personnalisés définis par l’utilisateur), il s’agit d’une variation de bloc. Le bloc Médias sociaux en est un bon exemple.
- Variations de style. Il s’agit de versions alternatives de
theme.jsonqui fonctionnent sur votre site global. Nous n’en parlons pas ici, mais la plupart des thèmes de blocs en proposent pour différentes palettes de couleurs et réglages de typographie. - Variations de style en bloc. Cette fonction reprend la fonctionnalité de base des variations de style et vous permet de créer des modèles alternatifs pour un bloc.
Vous pouvez vous demander s’il est préférable d’utiliser une variation de bloc ou une variation de style de bloc ; la réponse est simple. Si les modifications que vous souhaitez apporter peuvent être effectuées à l’intérieur de theme.json ou à l’aide de CSS, créez une variation de style de bloc. Dans le cas contraire, vous devez utiliser une variation de bloc.
Variations de bloc
Les variations de bloc sont enregistrées à l’aide de JavaScript. La création d’un fichier dans le répertoire d’un thème est une bonne idée, mais il peut aller n’importe où. Il suffit d’une ligne pour enregistrer une variation dans votre fichier JavaScript :
const registerBlockVariation = ( blockName, variation )Pour l’objet blockName, vous devez également spécifier l’espace de noms, comme vous le feriez pour la propriété blocks. Dans l’objet variation, vous ajouterez le nom, le titre, la description, si la variation est active par défaut, etc. Pour charger le fichier dans l’Éditeur de site, il vous suffit d’appeler le hook enqueue_block_editor_assets et d’y placer votre script en file d’attente.
Variations de style de bloc
En ce qui concerne les variations de style de bloc, deux options s’offrent à vous :
- Utilisez la fonction
register_block_style()avec PHP. - Créez un fichier JavaScript
block-editor.js, utilisez la fonctionregisterBlockStyle()de la même manière que pour les variations de blocs et mettez le script en file d’attente.
Une fois que vous avez enregistré une variation de style de bloc, vous pouvez cibler le bloc à l’aide de la propriété variations:
…
"styles": {
"blocks": {
"core/button": {
"variations": {
"outline": {
"border": {
"color": "var:preset|color|black",
"radius": "0",
"style": "solid",
"width": "3px"
},
…Cela signifie que vous n’aurez peut-être pas besoin d’une feuille de style CSS personnalisée – presque tous les aspects de la conception d’un bloc sont possibles grâce à la propriété blocks.
Stylisation d’un bloc par défaut à l’aide de la propriété blocks, du début à la fin
Pour illustrer le fonctionnement de la propriété blocks, prenons un exemple concret. Notre site utilise le thème Twenty Twenty-Four et la variation de style par défaut :
Jusqu’à présent, cela nous semble idéal – bien que les titres et le corps du texte semblent avoir une couleur trop similaire. Nous souhaitons modifier l’une des couleurs ou les deux pour les différencier. En tant qu’utilisateur final ou propriétaire de site, nous pouvons résoudre ce problème dans la colonne latérale Styles de l’éditeur de site. Si vous allez dans Blocs > En-tête, vous pouvez cliquer sur l’élément Texte et changer la couleur pour quelque chose de plus approprié :
Toutefois, en tant que développeur, vous pouvez le faire à l’intérieur de theme.json. Comme pour tout autre thème, la meilleure approche consiste à créer un thème enfant afin de préserver les modifications que vous apportez. Un autre avantage est que votre fichier theme.json sera plus propre.
Nous allons créer un répertoire dans wp-content/themes/ et l’appeler twentytwentyfour-child. Ajoutez-y un fichier style.css valide et un fichier theme.json vierge.
À partir de là, vous pouvez ouvrir le fichier JSON et vous mettre au travail.
Création et remplissage d’un fichier theme.json pour le thème enfant
La principale différence entre la création d’un thème parent et d’un thème enfant en ce qui concerne theme.json est la structure du fichier. Vous n’aurez pas besoin d’indiquer le schéma ou de tout mettre dans l’objet settings. Dans notre cas, nous devons utiliser la propriété styles:
{
"version": 3,
"styles": {
"blocks": {}
}
}Ensuite, nous devons trouver le namespace et le slug pour le bloc Heading. Le Guide de référence officiel des blocs de base répertorie tous ces éléments et nous indique même les attributs et propriétés pris en charge par le bloc. Le guide nous indique que nous pouvons modifier les valeurs background, gradient, link et text pour la propriété color.
"blocks": {
"core/heading": {
"color": {}
}
}La structure étant terminée, nous pouvons commencer à réfléchir à la manière de remodeler le texte.
Trouver une palette de couleurs et appliquer les modifications
Il nous faut maintenant une couleur qui corresponde à nos besoins. La variation par défaut de Twenty Twenty-Four dispose d’une excellente palette, et la vérifier dans un vérificateur de contraste dédié nous donne quelques idées :
Ensuite, nous pouvons ajouter le choix de couleur pour notre bloc à theme.json. Comme le thème parent Twenty Twenty-Four utilise des propriétés CSS personnalisées pour définir les styles de palette, nous pouvons l’appeler ici aussi :
…
"core/paragraph": {
"color": { "text": "var(--wp--preset--color--contrast)" },
…Si vous avez besoin de connaitre le nom d’une couleur de la palette, vous pouvez la trouver dans l’Éditeur de site à partir du sélecteur de couleurs :
Une fois que vous avez enregistré vos modifications, actualisez votre site et vous devriez voir la nouvelle palette de couleurs en place. Si ce n’est pas le cas, vérifiez que vous imbriquez la propriété blocks dans le bon objet, car il s’agit d’un problème courant.
En examinant le site, nous constatons que le texte est moins contrasté et plus facile à lire. Cependant, nous souhaitons toujours voir une certaine définition entre le bloc de paragraphes et les titres qui l’entourent. La palette par défaut du thème propose d’autres couleurs plus audacieuses. Nous allons essayer la couleur Accent / 3 pour le bloc de titres :
"blocks": {
"core/heading": {
"color": { "text": "var(--wp--preset--color--accent-3)" }
},
"core/paragraph": {
"color": { "text": "var(--wp--preset--color--contrast)" }
}
}Après avoir enregistré les modifications et actualisé la page d’accueil, vous constaterez que le bloc d’en-tête est mieux défini :
Votre travail d’édition ne doit pas s’arrêter là. Vous pouvez même personnaliser les options de l’éditeur de site à partir de theme.json.
Ajout d’options d’attributs aux blocs
Les supports de chaque bloc déterminent ses options dans l’éditeur de site. Par exemple, le bloc Paragraphe désactive par défaut la fonctionnalité de Lettrine.
Nous pouvons réactiver cette fonctionnalité dans le fichier theme.json et la propriété blocks. En examinant le matériel de référence, nous pouvons tirer parti de la propriété typographie pour activer les lettrines :
…
"core/paragraph": {
"color": { "text": "var(--wp--preset--color--contrast)" },
"typography": { "dropCap": true }
…Une fois que nous aurons enregistré ces modifications et actualisé l’éditeur, vous pourrez choisir d’activer ou non la fonction de lettrine :
Le fichier theme.json n’est pas seulement une configuration pour le design. Il permet également d’ajouter ou de supprimer des fonctionnalités dans l’éditeur de site.
Comment l’hébergement infogéré de Kinsta peut soutenir le développement de votre thème WordPress
Les complexités du développement de thèmes et de theme.json reposent sur des solutions de qualité tout au long de la chaine de développement afin de tirer profit du potentiel d’amélioration des performances. Un environnement de développement local est crucial, car il vous permet de créer, de gérer et de bricoler des sites WordPress sur votre machine locale. DevKinsta peut vous aider à cet égard.
DevKinsta offre de nombreux avantages :
- Il fonctionne sur des conteneurs Docker, ce qui signifie que vous isolez votre installation du reste de votre machine. Ainsi, vous pouvez tester vos configurations
theme.jsonet vos blocs personnalisés en toute tranquillité. - Vous pouvez effectuer des itérations rapides sur votre fichier
theme.jsonet voir les résultats immédiatement dans votre environnement local. - Créer plusieurs sites locaux pour tester votre thème sur différentes versions et configurations de WordPress est un jeu d’enfant.
De plus, vous n’utiliserez aucune des ressources de votre serveur avant d’être satisfait et prêt. Les environnements de staging de Kinsta constituent l’étape suivante idéale. Vous pouvez créer rapidement une copie de votre site de production et même la transférer dans votre environnement local pour continuer à travailler.
C’est un excellent moyen de réaliser des tests de performance pour votre thème, en particulier lorsque vous combinez l’environnement de staging avec l’outil Application Performance Monitoring (APM) de Kinsta.
Vous pouvez également tirer parti de l’intégration Git de Kinsta dans tous vos environnements. Cela vous permet de pousser et de tirer des changements vers des dépôts et de les déployer à partir de là.
Résumé
Comprendre la propriété blocks dans theme.json est une étape nécessaire pour tous les développeurs de thèmes. Cela peut rendre un design global plus unique, cohérent et pertinent. Le fait d’avoir la possibilité de travailler avec les réglages de base et les réglages personnalisés des blocs permet à chaque utilisateur d’exploiter les capacités de l’édition complète du site. En outre, le fait que ces options soient disponibles dans l’éditeur de site signifie que les utilisateurs finaux peuvent apporter leurs propres modifications sans code alors que vous présentez des options par défaut stellaires.
Vous avez des questions sur l’utilisation de la propriété blocks avec le fichier theme.json? Posez-les dans la section des commentaires ci-dessous !
Laisser un commentaire