{"id":51435,"date":"2022-01-04T13:10:04","date_gmt":"2022-01-04T12:10:04","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=51435&#038;preview=true&#038;preview_id=51435"},"modified":"2023-08-22T14:40:36","modified_gmt":"2023-08-22T13:40:36","slug":"twenty-twenty-two-themes","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/","title":{"rendered":"Une plong\u00e9e en profondeur dans Twenty Twenty-Two et les th\u00e8mes \u00e0 base de blocs WordPress"},"content":{"rendered":"<p>Bien que ce soit un peu plus tard que pr\u00e9vu, nous allons avoir un nouveau th\u00e8me par d\u00e9faut pour WordPress. Son nom est Twenty Twenty-Two !<\/p>\n<p>Le nouveau th\u00e8me par d\u00e9faut de WordPress est livr\u00e9 avec la version <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-9\/\">5.9 de WordPress<\/a>. Nous \u00e9tions curieux d&rsquo;en savoir plus sur ce nouveau th\u00e8me, nous avons donc install\u00e9 et test\u00e9 Twenty Twenty-Two sur un <a href=\"https:\/\/kinsta.com\/fr\/devkinsta\/\">environnement de d\u00e9veloppement local<\/a> utilisant <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-9\/\">WordPress 5.9<\/a>.<\/p>\n<p>Nous vous montrerons nos r\u00e9sultats avant de conclure nos r\u00e9flexions pour vous offrir un aper\u00e7u approfondi des tenants et aboutissants du nouveau th\u00e8me WordPress.<\/p>\n<figure id=\"attachment_110731\" aria-describedby=\"caption-attachment-110731\" style=\"width: 2560px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110731 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2.jpg\" alt=\"Un aper\u00e7u de Twenty Twenty-Two, le nouveau th\u00e8me par d\u00e9faut de WordPress\" width=\"2560\" height=\"1752\"><figcaption id=\"caption-attachment-110731\" class=\"wp-caption-text\">Un aper\u00e7u de Twenty Twenty-Two, le nouveau th\u00e8me par d\u00e9faut de WordPress (Image source : <a href=\"https:\/\/make.wordpress.org\/core\/2021\/10\/06\/introducing-twenty-twenty-two\/\">WordPress.org<\/a>)<\/figcaption><\/figure>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2021\/10\/06\/introducing-twenty-twenty-two\/\">Twenty Twenty-Two<\/a> a \u00e9t\u00e9 con\u00e7u pour \u00eatre le th\u00e8me par d\u00e9faut le plus flexible, le plus l\u00e9ger et le plus personnalisable qui soit. Il offre un excellent terrain de jeu pour tester les blocs, les compositions et les mod\u00e8les.<\/p>\n<p>\u00c9tant un th\u00e8me \u00e0 base de blocs, il vous aidera \u00e0 mieux explorer l&rsquo;\u00e9dition compl\u00e8te du site, les styles globaux, les blocs de navigation et les nouvelles galeries d&rsquo;images, qui sont les fonctionnalit\u00e9s les plus attendues de WordPress 5.9.<\/p>\n<p>Nous devons dire tout de suite que <strong>Twenty Twenty-Two est le premier th\u00e8me bas\u00e9 sur des blocs par d\u00e9faut <\/strong>!<\/p>\n<p>L&rsquo;un des objectifs les plus ambitieux de ce nouveau th\u00e8me est de <strong>donner du pouvoir aux utilisateurs<\/strong>. Avec autant de compositions et de mod\u00e8les disponibles d\u00e8s le d\u00e9part, les utilisateurs peuvent construire des mises en page complexes en quelques clics seulement. Le reste n&rsquo;est que de la personnalisation de style.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Twenty Twenty-Two sera publi\u00e9 avec WordPress 5.9. Le th\u00e8me est toujours en cours de d\u00e9veloppement au moment de la r\u00e9daction de cet article, et ce qui est rapport\u00e9 ici pourrait changer de mani\u00e8re significative avant la sortie de la version finale.<\/p>\n<\/aside>\n\n<p>D&rsquo;un point de vue technique, \u00e9crire sur Twenty Twenty-Two n&rsquo;est pas tr\u00e8s diff\u00e9rent d&rsquo;\u00e9crire sur les derni\u00e8res et plus puissantes fonctionnalit\u00e9s \u00e0 venir avec WordPress 5.9. Mais Twenty Twenty-Two nous fournit une loupe pour mieux appr\u00e9cier les nouvelles fonctions d&rsquo;\u00e9dition de sites et se faire une meilleure id\u00e9e de l&rsquo;avenir de la plateforme.<\/p>\n<p>Nous sommes donc ici pour vous pr\u00e9senter le nouveau th\u00e8me.<\/p>\n<p>Tout d&rsquo;abord, nous allons explorer le <strong>nouveau flux d&rsquo;\u00e9dition de site<\/strong> que les utilisateurs d\u00e9couvriront avec WordPress 5.9 et Twenty Twenty-Two.<\/p>\n<p>Ensuite, nous nous plongerons dans les principales fonctionnalit\u00e9s du th\u00e8me bloc mises en \u0153uvre dans Twenty Twenty-Two. Vous apprendrez \u00e0 conna\u00eetre les <strong>styles globaux<\/strong>, les <strong>motifs de bloc<\/strong>, les <strong>mod\u00e8les<\/strong> et les <strong>parties de mod\u00e8le<\/strong>.<\/p>\n<p>Mais il y a encore beaucoup \u00e0 dire sur Twenty Twenty-Two et les th\u00e8mes \u00e0 base de blocs de WordPress. Ainsi, en guise de chapitre bonus, nous vous donnerons un aper\u00e7u rapide de la mani\u00e8re d&rsquo;\u00e9tendre les fonctionnalit\u00e9s de Twenty Twenty-Two en tirant parti du fichier <strong>theme.json<\/strong>.<\/p>\n<p>https:\/\/twitter.com\/kjellr\/status\/1445800581189160968<\/p>\n<p>Mettons-nous au travail et plongeons dans le tout nouveau th\u00e8me par d\u00e9faut de WordPress, Twenty Twenty-Two.<\/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>Twenty Twenty-Two apporte un nouveau flux d&rsquo;\u00e9dition de site<\/h2>\n<p>Plusieurs fonctionnalit\u00e9s compl\u00e8tes d&rsquo;\u00e9dition de site sont int\u00e9gr\u00e9es au c\u0153ur de WordPress 5.9. Les propri\u00e9taires de sites utilisant la derni\u00e8re version de WordPress avec un th\u00e8me bas\u00e9 sur des blocs tel que Twenty Twenty-Two install\u00e9 seront bient\u00f4t en mesure de :<\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/\">Cr\u00e9er et modifier des articles et des pages<\/a> en utilisant davantage de blocs et de composition<\/li>\n<li>Personnaliser les <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/#block-settings-and-styles-with-themejson\">r\u00e9glages et les styles<\/a> d\u00e9finis dans le fichier <strong>theme.json<\/strong> gr\u00e2ce \u00e0 l&rsquo;interface des styles globaux<\/li>\n<li>Cr\u00e9er et modifier des mod\u00e8les de pages et d&rsquo;articles<\/li>\n<li>Cr\u00e9er et modifier des parties de mod\u00e8le pour l&rsquo;en-t\u00eate, le pied de page et d&rsquo;autres zones de mod\u00e8le<\/li>\n<\/ul>\n<p>Avec toutes ces fonctionnalit\u00e9s int\u00e9gr\u00e9es au c\u0153ur, les contributeurs du c\u0153ur de WordPress ont discut\u00e9 de <a href=\"https:\/\/make.wordpress.org\/design\/2021\/10\/15\/site-editing-ia-concepts-how-to-surface-and-access-new-features\/\">l&rsquo;\u00e9volution de l&rsquo;architecture de l&rsquo;information<\/a> et ont redessin\u00e9 l&rsquo;ensemble du <a href=\"https:\/\/make.wordpress.org\/design\/2021\/10\/22\/site-editing-ia-concepts-part-2\/\">flux d&rsquo;\u00e9dition du site<\/a>.<\/p>\n<p>La premi\u00e8re chose que vous pourriez remarquer une fois que vous avez activ\u00e9 Twenty-Two est que le point d&rsquo;entr\u00e9e de l&rsquo;\u00e9diteur de site n&rsquo;est plus situ\u00e9 dans le menu principal de votre tableau de bord WordPress, mais a \u00e9t\u00e9 d\u00e9plac\u00e9 sous le menu <strong>Apparence<\/strong>.<\/p>\n<figure id=\"attachment_110738\" aria-describedby=\"caption-attachment-110738\" style=\"width: 1980px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110738 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/editor-menu-wp-59.jpg\" alt=\"Le nouveau menu Apparence dans WordPress 5.9\" width=\"1980\" height=\"952\"><figcaption id=\"caption-attachment-110738\" class=\"wp-caption-text\">Le nouveau menu Apparence dans WordPress 5.9<\/figcaption><\/figure>\n<p>Le fait de rassembler les fonctions d&rsquo;\u00e9dition des mod\u00e8les et des styles sous le m\u00eame menu <strong>Apparence<\/strong> devrait simplifier l&rsquo;exp\u00e9rience d&rsquo;\u00e9dition. Il devrait \u00eatre plus facile de comprendre que les fonctionnalit\u00e9s auxquelles vous acc\u00e9dez sont li\u00e9es \u00e0 la <em>pr\u00e9sentation<\/em> de vos pages.<\/p>\n\n<p>L&rsquo;\u00e9l\u00e9ment de menu <strong>\u00c9diteur<\/strong> ouvre le mod\u00e8le de page d&rsquo;accueil du site. En fonction de vos r\u00e9glages de lecture, il peut s&rsquo;agir de votre page des derniers articles ou d&rsquo;une page statique.<\/p>\n<figure id=\"attachment_110740\" aria-describedby=\"caption-attachment-110740\" style=\"width: 2130px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110740 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-site-editor.jpg\" alt=\"L'\u00e9diteur de site dans WordPress 5.9 avec Twenty Twenty-Two\" width=\"2130\" height=\"1002\"><figcaption id=\"caption-attachment-110740\" class=\"wp-caption-text\">L&rsquo;\u00e9diteur de site dans WordPress 5.9 avec Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Maintenant, en cliquant sur l&rsquo;ic\u00f4ne WordPress dans le coin sup\u00e9rieur gauche, un nouveau <a href=\"https:\/\/make.wordpress.org\/design\/2021\/10\/22\/site-editing-ia-concepts-part-2\/\">menu de navigation de l&rsquo;\u00e9diteur de site<\/a> s&rsquo;affiche, comprenant trois \u00e9l\u00e9ments de menu : <strong>Site<\/strong>, <strong>Mod\u00e8les,<\/strong> et <strong>Parties de mod\u00e8le<\/strong>.<\/p>\n<p>Regardons de plus pr\u00e8s.<\/p>\n<figure id=\"attachment_110741\" aria-describedby=\"caption-attachment-110741\" style=\"width: 2318px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110741 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/editor-navigation-menu.jpg\" alt=\"Le menu de navigation de l'\u00e9diteur\" width=\"2318\" height=\"1046\"><figcaption id=\"caption-attachment-110741\" class=\"wp-caption-text\">Le menu de navigation de l&rsquo;\u00e9diteur<\/figcaption><\/figure>\n<p>L&rsquo;option <strong>Site<\/strong> ouvre le mod\u00e8le de page d&rsquo;accueil (derniers articles du blog ou page d&rsquo;accueil statique).<\/p>\n<p>L&rsquo;option de menu <strong>Mod\u00e8les<\/strong> vous permet d&rsquo;obtenir une liste des mod\u00e8les disponibles. Vous pouvez cliquer sur n&rsquo;importe quel mod\u00e8le de la liste pour le lancer dans l&rsquo;\u00e9diteur.<\/p>\n<p>\u00c0 l&rsquo;heure o\u00f9 nous \u00e9crivons ces lignes, Twenty Twenty-Two propose 11 mod\u00e8les.<\/p>\n<figure id=\"attachment_110746\" aria-describedby=\"caption-attachment-110746\" style=\"width: 2132px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110746 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-templates.jpg\" alt=\"Mod\u00e8les de Twenty Twenty-Two.\" width=\"2132\" height=\"1218\"><figcaption id=\"caption-attachment-110746\" class=\"wp-caption-text\">Mod\u00e8les de Twenty Twenty-Two.<\/figcaption><\/figure>\n<p>En cliquant sur l&rsquo;ic\u00f4ne en forme de point de suspension (<strong>\ufe19<\/strong>) \u00e0 droite, vous pouvez effacer vos personnalisations.<\/p>\n<figure id=\"attachment_111357\" aria-describedby=\"caption-attachment-111357\" style=\"width: 1378px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111357 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-template-clear-customizations.jpg\" alt=\"Effacer les personnalisations de mod\u00e8le\" width=\"1378\" height=\"686\"><figcaption id=\"caption-attachment-111357\" class=\"wp-caption-text\">Effacer les personnalisations de mod\u00e8le<\/figcaption><\/figure>\n<p>Contrairement aux mod\u00e8les de th\u00e8me, les mod\u00e8les personnalis\u00e9s peuvent uniquement \u00eatre renomm\u00e9s ou supprim\u00e9s (mais vous pouvez <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/#template-editing-mode\">modifier les mod\u00e8les personnalis\u00e9s<\/a> dans l&rsquo;\u00e9diteur de publication).<\/p>\n<figure id=\"attachment_111356\" aria-describedby=\"caption-attachment-111356\" style=\"width: 1368px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111356 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/wp-59-delete-rename-custom-template.jpg\" alt=\"Renommer\/supprimer les mod\u00e8les personnalis\u00e9s\" width=\"1368\" height=\"382\"><figcaption id=\"caption-attachment-111356\" class=\"wp-caption-text\">Renommer\/supprimer les mod\u00e8les personnalis\u00e9s<\/figcaption><\/figure>\n<p>L&rsquo;\u00e9l\u00e9ment de menu <strong>Parties de mod\u00e8le<\/strong> liste les parties de mod\u00e8le disponibles que vous pouvez ouvrir dans l&rsquo;\u00e9diteur pour vos personnalisations.<\/p>\n<p>Vous trouverez quatre parties de mod\u00e8le ajout\u00e9es par d\u00e9faut \u00e0 Twenty Twenty-Two. En passant le curseur sur un mod\u00e8le modifi\u00e9, une info-bulle s&rsquo;affiche pour vous indiquer que le mod\u00e8le a \u00e9t\u00e9 personnalis\u00e9.<\/p>\n<figure id=\"attachment_110747\" aria-describedby=\"caption-attachment-110747\" style=\"width: 2128px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110747 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-template-parts.jpg\" alt=\"Parties de mod\u00e8le de Twenty Twenty-Two.\" width=\"2128\" height=\"1120\"><figcaption id=\"caption-attachment-110747\" class=\"wp-caption-text\">Parties de mod\u00e8le de Twenty Twenty-Two.<\/figcaption><\/figure>\n<p>Vous pouvez effacer ces personnalisations en cliquant sur l&rsquo;ic\u00f4ne en forme d&rsquo;ellipse (<strong>\ufe19<\/strong>) \u00e0 droite.<\/p>\n<figure id=\"attachment_111354\" aria-describedby=\"caption-attachment-111354\" style=\"width: 2214px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111354 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-template-parts-clear-customizations.jpg\" alt=\"Effacer les personnalisations des parties de mod\u00e8le\" width=\"2214\" height=\"1118\"><figcaption id=\"caption-attachment-111354\" class=\"wp-caption-text\">Effacer les personnalisations des parties de mod\u00e8le<\/figcaption><\/figure>\n<h3>Modification des mod\u00e8les et des parties de mod\u00e8le<\/h3>\n<p><strong>L&rsquo;\u00e9diteur<\/strong> fournit l&rsquo;interface permettant de personnaliser la structure de vos <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/create-block-theme\/#required-files-and-file-structure\">mod\u00e8les et parties de mod\u00e8le<\/a>.<\/p>\n<p>Vous pouvez y ajouter ou modifier facilement des blocs et des compositions, et vos modifications seront automatiquement appliqu\u00e9es \u00e0 chaque page qui utilise ce mod\u00e8le.<\/p>\n<figure id=\"attachment_110836\" aria-describedby=\"caption-attachment-110836\" style=\"width: 2534px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110836 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/editing-single-post-template.jpg\" alt=\"Modification du mod\u00e8le d'article individuel\" width=\"2534\" height=\"1294\"><figcaption id=\"caption-attachment-110836\" class=\"wp-caption-text\">Modification du mod\u00e8le d&rsquo;article individuel<\/figcaption><\/figure>\n<p>L&rsquo;image ci-dessous montre le mod\u00e8le de page 404 dans l&rsquo;\u00e9diteur. Il s&rsquo;agit d&rsquo;un mod\u00e8le assez simple, ne comprenant qu&rsquo;un titre, un paragraphe et une bo\u00eete de recherche. N\u00e9anmoins, il nous permet de bien comprendre le fonctionnement de l&rsquo;interface utilisateur.<\/p>\n<figure id=\"attachment_110826\" aria-describedby=\"caption-attachment-110826\" style=\"width: 1796px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110826 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/404-page-template.jpg\" alt=\"Le mod\u00e8le de bloc 404 de Twenty Twenty-Two dans l'\u00e9diteur de mod\u00e8les\" width=\"1796\" height=\"1350\"><figcaption id=\"caption-attachment-110826\" class=\"wp-caption-text\">Le mod\u00e8le de bloc 404 de Twenty Twenty-Two dans l&rsquo;\u00e9diteur de mod\u00e8les<\/figcaption><\/figure>\n<p>Ici, vous pouvez effectuer des modifications et personnaliser les mod\u00e8les pour qu&rsquo;ils r\u00e9pondent au mieux \u00e0 vos besoins. Par exemple, vous pouvez ajouter un mod\u00e8le de <strong>grille d&rsquo;images d&rsquo;articles<\/strong> pour augmenter l&rsquo;engagement de vos visiteurs et les inviter \u00e0 parcourir le contenu de votre site web.<\/p>\n<figure id=\"attachment_111351\" aria-describedby=\"caption-attachment-111351\" style=\"width: 2872px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111351 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/grid-of-image-post-pattern.jpg\" alt=\"Personnalisation du mod\u00e8le de bloc 404 de Twenty Twenty-Two\" width=\"2872\" height=\"1314\"><figcaption id=\"caption-attachment-111351\" class=\"wp-caption-text\">Personnalisation du mod\u00e8le de bloc 404 de Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Le menu d\u00e9roulant de l&rsquo;en-t\u00eate en haut de l&rsquo;\u00e9diteur de mod\u00e8le affiche une liste des <strong>zones de mod\u00e8le<\/strong> disponibles. La m\u00eame liste appara\u00eet dans l&rsquo;onglet <strong>Mod\u00e8le<\/strong> dans les <strong>R\u00e9glages <\/strong>de la colonne lat\u00e9rale.<\/p>\n<figure id=\"attachment_110761\" aria-describedby=\"caption-attachment-110761\" style=\"width: 2242px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110761 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/template-areas.jpg\" alt=\"Zones de mod\u00e8le dans Twenty Twenty-Two\" width=\"2242\" height=\"1036\"><figcaption id=\"caption-attachment-110761\" class=\"wp-caption-text\">Zones de mod\u00e8le dans Twenty Twenty-Two<\/figcaption><\/figure>\n<p>En cliquant sur n&rsquo;importe quelle zone de mod\u00e8le (par exemple l&rsquo;en-t\u00eate), vous serez directement amen\u00e9 \u00e0 la partie du mod\u00e8le que vous voulez modifier.<\/p>\n<p>Si vous cliquez sur l&rsquo;ic\u00f4ne en forme d&rsquo;ellipse \u00e0 droite, vous acc\u00e9derez \u00e0<strong> l&rsquo;\u00e9diteur de partie de mod\u00e8le isol\u00e9e<\/strong>.<\/p>\n<figure id=\"attachment_110748\" aria-describedby=\"caption-attachment-110748\" style=\"width: 2292px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110748 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/editing-template-parts.jpg\" alt=\"L'ic\u00f4ne ellipse lance l'\u00e9diteur de partie de mod\u00e8le isol\u00e9e\" width=\"2292\" height=\"1316\"><figcaption id=\"caption-attachment-110748\" class=\"wp-caption-text\">L&rsquo;ic\u00f4ne ellipse lance l&rsquo;\u00e9diteur de partie de mod\u00e8le isol\u00e9e<\/figcaption><\/figure>\n<p>L&rsquo;\u00e9diteur de partie de mod\u00e8le fournit \u00e9galement une paire de poign\u00e9es d\u00e9pla\u00e7ables, vous permettant de v\u00e9rifier comment le mod\u00e8le se comporte dans diff\u00e9rentes r\u00e9solutions d&rsquo;\u00e9cran.<\/p>\n<figure id=\"attachment_110762\" aria-describedby=\"caption-attachment-110762\" style=\"width: 2130px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110762 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/adjusting-preview-dimension-1.jpg\" alt=\"R\u00e9glage de la dimension de l'aper\u00e7u d'une partie de mod\u00e8le\" width=\"2130\" height=\"1196\"><figcaption id=\"caption-attachment-110762\" class=\"wp-caption-text\">R\u00e9glage de la dimension de l&rsquo;aper\u00e7u d&rsquo;une partie de mod\u00e8le<\/figcaption><\/figure>\n<p>Lorsque vous \u00eates satisfait de vos modifications, enregistrez-les et retournez dans l&rsquo;\u00e9diteur de mod\u00e8le principal pour v\u00e9rifier le r\u00e9sultat final.<\/p>\n<p>Si vous voulez plonger plus profond\u00e9ment dans la nouvelle architecture d&rsquo;information, vous pouvez consulter les articles suivants :<\/p>\n<ul>\n<li><a href=\"https:\/\/make.wordpress.org\/design\/2021\/10\/15\/site-editing-ia-concepts-how-to-surface-and-access-new-features\/\">Concepts d&rsquo;\u00e9dition de site IA : Comment faire appara\u00eetre et acc\u00e9der aux nouvelles fonctionnalit\u00e9s<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/design\/2021\/10\/22\/site-editing-ia-concepts-part-2\/\">Concepts d&rsquo;IA pour l&rsquo;\u00e9dition de sites &#8211; Partie 2<\/a><\/li>\n<\/ul>\n<h2>Dans le c\u0153ur de Twenty Twenty-Two : Un aper\u00e7u rapide de <strong>theme.json<\/strong><\/h2>\n<p>Pour bien comprendre le fonctionnement de Twenty Twenty-Two et des th\u00e8mes blocs (comme <a href=\"https:\/\/www.anarieldesign.com\/themes\/block-based-wordpress-theme\/\">Bricksy<\/a>), jetons un coup d&rsquo;\u0153il au nouveau m\u00e9canisme de configuration et de style du th\u00e8me bas\u00e9 sur le fichier <strong>theme.json<\/strong>.<\/p>\n<p>Introduit avec <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/#block-settings-and-styles-with-themejson\">WordPress 5.8<\/a>, ce nouveau m\u00e9canisme permet aux d\u00e9veloppeurs de th\u00e8mes de configurer l&rsquo;\u00e9diteur et d&rsquo;ajouter des fonctionnalit\u00e9s \u00e0 partir d&rsquo;un <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/introducing-theme-json-in-wordpress-5-8\/\">point de configuration central<\/a>.<\/p>\n<p>Dans Twenty Twenty-Two, le fichier <strong>theme.json<\/strong> a la structure suivante :<\/p>\n<pre><code class=\"language-json\">{\n\t\"version\": 2,\n\t\"settings\": {},\n\t\"styles\": {},\n\t\"customTemplates\": {},\n\t\"templateParts\": {}\n}<\/code><\/pre>\n<p>Jetons un coup d&rsquo;\u0153il rapide \u00e0 chaque section.<\/p>\n<h3>Version<\/h3>\n<p>Le champ <code>version<\/code> d\u00e9crit la version de la sp\u00e9cification, qui est actuellement <code>2<\/code>.<\/p>\n<h3>Settings<\/h3>\n<p>La section <code>settings<\/code> <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#settings\">d\u00e9finit les r\u00e9glages<\/a> au niveau global ou au niveau du bloc. Les r\u00e9glages d\u00e9finis au niveau sup\u00e9rieur affectent tous les blocs, mais les blocs peuvent individuellement remplacer les r\u00e9glges globaux. Dans Twenty Twenty-Two, vous trouverez r\u00e9glages suivants :<\/p>\n<pre><code class=\"language-json\">{\n\t\"settings\": {\n\t\t\"appearanceTools\": true,\n\t\t\"color\": {\n\t\t\t\"duotone\": [...],\n\t\t\t\"gradients\": [...],\n\t\t\t\"palette\": [...]\n\t\t},\n\t\t\"custom\": {...},\n\t\t\"spacing\": {...},\n\t\t\"typography\": {\n\t\t\t\"dropCap\": false,\n\t\t\t\"fontFamilies\": [...],\n\t\t\t\"fontSizes\": [...]\n\t\t},\n\t\t\"layout\": {...}\n\t}\n}<\/code><\/pre>\n<p>Les <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#css-custom-properties-presets-custom\">r\u00e9glages par d\u00e9faut<\/a> sont appel\u00e9s <strong>pr\u00e9r\u00e9glages<\/strong> et sont utilis\u00e9s pour <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#the-naming-schema-of-css-custom-properties\">g\u00e9n\u00e9rer des propri\u00e9t\u00e9s personnalis\u00e9es CSS<\/a> et des noms de classe sur la base d&rsquo;une <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#the-naming-schema-of-css-custom-properties\">convention d&rsquo;appellation<\/a> sp\u00e9cifique :<\/p>\n<ul>\n<li>Propri\u00e9t\u00e9 personnalis\u00e9e CSS <code>--wp--preset--{preset-category}--{preset-slug}<\/code><\/li>\n<li>Nom de classe CSS <code>.has-{preset-slug}-{preset-category}<\/code><\/li>\n<\/ul>\n<p>Une fois qu&rsquo;un th\u00e8me a d\u00e9fini ses pr\u00e9r\u00e9glages, les propri\u00e9t\u00e9s personnalis\u00e9es CSS correspondantes peuvent \u00eatre utilis\u00e9es pour styliser les blocs et les \u00e9l\u00e9ments dans la section <code>styles<\/code>.<\/p>\n<h3>Styles<\/h3>\n<p>La section <code>styles<\/code> est l&rsquo;endroit o\u00f9 les th\u00e8mes d\u00e9finissent les <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#styles\">styles par d\u00e9faut<\/a> des blocs et des \u00e9l\u00e9ments. Voir, par exemple, les styles suivants de Twenty Twenty-Two pour le bloc principal Bouton :<\/p>\n<pre><code class=\"language-json\">{\n\t\"version\": 2,\n\t\"styles\": {\n\t\t\"blocks\": {\n\t\t\t\"core\/button\": {\n\t\t\t\t\"border\": {\n\t\t\t\t\t\"radius\": \"0\"\n\t\t\t\t},\n\t\t\t\t\"color\": {\n\t\t\t\t\t\"background\": \"var(--wp--preset--color--primary)\",\n\t\t\t\t\t\"text\": \"var(--wp--preset--color--background)\"\n\t\t\t\t},\n\t\t\t\t\"typography\": {\n\t\t\t\t\t\"fontSize\": \"var(--wp--preset--typography--font-size--normal)\"\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>Vous remarquerez les propri\u00e9t\u00e9s personnalis\u00e9es CSS utilis\u00e9es dans les d\u00e9clarations de propri\u00e9t\u00e9s.<\/p>\n<h3>Mod\u00e8les personnalis\u00e9s<\/h3>\n<p>La section <code>customTemplates<\/code> est l&rsquo;endroit o\u00f9 un th\u00e8me d\u00e9clare ses <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#customtemplates\">mod\u00e8les personnalis\u00e9s<\/a>. Les champs <code>name<\/code> et <code>title<\/code> sont obligatoires. Les th\u00e8mes peuvent \u00e9galement d\u00e9clarer quel type de publication peut utiliser le mod\u00e8le en d\u00e9finissant la propri\u00e9t\u00e9 <code>postTypes<\/code>.<\/p>\n<p>Twenty Twenty-Two propose quatre mod\u00e8les personnalis\u00e9s :<\/p>\n<pre><code class=\"language-json\">{\n\t\"version\": 2,\n\t\"customTemplates\": [\n\t\t{\n\t\t\t\"name\": \"blank\",\n\t\t\t\"title\": \"Blank\",\n\t\t\t\"postTypes\": [\n\t\t\t\t\"page\",\n\t\t\t\t\"post\"\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\t\"name\": \"page-large-header\",\n\t\t\t\"title\": \"Page (Large Header)\",\n\t\t\t\"postTypes\": [\n\t\t\t\t\"page\"\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\t\"name\": \"single-no-separators\",\n\t\t\t\"title\": \"Single Post (No Separators)\",\n\t\t\t\"postTypes\": [\n\t\t\t\t\"post\"\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\t\"name\": \"page-no-separators\",\n\t\t\t\"title\": \"Page (No Separators)\",\n\t\t\t\"postTypes\": [\n\t\t\t\t\"page\"\n\t\t\t]\n\t\t}\n\t]\n}<\/code><\/pre>\n<p>Vous trouverez les fichiers <strong>.html<\/strong> correspondants dans le r\u00e9pertoire <strong>block-templates<\/strong>.<\/p>\n<figure id=\"attachment_111516\" aria-describedby=\"caption-attachment-111516\" style=\"width: 1224px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111516 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-block-templates-folder.jpg\" alt=\"Le r\u00e9pertoire &lt;strong&gt;block-templates&lt;\/strong&gt; de Twenty-Two\" width=\"1224\" height=\"587\"><figcaption id=\"caption-attachment-111516\" class=\"wp-caption-text\">Le r\u00e9pertoire <strong>block-templates<\/strong> de Twenty-Two<\/figcaption><\/figure>\n<h3>Parties de gabarit<\/h3>\n<p>La section <code>templateParts<\/code> comprend des <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#templateparts\">d\u00e9finitions de parties de mod\u00e8le<\/a>:<\/p>\n<pre><code class=\"language-json\">{\n\t\"version\": 2,\n\t\"templateParts\": [\n\t\t{\n\t\t\t\"name\": \"header\",\n\t\t\t\"title\": \"Header\",\n\t\t\t\"area\": \"header\"\n\t\t},\n\t\t{\n\t\t\t\"name\": \"header-large-dark\",\n\t\t\t\"title\": \"Header (Dark, large)\",\n\t\t\t\"area\": \"header\"\n\t\t},\n\t\t{\n\t\t\t\"name\": \"header-small-dark\",\n\t\t\t\"title\": \"Header (Dark, small)\",\n\t\t\t\"area\": \"header\"\n\t\t},\n\t\t{\n\t\t\t\"name\": \"footer\",\n\t\t\t\"title\": \"Footer\",\n\t\t\t\"area\": \"footer\"\n\t\t}\n\t]\n}<\/code><\/pre>\n<p>Les champs <code>name<\/code> et <code>title<\/code> sont n\u00e9cessaires. Les th\u00e8mes peuvent \u00e9galement d\u00e9clarer un terme <code>area<\/code>, o\u00f9 la partie de mod\u00e8le sera rendue dans l&rsquo;\u00e9diteur.<\/p>\n<figure id=\"attachment_111360\" aria-describedby=\"caption-attachment-111360\" style=\"width: 1616px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111360 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-template-parts-1.jpg\" alt=\"Parties de mod\u00e8le Twenty Twenty-Two\" width=\"1616\" height=\"1128\"><figcaption id=\"caption-attachment-111360\" class=\"wp-caption-text\">Parties de mod\u00e8le Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Les fichiers <strong>.html<\/strong> des parties de mod\u00e8le se trouvent dans le r\u00e9pertoire <strong>template-parts<\/strong>.<\/p>\n<p>Maintenant que vous en savez plus sur le <strong>theme.json<\/strong> de Twenty Twenty-Two, nous pouvons explorer plus en profondeur les fonctionnalit\u00e9s du th\u00e8me et la nouvelle interface d&rsquo;\u00e9dition.<\/p>\n<p>Plongeons dans les <strong>Styles globaux de Twenty Twenty-Two<\/strong>.<\/p>\n<h2>Les styles globaux dans Twenty Twenty-Two<\/h2>\n<p>Si vous regardez le <strong>fichier style.css<\/strong> de Twenty Twenty-Two <strong>, vous serez peut-\u00eatre surpris de constater qu&rsquo;il contient un nombre minimal de d\u00e9clarations CSS.<\/strong> La <strong>raison en est que <strong>les styles sont d\u00e9clar\u00e9s dans le<\/strong> fichier <strong> <em>theme.json<\/em><\/strong><\/strong> dans les th\u00e8mes bas\u00e9s sur des blocs.<\/p>\n<p>WordPress 5.9 va aller un peu plus loin, en introduisant une nouvelle fonctionnalit\u00e9 qui permet aux utilisateurs de th\u00e8mes \u00e0 base de blocs de personnaliser l&rsquo;apparence des \u00e9l\u00e9ments du site \u00e0 partir d&rsquo;une interface utilisateur appel\u00e9e <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/#block-settings-and-styles-with-themejson\">Styles globaux<\/a>.<\/p>\n<p>L&rsquo;interface des Styles globaux est accessible \u00e0 partir de la nouvelle ic\u00f4ne <strong>Styles<\/strong> plac\u00e9e dans le coin sup\u00e9rieur droit de l&rsquo;\u00e9diteur (voir aussi <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/34574\">L&rsquo;interface Styles globaux<\/a>).<\/p>\n<p>En cliquant sur cette ic\u00f4ne, vous affichez une nouvelle colonne lat\u00e9rale <strong>Styles<\/strong> comprenant trois panneaux distincts :<\/p>\n<ul>\n<li>Un panneau <strong>Aper\u00e7u<\/strong>, montrant un aper\u00e7u de vos personnalisations<\/li>\n<li>Un panneau <strong>Styles globaux<\/strong> donnant acc\u00e8s \u00e0 des groupes de contr\u00f4les sp\u00e9cifiques pour la <strong>typographie<\/strong>, les <strong>couleurs<\/strong> et la <strong>mise en page<\/strong><\/li>\n<li>Un \u00e9l\u00e9ment <strong>Blocs<\/strong> donnant acc\u00e8s aux r\u00e9glages de style au niveau du bloc<\/li>\n<\/ul>\n<figure id=\"attachment_110852\" aria-describedby=\"caption-attachment-110852\" style=\"width: 1606px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110852 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/styles-sidebar.jpg\" alt=\"La colonne lat\u00e9rale Styles dans Twenty Twenty-Two\" width=\"1606\" height=\"1336\"><figcaption id=\"caption-attachment-110852\" class=\"wp-caption-text\">La colonne lat\u00e9rale Styles dans Twenty Twenty-Two<\/figcaption><\/figure>\n<h3>La palette de couleurs de Twenty Twenty-Two<\/h3>\n<p>Le panneau <strong>Couleurs<\/strong> peut vous aider \u00e0 \u00e9diter les palettes disponibles et \u00e0 attribuer ou modifier des couleurs pour<strong> l&rsquo;arri\u00e8re-plan<\/strong>, le <strong>texte<\/strong> ou les <strong>liens<\/strong>.<\/p>\n<p>Dans le panneau <strong>Palette<\/strong>, vous pouvez personnaliser les palettes <strong>Th\u00e8me<\/strong> ou <strong>D\u00e9faut<\/strong> et m\u00eame cr\u00e9er votre palette personnalis\u00e9e.<\/p>\n<figure id=\"attachment_110941\" aria-describedby=\"caption-attachment-110941\" style=\"width: 1790px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110941 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-color-settings.jpg\" alt=\"R\u00e9glages de couleur dans Twenty Twenty-Two\" width=\"1790\" height=\"1146\"><figcaption id=\"caption-attachment-110941\" class=\"wp-caption-text\">R\u00e9glages de couleur dans Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Vous avez d\u00e9j\u00e0 trouv\u00e9 le code qui g\u00e9n\u00e8re les contr\u00f4les de couleur ?<\/p>\n<p>Si non, ouvrez le <strong>theme.json<\/strong> de Twenty Twenty-Two dans votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-editeurs-de-texte\/\">\u00e9diteur de code<\/a> pr\u00e9f\u00e9r\u00e9. Vous y trouverez les d\u00e9clarations de palette de couleurs suivantes :<\/p>\n<pre><code class=\"language-json\">{\n\t\"version\": 2,\n\t\"settings\": {\n\t\t\"color\": {\n\t\t\t\"palette\": [\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"foreground\",\n\t\t\t\t\t\"color\": \"#000000\",\n\t\t\t\t\t\"name\": \"Foreground\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"background\",\n\t\t\t\t\t\"color\": \"#ffffff\",\n\t\t\t\t\t\"name\": \"Background\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"primary\",\n\t\t\t\t\t\"color\": \"#1a4548\",\n\t\t\t\t\t\"name\": \"Primary\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"secondary\",\n\t\t\t\t\t\"color\": \"#ffe2c7\",\n\t\t\t\t\t\"name\": \"Secondary\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"tertiary\",\n\t\t\t\t\t\"color\": \"#F6F6F6\",\n\t\t\t\t\t\"name\": \"Tertiary\"\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>L&rsquo;image ci-dessous montre comment le code ci-dessus correspond \u00e0 la palette de couleurs de Twenty Twenty-Two.<\/p>\n<figure id=\"attachment_111011\" aria-describedby=\"caption-attachment-111011\" style=\"width: 1314px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111011 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-color-palette.jpg\" alt=\"La palette de couleurs de Twenty Twenty-Two\" width=\"1314\" height=\"972\"><figcaption id=\"caption-attachment-111011\" class=\"wp-caption-text\">La palette de couleurs de Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Supposons maintenant que vous souhaitiez modifier la couleur d&rsquo;arri\u00e8re-plan par d\u00e9faut d&rsquo;un bloc particulier. En choisissant une couleur diff\u00e9rente pour l&rsquo;arri\u00e8re-plan du bloc, il suffira d&rsquo;affecter une <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/--*\">variable CSS<\/a> diff\u00e9rente \u00e0 la propri\u00e9t\u00e9 <code>background-color<\/code> de l&rsquo;\u00e9l\u00e9ment. L&rsquo;image ci-dessous en donne un exemple :<\/p>\n<figure id=\"attachment_111012\" aria-describedby=\"caption-attachment-111012\" style=\"width: 2036px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111012 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-custom-property.jpg\" alt=\"Propri\u00e9t\u00e9 personnalis\u00e9e de Twenty Twenty-Two\" width=\"2036\" height=\"860\"><figcaption id=\"caption-attachment-111012\" class=\"wp-caption-text\">Propri\u00e9t\u00e9 personnalis\u00e9e de Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Et c&rsquo;est tout ! Vous n&rsquo;aurez pas besoin d&rsquo;ajouter une seule ligne de code CSS personnalis\u00e9 dans la Personnalisation ou de cr\u00e9er un th\u00e8me enfant pour cela.<\/p>\n<p>Mais continuons \u00e0 explorer les Styles globaux de Twenty-Two avec quelques exemples suppl\u00e9mentaires.<\/p>\n<h3>R\u00e9glages de typographie<\/h3>\n<p>Le panneau <strong>Typographie<\/strong> est l&rsquo;endroit o\u00f9 vous pouvez personnaliser les styles de typographie pour les \u00e9l\u00e9ments <strong>Texte<\/strong> et <strong>Liens<\/strong> de votre site web au niveau global.<\/p>\n<p>Chaque \u00e9l\u00e9ment donne acc\u00e8s \u00e0 un groupe de contr\u00f4les vous permettant de personnaliser la famille de polices, la taille et la hauteur de ligne.<\/p>\n<figure id=\"attachment_110847\" aria-describedby=\"caption-attachment-110847\" style=\"width: 1790px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110847 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-typography-settings.jpg\" alt=\"R\u00e9glages de typographie dans Twenty Twenty-Two\" width=\"1790\" height=\"1146\"><figcaption id=\"caption-attachment-110847\" class=\"wp-caption-text\">R\u00e9glages de typographie dans Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Vous vous demandez quel code g\u00e9n\u00e8re ces contr\u00f4les ?<\/p>\n<p>Ouvrez le <strong>theme.json<\/strong> de Twenty-Two et trouvez la section <code>typography<\/code>. Vous verrez les r\u00e9glages suivants :<\/p>\n<pre><code class=\"language-json\">{\n\t\"version\": 1,\n\t\"settings\": {\n\t\t\"appearanceTools\": true,\n\t\t\"typography\": {\n\t\t\t\"dropCap\": false,\n\t\t\t\"fontFamilies\": [\n\t\t\t\t{\n\t\t\t\t\t\"fontFamily\": \"-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif\",\n\t\t\t\t\t\"name\": \"System Font\",\n\t\t\t\t\t\"slug\": \"system-font\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"fontFamily\": \"\"Source Serif Pro\", serif\",\n\t\t\t\t\t\"name\": \"Source Serif Pro\",\n\t\t\t\t\t\"slug\": \"source-serif-pro\"\n\t\t\t\t}\n\t\t\t],\n\t\t\t\"fontSizes\": [\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Small\",\n\t\t\t\t\t\"size\": \"1rem\",\n\t\t\t\t\t\"slug\": \"small\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Normal\",\n\t\t\t\t\t\"size\": \"1.125rem\",\n\t\t\t\t\t\"slug\": \"normal\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Medium\",\n\t\t\t\t\t\"size\": \"1.75rem\",\n\t\t\t\t\t\"slug\": \"medium\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Large\",\n\t\t\t\t\t\"size\": \"clamp(1.75rem, 3vw, 2.25rem)\",\n\t\t\t\t\t\"slug\": \"large\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Huge\",\n\t\t\t\t\t\"size\": \"clamp(2.5rem, 4vw, 3rem)\",\n\t\t\t\t\t\"slug\": \"huge\"\n\t\t\t\t}\n\t\t\t]\n\t\t},\n}<\/code><\/pre>\n<p>Vous vous attendez peut-\u00eatre \u00e0 voir deux familles de polices et cinq tailles de polices \u00e0 partir du code ci-dessus. Et vous auriez devin\u00e9 juste.<\/p>\n<p>Voici comment le code ci-dessus se traduit dans les r\u00e9glages de <strong>typographie <\/strong>des Styles globaux :<\/p>\n<figure id=\"attachment_110848\" aria-describedby=\"caption-attachment-110848\" style=\"width: 1300px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-110848 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/font-family-font-size.jpg\" alt=\"Styles de typographie dans Twenty Twenty-Two\" width=\"1300\" height=\"1196\"><figcaption id=\"caption-attachment-110848\" class=\"wp-caption-text\">Styles de typographie dans Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Vous pouvez deviner quel r\u00e9glage g\u00e9n\u00e8re le contr\u00f4le de la <strong>hauteur des lignes<\/strong>. Dans Twenty Twenty-Two, vous ne trouverez pas de r\u00e9glage sp\u00e9cifique pour cela car il est activ\u00e9 par la propri\u00e9t\u00e9 <code>appearanceTools<\/code>, qui est un raccourci pour plusieurs d\u00e9clarations de r\u00e9glages (voir section suivante).<\/p>\n<h3>Outils de mise en page et d&rsquo;apparence<\/h3>\n<p>Le dernier \u00e9l\u00e9ment de la colonne lat\u00e9rale Styles globaux est la <strong>mise en page<\/strong>. Au moment de la r\u00e9daction de cet article, il ne comprend qu&rsquo;un contr\u00f4le <code>padding<\/code>.<\/p>\n<figure id=\"attachment_111192\" aria-describedby=\"caption-attachment-111192\" style=\"width: 1790px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111192 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/layout.jpg\" alt=\"R\u00e9glages de mise en page dans Twenty Twenty-Two\" width=\"1790\" height=\"1212\"><figcaption id=\"caption-attachment-111192\" class=\"wp-caption-text\">R\u00e9glages de mise en page dans Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Dans Twenty Twenty-Two, le panneau Mise en page est activ\u00e9 par la <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/36646\">propri\u00e9t\u00e9 du r\u00e9glage<\/a> <code>appearanceTools<\/code>, un bool\u00e9en qui peut \u00eatre utilis\u00e9 pour <a href=\"https:\/\/github.com\/WordPress\/twentytwentytwo\/issues\/261\">activer plusieurs r\u00e9glages<\/a> \u00e0 la fois :<\/p>\n<pre><code class=\"language-json\">{\n\t\"settings\": {\n\t\t\"appearanceTools\": true\n\t}\n}<\/code><\/pre>\n<p><code>\"appearanceTools\": true<\/code> remplace simplement le <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/36646\">bloc de d\u00e9clarations suivant<\/a>:<\/p>\n<pre><code class=\"language-json\">{\n\t'settings': {\n\t\t'border': {\n\t\t\t'color': true,\n\t\t\t'radius': true,\n\t\t\t'style': true,\n\t\t\t'width': true\n\t\t},\n\t\t'color': {\n\t\t\t'link': true\n\t\t},\n\t\t'spacing': {\n\t\t\t'blockGap': true,\n\t\t\t'margin': true,\n\t\t\t'padding': true\n\t\t},\n\t\t'typography': {\n\t\t\t'lineHeight': true\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>OK &#8211; vous comprenez maintenant, je l&rsquo;esp\u00e8re, comment les r\u00e9glages d\u00e9clar\u00e9s dans le fichier <strong>theme.json<\/strong> correspondent aux contr\u00f4les Styles globaux correspondants.<\/p>\n<p>Il nous manque encore une pi\u00e8ce de notre puzzle pour obtenir l&rsquo;image compl\u00e8te du nouveau th\u00e8me par d\u00e9faut de WordPress : les <strong>compositions de bloc<\/strong>.<\/p>\n<h2>Compositions de blocs de Twenty Twenty-Two<\/h2>\n<p>On pourrait dire que Twenty Twenty-Two est surtout une <a href=\"https:\/\/wordpress.org\/news\/2021\/11\/episode-21-all-things-block-themes\/\">collection de compositions<\/a> &#8211; et c&rsquo;est bien le cas. Dans Twenty Twenty-Two, vous trouverez des tonnes de <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-5\/#block-patterns\">compositions de blocs<\/a> pr\u00eats \u00e0 l&#8217;emploi parmi lesquels vous pourrez choisir pour construire des structures \u00e9tonnantes et impr\u00e9visibles de blocs imbriqu\u00e9s pour vos pages web.<\/p>\n<p>Le terme cl\u00e9 ici est la <strong>responsabilisation de l&rsquo;utilisateur<\/strong>. Et cela tombe bien car, avec les compositions de blocs, vous pouvez construire toutes sortes de choses, d&rsquo;un portfolio attrayant \u00e0 un site web promotionnel d&rsquo;une seule page, m\u00eame si vous n&rsquo;avez aucune connaissance du HTML ou du CSS !<\/p>\n<p>Et WordPress 5.9 apporte des am\u00e9liorations significatives au syst\u00e8me de compositions avec le nouvel <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/35773\">Explorateur de compositions<\/a>, un outil qui vous permet de parcourir les compositions dans une modale plein \u00e9cran.<\/p>\n<figure id=\"attachment_111407\" aria-describedby=\"caption-attachment-111407\" style=\"width: 2442px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111407 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/pattern-explorer.jpg\" alt=\"L'explorateur de compositions dans Twenty Twenty-Two\" width=\"2442\" height=\"1378\"><figcaption id=\"caption-attachment-111407\" class=\"wp-caption-text\">L&rsquo;explorateur de compositions dans Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Le nouvel outil vous permet \u00e9galement d&rsquo;importer rapidement et facilement des compositions de bloc directement \u00e0 partir du <a href=\"https:\/\/wordpress.org\/patterns\/\">r\u00e9pertoire des compositions<\/a>. Cela ouvre de nouvelles possibilit\u00e9s pour les utilisateurs et les <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/\">d\u00e9veloppeurs<\/a> de WordPress, de sorte que son utilisation est susceptible d&rsquo;augmenter consid\u00e9rablement \u00e0 l&rsquo;avenir.<\/p>\n<figure id=\"attachment_111408\" aria-describedby=\"caption-attachment-111408\" style=\"width: 2880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111408 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/wordpress-patterns-directory.jpg\" alt=\"R\u00e9pertoire de compositions de WordPress\" width=\"2880\" height=\"2959\"><figcaption id=\"caption-attachment-111408\" class=\"wp-caption-text\">R\u00e9pertoire de compositions de WordPress<\/figcaption><\/figure>\n<p>Twenty Twenty-Two comprend <a href=\"https:\/\/github.com\/WordPress\/twentytwentytwo\/pull\/204\">de nombreuses compositions<\/a> (plus de 65) r\u00e9parties dans cinq cat\u00e9gories.<\/p>\n<figure id=\"attachment_111409\" aria-describedby=\"caption-attachment-111409\" style=\"width: 1522px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111409 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/pattern-categories-dropdown.jpg\" alt=\"Cat\u00e9gories de compositions Twenty Twenty-Two\" width=\"1522\" height=\"1250\"><figcaption id=\"caption-attachment-111409\" class=\"wp-caption-text\">Cat\u00e9gories de compositions Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Ce solide ensemble de compositions s&rsquo;associe parfaitement aux mod\u00e8les et aux parties de mod\u00e8les fournis avec le nouveau th\u00e8me par d\u00e9faut, ce qui rend l&rsquo;exp\u00e9rience d&rsquo;\u00e9dition vraiment \u00e9tonnante.<\/p>\n<figure id=\"attachment_111410\" aria-describedby=\"caption-attachment-111410\" style=\"width: 2880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111410 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/layered-images-with-duotone-pattern.jpg\" alt=\"Images en couches avec duotone\" width=\"2880\" height=\"1332\"><figcaption id=\"caption-attachment-111410\" class=\"wp-caption-text\">Images en couches avec duotone<\/figcaption><\/figure>\n<figure id=\"attachment_111411\" aria-describedby=\"caption-attachment-111411\" style=\"width: 2880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111411 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/video-with-header-and-details.jpg\" alt=\"Vid\u00e9o avec en-t\u00eate et d\u00e9tails\" width=\"2880\" height=\"2544\"><figcaption id=\"caption-attachment-111411\" class=\"wp-caption-text\">Vid\u00e9o avec en-t\u00eate et d\u00e9tails<\/figcaption><\/figure>\n<figure id=\"attachment_111412\" aria-describedby=\"caption-attachment-111412\" style=\"width: 2002px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111412 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/two-images-with-text.jpg\" alt=\"Deux images avec du texte\" width=\"2002\" height=\"2160\"><figcaption id=\"caption-attachment-111412\" class=\"wp-caption-text\">Deux images avec du texte<\/figcaption><\/figure>\n<p>Si vous n&rsquo;avez pas encore eu l&rsquo;occasion d&rsquo;exp\u00e9rimenter les compositions de blocs, nous allons vous montrer pourquoi elles sont consid\u00e9r\u00e9es comme des outils si puissants \u00e0 l&rsquo;aide d&rsquo;un exemple simple.<\/p>\n<p>Supposons que vous souhaitiez supprimer le pied de page par d\u00e9faut des mod\u00e8les Index et Single Post et le remplacer par une autre composition de bloc Twenty Twenty-Two.<\/p>\n<p>Lancez l&rsquo;\u00e9diteur de site \u00e0 partir du menu <strong>Apparence<\/strong> ou du bouton de la barre d&rsquo;outils de l&rsquo;interface WordPress pour personnaliser le mod\u00e8le Index.<\/p>\n<p>Cliquez sur le bouton <strong>Index<\/strong> pour afficher la liste d\u00e9roulante de l&rsquo;en-t\u00eate montrant la liste des zones de mod\u00e8le disponibles sur la page. Cliquez sur le bouton repr\u00e9sentant une ellipse \u00e0 c\u00f4t\u00e9 de <strong>Pied de page<\/strong>, puis sur <strong>Modifier le pide de page<\/strong>.<\/p>\n<figure id=\"attachment_111413\" aria-describedby=\"caption-attachment-111413\" style=\"width: 1534px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111413 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/template-inspector.jpg\" alt=\"L'inspecteur de mod\u00e8le\" width=\"1534\" height=\"812\"><figcaption id=\"caption-attachment-111413\" class=\"wp-caption-text\">L&rsquo;inspecteur de mod\u00e8le<\/figcaption><\/figure>\n<p>Comme mentionn\u00e9 ci-dessus, cela lancera l&rsquo;\u00e9diteur de parties de mod\u00e8le isol\u00e9es.<\/p>\n<figure id=\"attachment_111414\" aria-describedby=\"caption-attachment-111414\" style=\"width: 2358px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111414 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/isolated-template-part-editor.jpg\" alt=\"Le pied de page par d\u00e9faut de Twenty Twenty-Two dans l'\u00e9diteur de parties de mod\u00e8le isol\u00e9\" width=\"2358\" height=\"848\"><figcaption id=\"caption-attachment-111414\" class=\"wp-caption-text\">Le pied de page par d\u00e9faut de Twenty Twenty-Two dans l&rsquo;\u00e9diteur de parties de mod\u00e8le isol\u00e9<\/figcaption><\/figure>\n<p>Ouvrez maintenant l&rsquo;inserteur de blocs et cliquez sur <strong>Compositions<\/strong>.<\/p>\n<p>Lancez le nouvel outil <strong>Explorateur de compositions<\/strong>, s\u00e9lectionnez la cat\u00e9gorie <strong>Pieds de page Twenty Twenty-Two<\/strong> et choisissez le pied de page de votre choix.<\/p>\n<figure id=\"attachment_111415\" aria-describedby=\"caption-attachment-111415\" style=\"width: 2360px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111415 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/tt2-pattern-explorer.jpg\" alt=\"L'explorateur de compositions dans Twenty Twenty-Two\" width=\"2360\" height=\"1338\"><figcaption id=\"caption-attachment-111415\" class=\"wp-caption-text\">L&rsquo;explorateur de compositions dans Twenty Twenty-Two<\/figcaption><\/figure>\n<p>Maintenant, ajoutez et modifiez les blocs en fonction de vos besoins.<\/p>\n<figure id=\"attachment_111416\" aria-describedby=\"caption-attachment-111416\" style=\"width: 2360px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111416 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/new-footer-in-isolated-template-editor.jpg\" alt=\"Modification du pied de page dans l'\u00e9diteur de parties de mod\u00e8le isol\u00e9es\" width=\"2360\" height=\"996\"><figcaption id=\"caption-attachment-111416\" class=\"wp-caption-text\">Modification du pied de page dans l&rsquo;\u00e9diteur de parties de mod\u00e8le isol\u00e9es<\/figcaption><\/figure>\n<p>Enregistrez l&rsquo;en-t\u00eate et v\u00e9rifiez \u00e0 nouveau votre site lorsque vous \u00eates satisfait de vos modifications.<\/p>\n<p>L&rsquo;image ci-dessous compare trois mod\u00e8les (Index, Single Post, et Single Post sans s\u00e9parateurs) avec diff\u00e9rentes personnalisations de l&rsquo;en-t\u00eate et du pied de page :<\/p>\n<figure id=\"attachment_111417\" aria-describedby=\"caption-attachment-111417\" style=\"width: 2400px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111417 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/template-comparison.jpg\" alt=\"Personnalisations de l'en-t\u00eate et du pied de page compar\u00e9es dans diff\u00e9rents mod\u00e8les de Twenty Twenty-Two\" width=\"2400\" height=\"2223\"><figcaption id=\"caption-attachment-111417\" class=\"wp-caption-text\">Personnalisations de l&rsquo;en-t\u00eate et du pied de page compar\u00e9es dans diff\u00e9rents mod\u00e8les de Twenty Twenty-Two<\/figcaption><\/figure>\n<h2>Extension de Twenty Twenty-Two avec un th\u00e8me enfant<\/h2>\n<p>La cr\u00e9ation d&rsquo;un <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/\">th\u00e8me enfant pour un th\u00e8me bas\u00e9 sur des blocs<\/a> est assez diff\u00e9rente de la cr\u00e9ation d&rsquo;un <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-enfant-wordpress\/\">th\u00e8me enfant pour un th\u00e8me classique<\/a>.<\/p>\n<p>Mais une fois que vous aurez bien compris la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/block-theme-overview\/#what-is-the-structure-of-a-block-theme\">structure d&rsquo;un th\u00e8me \u00e0 base de bloc<\/a>, vous n&rsquo;aurez aucun mal \u00e0 cr\u00e9er un th\u00e8me enfant pour Twenty Twenty-Two ou tout autre th\u00e8me bas\u00e9 sur des blocs.<\/p>\n<p>D\u00e9couvrons donc comment personnaliser l&rsquo;aspect et la convivialit\u00e9 de votre site web bas\u00e9 sur Twenty Twenty-Two.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"3\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>1. Configuration d&rsquo;un th\u00e8me enfant pour Twenty Twenty-Two<\/h3>\n<p>Dans votre r\u00e9pertoire <strong>\/wp-content\/themes<\/strong>, <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/#1-create-a-child-theme-folder\">cr\u00e9ez un nouveau r\u00e9pertoire<\/a>\u00a0et nommez-le comme vous le souhaitez (selon les <a href=\"https:\/\/codex.wordpress.org\/Theme_Development#Theme_Development_Standards\">normes de d\u00e9veloppement de th\u00e8mes<\/a>). Dans cet exemple, nous avons appel\u00e9 le r\u00e9pertoire du th\u00e8me enfant <em>twentytwentytwo-child<\/em>.<\/p>\n<p>Vous avez <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/#2-create-a-stylesheet-style-css\">maintenant besoin<\/a> d&rsquo;un fichier <strong>style.css<\/strong>. Ouvrez votre \u00e9diteur de code pr\u00e9f\u00e9r\u00e9 et cr\u00e9ez la feuille de style suivante :<\/p>\n<pre><code class=\"language-css\">\/*\nTheme Name: Twenty Twenty-Two Child\nTheme URI: https:\/\/example.com\/\nAuthor: Your name\nAuthor URI: https:\/\/example.com\/\nDescription: A child theme for TT2.\nRequires at least: 5.8\nTested up to: 5.9\nRequires PHP: 5.6\nVersion: 0.2\nLicense: GNU General Public License v2 or later\nLicense URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\nText Domain: twentytwentytwo-child\nTemplate: twentytwentytwo\nTags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments\n\nTwenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org\nTwenty Twenty-Two Child is distributed under the terms of the GNU GPL.\n*\/<\/code><\/pre>\n<p>Comme toujours, vous pouvez modifier les champs en fonction de vos besoins.<\/p>\n<p>Votre th\u00e8me enfant est maintenant disponible pour la pr\u00e9visualisation. Vous pouvez l&rsquo;activer dans l&rsquo;\u00e9cran d&rsquo;administration <strong>Apparence &gt; Th\u00e8mes<\/strong>.<\/p>\n<h3>2. Personnalisation des param\u00e8tres globaux<\/h3>\n<p>Depuis WordPress 5.9, les th\u00e8mes enfants avec un fichier <strong>theme.json<\/strong> h\u00e9ritent des r\u00e9glages du th\u00e8me parent. Si le <strong>theme.json<\/strong> enfant d\u00e9finit un ensemble de styles, ces styles s&rsquo;appliquent par-dessus les styles de son parent.<\/p>\n<p>Nous pouvons donc cr\u00e9er un fichier <strong>theme.json<\/strong> qui ne comprend qu&rsquo;un petit bloc personnalis\u00e9 de d\u00e9finitions de r\u00e9glages et de styles plut\u00f4t que de red\u00e9finir tous nos choix originaux.<\/p>\n<h4>Comment d\u00e9clarer une palette de couleurs personnalis\u00e9e<\/h4>\n<p>Lorsque vous cr\u00e9ez un th\u00e8me enfant pour Twenty Twenty-Two, la t\u00e2che la plus simple consiste \u00e0 remplacer la palette de couleurs. Tout ce que vous avez \u00e0 faire est de d\u00e9finir une nouvelle palette de couleurs dans le <strong>theme.json<\/strong> de votre th\u00e8me enfant comme indiqu\u00e9 ci-dessous :<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 2,\n\t\"settings\": {\n\t\t\"color\": {\n\t\t\t\"palette\": [\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"foreground\",\n\t\t\t\t\t\"color\": \"#FFFFFF\",\n\t\t\t\t\t\"name\": \"Foreground\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"background\",\n\t\t\t\t\t\"color\": \"#001F29\",\n\t\t\t\t\t\"name\": \"Background\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"primary\",\n\t\t\t\t\t\"color\": \"#D6FDFF\",\n\t\t\t\t\t\"name\": \"Primary\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"secondary\",\n\t\t\t\t\t\"color\": \"#FDFCDC\",\n\t\t\t\t\t\"name\": \"Secondary\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"tertiary\",\n\t\t\t\t\t\"color\": \"#FED9B7\",\n\t\t\t\t\t\"name\": \"Tertiary\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"accent\",\n\t\t\t\t\t\"color\": \"#E94435\",\n\t\t\t\t\t\"name\": \"Accent\"\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>Enregistrez votre fichier et retournez \u00e0 l&rsquo;\u00e9diteur de site. La palette de couleurs d\u00e9finie ci-dessus devrait avoir remplac\u00e9 la palette de couleurs par d\u00e9faut de Twenty Twenty-Two.<\/p>\n<figure id=\"attachment_111460\" aria-describedby=\"caption-attachment-111460\" style=\"width: 2264px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111460 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/child-theme-color-palette.jpg\" alt=\"Une palette de couleurs de th\u00e8me enfant\" width=\"2264\" height=\"1076\"><figcaption id=\"caption-attachment-111460\" class=\"wp-caption-text\">Une palette de couleurs de th\u00e8me enfant<\/figcaption><\/figure>\n<p>Les couleurs seront <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-support\/#block-color-palettes\">affich\u00e9es dans l&rsquo;ordre sur la palette elle-m\u00eame<\/a>, et leurs noms devraient suivre les <a href=\"https:\/\/fullsiteediting.com\/lessons\/theme-json-color-options\/#h-frequently-asked-questions\">meilleures pratiques<\/a> et les <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/29568\">conventions de d\u00e9nomination discut\u00e9es sur Github<\/a>.<\/p>\n<p>Vous pouvez lire beaucoup plus sur les options de couleurs de <strong>theme.json<\/strong> dans cette <a href=\"https:\/\/fullsiteediting.com\/lessons\/theme-json-color-options\/\">pr\u00e9sentation approfondie par Carolina Nymark<\/a>.<\/p>\n<h4>Comment d\u00e9clarer des filtres bicolores personnalis\u00e9s<\/h4>\n<p>Vous pouvez \u00e9galement remplacer les couleurs bicolores par d\u00e9faut par votre ensemble de filtres personnalis\u00e9s.<\/p>\n<p>Pour ce faire, il suffit d&rsquo;ajouter le code suivant aux r\u00e9glages <strong>theme.json<\/strong> de votre th\u00e8me enfant, au m\u00eame niveau que la propri\u00e9t\u00e9 <code>palette<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 2,\n\t\"settings\": {\n\t\t\"color\": {\n\t\t\t\"palette\": [...],\n\t\t\t\"duotone\": [\n\t\t\t\t{\n\t\t\t\t\t\"colors\": [\n\t\t\t\t\t\t\"#001F29\",\n\t\t\t\t\t\t\"#FFFFFF\"\n\t\t\t\t\t],\n\t\t\t\t\t\"slug\": \"default-filter\",\n\t\t\t\t\t\"name\": \"Default filter\"\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>Enregistrez votre fichier et v\u00e9rifiez le r\u00e9sultat dans l&rsquo;\u00e9diteur de blocs. Vous ne devriez voir qu&rsquo;un seul filtre bicolore.<\/p>\n<figure id=\"attachment_111461\" aria-describedby=\"caption-attachment-111461\" style=\"width: 1564px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111461 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/child-theme-duotone-filter.jpg\" alt=\"Un filtre bicolore de th\u00e8me enfant\" width=\"1564\" height=\"1122\"><figcaption id=\"caption-attachment-111461\" class=\"wp-caption-text\">Un filtre bicolore de th\u00e8me enfant<\/figcaption><\/figure>\n<h3>3. Personnalisation des styles de blocs<\/h3>\n<p>Comme nous l&rsquo;avons mentionn\u00e9 pr\u00e9c\u00e9demment, avec WordPress 5.9, vous pouvez d\u00e9sormais personnaliser les r\u00e9glages et les styles du <strong>fichier theme.json<\/strong> \u00e0 partir de l&rsquo;interface des Styles globaux.<\/p>\n<p>Les styles de bloc peuvent \u00eatre personnalis\u00e9s \u00e0 partir de l&rsquo;interface des Style globaux <strong>uniquement si le bloc d\u00e9clare le support d&rsquo;une fonctionnalit\u00e9 sp\u00e9cifique<\/strong> dans le fichier <strong>block.json<\/strong> correspondant. Mais vous pouvez remplacer les r\u00e9glages de bloc par d\u00e9faut dans le <strong>theme.json<\/strong> de votre th\u00e8me enfant.<\/p>\n<p>Supposons maintenant que vous souhaitiez remplacer les styles des blocs Title de publication et Groupe. Il vous suffit de d\u00e9finir les styles que vous souhaitez ajouter ou remplacer, comme indiqu\u00e9 ci-dessous :<\/p>\n<pre><code class=\"language-json\">{\n\"version\": 2,\n\t\"settings\": {...},\n\t\"styles\": {\n\t\t\"blocks\": {\n\t\t\t\"core\/post-title\": {\n\t\t\t\t\"typography\": {\n\t\t\t\t\t\"fontFamily\": \"Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif\"\n\t\t\t\t},\n\t\t\t\t\"color\": {\n\t\t\t\t\t\"background\": \"var(--wp--preset--color--tertiary)\"\n\t\t\t\t},\n\t\t\t\t\"spacing\": {\n\t\t\t\t\t\"padding\": \"var(--wp--custom--spacing--small)\"\n\t\t\t\t}\n\t\t\t},\n\t\t\t\"core\/group\": {\n\t\t\t\t\"spacing\": {\n\t\t\t\t\t\"margin\": {\n\t\t\t\t\t\t\"top\": \"0\",\n\t\t\t\t\t\t\"bottom\": \"0\"\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>Dans l&rsquo;exemple ci-dessus, nous avons modifi\u00e9 la famille de police, la couleur d&rsquo;arri\u00e8re-plan et les valeurs de marge int\u00e9rieure pour <code>core\/post-title<\/code>, ainsi que les marges sup\u00e9rieure et inf\u00e9rieure pour <code>core\/group<\/code>.<\/p>\n<p>L&rsquo;image ci-dessous montre le r\u00e9sultat tel qu&rsquo;il appara\u00eetra sur le site public :<\/p>\n<figure id=\"attachment_111462\" aria-describedby=\"caption-attachment-111462\" style=\"width: 2264px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-111462 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/12\/child-theme-styles-post-title.jpg\" alt=\"Un bloc de titre de publication personnalis\u00e9\" width=\"2264\" height=\"832\"><figcaption id=\"caption-attachment-111462\" class=\"wp-caption-text\">Un bloc de titre de publication personnalis\u00e9<\/figcaption><\/figure>\n<p>Et c&rsquo;est tout pour la revue !<\/p>\n<p>Nous n&rsquo;allons pas nous plonger plus profond\u00e9ment dans les th\u00e8mes enfant pour l&rsquo;instant, car cela d\u00e9passerait le cadre de cet article. En attendant, vous trouverez d&rsquo;autres exemples de <a href=\"https:\/\/github.com\/WordPress\/theme-experiments\/tree\/add\/tt2-child-themes\">th\u00e8mes enfants Twenty Twenty-Two<\/a> sur Github.<\/p>\n\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Tout en examinant de plus pr\u00e8s le nouveau th\u00e8me par d\u00e9faut de WordPress, Twenty Twenty-Two, et ses fonctionnalit\u00e9s (qui en font le th\u00e8me par d\u00e9faut le plus flexible jamais publi\u00e9), nous avons d\u00e9voil\u00e9 la nouvelle architecture d&rsquo;information introduite avec WordPress 5.9. Nous avons m\u00eame eu un aper\u00e7u de la nouvelle interface des Styles globaux.<\/p>\n<p>De nombreuses nouvelles fonctionnalit\u00e9s passionnantes sont \u00e0 venir, et il semble \u00e9vident que le nouvel environnement d&rsquo;\u00e9dition devient de plus en plus robuste, fiable et fonctionnel au fil du temps.<\/p>\n<p>Alors que de nombreuses nouvelles fonctionnalit\u00e9s de WordPress sont en route, d&rsquo;autres disparaissent ou perdent de leur importance. De nombreux utilisateurs se demandent ce qu&rsquo;il adviendra de la <a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-personnaliser-theme-wordpress\/#customizing-your-theme-via-the-customizer\">Personnalisation<\/a>\u00a0et comment maintenir au mieux la r\u00e9trocompatibilit\u00e9 avec les th\u00e8mes existants.<\/p>\n<p>Cependant, il ne faut pas s&rsquo;attendre \u00e0 passer d&rsquo;un seul coup des th\u00e8mes traditionnels aux th\u00e8mes bas\u00e9s sur des blocs. Nous disposons actuellement de quatre types de th\u00e8mes diff\u00e9rents parmi lesquels vous pouvez choisir :<\/p>\n<ul>\n<li><strong>T<\/strong><strong>h\u00e8mes bas\u00e9s sur des blocs <\/strong>: Th\u00e8mes con\u00e7us pour le Full Site Editing<\/li>\n<li><strong>Th\u00e8mes universels <\/strong>: Th\u00e8mes qui fonctionnent \u00e0 la fois avec la Personnalisation et l&rsquo;\u00e9diteur de site<\/li>\n<li><strong>Th\u00e8mes hybrides <\/strong>: Th\u00e8mes classiques prenant en charge les fonctionnalit\u00e9s de FSE comme <strong>theme.json<\/strong><\/li>\n<li><strong>Th\u00e8mes classiques <\/strong>: Th\u00e8mes avec mod\u00e8les PHP, functions.php, etc.<\/li>\n<\/ul>\n<p>N&rsquo;ayez crainte pour l&rsquo;instant, il existe encore de nombreuses solutions si vous ne vous sentez pas encore pr\u00eat \u00e0 passer aux th\u00e8mes \u00e0 base de blocs.<\/p>\n<p><em>Et maintenant, c&rsquo;est \u00e0 vous de jouer ! \u00cates-vous pr\u00eat \u00e0 faire le grand saut et \u00e0 commencer \u00e0 utiliser des th\u00e8mes bas\u00e9s sur des blocs d\u00e8s maintenant ? Partagez vos r\u00e9flexions avec nous dans les commentaires ci-dessous.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bien que ce soit un peu plus tard que pr\u00e9vu, nous allons avoir un nouveau th\u00e8me par d\u00e9faut pour WordPress. Son nom est Twenty Twenty-Two ! &#8230;<\/p>\n","protected":false},"author":36,"featured_media":51436,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[586,264],"topic":[1038],"class_list":["post-51435","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-twenty-twenty-two","tag-wordpress-themes","topic-themes-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>Une plong\u00e9e en profondeur dans Twenty Twenty-Two et les th\u00e8mes bas\u00e9s sur des blocs de WordPress<\/title>\n<meta name=\"description\" content=\"Twenty Twenty-Two est le th\u00e8me \u00e0 base de bloc par d\u00e9faut introduit avec WordPress 5.9. D\u00e9couvrez toutes ses fonctionnalit\u00e9s cl\u00e9s dans ce guide approfondi.\" \/>\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\/twenty-twenty-two-themes\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Une plong\u00e9e en profondeur dans Twenty Twenty-Two et les th\u00e8mes \u00e0 base de blocs WordPress\" \/>\n<meta property=\"og:description\" content=\"Twenty Twenty-Two est le th\u00e8me \u00e0 base de bloc par d\u00e9faut introduit avec WordPress 5.9. D\u00e9couvrez toutes ses fonctionnalit\u00e9s cl\u00e9s dans ce guide approfondi.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/\" \/>\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=\"2022-01-04T12:10:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-22T13:40:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/12\/twenty-twenty-two-a-deep-dive-wp.jpeg\" \/>\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\/jpeg\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Twenty Twenty-Two est le th\u00e8me \u00e0 base de bloc par d\u00e9faut introduit avec WordPress 5.9. D\u00e9couvrez toutes ses fonctionnalit\u00e9s cl\u00e9s dans ce guide approfondi.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/12\/twenty-twenty-two-a-deep-dive-wp.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"28 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Une plong\u00e9e en profondeur dans Twenty Twenty-Two et les th\u00e8mes \u00e0 base de blocs WordPress\",\"datePublished\":\"2022-01-04T12:10:04+00:00\",\"dateModified\":\"2023-08-22T13:40:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/\"},\"wordCount\":4840,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/12\/twenty-twenty-two-a-deep-dive-wp.jpeg\",\"keywords\":[\"Twenty Twenty-Two\",\"wordpress themes\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/\",\"name\":\"Une plong\u00e9e en profondeur dans Twenty Twenty-Two et les th\u00e8mes bas\u00e9s sur des blocs de WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/12\/twenty-twenty-two-a-deep-dive-wp.jpeg\",\"datePublished\":\"2022-01-04T12:10:04+00:00\",\"dateModified\":\"2023-08-22T13:40:36+00:00\",\"description\":\"Twenty Twenty-Two est le th\u00e8me \u00e0 base de bloc par d\u00e9faut introduit avec WordPress 5.9. D\u00e9couvrez toutes ses fonctionnalit\u00e9s cl\u00e9s dans ce guide approfondi.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/12\/twenty-twenty-two-a-deep-dive-wp.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/12\/twenty-twenty-two-a-deep-dive-wp.jpeg\",\"width\":1460,\"height\":730,\"caption\":\"Une plong\u00e9e en profondeur dans Twenty Twenty-Two et les th\u00e8mes blocs de WordPress\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Th\u00e8mes WordPress\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/themes-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Une plong\u00e9e en profondeur dans Twenty Twenty-Two et les th\u00e8mes \u00e0 base de blocs WordPress\"}]},{\"@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\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Une plong\u00e9e en profondeur dans Twenty Twenty-Two et les th\u00e8mes bas\u00e9s sur des blocs de WordPress","description":"Twenty Twenty-Two est le th\u00e8me \u00e0 base de bloc par d\u00e9faut introduit avec WordPress 5.9. D\u00e9couvrez toutes ses fonctionnalit\u00e9s cl\u00e9s dans ce guide approfondi.","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\/twenty-twenty-two-themes\/","og_locale":"fr_FR","og_type":"article","og_title":"Une plong\u00e9e en profondeur dans Twenty Twenty-Two et les th\u00e8mes \u00e0 base de blocs WordPress","og_description":"Twenty Twenty-Two est le th\u00e8me \u00e0 base de bloc par d\u00e9faut introduit avec WordPress 5.9. D\u00e9couvrez toutes ses fonctionnalit\u00e9s cl\u00e9s dans ce guide approfondi.","og_url":"https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2022-01-04T12:10:04+00:00","article_modified_time":"2023-08-22T13:40:36+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/12\/twenty-twenty-two-a-deep-dive-wp.jpeg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Twenty Twenty-Two est le th\u00e8me \u00e0 base de bloc par d\u00e9faut introduit avec WordPress 5.9. D\u00e9couvrez toutes ses fonctionnalit\u00e9s cl\u00e9s dans ce guide approfondi.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/12\/twenty-twenty-two-a-deep-dive-wp.jpeg","twitter_creator":"@carlodaniele","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Carlo Daniele","Dur\u00e9e de lecture estim\u00e9e":"28 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Une plong\u00e9e en profondeur dans Twenty Twenty-Two et les th\u00e8mes \u00e0 base de blocs WordPress","datePublished":"2022-01-04T12:10:04+00:00","dateModified":"2023-08-22T13:40:36+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/"},"wordCount":4840,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/12\/twenty-twenty-two-a-deep-dive-wp.jpeg","keywords":["Twenty Twenty-Two","wordpress themes"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/","url":"https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/","name":"Une plong\u00e9e en profondeur dans Twenty Twenty-Two et les th\u00e8mes bas\u00e9s sur des blocs de WordPress","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/12\/twenty-twenty-two-a-deep-dive-wp.jpeg","datePublished":"2022-01-04T12:10:04+00:00","dateModified":"2023-08-22T13:40:36+00:00","description":"Twenty Twenty-Two est le th\u00e8me \u00e0 base de bloc par d\u00e9faut introduit avec WordPress 5.9. D\u00e9couvrez toutes ses fonctionnalit\u00e9s cl\u00e9s dans ce guide approfondi.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/12\/twenty-twenty-two-a-deep-dive-wp.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/12\/twenty-twenty-two-a-deep-dive-wp.jpeg","width":1460,"height":730,"caption":"Une plong\u00e9e en profondeur dans Twenty Twenty-Two et les th\u00e8mes blocs de WordPress"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/twenty-twenty-two-themes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Th\u00e8mes WordPress","item":"https:\/\/kinsta.com\/fr\/sujets\/themes-wordpress\/"},{"@type":"ListItem","position":3,"name":"Une plong\u00e9e en profondeur dans Twenty Twenty-Two et les th\u00e8mes \u00e0 base de blocs WordPress"}]},{"@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\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/fr\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/51435","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\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=51435"}],"version-history":[{"count":10,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/51435\/revisions"}],"predecessor-version":[{"id":58417,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/51435\/revisions\/58417"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/51435\/translations\/en"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/51435\/translations\/de"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/51435\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/51435\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/51435\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/51435\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/51435\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/51435\/translations\/jp"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/51435\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/51435\/translations\/dk"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/51435\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/51436"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=51435"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=51435"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=51435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}