{"id":78205,"date":"2024-09-30T15:28:08","date_gmt":"2024-09-30T14:28:08","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=78205&#038;preview=true&#038;preview_id=78205"},"modified":"2024-10-01T14:37:58","modified_gmt":"2024-10-01T13:37:58","slug":"propriete-blocks-theme-json","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/","title":{"rendered":"Ce que les d\u00e9veloppeurs WordPress doivent savoir sur la propri\u00e9t\u00e9 blocks dans theme.json"},"content":{"rendered":"<p>L&rsquo;introduction de l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-full-site-editing\/\">\u00e9dition compl\u00e8te de sites (FSE)<\/a> dans WordPress souligne l&rsquo;importance croissante du fichier <code>theme.json<\/code>. Il y a maintenant une toute nouvelle hi\u00e9rarchie et structure \u00e0 comprendre, ainsi que les diff\u00e9rentes propri\u00e9t\u00e9s qui vous aideront \u00e0 cr\u00e9er vos designs. En particulier, la propri\u00e9t\u00e9 <code>blocks<\/code> dans <code>theme.json<\/code> est essentielle si vous souhaitez cr\u00e9er des th\u00e8mes WordPress modernes et flexibles avec des blocs uniques.<\/p>\n<p>Dans ce guide, nous explorerons les tenants et les aboutissants de la propri\u00e9t\u00e9 <code>blocks<\/code> dans <code>theme.json<\/code> afin que vous puissiez travailler avec, concevoir et styliser des blocs pour cr\u00e9er des exp\u00e9riences WordPress plus dynamiques et personnalisables.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Comprendre la propri\u00e9t\u00e9 blocks dans theme.json<\/h2>\n<p>Avant de nous plonger dans les subtilit\u00e9s de la propri\u00e9t\u00e9 <code>blocks<\/code>, commen\u00e7ons par comprendre son r\u00f4le au sein de <code>theme.json<\/code> et du d\u00e9veloppement de th\u00e8mes WordPress.<\/p>\n<figure id=\"attachment_184921\" aria-describedby=\"caption-attachment-184921\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184921 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/theme-json-file.png\" alt=\"Fen\u00eatre de l'\u00e9diteur de code affichant une partie du fichier theme.json d'un th\u00e8me WordPress. La structure JSON d\u00e9finit des mod\u00e8les personnalis\u00e9s pour les pages \u00ab blank \u00bb, \u00ab blog-alternative \u00bb et \u00ab 404 \u00bb. L'\u00e9diteur a un th\u00e8me sombre avec mise en \u00e9vidence de la syntaxe, et l'arri\u00e8re-plan montre un paysage forestier brumeux.\" width=\"1200\" height=\"970\"><figcaption id=\"caption-attachment-184921\" class=\"wp-caption-text\">Le fichier <strong>theme.json<\/strong> de Twenty Twenty-Three.<\/figcaption><\/figure>\n<p>Tout d&rsquo;abord, <code>theme.json<\/code> est le <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-json\/\">fichier de configuration<\/a> qui vous permet de d\u00e9finir les styles et les r\u00e9glages globaux de vos th\u00e8mes. Ce \u00ab hub central \u00bb vous permet de contr\u00f4ler divers aspects de l&rsquo;apparence et du comportement de votre th\u00e8me, y compris la typographie, les couleurs et les options de mise en page. Cependant, il peut faire plus que vous offrir des modifications esth\u00e9tiques programmatiques.<\/p>\n<p>La propri\u00e9t\u00e9 <code>blocks<\/code> vous permet d&rsquo;appliquer un contr\u00f4le granulaire sur des types de blocs individuels plut\u00f4t que sur le site dans son ensemble. Vous pouvez d\u00e9finir des styles, des r\u00e9glages et des comportements par d\u00e9faut pour des blocs sp\u00e9cifiques, ce qui garantit la coh\u00e9rence de votre th\u00e8me et la flexibilit\u00e9 des propri\u00e9taires de sites.<\/p>\n<h3>La relation entre la propri\u00e9t\u00e9 blocks et l&rsquo;\u00e9dition compl\u00e8te du site<\/h3>\n<p>FSE est une approche plus visuelle de la construction de votre site avec des blocs au c\u0153ur. Sur l&rsquo;interface, vous disposez de la plupart des options de style et de personnalisation disponibles pour l&rsquo;ensemble de votre site :<\/p>\n<figure id=\"attachment_184916\" aria-describedby=\"caption-attachment-184916\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184916 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/full-site-editor.png\" alt=\"L'\u00e9cran principal de l'\u00e9diteur de site WordPress, montrant une page d'accueil bleue avec le titre \u00ab Un engagement en faveur de l'innovation et de la durabilit\u00e9 \u00bb. La page pr\u00e9sente une image architecturale moderne et des options de personnalisation dans une barre lat\u00e9rale noire \u00e0 gauche.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184916\" class=\"wp-caption-text\">L&rsquo;interface d&rsquo;\u00e9dition compl\u00e8te du site dans WordPress.<\/figcaption><\/figure>\n<p>La propri\u00e9t\u00e9 <code>blocks<\/code> est une partie cruciale du fichier <code>theme.json<\/code> pour plusieurs raisons :<\/p>\n<ul>\n<li>Elle fournit un moyen normalis\u00e9 de d\u00e9finir les styles et les r\u00e9glages des blocs.<\/li>\n<li>Vous pouvez cr\u00e9er des syst\u00e8mes de conception coh\u00e9rents \u00e0 partir d&rsquo;une base programmatique.<\/li>\n<li>Vous pouvez mieux contr\u00f4ler l&rsquo;apparence des blocs sans avoir recours \u00e0 des <a href=\"https:\/\/kinsta.com\/fr\/blog\/css-wordpress\/\">feuilles de style CSS<\/a> personnalis\u00e9es.<\/li>\n<li>La propri\u00e9t\u00e9 vous aide \u00e0 cr\u00e9er des mod\u00e8les de blocs.<\/li>\n<\/ul>\n<p>Les d\u00e9veloppeurs peuvent utiliser la propri\u00e9t\u00e9 <code>blocks<\/code> pour cr\u00e9er des th\u00e8mes qui tirent le meilleur parti de l&rsquo;\u00e9dition compl\u00e8te du site.<\/p>\n<h2>Comment structurer la propri\u00e9t\u00e9 blocks (et sa syntaxe)<\/h2>\n<p>La normalisation qu&rsquo;offre la propri\u00e9t\u00e9 <code>blocks<\/code> est utile en termes de structure et de syntaxe. Vous l&rsquo;imbriquerez toujours dans l&rsquo;objet <code>settings<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"blocks\": {\n      \"core\/paragraph\": {\n        \"typography\": {\n          \"fontSizes\": [\n            {\n              \"name\": \"Small\",\n              \"slug\": \"small\",\n              \"size\": \"13px\"\n            },\n            {\n              \"name\": \"Medium\",\n              \"slug\": \"medium\",\n              \"size\": \"20px\"\n             }\n           ]\n\u2026<\/code><\/pre>\n<p>L&rsquo;exemple ci-dessus d\u00e9finit des tailles de police personnalis\u00e9es pour un bloc de paragraphe. La d\u00e9composition des composants cl\u00e9s est simple :<\/p>\n<ul>\n<li>Vous imbriquez la propri\u00e9t\u00e9 <code>blocks<\/code> sous l&rsquo;objet <code>settings<\/code>.<\/li>\n<li>Chaque type de bloc poss\u00e8de un espace de noms et un nom (<code>core\/paragraph<\/code> ici).<\/li>\n<li>Vous sp\u00e9cifiez ensuite les param\u00e8tres du bloc dans l&rsquo;objet.<\/li>\n<\/ul>\n<p>Les param\u00e8tres comprennent la plupart des \u00e9l\u00e9ments disponibles pour les styles globaux. Par exemple, ils peuvent inclure la typographie, la couleur, l&rsquo;espacement et bien d&rsquo;autres choses encore.<\/p>\n<h3>Configuration des r\u00e9glages des blocs globaux<\/h3>\n<p>Voyons comment d\u00e9finir les r\u00e9glages globaux, puis comment ils influencent la propri\u00e9t\u00e9 <code>blocks<\/code>. C&rsquo;est ainsi que vous \u00e9tablirez une base de conception coh\u00e9rente pour l&rsquo;ensemble de votre th\u00e8me.<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"typography\": {\n      \"fontSizes\": [\n        {\n          \"name\": \"Small\",\n          \"slug\": \"small\",\n          \"size\": \"13px\"\n        },\n        {\n          \"name\": \"Medium\",\n          \"slug\": \"medium\",\n          \"size\": \"20px\"\n        }\n\u2026<\/code><\/pre>\n<p>Dans cet exemple, nous d\u00e9finissons les tailles de police globales disponibles pour tous les blocs. Dans l&rsquo;\u00e9diteur de site WordPress, vous trouverez ces options dans l&rsquo;\u00e9cran <strong>Typographie <\/strong>&gt;<strong> \u00c9l\u00e9ments <\/strong>&gt;<strong> Texte <\/strong>:<\/p>\n<figure id=\"attachment_184915\" aria-describedby=\"caption-attachment-184915\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184915 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/elements-text.png\" alt=\"L'\u00e9diteur de site WordPress montre les options du panneau Styles pour le texte. Il affiche les options de s\u00e9lection et de personnalisation de la police, de la taille, de l'apparence, de la hauteur de ligne, de l'espacement des lettres et de la casse des lettres.\" width=\"1200\" height=\"883\"><figcaption id=\"caption-attachment-184915\" class=\"wp-caption-text\">La plupart des r\u00e9glages de typographie du <strong>fichier theme.json<\/strong> sont \u00e9galement accessibles dans l&rsquo;\u00e9diteur de site.<\/figcaption><\/figure>\n<p>Chaque taille de police que vous d\u00e9finissez dans <code>theme.json<\/code> correspond \u00e0 l&rsquo;une des options de taille ici :<\/p>\n<figure id=\"attachment_184922\" aria-describedby=\"caption-attachment-184922\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184922 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/theme-json-font-size.png\" alt=\"Vue rapproch\u00e9e d'un \u00e9diteur de code montrant une partie d'un fichier theme.json de WordPress. Le code visible d\u00e9finit les tailles de police, notamment Small, Medium et Large, avec leurs tailles respectives en unit\u00e9s rem. La taille Large inclut un param\u00e8tre de typographie fluide. L'\u00e9diteur utilise un th\u00e8me sombre avec mise en \u00e9vidence de la syntaxe sur un fond forestier flou.\" width=\"1200\" height=\"729\"><figcaption id=\"caption-attachment-184922\" class=\"wp-caption-text\">Vous d\u00e9finissez les pr\u00e9-r\u00e9glages de taille de police dans le fichier <strong>theme.json.<\/strong><\/figcaption><\/figure>\n<p>Bien entendu, il existe de nombreuses autres fa\u00e7ons de personnaliser votre th\u00e8me \u00e0 partir d&rsquo;ici. L&rsquo;id\u00e9e est de cr\u00e9er un design global qui fonctionne dans 80% des cas d&rsquo;utilisation.<\/p>\n<p>\u00c0 l&rsquo;aide de la propri\u00e9t\u00e9 <code>blocks<\/code>, vous pouvez remplacer les styles de base du bloc pour couvrir les 20 % restants. L&rsquo;\u00e9cran <strong>Styles<\/strong> de l&rsquo;\u00e9diteur de site vous permet \u00e9galement de personnaliser les r\u00e9glages de conception de chaque bloc :<\/p>\n<figure id=\"attachment_184908\" aria-describedby=\"caption-attachment-184908\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184908 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/block-styles-editor.png\" alt=\"Gros plan de l'interface de l'\u00e9diteur de site WordPress, montrant les options du bloc de contenu telles que Paragraphe, Image, Rubrique et Galerie. La zone de contenu principal affiche la page d'accueil du site.\" width=\"1200\" height=\"838\"><figcaption id=\"caption-attachment-184908\" class=\"wp-caption-text\">L&rsquo;\u00e9diteur de site vous permet de modifier les r\u00e9glages de tous les blocs principaux de WordPress.<\/figcaption><\/figure>\n<p>C&rsquo;est excellent pour les utilisateurs finaux, mais moins utile pour un d\u00e9veloppeur. Nous nous concentrons sur l&rsquo;utilisation de <code>theme.json<\/code> pour travailler avec la propri\u00e9t\u00e9 <code>blocks<\/code>.<\/p>\n<h2>Comment personnaliser les diff\u00e9rents types de blocs<\/h2>\n<p>Bien que les r\u00e9glages globaux soient importants pour maintenir la coh\u00e9rence, la v\u00e9ritable puissance r\u00e9side dans la port\u00e9e de la propri\u00e9t\u00e9 <code>blocks<\/code> pour la personnalisation. Cette configuration granulaire vous permet d&rsquo;adapter l&rsquo;apparence et le comportement de blocs sp\u00e9cifiques \u00e0 la conception de votre th\u00e8me, tout comme l&rsquo;\u00c9diteur de site<\/p>\n<p>Examinons un exemple de personnalisation du bloc Heading pour votre th\u00e8me :<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"blocks\": {\n      \"core\/heading\": {\n        \"typography\": {\n          \"fontSizes\": [\n            {\n              \"name\": \"Small\",\n              \"slug\": \"small\",\n              \"size\": \"20px\"\n            },\n            {\n              \"name\": \"Medium\",\n              \"slug\": \"medium\",\n              \"size\": \"30px\"\n            },\n            {\n              \"name\": \"Large\",\n              \"slug\": \"large\",\n              \"size\": \"40px\"\n            }\n            ],\n            \"fontWeight\": \"bold\"\n            },\n            \"color\": {\n              \"palette\": [\n                {\n                  \"name\": \"Heading Primary\",\n                  \"slug\": \"heading-primary\",\n                  \"color\": \"#333333\"\n                },\n                {\n                  \"name\": \"Heading Secondary\",\n                  \"slug\": \"heading-secondary\",\n                  \"color\": \"#666666\"\n                }\n              ]\n\u2026<\/code><\/pre>\n<p>Vous pouvez constater que les attributs refl\u00e8tent la fa\u00e7on dont vous apporteriez des modifications globales. R\u00e9sumons ce que nous faisons :<\/p>\n<ul>\n<li>Nous d\u00e9finissons des tailles de police sp\u00e9cifiques pour les titres et les assignons \u00e0 des libell\u00e9s de taille.<\/li>\n<li>Le poids de la police pour tous les titres sera simplement en gras.<\/li>\n<li>Ces titres recevront \u00e9galement une palette de couleurs personnalis\u00e9e.<\/li>\n<\/ul>\n<p>Cela garantit que nos titres auront un aspect coh\u00e9rent tout au long de la conception. Nous pouvons \u00e9galement contr\u00f4ler ces \u00e9l\u00e9ments lorsque nous ne savons pas comment l&rsquo;utilisateur final les appliquera, ce qui renforce la coh\u00e9rence de la conception.<\/p>\n<h3>Utiliser la bonne combinaison d&rsquo;espace de noms et de slug<\/h3>\n<p>Lorsque vous appelez des types de blocs, il est essentiel d&rsquo;utiliser la bonne combinaison d&rsquo;espace de noms et d&rsquo;extension. Sans cela, vos modifications ne s&rsquo;appliqueront pas aux blocs que vous souhaitez cibler.<\/p>\n<p>Chaque bloc dispose d&rsquo;un espace de noms et de slug. Les blocs du c\u0153ur de WordPress auront typiquement l&rsquo;espace de noms <code>core<\/code>. L&rsquo;extension est le nom du bloc :<\/p>\n<pre><code class=\"language-json\">\u2026\n\"blocks\": {\n  \"core\/image\": {\n\u2026<\/code><\/pre>\n<p>Si vous avez besoin de connaitre le nom d&rsquo;un bloc, vous pouvez consulter son fichier sp\u00e9cifique <code>block.json<\/code>. Ce fichier se trouve dans le r\u00e9pertoire <code>wp-includes\/blocks<\/code>. Vous y trouverez plusieurs dossiers, chacun contenant un fichier <code>block.json<\/code>. Dans chacun d&rsquo;eux, l&rsquo;espace de noms et le slug du bloc doivent figurer en t\u00eate du fichier :<\/p>\n<figure id=\"attachment_184910\" aria-describedby=\"caption-attachment-184910\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184910 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/code-directory.png\" alt=\"Une partie de la fen\u00eatre du Finder de macOS montrant le contenu du r\u00e9pertoire de code. Il y a \u00e9galement une partie d'un \u00e9diteur de code avec un fichier block.json ouvert. Le code visible d\u00e9finit les propri\u00e9t\u00e9s d'un bloc WordPress nomm\u00e9 \u00ab core\/code \u00bb avec un titre \u00ab Code \u00bb et une description concernant l'affichage des extraits de code.\" width=\"1200\" height=\"518\"><figcaption id=\"caption-attachment-184910\" class=\"wp-caption-text\">Le fichier <strong>block.json<\/strong> contient des m\u00e9tadonn\u00e9es cl\u00e9s pour chaque bloc.<\/figcaption><\/figure>\n<p>Si vous parcourez ces r\u00e9pertoires, vous remarquerez que le r\u00e9pertoire <code>wp-includes<\/code> poss\u00e8de son propre fichier <code>theme.json<\/code>. Bien que cela puisse sembler d\u00e9routant, c&rsquo;est simple \u00e0 expliquer.<\/p>\n<h2>Pourquoi theme.json inclut par d\u00e9faut les r\u00e9glages des blocs personnalis\u00e9s ?<\/h2>\n<p>Le fichier <code>theme.json<\/code> de WordPress peut sembler \u00e9trange \u00e0 premi\u00e8re vue, notamment parce qu&rsquo;il ne s&rsquo;agit pas d&rsquo;un th\u00e8me. Cependant, ce n&rsquo;est pas un hasard. La raison principale est d&rsquo;assurer la r\u00e9trocompatibilit\u00e9 avec les anciennes versions de WordPress.<\/p>\n<p>Par exemple, le bloc Bouton d\u00e9finit un rayon de bordure :<\/p>\n<pre><code class=\"language-json\">\u2026\n\"blocks\": {\n  \"core\/button\": {\n    \"border\": {\n      \"radius\": true\n     }\n  },\n\u2026<\/code><\/pre>\n<p>D&rsquo;autres blocs auront des r\u00e9glages similaires afin d&rsquo;assurer la coh\u00e9rence entre les diff\u00e9rentes versions de WordPress. Cependant, cela peut poser des probl\u00e8mes si vous n&rsquo;en \u00eates pas conscient.<\/p>\n<p>Si vous essayez de d\u00e9finir des r\u00e9glages globaux et que vous vous demandez pourquoi ces changements ne s&rsquo;appliquent pas \u00e0 des blocs sp\u00e9cifiques, la compatibilit\u00e9 ascendante pourrait \u00eatre la r\u00e9ponse. Bien entendu, vous pouvez remplacer ces r\u00e9glages dans votre propre fichier <code>theme.json<\/code> sans probl\u00e8me.<\/p>\n<h2>D\u00e9veloppement de blocs personnalis\u00e9s avec theme.json<\/h2>\n<p>Le fichier <code>theme.json<\/code> est id\u00e9al pour personnaliser les blocs existants, mais ses capacit\u00e9s s&rsquo;\u00e9tendent \u00e9galement au d\u00e9veloppement de blocs personnalis\u00e9s. Vous pouvez utiliser <code>theme.json<\/code> pour d\u00e9finir des styles et des r\u00e9glages par d\u00e9faut pour tous vos blocs personnalis\u00e9s. Cela vous permet d&rsquo;assurer une int\u00e9gration transparente dans la conception de votre th\u00e8me.<\/p>\n<p>Cependant, vous devez d&rsquo;abord <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/\">cr\u00e9er le bloc<\/a> lui-m\u00eame. Cela d\u00e9passe le cadre de cet article, mais en r\u00e9sum\u00e9, il y a quelques facettes :<\/p>\n<ul>\n<li><strong>L&rsquo;\u00e9chafaudage du bloc.<\/strong> Cela implique la mise en place d&rsquo;un environnement de d\u00e9veloppement local et la cr\u00e9ation de la structure de fichiers pour l&rsquo;ensemble du module.<\/li>\n<li><strong>Mise \u00e0 jour du fichier <code>block.json<\/code>.<\/strong> Ici, vous devrez changer l&rsquo;identit\u00e9 de la blockchain et ajouter des <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-supports\/\" target=\"_blank\" rel=\"noopener noreferrer\">supports<\/a>. Ces derniers permettent de d\u00e9clarer la prise en charge de fonctionnalit\u00e9s sp\u00e9cifiques de WordPress. Par exemple, vous pouvez g\u00e9rer l&rsquo;alignement, mettre en \u0153uvre des champs d&rsquo;ancrage, travailler avec divers r\u00e9glages de typographie, et plus encore.<\/li>\n<li><strong>Modifiez les fichiers JavaScript du bloc.<\/strong> Les sites <code>index.js<\/code> et <code>edit.js<\/code> ont tous deux besoin de code pour indiquer \u00e0 WordPress comment le bloc fonctionne et pour qu&rsquo;il apparaisse dans l&rsquo;\u00e9diteur de site.<\/li>\n<\/ul>\n<p>Vous devrez peut-\u00eatre \u00e9galement modifier <code>render.php<\/code>, ajouter un rendu statique et effectuer toute une s\u00e9rie d&rsquo;autres t\u00e2ches. \u00c0 ce stade, vous pouvez appliquer des modifications stylistiques \u00e0 <code>theme.json<\/code> comme \u00e0 n&rsquo;importe quel autre bloc. Pour l&rsquo;instant, examinons de plus pr\u00e8s <code>block.json<\/code>.<\/p>\n<h3>Le fichier block.json<\/h3>\n<p>Ce fichier est ce que l&rsquo;\u00e9quipe de d\u00e9veloppement de WordPress appelle la mani\u00e8re \u00ab canonique \u00bb d&rsquo;enregistrer les blocs pour le serveur et le client. Les m\u00e9tadonn\u00e9es que vous incluez ici indiquent \u00e0 WordPress tout ce qui concerne le type de bloc et les fichiers qui l&rsquo;accompagnent :<\/p>\n<pre><code class=\"language-json\">{\n  \"$schema\": \"https:\/\/schemas.wp.org\/trunk\/block.json\",\n  \"apiVersion\": 3,\n  \"name\": \"my-plugin\/notice\",\n  \"title\": \"Notice\",\n  \"category\": \"text\",\n  \"parent\": [ \"core\/group\" ],\n  \"icon\": \"star\",\n  \"description\": \"Shows warning, error or success notices...\",\n  \"keywords\": [ \"alert\", \"message\" ],\n  \"version\": \"1.0.3\",\n  \"textdomain\": \"my-plugin\",\n  \"attributes\": {\n    \"message\": {\n      \"type\": \"string\",\n      \"source\": \"html\",\n      \"selector\": \".message\"\n    }\n  },\n\u2026<\/code><\/pre>\n<p>Elles s&rsquo;apparentent aux m\u00e9tadonn\u00e9es que vous placeriez en haut d&rsquo;un fichier <a href=\"https:\/\/kinsta.com\/php\/\">PHP<\/a> pour les th\u00e8mes et les extensions. Bien que le fichier utilise exclusivement des donn\u00e9es JSON, vous pouvez toujours partager du code en PHP, <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> et CSS :<\/p>\n<pre><code class=\"language-json\">\u2026\n\"editorScript\": \"file:.\/index.js\",\n\"script\": \"file:.\/script.js\",\n\"viewScript\": [ \"file:.\/view.js\", \"example-shared-view-script\" ],\n\"editorStyle\": \"file:.\/index.css\",\n\"style\": [ \"file:.\/style.css\", \"example-shared-style\" ],\n\"viewStyle\": [ \"file:.\/view.css\", \"example-view-style\" ],\n\"render\": \"file:.\/render.php\"\n\u2026<\/code><\/pre>\n<p>Nous y reviendrons plus tard dans la section sur les variations. Pour terminer cette section, vous devez savoir comment d\u00e9finir votre bloc personnalis\u00e9 comme valeur par d\u00e9faut dans WordPress. Il y a plusieurs fa\u00e7ons d&rsquo;y parvenir. La m\u00e9thode classique consiste \u00e0 <a href=\"https:\/\/kinsta.com\/fr\/blog\/types-publications-personnalises-wordpress\/\">enregistrer un type de publication personnalis\u00e9<\/a> et \u00e0 y inclure les blocs. Cependant, il existe quelques autres m\u00e9thodes.<\/p>\n<p>Par exemple, vous pouvez mettre \u00e0 jour un type de publication existant pour y <a href=\"https:\/\/kinsta.com\/fr\/blog\/modeles-article-wordpress\/#how-to-create-a-custom-wordpress-post-template\">ajouter un mod\u00e8le de bloc<\/a>. Voici un exemple simple :<\/p>\n<pre><code class=\"language-php\">\u2026\nfunction load_post_type_patterns() {\n    \/\/ Define an initial pattern for the 'HypnoToad' post type\n    $post_type_object = get_post_type_object( 'hypnoToad' );\n    $post_type_object-&gt;template = array(\n    array(\n        'core\/block',\n\u2026<\/code><\/pre>\n<p>Une autre fa\u00e7on de proc\u00e9der consiste \u00e0 appeler le hook <code>default_content<\/code> et \u00e0 d\u00e9finir le bloc \u00e0 l&rsquo;aide de balises :<\/p>\n<pre><code class=\"languauge-php\">function toad_content( $content, $post ) {\n    if ( $post-&gt;post_type === 'hypnoToad' ) {\n        $content ='\n        &lt;div class=\"wp-block-columns\"&gt;&lt;!-- wp:column \u2192\n        &lt;div class=\"wp-block-column\"&gt;\n        &lt;p&gt;&lt;\/p&gt;\n        &lt;\/div&gt;\n        \n\n\n        &lt;div class=\"wp-block-column\"&gt;\n        &lt;p&gt;&lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;\/div&gt;\n        <!-- \/wp:columns -->';\n    }\n    return $content;\n}\nadd_filter( 'default_content', 'toad_content', 10, 2 );<\/code><\/pre>\n<p>Bien entendu, vous n&rsquo;utiliserez pas seulement JSON, <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-le-html\/\">HTML<\/a> et PHP. Vous utiliserez \u00e9galement d&rsquo;autres langages pour faciliter la conception et l&rsquo;interactivit\u00e9. La bonne nouvelle, c&rsquo;est que WordPress vous offre un moyen simple de le faire.<\/p>\n<h2>Utiliser des propri\u00e9t\u00e9s CSS personnalis\u00e9es pour vos blocs<\/h2>\n<p>Vous pouvez r\u00e9aliser beaucoup de choses en utilisant les propri\u00e9t\u00e9s, attributs et objets existants de <code>theme.json<\/code>, mais cela ne couvrira pas tous les cas d&rsquo;utilisation. Le fichier vous donne la propri\u00e9t\u00e9 <code>custom<\/code> qui vous aidera \u00e0 cr\u00e9er des propri\u00e9t\u00e9s CSS pertinentes :<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"custom\": {\n      \"toad\": \"hypno\"\n    }\n  }\n}<\/code><\/pre>\n<p>Ici, vous donnez une paire cl\u00e9-valeur, qui se transforme en une variable CSS sur l&rsquo;interface publique :<\/p>\n<pre><code class=\"language-json\">body {\n    --wp--custom--toad: hypno;\n}<\/code><\/pre>\n<p>Notez que la variable utilisera des doubles traits d&rsquo;union pour s\u00e9parer ses \u00e9l\u00e9ments. En g\u00e9n\u00e9ral, vous verrez toujours <code>--wp--custom--<\/code>, qui marquera la cl\u00e9 \u00e0 la fin. Parfois, vous d\u00e9finirez des variables et des propri\u00e9t\u00e9s en utilisant la casse camel :<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"settings\": {\n    \"custom\": {\n      \"hypnoToad\": \"active\"\n    }\n  }\n}<\/code><\/pre>\n<p>Dans ce cas, WordPress utilisera des traits d&rsquo;union pour s\u00e9parer les mots :<\/p>\n<pre><code class=\"language-json\">body {\n    --wp--custom--hypno-toad: active;\n}<\/code><\/pre>\n<p>Entre la propri\u00e9t\u00e9 <code>custom<\/code> et <code>block.json<\/code>, vous avez toute latitude pour construire vos blocs comme vous l&rsquo;entendez, y compris les variations que vous souhaitez inclure.<\/p>\n<h2>Coup d&rsquo;\u0153il rapide sur le bloc, le style et les variations de style du bloc<\/h2>\n<p>Avant de passer au style \u00e0 l&rsquo;aide de la propri\u00e9t\u00e9 <code>blocks<\/code>, examinons les variations. Vous disposez de plusieurs types de variations pour vos mod\u00e8les, et les conventions d&rsquo;appellation peuvent vous amener \u00e0 utiliser le mauvais type en fonction de vos besoins. Voici un aper\u00e7u des diff\u00e9rences :<\/p>\n<ul>\n<li><strong>Variations de blocs.<\/strong> Si votre bloc a des versions alternatives (pensez \u00e0 un bloc qui affiche de nombreux liens personnalis\u00e9s d\u00e9finis par l&rsquo;utilisateur), il s&rsquo;agit d&rsquo;une variation de bloc. Le bloc M\u00e9dias sociaux en est un bon exemple.<\/li>\n<li><strong>Variations de style.<\/strong> Il s&rsquo;agit de versions alternatives de <code>theme.json<\/code> qui fonctionnent sur votre site global. Nous n&rsquo;en parlons pas ici, mais la plupart des th\u00e8mes de blocs en proposent pour diff\u00e9rentes palettes de couleurs et r\u00e9glages de typographie.<\/li>\n<li><strong>Variations de style en bloc.<\/strong> Cette fonction reprend la fonctionnalit\u00e9 de base des variations de style et vous permet de cr\u00e9er des mod\u00e8les alternatifs pour un bloc.<\/li>\n<\/ul>\n<p>Vous pouvez vous demander s&rsquo;il est pr\u00e9f\u00e9rable d&rsquo;utiliser une variation de bloc ou une variation de style de bloc ; la r\u00e9ponse est simple. Si les modifications que vous souhaitez apporter peuvent \u00eatre effectu\u00e9es \u00e0 l&rsquo;int\u00e9rieur de <code>theme.json<\/code> ou \u00e0 l&rsquo;aide de CSS, cr\u00e9ez une variation de style de bloc. Dans le cas contraire, vous devez utiliser une variation de bloc.<\/p>\n<h3>Variations de bloc<\/h3>\n<p>Les <a href=\"https:\/\/developer.wordpress.org\/themes\/features\/block-variations\/\" target=\"_blank\" rel=\"noopener noreferrer\">variations de bloc<\/a> sont enregistr\u00e9es \u00e0 l&rsquo;aide de JavaScript. La cr\u00e9ation d&rsquo;un fichier dans le r\u00e9pertoire d&rsquo;un th\u00e8me est une bonne id\u00e9e, mais il peut aller n&rsquo;importe o\u00f9. Il suffit d&rsquo;une ligne pour enregistrer une variation dans votre fichier JavaScript :<\/p>\n<pre><code class=\"language-js\">const registerBlockVariation = ( blockName, variation )<\/code><\/pre>\n<p>Pour l&rsquo;objet <code>blockName<\/code>, vous devez \u00e9galement sp\u00e9cifier l&rsquo;espace de noms, comme vous le feriez pour la propri\u00e9t\u00e9 <code>blocks<\/code>. Dans l&rsquo;objet <code>variation<\/code>, vous ajouterez le nom, le titre, la description, si la variation est active par d\u00e9faut, etc. Pour charger le fichier dans l&rsquo;\u00c9diteur de site, il vous suffit d&rsquo;appeler le hook <code>enqueue_block_editor_assets<\/code> et d&rsquo;y <a href=\"https:\/\/kinsta.com\/fr\/blog\/wp-enqueue-scripts\/\">placer votre script en file d&rsquo;attente<\/a>.<\/p>\n<h3>Variations de style de bloc<\/h3>\n<p>En ce qui concerne les variations de style de bloc, <a href=\"https:\/\/developer.wordpress.org\/themes\/features\/block-style-variations\" target=\"_blank\" rel=\"noopener noreferrer\">deux options<\/a> s&rsquo;offrent \u00e0 vous :<\/p>\n<ul>\n<li>Utilisez la fonction <code>register_block_style()<\/code> avec PHP.<\/li>\n<li>Cr\u00e9ez un fichier JavaScript <code>block-editor.js<\/code>, utilisez la fonction <code>registerBlockStyle()<\/code> de la m\u00eame mani\u00e8re que pour les variations de blocs et mettez le script en file d&rsquo;attente.<\/li>\n<\/ul>\n<p>Une fois que vous avez enregistr\u00e9 une variation de style de bloc, vous pouvez cibler le bloc \u00e0 l&rsquo;aide de la propri\u00e9t\u00e9 <code>variations<\/code>:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n  \"blocks\": {\n    \"core\/button\": {\n      \"variations\": {\n        \"outline\": {\n          \"border\": {\n            \"color\": \"var:preset|color|black\",\n            \"radius\": \"0\",\n            \"style\": \"solid\",\n            \"width\": \"3px\"\n          },\n\u2026<\/code><\/pre>\n<p>Cela signifie que vous n&rsquo;aurez peut-\u00eatre pas besoin d&rsquo;une feuille de style CSS personnalis\u00e9e &#8211; presque tous les aspects de la conception d&rsquo;un bloc sont possibles gr\u00e2ce \u00e0 la propri\u00e9t\u00e9 <code>blocks<\/code>.<\/p>\n<h2>Stylisation d&rsquo;un bloc par d\u00e9faut \u00e0 l&rsquo;aide de la propri\u00e9t\u00e9 blocks, du d\u00e9but \u00e0 la fin<\/h2>\n<p>Pour illustrer le fonctionnement de la propri\u00e9t\u00e9 <code>blocks<\/code>, prenons un exemple concret. Notre site utilise le th\u00e8me Twenty Twenty-Four et la variation de style par d\u00e9faut :<\/p>\n<figure id=\"attachment_184912\" aria-describedby=\"caption-attachment-184912\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184912 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/default-style-variation.png\" alt=\"L'\u00e9diteur de site WordPress montre la page d'accueil du site sur le c\u00f4t\u00e9 droit, avec le menu Styles sur le c\u00f4t\u00e9 gauche. Il y a plusieurs options pour choisir un sch\u00e9ma de couleurs alternatif, ainsi que des options de personnalisation de la palette.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184912\" class=\"wp-caption-text\">Chaque th\u00e8me est souvent accompagn\u00e9 de plusieurs variations de style qui permettent d&rsquo;obtenir des aspects diff\u00e9rents.<\/figcaption><\/figure>\n<p>Jusqu&rsquo;\u00e0 pr\u00e9sent, cela nous semble id\u00e9al &#8211; bien que les titres et le corps du texte semblent avoir une couleur trop similaire. Nous souhaitons modifier l&rsquo;une des couleurs ou les deux pour les diff\u00e9rencier. En tant qu&rsquo;utilisateur final ou propri\u00e9taire de site, nous pouvons r\u00e9soudre ce probl\u00e8me dans la colonne lat\u00e9rale Styles de l&rsquo;\u00e9diteur de site. Si vous allez dans <strong>Blocs <\/strong>&gt;<strong> En-t\u00eate<\/strong>, vous pouvez cliquer sur l&rsquo;\u00e9l\u00e9ment Texte et changer la couleur pour quelque chose de plus appropri\u00e9 :<\/p>\n<figure id=\"attachment_184920\" aria-describedby=\"caption-attachment-184920\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184920 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/styles-heading-editor.png\" alt=\"L'interface de l'\u00e9diteur de site WordPress montre la page d'accueil d'un site web. La zone de contenu principal affiche un titre, une br\u00e8ve description et un bouton \u00ab \u00c0 propos de nous \u00bb, le tout en noir. En dessous se trouve une image architecturale repr\u00e9sentant un b\u00e2timent moderne avec des lattes de bois inclin\u00e9es. La barre lat\u00e9rale de droite pr\u00e9sente les options de style, avec un panneau permettant de s\u00e9lectionner la couleur du texte.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184920\" class=\"wp-caption-text\">Vous pouvez facilement modifier les r\u00e9glages de chaque bloc \u00e0 partir de l&rsquo;\u00e9diteur de site.<\/figcaption><\/figure>\n<p>Toutefois, en tant que d\u00e9veloppeur, vous pouvez le faire \u00e0 l&rsquo;int\u00e9rieur de <code>theme.json<\/code>. <span style=\"margin: 0px;padding: 0px\">Comme pour tout autre th\u00e8me, la meilleure approche consiste \u00e0 <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-enfant-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">cr\u00e9er un th\u00e8me enfant<\/a> afin de<\/span> pr\u00e9server les modifications que vous apportez. Un autre avantage est que votre fichier <code>theme.json<\/code> sera plus propre.<\/p>\n<p>Nous allons cr\u00e9er un r\u00e9pertoire dans <code>wp-content\/themes\/<\/code> et l&rsquo;appeler <code>twentytwentyfour-child<\/code>. Ajoutez-y un fichier <code>style.css<\/code> valide et un fichier <code>theme.json<\/code> vierge.<\/p>\n<figure id=\"attachment_184909\" aria-describedby=\"caption-attachment-184909\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184909 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/child-theme-directory.png\" alt=\"Fen\u00eatre de l'explorateur de fichiers macOS pour le th\u00e8me twentytwentyfour-child montrant deux fichiers : style.css et theme.json, indiquant une configuration de th\u00e8me enfant pour le d\u00e9veloppement WordPress.\" width=\"1200\" height=\"614\"><figcaption id=\"caption-attachment-184909\" class=\"wp-caption-text\">Chaque r\u00e9pertoire de th\u00e8me enfant a besoin d&rsquo;un fichier <strong>style.css<\/strong> et d&rsquo;un fichier <strong>theme.json.<\/strong><\/figcaption><\/figure>\n<p>\u00c0 partir de l\u00e0, vous pouvez ouvrir le fichier JSON et vous mettre au travail.<\/p>\n<h3>Cr\u00e9ation et remplissage d&rsquo;un fichier theme.json pour le th\u00e8me enfant<\/h3>\n<p>La principale diff\u00e9rence entre la cr\u00e9ation d&rsquo;un th\u00e8me parent et d&rsquo;un th\u00e8me enfant en ce qui concerne <code>theme.json<\/code> est la structure du fichier. Vous n&rsquo;aurez pas besoin d&rsquo;indiquer le sch\u00e9ma ou de tout mettre dans l&rsquo;objet <code>settings<\/code>. Dans notre cas, nous devons utiliser la propri\u00e9t\u00e9 <code>styles<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 3,\n  \"styles\": {\n    \"blocks\": {}\n  }\n}<\/code><\/pre>\n<p>Ensuite, nous devons trouver le namespace et le slug pour le bloc Heading. Le <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/core-blocks\/\">Guide de r\u00e9f\u00e9rence officiel des blocs de base<\/a> r\u00e9pertorie tous ces \u00e9l\u00e9ments et nous indique m\u00eame les attributs et propri\u00e9t\u00e9s pris en charge par le bloc. Le guide nous indique que nous pouvons modifier les valeurs <code>background<\/code>, <code>gradient<\/code>, <code>link<\/code> et <code>text<\/code> pour la propri\u00e9t\u00e9 <code>color<\/code>.<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n  \"core\/heading\": {\n    \"color\": {}\n  }\n}<\/code><\/pre>\n<p>La structure \u00e9tant termin\u00e9e, nous pouvons commencer \u00e0 r\u00e9fl\u00e9chir \u00e0 la mani\u00e8re de remodeler le texte.<\/p>\n<h3>Trouver une palette de couleurs et appliquer les modifications<\/h3>\n<p>Il nous faut maintenant une couleur qui corresponde \u00e0 nos besoins. La variation par d\u00e9faut de Twenty Twenty-Four dispose d&rsquo;une excellente palette, et la v\u00e9rifier dans un v\u00e9rificateur de contraste d\u00e9di\u00e9 nous donne quelques id\u00e9es :<\/p>\n<figure id=\"attachment_184918\" aria-describedby=\"caption-attachment-184918\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184918 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/palette-contrast.png\" alt=\"L'outil de v\u00e9rification du contraste de la palette de couleurs Coolors montre diverses combinaisons de couleurs avec des \u00e9chantillons de texte pour \u00e9valuer l'accessibilit\u00e9 et la lisibilit\u00e9. Un carr\u00e9 avec une case surlign\u00e9e en rouge montre deux codes hexad\u00e9cimaux de couleurs contrast\u00e9es compatibles.\" width=\"1200\" height=\"820\"><figcaption id=\"caption-attachment-184918\" class=\"wp-caption-text\">La v\u00e9rification de l&rsquo;accessibilit\u00e9 du contraste de vos jeux de couleurs est une \u00e9tape cl\u00e9 de la conception d&rsquo;un th\u00e8me.<\/figcaption><\/figure>\n<p>Ensuite, nous pouvons ajouter le choix de couleur pour notre bloc \u00e0 <code>theme.json<\/code>. Comme le th\u00e8me parent Twenty Twenty-Four utilise des propri\u00e9t\u00e9s CSS personnalis\u00e9es pour d\u00e9finir les styles de palette, nous pouvons l&rsquo;appeler ici aussi :<\/p>\n<pre><code class=\"language-json\">\u2026\n\"core\/paragraph\": {\n    \"color\": { \"text\": \"var(--wp--preset--color--contrast)\" },\n\u2026<\/code><\/pre>\n<p>Si vous avez besoin de connaitre le nom d&rsquo;une couleur de la palette, vous pouvez la trouver dans l&rsquo;\u00c9diteur de site \u00e0 partir du s\u00e9lecteur de couleurs :<\/p>\n<figure id=\"attachment_184919\" aria-describedby=\"caption-attachment-184919\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184919 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/palette-editor-color.png\" alt=\"Gros plan de l'interface de s\u00e9lection des couleurs de Text Elements. Elle pr\u00e9sente une s\u00e9lection d'\u00e9chantillons de couleurs avec des codes hexad\u00e9cimaux, la couleur Contraste \u00e9tant l'option principale.\" width=\"1200\" height=\"492\"><figcaption id=\"caption-attachment-184919\" class=\"wp-caption-text\">Vous pouvez trouver le nom d&rsquo;une couleur en la regardant dans une palette de couleurs de l&rsquo;\u00e9diteur de site.<\/figcaption><\/figure>\n<p>Une fois que vous avez enregistr\u00e9 vos modifications, actualisez votre site et vous devriez voir la nouvelle palette de couleurs en place. Si ce n&rsquo;est pas le cas, v\u00e9rifiez que vous imbriquez la propri\u00e9t\u00e9 <code>blocks<\/code> dans le bon objet, car il s&rsquo;agit d&rsquo;un probl\u00e8me courant.<\/p>\n<p>En examinant le site, nous constatons que le texte est moins contrast\u00e9 et plus facile \u00e0 lire. Cependant, nous souhaitons toujours voir une certaine d\u00e9finition entre le bloc de paragraphes et les titres qui l&rsquo;entourent. La palette par d\u00e9faut du th\u00e8me propose d&rsquo;autres couleurs plus audacieuses. Nous allons essayer la couleur Accent \/ 3 pour le bloc de titres :<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n  \"core\/heading\": {\n    \"color\": { \"text\": \"var(--wp--preset--color--accent-3)\" }\n  },\n  \"core\/paragraph\": {\n    \"color\": { \"text\": \"var(--wp--preset--color--contrast)\" }\n  }\n}<\/code><\/pre>\n<p>Apr\u00e8s avoir enregistr\u00e9 les modifications et actualis\u00e9 la page d&rsquo;accueil, vous constaterez que le bloc d&rsquo;en-t\u00eate est mieux d\u00e9fini :<\/p>\n<figure id=\"attachment_184907\" aria-describedby=\"caption-attachment-184907\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184907 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/accent-color-heading.png\" alt=\"L'\u00e9diteur de site WordPress montre une page d'accueil de site comprenant une image d'en-t\u00eate d'une structure architecturale moderne. Le contenu principal affiche le texte \u00ab Un engagement en faveur de l'innovation et de la durabilit\u00e9 \u00bb dans une couleur rouge-orange.\" width=\"1200\" height=\"677\"><figcaption id=\"caption-attachment-184907\" class=\"wp-caption-text\">Le frontend modifie le bloc d&rsquo;en-t\u00eate en fonction des r\u00e9glages du <strong>fichier theme.json.<\/strong><\/figcaption><\/figure>\n<p>Votre travail d&rsquo;\u00e9dition ne doit pas s&rsquo;arr\u00eater l\u00e0. Vous pouvez m\u00eame personnaliser les options de l&rsquo;\u00e9diteur de site \u00e0 partir de <code>theme.json<\/code>.<\/p>\n<h3>Ajout d&rsquo;options d&rsquo;attributs aux blocs<\/h3>\n<p>Les supports de chaque bloc d\u00e9terminent ses options dans l&rsquo;\u00e9diteur de site. Par exemple, le bloc Paragraphe d\u00e9sactive par d\u00e9faut la fonctionnalit\u00e9 de Lettrine.<\/p>\n<figure id=\"attachment_184917\" aria-describedby=\"caption-attachment-184917\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184917 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/no-drop-caps-option.png\" alt=\"L'\u00e9diteur de site WordPress montrant un gros plan de la barre lat\u00e9rale d'options \u00e0 droite. Le panneau flottant de personnalisation de la typographie affiche des options pour la police, la taille, l'apparence, la hauteur de ligne, l'espacement des lettres, la d\u00e9coration, l'orientation et la casse des lettres - mais pas de lettrine.\" width=\"1200\" height=\"633\"><figcaption id=\"caption-attachment-184917\" class=\"wp-caption-text\">L&rsquo;\u00e9diteur de site ne vous permet pas de choisir d&rsquo;impl\u00e9menter par d\u00e9faut les lettrines<\/figcaption><\/figure>\n<p>Nous pouvons r\u00e9activer cette fonctionnalit\u00e9 dans le fichier <code>theme.json<\/code> et la propri\u00e9t\u00e9 <code>blocks<\/code>. En examinant le mat\u00e9riel de r\u00e9f\u00e9rence, nous pouvons tirer parti de la propri\u00e9t\u00e9 typographie pour activer les lettrines :<\/p>\n<pre><code class=\"language-json\">\u2026\n\"core\/paragraph\": {\n  \"color\": { \"text\": \"var(--wp--preset--color--contrast)\" },\n  \"typography\": { \"dropCap\": true }\n\u2026<\/code><\/pre>\n<p>Une fois que nous aurons enregistr\u00e9 ces modifications et actualis\u00e9 l&rsquo;\u00e9diteur, vous pourrez choisir d&rsquo;activer ou non la fonction de lettrine :<\/p>\n<figure id=\"attachment_184914\" aria-describedby=\"caption-attachment-184914\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184914 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/drop-cap.png\" alt=\"L'interface de l'\u00e9diteur de blocs de WordPress montre un paragraphe de texte Lorem Ipsum avec une grande goutte d'eau. Des options de personnalisation de la typographie sont visibles dans la barre lat\u00e9rale de droite, et le menu ouvert Plus d'\u00e9l\u00e9ments montre l'option Drop cap activ\u00e9e.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184914\" class=\"wp-caption-text\">L&rsquo;activation de la fonctionnalit\u00e9 Lettrine dans l&rsquo;\u00e9diteur de site WordPress ne prend que quelques secondes avec <strong>theme.json<\/strong>.<\/figcaption><\/figure>\n<p>Le fichier <code>theme.json<\/code> n&rsquo;est pas seulement une configuration pour le design. Il permet \u00e9galement d&rsquo;ajouter ou de supprimer des fonctionnalit\u00e9s dans l&rsquo;\u00e9diteur de site.<\/p>\n<h2>Comment l&rsquo;h\u00e9bergement infog\u00e9r\u00e9 de Kinsta peut soutenir le d\u00e9veloppement de votre th\u00e8me WordPress<\/h2>\n<p>Les complexit\u00e9s du d\u00e9veloppement de th\u00e8mes et de <code>theme.json<\/code> reposent sur des solutions de qualit\u00e9 tout au long de la chaine de d\u00e9veloppement afin de tirer profit du potentiel d&rsquo;am\u00e9lioration des performances. Un environnement de d\u00e9veloppement local est crucial, car il vous permet de cr\u00e9er, de g\u00e9rer et de bricoler des sites WordPress sur votre machine locale. <a href=\"https:\/\/kinsta.com\/fr\/devkinsta\/\">DevKinsta<\/a> peut vous aider \u00e0 cet \u00e9gard.<\/p>\n<figure id=\"attachment_184913\" aria-describedby=\"caption-attachment-184913\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-184913 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/devkinsta-interface.png\" alt=\"The Site info dashboard within DevKinsta. It displays technical details such as WordPress version, web server, and database type, along with options to manage the site.\" width=\"1200\" height=\"689\"><figcaption id=\"caption-attachment-184913\" class=\"wp-caption-text\">L&rsquo;interface DevKinsta.<\/figcaption><\/figure>\n<p>DevKinsta offre de nombreux avantages :<\/p>\n<ul>\n<li>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 <code>theme.json<\/code> et vos blocs personnalis\u00e9s en toute tranquillit\u00e9.<\/li>\n<li>Vous pouvez effectuer des it\u00e9rations rapides sur votre fichier <code>theme.json<\/code> et voir les r\u00e9sultats imm\u00e9diatement dans votre environnement local.<\/li>\n<li>Cr\u00e9er plusieurs sites locaux pour tester votre th\u00e8me sur diff\u00e9rentes versions et configurations de WordPress est un jeu d&rsquo;enfant.<\/li>\n<\/ul>\n<p>De plus, vous n&rsquo;utiliserez aucune des ressources de votre serveur avant d&rsquo;\u00eatre satisfait et pr\u00eat. Les <a href=\"https:\/\/kinsta.com\/fr\/blog\/environnements-staging-kinsta\/\">environnements de staging<\/a> de Kinsta constituent l&rsquo;\u00e9tape suivante id\u00e9ale. Vous pouvez cr\u00e9er rapidement une copie de votre site de production et m\u00eame la transf\u00e9rer dans votre environnement local pour continuer \u00e0 travailler.<\/p>\n<p>C&rsquo;est un excellent moyen de r\u00e9aliser des tests de performance pour votre th\u00e8me, en particulier lorsque vous combinez l&rsquo;environnement de staging avec l&rsquo;outil <a href=\"https:\/\/kinsta.com\/fr\/docs\/hebergement-wordpress\/surveillance-wordpress\/outil-apm\/\">Application Performance Monitoring<\/a> (APM) de Kinsta.<\/p>\n<p>Vous pouvez \u00e9galement tirer parti de l&rsquo;int\u00e9gration Git de Kinsta dans tous vos environnements. Cela vous permet de pousser et de tirer des changements vers des d\u00e9p\u00f4ts et de les d\u00e9ployer \u00e0 partir de l\u00e0.<\/p>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Comprendre la propri\u00e9t\u00e9 <code>blocks<\/code> dans <code>theme.json<\/code> est une \u00e9tape n\u00e9cessaire pour tous les d\u00e9veloppeurs de th\u00e8mes. Cela peut rendre un design global plus unique, coh\u00e9rent et pertinent. Le fait d&rsquo;avoir la possibilit\u00e9 de travailler avec les r\u00e9glages de base et les r\u00e9glages personnalis\u00e9s des blocs permet \u00e0 chaque utilisateur d&rsquo;exploiter les capacit\u00e9s de l&rsquo;\u00e9dition compl\u00e8te du site. En outre, le fait que ces options soient disponibles dans l&rsquo;\u00e9diteur de site signifie que les utilisateurs finaux peuvent apporter leurs propres modifications sans code alors que vous pr\u00e9sentez des options par d\u00e9faut stellaires.<\/p>\n<p>Vous avez des questions sur l&rsquo;utilisation de la propri\u00e9t\u00e9 <code>blocks<\/code> avec le fichier <code>theme.json<\/code>? Posez-les dans la section des commentaires ci-dessous !<\/p>","protected":false},"excerpt":{"rendered":"<p>L&rsquo;introduction de l&rsquo;\u00e9dition compl\u00e8te de sites (FSE) dans WordPress souligne l&rsquo;importance croissante du fichier theme.json. Il y a maintenant une toute nouvelle hi\u00e9rarchie et structure \u00e0 &#8230;<\/p>\n","protected":false},"author":199,"featured_media":78206,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1041,1028],"class_list":["post-78205","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-conception-site-web-wordpress","topic-developpement-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Aper\u00e7u de la propri\u00e9t\u00e9 des blocs theme.json pour les d\u00e9veloppeurs<\/title>\n<meta name=\"description\" content=\"Apprenez \u00e0 utiliser la propri\u00e9t\u00e9 blocks de theme.json pour profiter d&#039;une approche simplifi\u00e9e du d\u00e9veloppement WordPress.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ce que les d\u00e9veloppeurs WordPress doivent savoir sur la propri\u00e9t\u00e9 blocks dans theme.json\" \/>\n<meta property=\"og:description\" content=\"Apprenez \u00e0 utiliser la propri\u00e9t\u00e9 blocks de theme.json pour profiter d&#039;une approche simplifi\u00e9e du d\u00e9veloppement WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-30T14:28:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-01T13:37:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/09\/blocks-property-in-theme-json.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Apprenez \u00e0 utiliser la propri\u00e9t\u00e9 blocks de theme.json pour profiter d&#039;une approche simplifi\u00e9e du d\u00e9veloppement WordPress.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/09\/blocks-property-in-theme-json-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"21 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Ce que les d\u00e9veloppeurs WordPress doivent savoir sur la propri\u00e9t\u00e9 blocks dans theme.json\",\"datePublished\":\"2024-09-30T14:28:08+00:00\",\"dateModified\":\"2024-10-01T13:37:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/\"},\"wordCount\":3953,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/09\/blocks-property-in-theme-json.png\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/\",\"name\":\"Aper\u00e7u de la propri\u00e9t\u00e9 des blocs theme.json pour les d\u00e9veloppeurs\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/09\/blocks-property-in-theme-json.png\",\"datePublished\":\"2024-09-30T14:28:08+00:00\",\"dateModified\":\"2024-10-01T13:37:58+00:00\",\"description\":\"Apprenez \u00e0 utiliser la propri\u00e9t\u00e9 blocks de theme.json pour profiter d'une approche simplifi\u00e9e du d\u00e9veloppement WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/09\/blocks-property-in-theme-json.png\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/09\/blocks-property-in-theme-json.png\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"D\u00e9veloppement WordPress\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/developpement-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Ce que les d\u00e9veloppeurs WordPress doivent savoir sur la propri\u00e9t\u00e9 blocks dans theme.json\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"caption\":\"Jeremy Holcombe\"},\"description\":\"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jeremyholcombe\/\"],\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Aper\u00e7u de la propri\u00e9t\u00e9 des blocs theme.json pour les d\u00e9veloppeurs","description":"Apprenez \u00e0 utiliser la propri\u00e9t\u00e9 blocks de theme.json pour profiter d'une approche simplifi\u00e9e du d\u00e9veloppement WordPress.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/","og_locale":"fr_FR","og_type":"article","og_title":"Ce que les d\u00e9veloppeurs WordPress doivent savoir sur la propri\u00e9t\u00e9 blocks dans theme.json","og_description":"Apprenez \u00e0 utiliser la propri\u00e9t\u00e9 blocks de theme.json pour profiter d'une approche simplifi\u00e9e du d\u00e9veloppement WordPress.","og_url":"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2024-09-30T14:28:08+00:00","article_modified_time":"2024-10-01T13:37:58+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/09\/blocks-property-in-theme-json.png","type":"image\/png"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Apprenez \u00e0 utiliser la propri\u00e9t\u00e9 blocks de theme.json pour profiter d'une approche simplifi\u00e9e du d\u00e9veloppement WordPress.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/09\/blocks-property-in-theme-json-1024x512.png","twitter_creator":"@kinsta_fr","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Jeremy Holcombe","Dur\u00e9e de lecture estim\u00e9e":"21 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Ce que les d\u00e9veloppeurs WordPress doivent savoir sur la propri\u00e9t\u00e9 blocks dans theme.json","datePublished":"2024-09-30T14:28:08+00:00","dateModified":"2024-10-01T13:37:58+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/"},"wordCount":3953,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/09\/blocks-property-in-theme-json.png","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/","url":"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/","name":"Aper\u00e7u de la propri\u00e9t\u00e9 des blocs theme.json pour les d\u00e9veloppeurs","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/09\/blocks-property-in-theme-json.png","datePublished":"2024-09-30T14:28:08+00:00","dateModified":"2024-10-01T13:37:58+00:00","description":"Apprenez \u00e0 utiliser la propri\u00e9t\u00e9 blocks de theme.json pour profiter d'une approche simplifi\u00e9e du d\u00e9veloppement WordPress.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/09\/blocks-property-in-theme-json.png","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/09\/blocks-property-in-theme-json.png","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/propriete-blocks-theme-json\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"D\u00e9veloppement WordPress","item":"https:\/\/kinsta.com\/fr\/sujets\/developpement-wordpress\/"},{"@type":"ListItem","position":3,"name":"Ce que les d\u00e9veloppeurs WordPress doivent savoir sur la propri\u00e9t\u00e9 blocks dans theme.json"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","caption":"Jeremy Holcombe"},"description":"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.","sameAs":["https:\/\/www.linkedin.com\/in\/jeremyholcombe\/"],"url":"https:\/\/kinsta.com\/fr\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/78205","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=78205"}],"version-history":[{"count":10,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/78205\/revisions"}],"predecessor-version":[{"id":78230,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/78205\/revisions\/78230"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78205\/translations\/en"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78205\/translations\/jp"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78205\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78205\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78205\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78205\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78205\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78205\/translations\/es"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/78205\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/78206"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=78205"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=78205"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=78205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}