{"id":47239,"date":"2021-07-19T15:35:02","date_gmt":"2021-07-19T13:35:02","guid":{"rendered":"https:\/\/kinsta.com\/?p=98590"},"modified":"2024-10-08T13:23:49","modified_gmt":"2024-10-08T12:23:49","slug":"wordpress-5-8","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/","title":{"rendered":"Nouveaut\u00e9s de WordPress 5.8 (Full Site Editing, images WebP, styles et r\u00e9glages globaux, et bien plus encore)"},"content":{"rendered":"<p>WordPress 5.8 \u00ab Tatum \u00bb <a href=\"https:\/\/wordpress.org\/news\/2021\/07\/tatum\/\">est arriv\u00e9<\/a> et il s&rsquo;agit d&rsquo;une version importante. Outre le nombre incroyable de fonctionnalit\u00e9s, d&rsquo;am\u00e9liorations et de corrections de bugs, WP 5.8 introduit une nouvelle fa\u00e7on de construire des sites web en apportant les premi\u00e8res fonctionnalit\u00e9s relevant du projet plus large connu sous le nom de <strong>Full Site Editing<\/strong>.<\/p>\n<p>Outre le Full Site Editing (\u00e9dition compl\u00e8te du site), WordPress 5.8 apporte des tonnes de changements et d&rsquo;am\u00e9liorations dans plusieurs domaines du <a href=\"https:\/\/kinsta.com\/fr\/part-de-marche-de-wordpress\/\">CMS<\/a>.<\/p>\n<p>Les utilisateurs de WordPress qui n&rsquo;utilisent pas l\u2019extension Gutenberg trouveront des fonctionnalit\u00e9s et des am\u00e9liorations provenant de neuf versions de Gutenberg au total (pour une plong\u00e9e en profondeur dans chaque version, voir Gutenberg <a href=\"https:\/\/make.wordpress.org\/core\/2021\/02\/05\/whats-new-in-gutenberg-9-9-5-february\/\">9.9<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/02\/17\/whats-new-in-gutenberg-10-0-february\/\">10.0<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/02\/whats-new-in-gutenberg-10-1-3-march\/\">10.1<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/17\/whats-new-in-gutenberg-10-2-17-march\/\">10.2<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/02\/whats-new-in-gutenberg-10-3-31-march\/\">10.3<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/14\/whats-new-in-gutenberg-10-4-14-april\/\">10.4<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/30\/whats-new-in-gutenberg-10-5-28-april\/\">10.5<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/14\/whats-new-in-gutenberg-10-6-12-may\/\">10.6<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/27\/whats-new-in-gutenberg-10-7-26-may\/\">10.7<\/a>).<\/p>\n<p>Une nouvelle fonctionnalit\u00e9 importante pour les utilisateurs soucieux des performances de leurs sites est la prise en charge du format WebP.<\/p>\n<p>Les d\u00e9veloppeurs appr\u00e9cieront certainement le retrait d&rsquo;IE11 de la liste des navigateurs pris en charge, le nouveau m\u00e9canisme de configuration et de style des blocs bas\u00e9 sur <strong>theme.json<\/strong>, le syst\u00e8me am\u00e9lior\u00e9 d&rsquo;enregistrement des blocs bas\u00e9 sur <strong>block.json<\/strong>, et les nombreuses am\u00e9liorations de l&rsquo;API qui seront apport\u00e9es par la deuxi\u00e8me <a href=\"https:\/\/kinsta.com\/fr\/blog\/version-wordpress\/\">version de WordPress<\/a> de 2021.<\/p>\n<p>Ne bougez pas, car il s&rsquo;agit d&rsquo;un long tour d&rsquo;horizon des fonctionnalit\u00e9s et des am\u00e9liorations qui ouvrent la voie \u00e0 de nouveaux outils puissants de cr\u00e9ation de sites, dont la sortie est pr\u00e9vue dans les <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/24551\">mois \u00e0 venir<\/a>.<\/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<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Il y a tellement de changements dans WordPress 5.8. Pour \u00e9viter tout risque de conflit inattendu avec votre th\u00e8me et vos extensions, nous vous recommandons vivement d&rsquo;effectuer une <a href=\"https:\/\/kinsta.com\/fr\/docs\/hebergement-wordpress\/sauvegardes-wordpress\/#wordpress-backup\">sauvegarde de votre site web<\/a> et de tester la nouvelle version dans un <a href=\"https:\/\/kinsta.com\/fr\/docs\/hebergement-wordpress\/environnement-staging\/\">environnement de staging<\/a> avant de mettre \u00e0 jour votre site en production.<\/p>\n<\/aside>\n\n\n<h2>Fonctionnalit\u00e9s compl\u00e8tes du Full Site Editing dans WordPress 5.8<\/h2>\n<p>La vision derri\u00e8re le Full Site Editing est de fournir une collection d&rsquo;outils et de fonctionnalit\u00e9s permettant aux utilisateurs de WordPress de <a href=\"https:\/\/wordpress.org\/news\/2021\/06\/gutenberg-highlights\/\">construire un site web entier en utilisant des blocs<\/a>. Avec le Full Site Editing, nous verrons de nombreux blocs disponibles pour cr\u00e9er n&rsquo;importe quel \u00e9l\u00e9ment sur la page, des <a href=\"https:\/\/kinsta.com\/fr\/blog\/plugins-menu-wordpress\/\">menus de navigation<\/a> \u00e0 l&rsquo;image de marque du site, des widgets de colonne lat\u00e9rale, des mod\u00e8les, et bien plus encore.<\/p>\n<p>M\u00eame si WordPress 5.8 introduit plusieurs fonctionnalit\u00e9s relevant du Full Site Editing (FSE), il ne faut pas s&rsquo;attendre \u00e0 voir un environnement visuel de cr\u00e9ation de sites enti\u00e8rement fonctionnel. FSE est encore un travail en cours, et la sortie de WordPress 5.8 ouvre une sorte de phase b\u00eata publique. Selon <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/08\/full-site-editing-scope-for-wp5-8\/\">Josepha Haden Chomphosy<\/a> :<\/p>\n<blockquote><p><em>Le Full Site Editing est un ensemble de projets qui, ensemble, repr\u00e9sentent un changement important, sans doute trop important pour une seule version. Le contexte le plus important \u00e0 partager est qu&rsquo;il ne s&rsquo;agit pas d&rsquo;une exp\u00e9rience compl\u00e8te et par d\u00e9faut pour les utilisateurs. L&rsquo;un des retours les plus clairs du processus de fusion de la phase 1 \u00e9tait qu&rsquo;il n&rsquo;y avait pas assez de temps pour les agences, auteurs de th\u00e8mes, d\u00e9veloppeurs d\u2019extensions, constructeurs de sites, etc.<\/em><\/p>\n<p><em>En gardant cela \u00e0 l&rsquo;esprit, ce processus de fusion ne sera pas un interrupteur marche\/arr\u00eat. L&rsquo;accent n&rsquo;est pas mis sur une exp\u00e9rience utilisateur compl\u00e8te et nuanc\u00e9e, mais plut\u00f4t sur une version b\u00eata publique ouverte dans WordPress 5.8.<\/em><\/p><\/blockquote>\n<p>Ainsi, WordPress 5.8 ne pr\u00e9sente pas une exp\u00e9rience FSE parfaite et compl\u00e8te pour le moment. Au contraire, nous verrons de nouvelles fonctionnalit\u00e9s ajout\u00e9es et am\u00e9lior\u00e9es au fil du temps, \u00e0 partir de la version 5.8. Pour la m\u00eame raison, nous pouvons pr\u00e9sumer que WordPress 5.8 n&rsquo;aura pas un impact consid\u00e9rable sur la fa\u00e7on dont nous avons l&rsquo;habitude de cr\u00e9er des sites web.<\/p>\n<p>\u00c0 l&rsquo;heure o\u00f9 nous \u00e9crivons ces lignes, les propri\u00e9taires et les administrateurs de sites doivent encore opter consciemment pour le FSE en installant un th\u00e8me \u00e0 blocs, tel que <a href=\"https:\/\/wordpress.org\/themes\/tt1-blocks\/\">Twenty-Twenty One Blocks<\/a> (la <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/#the-twenty-twentyone-blocks-experiment\">version \u00e0 blocs<\/a> de Twenty-Twenty One), et en activant l\u2019extension Gutenberg.<\/p>\n<p><kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=a1Sf7PxfmLQ\"><\/kinsta-video><\/p>\n<p>Le <a href=\"https:\/\/developer.wordpress.org\/block-editor\/handbook\/full-site-editing\/\">Full Site Editing<\/a> englobe une s\u00e9rie de sous-projets distincts, notamment l&rsquo;\u00e9diteur de site, les <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/\">styles globaux<\/a>, le bloc de requ\u00eate, le bloc de navigation, les mod\u00e8les, les blocs de th\u00e8mes, et bien plus encore. Mais ce qui se rapproche le plus du Full Site Editing dans WordPress 5.8, c&rsquo;est le <strong>mode d&rsquo;\u00e9dition de mod\u00e8les<\/strong> et les <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/block-theme-overview\/#theme-blocks\">blocs de th\u00e8mes<\/a> correspondants disponibles dans ce mode, comme nous le verrons plus loin dans cet article.<\/p>\n<p>Ensuite, nous allons nous plonger dans certaines <strong>fonctionnalit\u00e9s du FSE qui ont \u00e9t\u00e9 int\u00e9gr\u00e9es au c\u0153ur avec WordPress 5.8<\/strong>.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"disc\" selector=\"h3\" count-number=\"4\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Mode d&rsquo;\u00e9dition des mod\u00e8les<\/h3>\n<p>Le <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/16\/introducing-the-template-editor-in-wordpress-5-8\/\">mode d&rsquo;\u00e9dition des mod\u00e8les<\/a> permet de cr\u00e9er des mod\u00e8les d&rsquo;articles et de pages \u00e0 l&rsquo;aide de blocs. Il s&rsquo;agit d&rsquo;un excellent moyen de r\u00e9duire la complexit\u00e9 de la cr\u00e9ation de sites, en permettant aux utilisateurs de profiter de plusieurs fonctions d&rsquo;\u00e9dition de sites en dehors de l&rsquo;interface de l&rsquo;\u00e9diteur de sites tout en s&rsquo;habituant \u00e0 travailler avec des blocs. C&rsquo;est \u00e9galement une excellente solution pour les utilisateurs qui n&rsquo;utilisent pas de th\u00e8mes bas\u00e9s sur des blocs mais qui recherchent tout de m\u00eame un moyen facile de cr\u00e9er et de modifier des mod\u00e8les \u00e0 partir de l&rsquo;interface utilisateur de l&rsquo;\u00e9diteur de blocs.<\/p>\n<p>La personnalisation des th\u00e8mes n&rsquo;a jamais \u00e9t\u00e9 aussi facile sur WordPress. Maintenant, vous n&rsquo;avez plus besoin de <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-enfant-wordpress\/\">construire un th\u00e8me enfant<\/a> pour cr\u00e9er vos mod\u00e8les personnalis\u00e9s. La bonne nouvelle, c&rsquo;est qu&rsquo;avec WordPress 5.8, l&rsquo;\u00e9dition de mod\u00e8les n&rsquo;est pas limit\u00e9e aux th\u00e8mes de blocs mais est \u00e9galement <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/30438\">disponible pour les th\u00e8mes classiques<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>L&rsquo;\u00e9dition des mod\u00e8les peut \u00eatre utilis\u00e9e dans les th\u00e8mes classiques comprenant un fichier <em>theme.json<\/em> ou supportant les \u00ab <code>mod\u00e8les de blocs<\/code> \u00bb. Elle ne peut pas \u00eatre d\u00e9sactiv\u00e9e pour les th\u00e8mes de blocs.<\/p>\n<\/aside>\n\n<figure style=\"width: 2873px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/welcome-to-the-template-editor.jpg\" alt=\"L'\u00e9diteur de mod\u00e8les.\" width=\"2873\" height=\"1385\"><figcaption class=\"wp-caption-text\">L&rsquo;\u00e9diteur de mod\u00e8les.<\/figcaption><\/figure>\n<p>Pour cr\u00e9er un nouveau mod\u00e8le, il suffit d&rsquo;activer le mode d&rsquo;\u00e9dition des mod\u00e8les dans la colonne lat\u00e9rale des <strong>r\u00e9glages<\/strong>. Un nouveau panneau <strong>Mod\u00e8le<\/strong> est d\u00e9sormais disponible pour permettre aux utilisateurs de changer de mode d&rsquo;\u00e9dition (voir la note de version de <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/30\/whats-new-in-gutenberg-10-5-28-april\/\">Gutenberg 10.5<\/a>).<\/p>\n<figure style=\"width: 1676px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/template-panel.jpg\" alt=\"Panneau de mod\u00e8les dans la colonne lat\u00e9rale de l'\u00e9diteur de blocs.\" width=\"1676\" height=\"942\"><figcaption class=\"wp-caption-text\">Panneau de mod\u00e8les dans la colonne lat\u00e9rale de l&rsquo;\u00e9diteur de blocs.<\/figcaption><\/figure>\n<p>Dans le panneau <strong>Mod\u00e8le<\/strong>, vous pouvez cr\u00e9er un nouveau mod\u00e8le ou modifier un mod\u00e8le existant.<\/p>\n<figure style=\"width: 1674px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/create-custom-template.jpg\" alt=\"D\u00e9finir un nom de mod\u00e8le.\" width=\"1674\" height=\"938\"><figcaption class=\"wp-caption-text\">D\u00e9finir un nom de mod\u00e8le.<\/figcaption><\/figure>\n<p>Pour cr\u00e9er un nouveau mod\u00e8le, cliquez sur <strong>Nouveau<\/strong>. Saisissez ensuite un nom de mod\u00e8le dans la modale et cliquez sur <strong>Cr\u00e9er<\/strong>, et vous \u00eates pr\u00eat.<\/p>\n<figure style=\"width: 2876px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/template-editing-mode.jpg\" alt=\"Mode d'\u00e9dition des mod\u00e8les dans WordPress 5.8.\" width=\"2876\" height=\"1314\"><figcaption class=\"wp-caption-text\">Mode d&rsquo;\u00e9dition des mod\u00e8les dans WordPress 5.8.<\/figcaption><\/figure>\n<p>En mode d&rsquo;\u00e9dition de mod\u00e8le, vous pouvez construire vos mod\u00e8les en utilisant tous les blocs disponibles, y compris les blocs FSE comme le titre du site, le slogan du site, la connexion\/d\u00e9connexion, et bien d&rsquo;autres.<\/p>\n<p>Une fois que vous \u00eates satisfait de vos modifications, vous pouvez revenir au mode d&rsquo;\u00e9dition des articles et enregistrer le mod\u00e8le s\u00e9par\u00e9ment du contenu de l&rsquo;article\/de la page, comme le montre l&rsquo;image ci-dessous :<\/p>\n<figure style=\"width: 2076px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/save-template.jpg\" alt=\"Les options d\u2019enregistrement du mod\u00e8le.\" width=\"2076\" height=\"994\"><figcaption class=\"wp-caption-text\">Les options d\u2019enregistrement du mod\u00e8le.<\/figcaption><\/figure>\n<p>Les mod\u00e8les sont stock\u00e9s dans votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/bases-de-donnees-wordpress\/\">base de donn\u00e9es WordPress<\/a> en tant que types de publications personnalis\u00e9s nomm\u00e9s <code>wp_template<\/code>. Cela vous permet non seulement de modifier un mod\u00e8le depuis l&rsquo;interface de l&rsquo;\u00e9diteur, mais aussi de les importer ou de les exporter \u00e0 volont\u00e9. Vous pouvez \u00e9galement utiliser un mod\u00e8le sur diff\u00e9rents sites web (au moment de la r\u00e9daction de cet article, cette fonctionnalit\u00e9 n&rsquo;est disponible que si vous activez l\u2019extension Gutenberg).<\/p>\n<figure style=\"width: 1566px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/export-templates.png\" alt=\"Exportation de mod\u00e8les et de parties de mod\u00e8les.\" width=\"1566\" height=\"1116\"><figcaption class=\"wp-caption-text\">Exportation de mod\u00e8les et de parties de mod\u00e8les.<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Notez que si vous d\u00e9finissez un mod\u00e8le de bloc pour une page ou un article de blog, le mod\u00e8le PHP normal ne sera plus utilis\u00e9 pour g\u00e9n\u00e9rer la page. Le mod\u00e8le de bloc sera utilis\u00e9 \u00e0 la place.<\/p>\n<\/aside>\n\n<p>Le mode d&rsquo;\u00e9dition des mod\u00e8les est encore un peu bogu\u00e9 au moment o\u00f9 nous \u00e9crivons ces lignes, comme le signalent cet <a href=\"https:\/\/make.wordpress.org\/test\/2021\/05\/26\/fse-program-testing-call-7-polished-portfolios\/\">appel \u00e0 tests<\/a> et <a href=\"https:\/\/wptavern.com\/fse-outreach-7-building-a-portfolio-in-the-upcoming-template-editing-mode\">cette exp\u00e9rience de Justin Tadlock<\/a>.<\/p>\n<figure style=\"width: 2314px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/template-editing-mode-issue.jpg\" alt=\"Probl\u00e8me d'alignement en pleine largeur dans le th\u00e8me classique Twenty Twenty-One.\" width=\"2314\" height=\"916\"><figcaption class=\"wp-caption-text\">Probl\u00e8me d&rsquo;alignement en pleine largeur dans le th\u00e8me classique Twenty Twenty-One.<\/figcaption><\/figure>\n<p>Mais il suffit d&rsquo;un peu de patience et d&rsquo;attendre que les <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/labels\/%5BFeature%5D%20Template%20Editing%20Mode\">principaux probl\u00e8mes<\/a> soient r\u00e9solus pour comprendre pleinement comment le mode d&rsquo;\u00e9dition de mod\u00e8les va changer la fa\u00e7on dont vous personnalisez l&rsquo;aspect et la convivialit\u00e9 de vos sites web.<\/p>\n<p>Les utilisateurs n&rsquo;auront plus besoin de comp\u00e9tences de d\u00e9veloppeur pour avoir un contr\u00f4le total sur la mise en page et l&rsquo;apparence g\u00e9n\u00e9rale du site.<\/p>\n<figure style=\"width: 2316px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/cover-block-in-template-editing-mode.jpg\" alt=\"Le probl\u00e8me d'alignement en pleine largeur a \u00e9t\u00e9 corrig\u00e9.\" width=\"2316\" height=\"1130\"><figcaption class=\"wp-caption-text\">Le probl\u00e8me d&rsquo;alignement en pleine largeur a \u00e9t\u00e9 corrig\u00e9.<\/figcaption><\/figure>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">Le mode d&rsquo;\u00e9dition de mod\u00e8les \u00e9tait initialement <\/span><a style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/30438\">disponible \u00e0 la fois pour les th\u00e8mes de blocs et les th\u00e8mes classiques<\/a><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">. Apr\u00e8s une discussion approfondie sur le canal des responsables de la 5.8, il a \u00e9t\u00e9 d\u00e9cid\u00e9 d&rsquo;activer l&rsquo;\u00e9diteur de mod\u00e8les pour les th\u00e8mes classiques et de le d\u00e9sactiver pour les th\u00e8mes de blocs (voir \u00e9galement #<\/span><a style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/32858\">32858<\/a><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">).<\/span><\/p>\n<p>Selon <a href=\"https:\/\/make.wordpress.org\/themes\/2021\/07\/08\/summary-theme-features-in-wordpress-5-8\/\">Carolina Nymark<\/a> :<\/p>\n<blockquote><p>Initialement, l&rsquo;\u00e9dition de mod\u00e8les \u00e9tait activ\u00e9e pour tous les th\u00e8mes. Les d\u00e9veloppeurs de th\u00e8mes se sont inqui\u00e9t\u00e9s du fait qu&rsquo;ils ne pouvaient pas mettre \u00e0 jour tous leurs th\u00e8mes classiques existants pour prendre en charge cette nouvelle fonctionnalit\u00e9. Avec un changement tardif, l&rsquo;\u00e9quipe de publication et l&rsquo;\u00e9quipe d&rsquo;\u00e9dition ont choisi de changer l&rsquo;\u00e9dition de mod\u00e8le pour \u00eatre opt-in pour les th\u00e8mes classiques.<\/p><\/blockquote>\n<p>Pour que les th\u00e8mes classiques soient pris en charge, les d\u00e9veloppeurs doivent maintenant ajouter le support des th\u00e8mes :<\/p>\n<pre><span style=\"color: #000000\">add_theme_support( 'block-templates' );<\/span><\/pre>\n<p>Les th\u00e8mes classiques qui utilisent <em>theme.json<\/em> peuvent se d\u00e9sengager en supprimant la prise en charge du th\u00e8me :<\/p>\n<pre><span style=\"color: #000000\">remove_theme_support( 'block-templates' );<\/span><\/pre>\n<p>Pour un aper\u00e7u plus d\u00e9taill\u00e9 du fonctionnement du mode d&rsquo;\u00e9dition des mod\u00e8les dans WordPress 5.8 et quelques exemples utiles d&rsquo;utilisation, assurez-vous de regarder cette vid\u00e9o d&rsquo;Anne McCarty :<\/p>\n<p><kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=Z571V_jlD-o\"><\/kinsta-video><\/p>\n<h3>Blocs de th\u00e8mes<\/h3>\n<p>Comme mentionn\u00e9 pr\u00e9c\u00e9demment, FSE n&rsquo;est pas une fonction unique mais un ensemble complet de fonctions de construction de sites qui ne sont pas uniquement li\u00e9es \u00e0 l&rsquo;\u00e9diteur de site. Le <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/#template-editing-mode\">mode d&rsquo;\u00e9dition des mod\u00e8les<\/a> n&rsquo;en est qu&rsquo;un exemple. Mais avec le mode d&rsquo;\u00e9dition des mod\u00e8les, WordPress 5.8 apporte \u00e9galement de nombreux <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/20\/full-site-editing-go-no-go-next-steps\/\">blocs de th\u00e8me<\/a> qui peuvent afficher des informations r\u00e9cup\u00e9r\u00e9es dynamiquement dans la base de donn\u00e9es. Certains de ces blocs peuvent \u00e9galement \u00eatre utilis\u00e9s dans des contextes non-FSE (voir le probl\u00e8me #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/28744\">28744<\/a>).<\/p>\n<figure style=\"width: 1124px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/fse-blocks.jpg\" alt=\"Blocs de l'\u00e9diteur complet du site disponibles dans les contextes non-FSE depuis WordPress 5.8.\" width=\"1124\" height=\"1798\"><figcaption class=\"wp-caption-text\">Blocs de l&rsquo;\u00e9diteur complet du site disponibles dans les contextes non-FSE depuis WordPress 5.8.<\/figcaption><\/figure>\n<p><strong>Les blocs de th\u00e8me apportent des fonctionnalit\u00e9s de balises de mod\u00e8le aux th\u00e8mes classiques<\/strong>, et vous pouvez les utiliser de la m\u00eame mani\u00e8re que les blocs ordinaires. Par exemple, vous pouvez ajouter des \u00e9tiquettes d&rsquo;article ou l&rsquo;image mise en avant de l&rsquo;article n&rsquo;importe o\u00f9 dans le contenu de l&rsquo;article ou le mod\u00e8le. Pour avoir une id\u00e9e du nombre de blocs de th\u00e8me ajout\u00e9s au c\u0153ur de WordPress 5.8, il suffit de saisir <strong>\/post<\/strong> dans l&rsquo;espace r\u00e9serv\u00e9 aux blocs :<\/p>\n<figure style=\"width: 662px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/post-related-blocks.png\" alt=\"Blocs de th\u00e8me sugg\u00e9r\u00e9s.\" width=\"662\" height=\"864\"><figcaption class=\"wp-caption-text\">Blocs de th\u00e8me sugg\u00e9r\u00e9s.<\/figcaption><\/figure>\n<p>Un bloc de th\u00e8me utile disponible avec WordPress 5.8 est le bloc <strong>Connexion\/D\u00e9connexion<\/strong>, qui fournit des liens de connexion et de d\u00e9connexion. Il peut \u00e9ventuellement afficher le formulaire de connexion au lieu d&rsquo;un lien. Les administrateurs de sites peuvent \u00e9galement personnaliser la cible de la redirection (voir PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/29766\">29766<\/a>).<\/p>\n<figure style=\"width: 1948px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/login-out-block.jpg\" alt=\"Bloc de connexion\/d\u00e9connexion et ses r\u00e9glages dans l'\u00e9diteur de bloc.\" width=\"1948\" height=\"770\"><figcaption class=\"wp-caption-text\">Bloc de connexion\/d\u00e9connexion et ses r\u00e9glages dans l&rsquo;\u00e9diteur de bloc.<\/figcaption><\/figure>\n<p>Pour une vue plus d\u00e9taill\u00e9e des blocs FSE, consultez \u00ab\u00a0Activer le Full Site Editing dans les th\u00e8mes classiques\u00a0\u00bb <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/28744\">sur Github<\/a>.<\/p>\n<h3>Le bloc boucle de requ\u00eate<\/h3>\n<p>Combien de fois vous \u00eates-vous retrouv\u00e9 dans une situation o\u00f9 vous avez besoin d&rsquo;afficher une liste personnalis\u00e9e d&rsquo;articles de blog ou de <a href=\"https:\/\/kinsta.com\/fr\/blog\/types-publications-personnalises-wordpress\/\">types de publications personnalis\u00e9s<\/a> ? Pensez aux produits, aux \u00e9v\u00e9nements, \u00e0 l&rsquo;immobilier&#8230; Bien s\u00fbr, vous avez des tonnes d\u2019extensions \u00e0 choisir pour cela, mais la possibilit\u00e9 de cr\u00e9er des requ\u00eates hautement personnalis\u00e9es n\u00e9cessite souvent des comp\u00e9tences de d\u00e9veloppeur pour se d\u00e9brouiller avec la <a href=\"https:\/\/developer.wordpress.org\/themes\/basics\/the-loop\/\">boucle WordPress<\/a>.<\/p>\n<p>Avec l&rsquo;introduction du <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/24762\">bloc Boucle de requ\u00eate<\/a> dans le c\u0153ur de WordPress, les propri\u00e9taires de sites et les administrateurs peuvent cr\u00e9er des listes d&rsquo;articles et de CPT sans avoir \u00e0 \u00e9crire de code complexe ou \u00e0 <a href=\"https:\/\/kinsta.com\/fr\/blog\/engager-developpeur-wordpress\/\">engager un d\u00e9veloppeur<\/a>, du moins dans les cas d&rsquo;utilisation les plus courants.<\/p>\n<p>Alors, que fait le bloc de boucle de requ\u00eate ?<\/p>\n<p>En bref, il effectue le m\u00eame travail que la boucle WordPress, mais dans le contexte visuel de l&rsquo;\u00e9diteur de blocs.<\/p>\n<p>Le bloc de boucle de requ\u00eate effectue une requ\u00eate bas\u00e9e sur les r\u00e9glages de l&rsquo;utilisateur sur la base de donn\u00e9es WordPress, boucle sur chaque publication r\u00e9cup\u00e9r\u00e9e et affiche les donn\u00e9es sur la page.<\/p>\n<p>Apr\u00e8s un <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/24762\">d\u00e9veloppement intensif<\/a>, ce bloc a atteint sa structure actuelle et <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/32283\">se compose d\u00e9sormais de deux blocs imbriqu\u00e9s<\/a> : les blocs <strong>Requ\u00eate<\/strong> et <strong>Mod\u00e8le de publication<\/strong>.<\/p>\n<figure style=\"width: 2126px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/query-loop-list-view.jpg\" alt=\"Vue en liste d'un bloc de boucle de requ\u00eate.\" width=\"2126\" height=\"1124\"><figcaption class=\"wp-caption-text\">Vue en liste d&rsquo;un bloc de boucle de requ\u00eate.<\/figcaption><\/figure>\n<p>\u00c9tant donn\u00e9 qu&rsquo;il s&rsquo;agit d&rsquo;une fonctionnalit\u00e9 avanc\u00e9e, le bloc Boucle de requ\u00eate n\u00e9cessite quelques configurations.<\/p>\n<p>Tout d&rsquo;abord, vous pouvez choisir entre diff\u00e9rents <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-5\/#block-patterns\">mod\u00e8les de blocs<\/a> r\u00e9pertori\u00e9s dans les vues Carrousel et Grille. Une fois que vous avez choisi votre mod\u00e8le, il vous suffit de cliquer sur <strong>Choisir<\/strong>, et le bloc de Boucle de requ\u00eate g\u00e9n\u00e8re votre liste personnalis\u00e9e de publications.<\/p>\n<figure style=\"width: 1262px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/query-block-grid-view.jpg\" alt=\"Compositions de bloc de boucle de requ\u00eate dans la vue en grille.\" width=\"1262\" height=\"1374\"><figcaption class=\"wp-caption-text\">Compositions de bloc de boucle de requ\u00eate dans la vue en grille.<\/figcaption><\/figure>\n<p>Si vous cliquez sur <strong>Partir de z\u00e9ro<\/strong>, vous verrez une liste de quatre variations du bloc du c\u0153ur : <strong>Titre et date<\/strong> ; <strong>Titre et extrait<\/strong> ; <strong>Titre, date et extrait<\/strong> ; et <strong>Image, date et titre<\/strong> (voir les <a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/17\/whats-new-in-gutenberg-10-2-17-march\/\">composotions sur la configuration des blocs<\/a>).<\/p>\n<figure style=\"width: 1238px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/query-loop-variations-1.png\" alt=\"Variations du bloc de la boucle de requ\u00eate\" width=\"1238\" height=\"662\"><figcaption class=\"wp-caption-text\">Variations du bloc de la boucle de requ\u00eate<\/figcaption><\/figure>\n<p>Une fois en place, la s\u00e9lection du bloc Boucle de requ\u00eate affiche la colonne lat\u00e9rale des r\u00e9glages du bloc, dans laquelle vous pouvez cr\u00e9er votre requ\u00eate. Vous pouvez soit h\u00e9riter de la requ\u00eate de l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/description-url\/\">URL<\/a>, soit personnaliser les arguments de la requ\u00eate : le type de publications \u00e0 inclure dans la liste, l&rsquo;ordre d&rsquo;affichage et la pr\u00e9sence ou non de publications \u00e9pingl\u00e9es.<\/p>\n<p>Vous pouvez \u00e9galement d\u00e9finir plusieurs filtres, en choisissant parmi les cat\u00e9gories, les auteurs et les mots-cl\u00e9s.<\/p>\n<figure style=\"width: 2876px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/query-block.jpg\" alt=\"Le bloc de Boucle de requ\u00eate avec les r\u00e9glages de la colonne lat\u00e9rale.\" width=\"2876\" height=\"1380\"><figcaption class=\"wp-caption-text\">Le bloc de Boucle de requ\u00eate avec les r\u00e9glages de la colonne lat\u00e9rale.<\/figcaption><\/figure>\n<p>En outre, un bouton <strong>R\u00e9glages d&rsquo;affichage<\/strong> dans la barre d&rsquo;outils du bloc offre davantage de r\u00e9glages pour contr\u00f4ler le nombre d&rsquo;\u00e9l\u00e9ments par page, le d\u00e9calage et le nombre maximum de pages \u00e0 afficher.<\/p>\n<figure style=\"width: 1252px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/query-block-display-settings.jpg\" alt=\"Afficher les r\u00e9glages du bloc de la boucle de requ\u00eate.\" width=\"1252\" height=\"1152\"><figcaption class=\"wp-caption-text\">Afficher les r\u00e9glages du bloc de la boucle de requ\u00eate.<\/figcaption><\/figure>\n<p>Oui, le bloc Boucle de requ\u00eate est un outil puissant, qui permet aux propri\u00e9taires de sites de cr\u00e9er des listes hautement personnalis\u00e9es d&rsquo;articles et des types de publications personnalis\u00e9s.<\/p>\n<p>Mais si vous vous promenez dans les r\u00e9glages de la classe <a href=\"https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/\">WP_Query<\/a>, il est clair que le niveau de personnalisation possible en utilisant le code est beaucoup plus granulaire que ce qui est possible en utilisant le bloc Boucle de requ\u00eate.<\/p>\n<p>N\u00e9anmoins, il s&rsquo;agit d&rsquo;un outil pr\u00e9cieux et flexible qui se pr\u00eate \u00e0 de nombreux cas d&rsquo;utilisation, et nous verrons tr\u00e8s probablement d&rsquo;autres am\u00e9liorations \u00e0 l&rsquo;avenir.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Les blocs Boucle de requ\u00eate et Mod\u00e8le de publication ont \u00e9t\u00e9 renomm\u00e9s plusieurs fois au cours des derni\u00e8res semaines. La d\u00e9nomination finale a \u00e9t\u00e9 atteinte avec <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/24\/whats-new-in-gutenberg-10-9-23-june\/\">Gutenberg 10.9<\/a>.<\/p>\n<\/aside>\n\n<h3>Vue de liste persistante dans l&rsquo;\u00e9diteur de publication<\/h3>\n<p>Une autre fonctionnalit\u00e9 du FSE \u00e9tendue \u00e0 l&rsquo;\u00e9diteur de publication est la vue de liste persistante. Avant WordPress 5.8 (et <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/27\/whats-new-in-gutenberg-10-7-26-may\/\">Gutenberg 10.7<\/a>), la vue en liste \u00e9tait affich\u00e9e dans un popover. En d\u00e9pla\u00e7ant le focus en dehors du popover, la liste disparaissait.<\/p>\n<p>\u00c0 l&rsquo;inverse, l&rsquo;\u00e9diteur de site affichait la vue en liste dans une colonne lat\u00e9rale contenant l&rsquo;ensemble de l&rsquo;arborescence du bloc.<\/p>\n<p>Avec WordPress 5.8, la vue en liste s&rsquo;affiche d\u00e9sormais dans une colonne lat\u00e9rale de l&rsquo;\u00e9diteur de publication, ce qui permet aux utilisateurs de naviguer plus rapidement et plus pr\u00e9cis\u00e9ment dans l&rsquo;arborescence des blocs.<\/p>\n<figure style=\"width: 698px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/persistent-list-view.png\" alt=\"La colonne lat\u00e9rale Vue en liste dans WordPress 5.8.\" width=\"698\" height=\"1182\"><figcaption class=\"wp-caption-text\">La colonne lat\u00e9rale Vue en liste dans WordPress 5.8.<\/figcaption><\/figure>\n<p>Si vous cliquez sur un \u00e9l\u00e9ment de la vue en liste, celui-ci est mis en \u00e9vidence et le focus est d\u00e9plac\u00e9 vers le bloc correspondant dans le canevas de l&rsquo;\u00e9diteur de publications. En outre, si vous survolez les \u00e9l\u00e9ments de la vue en liste, l&rsquo;\u00e9l\u00e9ment et le bloc correspondant dans l&rsquo;\u00e9diteur de publications sont mis en \u00e9vidence.<\/p>\n<figure style=\"width: 2158px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/persistent-list-view-enhancement-1.jpg\" alt=\"Survolez les \u00e9l\u00e9ments dans la vue en liste.\" width=\"2158\" height=\"1184\"><figcaption class=\"wp-caption-text\">Survolez les \u00e9l\u00e9ments dans la vue en liste.<\/figcaption><\/figure>\n<p>Enfin, l&rsquo;ajout d&rsquo;une ancre \u00e0 un bloc appara\u00eetra \u00e9galement \u00e0 c\u00f4t\u00e9 de l&rsquo;\u00e9l\u00e9ment correspondant dans la vue en liste.<\/p>\n<figure style=\"width: 2496px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/persistent-list-view-anchor-2.jpg\" alt=\"Ajout d'une ancre aux blocs dans WordPress 5.8.\" width=\"2496\" height=\"1156\"><figcaption class=\"wp-caption-text\">Ajout d&rsquo;une ancre aux blocs dans WordPress 5.8.<\/figcaption><\/figure>\n<p>Avec toutes ces am\u00e9liorations apport\u00e9es \u00e0 la vue en liste, la navigation dans les documents complexes devrait \u00eatre beaucoup plus facile.<\/p>\n<h2>\u00c9diteur de widgets \u00e0 base de blocs et widgets \u00e0 base de blocs dans l\u2019outil de personnalisation<\/h2>\n<p><strong>L&rsquo;\u00e9diteur de widgets bas\u00e9 sur les blocs<\/strong> est un <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/projects\/27\">vaste projet<\/a> visant \u00e0 apporter l&rsquo;interface de l&rsquo;\u00e9diteur de <a href=\"https:\/\/make.wordpress.org\/core\/2021\/02\/11\/bringing-the-power-of-blocks-to-widgets\/\">blocs aux th\u00e8mes \u00e0 widgets classiques<\/a>.<\/p>\n<p>Le nouvel \u00e9diteur de widgets offre de nombreux avantages \u00e0 la grande majorit\u00e9 des personnes qui utilisent encore des th\u00e8mes classiques. En m\u00eame temps, il leur permet de se familiariser avec l&rsquo;interface des blocs avant qu&rsquo;elle ne devienne la norme pour tous les <a href=\"https:\/\/kinsta.com\/fr\/blog\/roles-utilisateurs-wordpress\/\">utilisateurs de WordPress<\/a>.<\/p>\n<figure style=\"width: 2150px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/block-widgets.jpg\" alt=\"Modale des blocs de widgets.\" width=\"2150\" height=\"1254\"><figcaption class=\"wp-caption-text\">Modale des blocs de widgets.<\/figcaption><\/figure>\n<p>Comme le souligne <a href=\"https:\/\/make.wordpress.org\/core\/2021\/02\/11\/bringing-the-power-of-blocks-to-widgets\/\">Anne McCarty<\/a>, les widgets bas\u00e9s sur des blocs pr\u00e9sentent plusieurs avantages, dont les suivants :<\/p>\n<ul>\n<li>Vous pouvez d\u00e9sormais cr\u00e9er des <strong>mises en page dans les colonnes lat\u00e9rales<\/strong>, les en-t\u00eates et les pieds de page \u00e0 l&rsquo;aide de colonnes, de s\u00e9parateurs et d&rsquo;autres blocs de conception.<\/li>\n<li>Les widgets prennent d\u00e9sormais en charge l&rsquo;<strong>\u00e9dition de texte enrichi<\/strong> par d\u00e9faut, sans que les utilisateurs aient besoin d&rsquo;ajouter un code personnalis\u00e9 ou d&rsquo;int\u00e9grer un \u00e9diteur HTML tiers avec une extension.<\/li>\n<li>De nombreux widgets bas\u00e9s sur des codes courts sont d\u00e9sormais <strong>disponibles sous forme de blocs<\/strong>, ce qui simplifie l&rsquo;exp\u00e9rience d&rsquo;\u00e9dition.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/12\/help-test-the-widgets-editor-for-wordpress-5-8\/\">Andrei Draganescu<\/a> souligne \u00e9galement les avantages que nous pouvons tirer de la possibilit\u00e9 de modifier des widgets \u00e0 partir d&rsquo;une interface bas\u00e9e sur des blocs :<\/p>\n<blockquote><p>Le principal avantage de la mise \u00e0 niveau de la fonctionnalit\u00e9 des widgets vers les blocs r\u00e9side dans la possibilit\u00e9 de modifier directement les widgets en utilisant l&rsquo;interaction famili\u00e8re des blocs que vous utilisez lorsque vous modifiez une page ou un article sur votre site. La possibilit\u00e9 d&rsquo;utiliser des blocs ouvre des tonnes de nouvelles possibilit\u00e9s cr\u00e9atives, des mini mises en page sans code \u00e0 l&rsquo;exploitation de la vaste biblioth\u00e8que de blocs du c\u0153ur et de blocs tiers pour cr\u00e9er du contenu.<\/p><\/blockquote>\n<p>Vous n&rsquo;avez pas \u00e0 craindre que vos widgets cessent de fonctionner avec WordPress 5.8, car la <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/12\/help-test-the-widgets-editor-for-wordpress-5-8\/\">communaut\u00e9 a travaill\u00e9 dur<\/a> pour <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/07\/whats-next-in-gutenberg-may-2021\/\">assurer la r\u00e9trocompatibilit\u00e9<\/a> afin que \u00ab\u00a0les widgets existants et les widgets tiers continuent de fonctionner et puissent \u00eatre utilis\u00e9s avec les blocs\u00a0\u00bb (voir <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/block-based-widgets-editor-in-wordpress-5-8\/\">\u00c9diteur de widgets bas\u00e9 sur les blocs dans WordPress 5.8<\/a>).<\/p>\n<p>Mais l\u00e0 encore, pour \u00e9viter tout probl\u00e8me de compatibilit\u00e9 avec votre installation WordPress existante, n&rsquo;oubliez pas de tester la nouvelle version dans un <a href=\"https:\/\/kinsta.com\/fr\/docs\/hebergement-wordpress\/environnement-staging\/\">environnement de staging<\/a> avant de mettre \u00e0 jour votre site en production.<\/p>\n<p>Pour ceux d&rsquo;entre vous qui ne souhaitent pas utiliser l&rsquo;\u00e9diteur de widgets bas\u00e9 sur des blocs pour le moment, il est toujours possible de restaurer l&rsquo;\u00e9cran classique des <a href=\"https:\/\/kinsta.com\/fr\/blog\/widgets-wordpress\/\">widgets<\/a> de trois mani\u00e8res diff\u00e9rentes :<\/p>\n<ol>\n<li style=\"list-style-type: none\">\n<ol>\n<li>Vous pouvez installer <a href=\"https:\/\/wordpress.org\/plugins\/classic-widgets\/\" target=\"_blank\" rel=\"noopener noreferrer\">l\u2019extension officielle Classic Widgets<\/a>, qui r\u00e9tablit l&rsquo;ancienne interface de l&rsquo;\u00e9cran des widgets. L\u2019extension \u00ab sera prise en charge et maintenue au moins jusqu&rsquo;en 2022, ou aussi longtemps que n\u00e9cessaire \u00bb.<\/li>\n<li>\u00a0Les d\u00e9veloppeurs de th\u00e8mes peuvent d\u00e9sactiver l&rsquo;\u00e9diteur de widgets bas\u00e9 sur des blocs en supprimant la prise en charge du th\u00e8me comme suit :\n<pre><code class=\"language-php\">remove_theme_support( 'widgets-block-editor' );<\/code><\/pre>\n<\/li>\n<li>\u00a0Un nouveau filtre <code>use_widgets_block_editor<\/code> peut \u00e9galement \u00eatre utilis\u00e9 :\n<pre><code class=\"language-php\">add_filter( 'use_widgets_block_editor', '__return_false' );<\/code><\/pre>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p>Voir aussi <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/widgets\/opting-out\/\">R\u00e9tablir l&rsquo;\u00e9diteur de widgets classique<\/a> dans <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/widgets\/overview\/\">Vue d&rsquo;ensemble de l&rsquo;\u00e9diteur de blocs de widgets<\/a>.<\/p>\n<h3>Bloquer les widgets dans l\u2019outil de personnalisation<\/h3>\n<p>Dans le cadre du m\u00eame projet, WordPress 5.8 apporte \u00e9galement des <strong>blocs de widgets dans l\u2019outil de personnalisation<\/strong>.<\/p>\n<figure style=\"width: 598px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/welcome-to-block-widgets.jpg\" alt=\"Bloc des widgets dans la personnalisation.\" width=\"598\" height=\"1398\"><figcaption class=\"wp-caption-text\">Bloc des widgets dans la personnalisation.<\/figcaption><\/figure>\n<p>L&rsquo;ajout d&rsquo;un widget bas\u00e9 sur un bloc dans la personnalisation est assez simple. Vous pouvez lancer l&rsquo;<strong>insertion de widgets de personnalisation<\/strong> en cliquant sur l&rsquo;ic\u00f4ne plus dans le coin sup\u00e9rieur droit du panneau des widgets.<\/p>\n<figure style=\"width: 1706px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/customize-widgets-inserter.jpg\" alt=\"L'insertion de widgets personnalis\u00e9s.\" width=\"1706\" height=\"1298\"><figcaption class=\"wp-caption-text\">L&rsquo;insertion de widgets personnalis\u00e9s.<\/figcaption><\/figure>\n<p>Vous pouvez \u00e9galement lancer l&rsquo;<strong>insertion rapide<\/strong> depuis le bas du panneau des widgets, comme le montre l&rsquo;image suivante.<\/p>\n<figure style=\"width: 1212px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/customize-widgets-quick-inserter.jpg\" alt=\"L'insertion rapide de widgets personnalis\u00e9s.\" width=\"1212\" height=\"886\"><figcaption class=\"wp-caption-text\">L&rsquo;insertion rapide de widgets personnalis\u00e9s.<\/figcaption><\/figure>\n<p>Au moment de la r\u00e9daction de cet article, la nouvelle interface de modification des widgets n\u00e9cessite encore des <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/labels\/%5BFeature%5D%20Widgets%20Customizer\">am\u00e9liorations et des corrections de bogues<\/a>, mais les possibilit\u00e9s de personnalisation sont pratiquement illimit\u00e9es.<\/p>\n<p>En gros, \u00e0 partir de WordPress 5.8, vous disposerez de la puissance de l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/\">\u00e9diteur de blocs<\/a> dans l\u2019outil de personnalisation, et vous pourrez sans probl\u00e8me cr\u00e9er des colonnes lat\u00e9rales hautement personnalis\u00e9es.<\/p>\n<p>.<\/p>\n<figure style=\"width: 924px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/show-more-settings.jpg\" alt=\"Afficher d'autres r\u00e9glages.\" width=\"924\" height=\"1066\"><figcaption class=\"wp-caption-text\">Afficher d&rsquo;autres r\u00e9glages.<\/figcaption><\/figure>\n<p>La <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/block-based-widgets-editor-in-wordpress-5-8\/\">dev-note sur l&rsquo;\u00e9diteur de widgets bas\u00e9 sur des blocs<\/a> offre un aper\u00e7u plus approfondi de l&rsquo;\u00e9diteur de widgets bas\u00e9 sur des blocs, avec des exemples et des ressources pour les d\u00e9veloppeurs.<\/p>\n<h2>Fonctionnalit\u00e9s et am\u00e9liorations de l&rsquo;\u00e9diteur de blocs<\/h2>\n<p>Outre la premi\u00e8re mise en \u0153uvre du FSE, WordPress 5.8 apporte \u00e9galement de nouvelles fonctionnalit\u00e9s et des am\u00e9liorations \u00e0 plusieurs \u00e9l\u00e9ments de l&rsquo;\u00e9diteur de blocs, ce qui am\u00e9liore consid\u00e9rablement l&rsquo;exp\u00e9rience d&rsquo;\u00e9dition globale.<\/p>\n<p>Ces changements comprennent :<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"disc\" selector=\"h3\" count-number=\"9\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>Am\u00e9liorations des blocs M\u00e9dia et texte<\/h3>\n<p>La transformation d&rsquo;un bloc en bloc <strong>colonnes<\/strong> est possible depuis un certain temps d\u00e9j\u00e0. Cependant, tous les blocs transform\u00e9s en blocs colonnes ont une seule colonne. Cela pourrait conduire \u00e0 des r\u00e9sultats sous-optimaux pour le bloc <strong>M\u00e9dia et texte<\/strong>, pour lequel une seule colonne n&rsquo;est g\u00e9n\u00e9ralement pas adapt\u00e9e.<\/p>\n<figure style=\"width: 2314px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/media-and-text-transforms.jpg\" alt=\"Transformations et styles du bloc M\u00e9dia et texte.\" width=\"2314\" height=\"1110\"><figcaption class=\"wp-caption-text\">Transformations et styles du bloc M\u00e9dia et texte.<\/figcaption><\/figure>\n<p>\u00c0 partir de WordPress 5.8 (et <a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/17\/whats-new-in-gutenberg-10-2-17-march\/\">Gutenberg 10.2<\/a>), la transformation du bloc <strong>M\u00e9dia et texte<\/strong> en bloc <strong>Colonnes<\/strong> ajoute automatiquement deux colonnes : une pour l&rsquo;image et une autre pour le texte.<\/p>\n<figure style=\"width: 2018px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/media-and-text-to-two-columns.jpg\" alt=\"Deux colonnes transform\u00e9es pour les m\u00e9dias et le texte.\" width=\"2018\" height=\"652\"><figcaption class=\"wp-caption-text\">Deux colonnes transform\u00e9es pour les m\u00e9dias et le texte.<\/figcaption><\/figure>\n<h3>Am\u00e9liorations des blocs r\u00e9utilisables<\/h3>\n<p>Les blocs r\u00e9utilisables permettent \u00e0 l&rsquo;utilisateur d&rsquo;enregistrer un bloc ou un groupe de blocs pour le r\u00e9utiliser ult\u00e9rieurement dans n&rsquo;importe quel article ou page d&rsquo;un site web. Ceci est surtout utile pour les utilisateurs qui incluent de mani\u00e8re r\u00e9p\u00e9t\u00e9e le m\u00eame bloc ou groupe de blocs dans diff\u00e9rents articles\/pages.<\/p>\n<figure style=\"width: 1290px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/reusable-block-modal.jpg\" alt=\"Une modale pour la cr\u00e9ation de blocs r\u00e9utilisables.\" width=\"1290\" height=\"964\"><figcaption class=\"wp-caption-text\">Une modale pour la cr\u00e9ation de blocs r\u00e9utilisables.<\/figcaption><\/figure>\n<p>Avec WordPress 5.8, les blocs r\u00e9utilisables sont visuellement plus clairs, ce qui les rend plus faciles \u00e0 g\u00e9rer pour les utilisateurs de WordPress.<\/p>\n<figure style=\"width: 2084px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/reusable-block.jpg\" alt=\"Un bloc r\u00e9utilisable dans WordPress 5.8.\" width=\"2084\" height=\"724\"><figcaption class=\"wp-caption-text\">Un bloc r\u00e9utilisable dans WordPress 5.8.<\/figcaption><\/figure>\n<p>Voici une liste rapide des am\u00e9liorations des blocs r\u00e9utilisables que les utilisateurs trouveront apr\u00e8s avoir mis \u00e0 jour leurs sites web vers WordPress 5.8 :<\/p>\n<ul>\n<li>Lors de la cr\u00e9ation d&rsquo;un bloc r\u00e9utilisable, une modale permet d\u00e9sormais aux utilisateurs d&rsquo;attribuer un nom au bloc.<\/li>\n<li>Le nom du bloc r\u00e9utilisable est d\u00e9sormais affich\u00e9 dans la barre d&rsquo;outils du bloc, la liste de navigation et le fil d&rsquo;Ariane.<\/li>\n<li>Lorsqu&rsquo;un bloc enfant est s\u00e9lectionn\u00e9, les blocs r\u00e9utilisables sont d\u00e9sormais mis en \u00e9vidence. Il s&rsquo;agit d&rsquo;une am\u00e9lioration significative de l\u2019ergonomie, car elle vous permet d&rsquo;identifier facilement le bloc parent et son contenu.<\/li>\n<li>Il est d\u00e9sormais possible de modifier le nom du bloc dans l&rsquo;inspecteur de la colonne lat\u00e9rale..<\/li>\n<\/ul>\n<figure style=\"width: 1262px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/reusable-block-outlines.jpg\" alt=\"Contours de blocs r\u00e9utilisables.\" width=\"1262\" height=\"658\"><figcaption class=\"wp-caption-text\">Contours de blocs r\u00e9utilisables.<\/figcaption><\/figure>\n<h3>Barre d&rsquo;outils du bloc d&rsquo;images normalis\u00e9es<\/h3>\n<p>Plusieurs barres d&rsquo;outils de blocs ont \u00e9t\u00e9 r\u00e9organis\u00e9es afin de fournir une <a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/02\/whats-new-in-gutenberg-10-1-3-march\/\">interface utilisateur coh\u00e9rente entre les blocs<\/a> et d&rsquo;am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur. D\u00e9sormais, les commandes de la barre d&rsquo;outils sont regroup\u00e9es selon l&rsquo;ordre s\u00e9mantique \u00ab\u00a0meta, block-level, inline\u00a0\u00bb.<\/p>\n<figure style=\"width: 950px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/heading-block-toolbar.png\" alt=\"Barre d'outils du bloc de titre.\" width=\"950\" height=\"294\"><figcaption class=\"wp-caption-text\">Barre d&rsquo;outils du bloc de titre.<\/figcaption><\/figure>\n<p>Depuis <a href=\"https:\/\/make.wordpress.org\/core\/2021\/03\/02\/whats-new-in-gutenberg-10-1-3-march\/\">Gutenberg 10.1<\/a> et <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/02\/whats-new-in-gutenberg-10-3-31-march\/\">Gutenberg 10.3<\/a>, tout un ensemble de barres d&rsquo;outils de bloc a \u00e9t\u00e9 normalis\u00e9. Il s&rsquo;agit notamment d&rsquo;une <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/29205\">image<\/a>, d&rsquo;un bouton, de boutons, d&rsquo;une liste, d&rsquo;un titre, d&rsquo;un paragraphe, d&rsquo;une citation, d&rsquo;un fichier audio, d&rsquo;un fichier m\u00e9dia et texte, d&rsquo;une vid\u00e9o et plus encore.<\/p>\n<p>Selon <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/25983\">Matias Ventura<\/a> :<\/p>\n<blockquote><p>Les regroupements s\u00e9mantiques que nous avons dans la barre d&rsquo;outils &#8211; m\u00e9ta, niveau de bloc, en ligne &#8211; devraient \u00e9galement avoir une repr\u00e9sentation visuelle avec les bordures. \u00c0 l&rsquo;heure actuelle, les contr\u00f4les de niveau bloc distincts ont des repr\u00e9sentations diff\u00e9rentes, y compris dans des cas comme celui de la navigation, o\u00f9 tous les contr\u00f4les ont des bordures.<\/p><\/blockquote>\n<figure style=\"width: 953px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/image-block-toolbar.png\" alt=\"Barre d'outils du bloc d'images normalis\u00e9es.\" width=\"953\" height=\"280\"><figcaption class=\"wp-caption-text\">Barre d&rsquo;outils du bloc d&rsquo;images normalis\u00e9es.<\/figcaption><\/figure>\n<p>Ainsi, depuis WordPress 5.8, la barre d&rsquo;outils des blocs regroupe les <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/designers\/block-design\/#group-block-toolbar-controls-with-related-items\">contr\u00f4les dans des segments<\/a> entour\u00e9s de bordures. En outre :<\/p>\n<ul>\n<li>Le segment <strong>Meta<\/strong> contient des commandes de type bloc, telles que le s\u00e9lecteur de bloc, la poign\u00e9e de d\u00e9placement et la commande de d\u00e9placement.<\/li>\n<li>Le segment de <strong>niveau de bloc<\/strong> contient des outils de bloc sp\u00e9cifiques affectant l&rsquo;ensemble du contenu, tels que l&rsquo;alignement dans un bloc de paragraphe ou la liaison dans un bloc d&rsquo;image.<\/li>\n<li>Le segment <strong>Niveau en ligne\/Autres<\/strong> contient des outils de transformation en ligne, tels que le formatage en ligne dans un bloc de texte.<\/li>\n<li>Le menu <strong>Plus<\/strong> comprend des outils suppl\u00e9mentaires.<\/li>\n<\/ul>\n<p>L&rsquo;image ci-dessous compare la barre d&rsquo;outils du bloc Image dans WordPress 5.7 et 5.8 :<\/p>\n<figure style=\"width: 902px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/image-block-toolbar-before-after.png\" alt=\"Barre d'outils du bloc image dans WordPress 5.7 vs WordPress 5.8.\" width=\"902\" height=\"466\"><figcaption class=\"wp-caption-text\">Barre d&rsquo;outils du bloc image dans WordPress 5.7 vs WordPress 5.8.<\/figcaption><\/figure>\n<h3>Am\u00e9liorations de la barre haute d&rsquo;outils<\/h3>\n<p>Lorsque le mode barre haute d&rsquo;outils \u00e9tait activ\u00e9 dans les versions pr\u00e9c\u00e9dentes de WordPress, la barre haute d&rsquo;outils et la barre d&rsquo;outils de bloc \u00e9taient affich\u00e9es c\u00f4te \u00e0 c\u00f4te, comme le montre l&rsquo;image suivante :<\/p>\n<figure style=\"width: 2880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/wordpress-57-top-toolbar.jpg\" alt=\"La barre haute d'outils sur les \u00e9crans larges dans WordPress 5.7.\" width=\"2880\" height=\"1332\"><figcaption class=\"wp-caption-text\">La barre haute d&rsquo;outils sur les \u00e9crans larges dans WordPress 5.7.<\/figcaption><\/figure>\n<p>Avec WordPress 5.8, l&rsquo;activation de l&rsquo;affichage de la barre haute d&rsquo;outils fixera la barre d&rsquo;outils du bloc en haut de l&rsquo;\u00e9diteur, juste en dessous de la barre haute d&rsquo;outils. Cela se produit ind\u00e9pendamment de la largeur du navigateur et devrait am\u00e9liorer consid\u00e9rablement l&rsquo;exp\u00e9rience utilisateur.<\/p>\n<figure style=\"width: 2880px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/wordpress-58-top-toolbar.jpg\" alt=\"La barre haute d'outils sur les \u00e9crans larges dans WordPress 5.8.\" width=\"2880\" height=\"1324\"><figcaption class=\"wp-caption-text\">La barre haute d&rsquo;outils sur les \u00e9crans larges dans WordPress 5.8.<\/figcaption><\/figure>\n<p>Cette am\u00e9lioration apporte \u00e9galement des changements pour les d\u00e9veloppeurs car elle unifie les API des barres d&rsquo;outils sous le composant <code>&lt;BlockTools \/&gt;<\/code> (voir PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/31134\">31134<\/a>)<\/p>\n<h3>PDFs int\u00e9gr\u00e9s<\/h3>\n<p>Lorsqu&rsquo;un fichier PDF est ajout\u00e9 au document par le biais du bloc fichier, un nouveau bouton \u00e0 bascule dans la colonne lat\u00e9rale vous permet d&rsquo;activer\/d\u00e9sactiver une <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/30\/whats-new-in-gutenberg-10-5-28-april\/\">version PDF int\u00e9gr\u00e9e<\/a> (voir PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/30857\">30857<\/a>).<\/p>\n<figure style=\"width: 2080px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/embedded-pdf.jpg\" alt=\"Un PDF int\u00e9gr\u00e9 dans WordPress 5.8.\" width=\"2080\" height=\"1054\"><figcaption class=\"wp-caption-text\">Un PDF int\u00e9gr\u00e9 dans WordPress 5.8.<\/figcaption><\/figure>\n<p>Vous pouvez faire glisser le fichier directement sur le canevas de l&rsquo;\u00e9diteur ou simplement le s\u00e9lectionner dans la biblioth\u00e8que. Il est \u00e9galement possible d&rsquo;ajuster manuellement la hauteur de la visionneuse PDF ou d&rsquo;utiliser la commande de la colonne lat\u00e9rale.<\/p>\n<p>Tous les principaux navigateurs web prennent en charge la visionneuse de PDF, \u00e0 l&rsquo;<a href=\"https:\/\/caniuse.com\/pdf-viewer\">exception des navigateurs mobiles<\/a>.<\/p>\n<h3>Prise en charge du bloc Duotone<\/h3>\n<p>L&rsquo;une des fonctionnalit\u00e9s les plus int\u00e9ressantes int\u00e9gr\u00e9es dans le c\u0153ur avec WordPress 5.8 est le filtre duotone, introduit pour la premi\u00e8re fois avec <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/14\/whats-new-in-gutenberg-10-6-12-may\/\">Gutenberg 10.6<\/a>.<\/p>\n<figure id=\"attachment_98601\" aria-describedby=\"caption-attachment-98601\" style=\"width: 1256px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98601 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/duotone-image.jpg\" alt=\"Le nouvel outil de conception duotone dans un bloc d'images.\" width=\"1256\" height=\"1186\"><figcaption id=\"caption-attachment-98601\" class=\"wp-caption-text\">Le nouvel outil de conception duotone dans un bloc d&rsquo;images.<\/figcaption><\/figure>\n<p>Disponible en tant que <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/26752\">fonctionnalit\u00e9 \u00ab\u00a0prise en charge de bloc<\/a>\u00a0\u00bb, le filtre duotone est activ\u00e9 par d\u00e9faut dans les blocs d&rsquo;<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/26751\">images<\/a> et de couverture. Dans le bloc de couverture, cependant, il ne fonctionne pas avec les <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/31662\">arri\u00e8re-plans fixes<\/a>.<\/p>\n<figure id=\"attachment_98602\" aria-describedby=\"caption-attachment-98602\" style=\"width: 1268px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98602 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/duotone-picker.jpg\" alt=\"Le nouveau s\u00e9lecteur duotone de WordPress 5.8.\" width=\"1268\" height=\"998\"><figcaption id=\"caption-attachment-98602\" class=\"wp-caption-text\">Le nouveau s\u00e9lecteur duotone de WordPress 5.8.<\/figcaption><\/figure>\n<p>Les barres d&rsquo;outils des blocs image et couverture affichent d\u00e9sormais une commande <strong>Appliquer un filtre duotone<\/strong> qui pr\u00e9sente un s\u00e9lecteur duotone avec de nombreux pr\u00e9r\u00e9glages.<\/p>\n<p>Deux sous-contr\u00f4les permettent de personnaliser s\u00e9par\u00e9ment les ombres et les mises en \u00e9vidence. L&rsquo;effet est appliqu\u00e9 avec un <a href=\"https:\/\/www.w3.org\/TR\/SVG11\/filters.html\">filtre SVG masqu\u00e9<\/a> avec des styles en ligne et appliqu\u00e9 \u00e0 l&rsquo;aide d&rsquo;un nom de classe sp\u00e9cifique<\/p>\n<figure id=\"attachment_98603\" aria-describedby=\"caption-attachment-98603\" style=\"width: 2142px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98603 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/duotone-source-code.jpg\" alt=\"Inspection du filtre SVG duotone dans Chrome DevTools.\" width=\"2142\" height=\"1038\"><figcaption id=\"caption-attachment-98603\" class=\"wp-caption-text\">Inspection du filtre SVG duotone dans Chrome DevTools.<\/figcaption><\/figure>\n<p>Ce nouvel outil s&rsquo;accompagne d&rsquo;une nouvelle propri\u00e9t\u00e9 <code>color.__experimentalDuotone<\/code>, qui permet aux d\u00e9veloppeurs d&rsquo;ajouter le filtre duotone \u00e0 des blocs ou \u00e0 des parties de blocs dans leur fichier <strong>block.json<\/strong> (pour en savoir plus, consultez la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-supports\/#color\">r\u00e9f\u00e9rence \u00e0 l&rsquo;objet couleur<\/a>) :<\/p>\n<pre><code class=\"language-javascript\">supports: {\n\tcolor: {\n\t\t__experimentalDuotone: '&gt; .duotone-img, &gt; .duotone-video',\n\t\tbackground: false,\n\t\ttext: false\n\t}\n}<\/code><\/pre>\n<p>Lorsqu&rsquo;un bloc d\u00e9clare la prise en charge de <code>color.__experimentalDuotone<\/code>, un attribut <code>style<\/code> peut \u00eatre utilis\u00e9 pour d\u00e9finir des <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-supports\/#color-__experimentalduotone\">couleurs par d\u00e9faut personnalis\u00e9es<\/a> :<\/p>\n<pre><code class=\"language-javascript\">attributes: {\n\tstyle: {\n\t\ttype: 'object',\n\t\tdefault: {\n\t\t\tcolor: {\n\t\t\t\tduotone: [\n\t\t\t\t\t'#FFF',\n\t\t\t\t\t'#000\n\t\t\t\t]\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n<p>Ci-dessous, vous pouvez voir la m\u00eame image avec deux effets diff\u00e9rents de duotone appliqu\u00e9s:<\/p>\n<figure id=\"attachment_98599\" aria-describedby=\"caption-attachment-98599\" style=\"width: 1250px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98599 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/duotone-image-blue.jpg\" alt=\"Filtre duotone de couleur appliqu\u00e9 sur une image.\" width=\"1250\" height=\"850\"><figcaption id=\"caption-attachment-98599\" class=\"wp-caption-text\">Filtre duotone de couleur appliqu\u00e9 sur une image.<\/figcaption><\/figure>\n<figure id=\"attachment_98600\" aria-describedby=\"caption-attachment-98600\" style=\"width: 1250px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98600 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/duotone-image-yellow.jpg\" alt=\"Un filtre duotone de couleur diff\u00e9rent appliqu\u00e9 sur une image.\" width=\"1250\" height=\"850\"><figcaption id=\"caption-attachment-98600\" class=\"wp-caption-text\">Un filtre duotone de couleur diff\u00e9rent appliqu\u00e9 sur une image.<\/figcaption><\/figure>\n<p>Les d\u00e9veloppeurs peuvent d\u00e9finir des <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#presets\">pr\u00e9r\u00e9glages<\/a> duotone dans le fichier <strong>theme.json<\/strong> (voir la <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/#block-settings-and-styles-with-themejson\">section suivante<\/a>), comme le montre l&rsquo;extrait suivant :<\/p>\n<pre><code class=\"language-javascript\">{\n\"version\": 1,\n\"settings\": {\n\t\"color\": {\n\t\t\"duotone\": [\n\t\t\t{\n\t\t\t\t\"colors\": [ \"#000\", \"#7f7f7f\" ],\n\t\t\t\t\"slug\": \"black-and-white\",\n\t\t\t\t\"name\": \"dark-grayscale\"\n\t\t\t}\n\t\t],\n\t...<\/code><\/pre>\n<p>Vous pouvez en savoir plus sur les filtres duotone dans la rubrique <a href=\"https:\/\/wordpress.org\/news\/2021\/05\/coloring-your-images-with-duotone-filters\/\">Coloration de vos images avec les filtres duotone<\/a>.<\/p>\n<h3>Couleurs et bordures des blocs de tableau<\/h3>\n<p>WordPress 5.8 apporte \u00e9galement quelques <a href=\"https:\/\/make.wordpress.org\/core\/2021\/05\/14\/whats-new-in-gutenberg-10-6-12-may\/\">am\u00e9liorations au bloc Tableau<\/a>, notamment un meilleur contr\u00f4le des <a href=\"https:\/\/kinsta.com\/fr\/blog\/palettes-couleurs-site\/\">couleurs d&rsquo;arri\u00e8re-plan et d&rsquo;avant-plan<\/a> des tables.<\/p>\n<figure id=\"attachment_98636\" aria-describedby=\"caption-attachment-98636\" style=\"width: 1618px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98636 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/table-block-color-settings.jpg\" alt=\"Am\u00e9lioration des r\u00e9glages de couleur des blocs de tableau.\" width=\"1618\" height=\"1144\"><figcaption id=\"caption-attachment-98636\" class=\"wp-caption-text\">Am\u00e9lioration des r\u00e9glages de couleur des blocs de tableau.<\/figcaption><\/figure>\n<p>Un autre ajout au bloc Tableau est la <strong>prise en charge de la bordure du bloc<\/strong>, qui donne aux utilisateurs la possibilit\u00e9 de contr\u00f4ler la couleur, le style et la largeur de la bordure.<\/p>\n<p>Si le th\u00e8me actif prend en charge la nouvelle fonctionnalit\u00e9, un nouveau panneau de <strong>r\u00e9glages de bordure<\/strong> fournit trois nouveaux contr\u00f4les pour les personnalisations de l&rsquo;utilisateur.<\/p>\n<figure id=\"attachment_98672\" aria-describedby=\"caption-attachment-98672\" style=\"width: 1984px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98672 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/border-block-support.jpg\" alt=\"Contr\u00f4les de bordure de bloc dans WordPress 5.8 et TT1 Blocks.\" width=\"1984\" height=\"1224\"><figcaption id=\"caption-attachment-98672\" class=\"wp-caption-text\">Contr\u00f4les de bordure de bloc dans WordPress 5.8 et TT1 Blocks.<\/figcaption><\/figure>\n<p>Les d\u00e9veloppeurs peuvent ajouter la <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/31265\">prise en charge des bordures de blocs<\/a> \u00e0 leurs th\u00e8mes en ajoutant le code suivant au fichier <strong>theme.json<\/strong> :<\/p>\n<pre><code class=\"language-javascript\">\"border\": {\n\t\"customColor\": true,\n\t\"customStyle\": true,\n\t\"customWidth\": true\n}<\/code><\/pre>\n<h3>Am\u00e9liorations apport\u00e9es \u00e0 l&rsquo;outil d\u2019insertion de blocs<\/h3>\n<p>Dans WordPress 5.8, l&rsquo;outil d\u2019insertion de blocs a \u00e9t\u00e9 am\u00e9lior\u00e9 avec <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/02\/whats-new-in-gutenberg-10-3-31-march\/\">plusieurs ajouts<\/a> (PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/26938\">26938<\/a> et #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/21080#issuecomment-649231549\">21080<\/a>) :<\/p>\n<figure id=\"attachment_98593\" aria-describedby=\"caption-attachment-98593\" style=\"width: 1354px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98593 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/block-inserter-keyboard-navigation.jpg\" alt=\"En appuyant sur la fl\u00e8che vers le haut et vers le bas, vous d\u00e9placez le focus de la ligne.\" width=\"1354\" height=\"840\"><figcaption id=\"caption-attachment-98593\" class=\"wp-caption-text\">En appuyant sur la fl\u00e8che vers le haut et vers le bas, vous d\u00e9placez le focus de la ligne.<\/figcaption><\/figure>\n<p><strong>1. Navigation bi-dimensionnelle au clavier sur l&rsquo;insertion de blocs<\/strong>. Nous pouvons d\u00e9sormais naviguer entre les blocs de mani\u00e8re plus pr\u00e9cise et plus intuitive.<\/p>\n<ul>\n<li>En appuyant sur la fl\u00e8che vers le haut (\u2191) et la fl\u00e8che vers le bas (\u2193), vous d\u00e9placez le focus sur la rang\u00e9e sup\u00e9rieure ou inf\u00e9rieure.<\/li>\n<li>En appuyant sur la touche <strong>Tab<\/strong> ou sur <strong>Maj + Tab<\/strong>, vous pouvez d\u00e9placer le curseur entre la bo\u00eete de recherche, la liste des onglets et le premier \u00e9l\u00e9ment de chaque cat\u00e9gorie.<\/li>\n<\/ul>\n<p><strong>2. Une nouvelle cat\u00e9gorie \u00ab Th\u00e8me \u00bbpour les parties et les variations de mod\u00e8les<\/strong> appara\u00eet maintenant dans l&rsquo;outil d\u2019insertion du FSE (voir PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/30020\">30020<\/a>).<\/p>\n<p><strong>3. Les mots multiples sont maintenant autoris\u00e9s dans la recherche de phrases<\/strong> autocompl\u00e8tes (voir PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/30020\">29939<\/a>).<\/p>\n<h3>Am\u00e9liorations suppl\u00e9mentaires de l&rsquo;\u00e9diteur de blocs<\/h3>\n<p>WordPress 5.8 apporte des tonnes de petits et moyens changements suppl\u00e9mentaires qui m\u00e9ritent qu&rsquo;on leur consacre quelques lignes. Parmi ces am\u00e9liorations, nous citerons les suivantes :<\/p>\n<h4>Prise en charge du glisser-d\u00e9poser dans les blocs de couverture<\/h4>\n<p>Vous pouvez d\u00e9sormais glisser et d\u00e9poser des images depuis votre bureau pour remplacer l&rsquo;arri\u00e8re-plan d&rsquo;un bloc de couverture (voir Gutenberg <a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/02\/whats-new-in-gutenberg-10-3-31-march\/\">10.3<\/a> et PR #<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/29813\">29813<\/a><\/p>\n<figure id=\"attachment_98598\" aria-describedby=\"caption-attachment-98598\" style=\"width: 558px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98598 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/drag-and-drop-cover-background-image.gif\" alt=\"Glisser-d\u00e9poser des images d'arri\u00e8re-plan dans le bloc de couverture.\" width=\"558\" height=\"338\"><figcaption id=\"caption-attachment-98598\" class=\"wp-caption-text\">Glisser-d\u00e9poser des images d&rsquo;arri\u00e8re-plan dans le bloc de couverture.<\/figcaption><\/figure>\n<h4>Am\u00e9lioration de l&rsquo;interface utilisateur de publication<\/h4>\n<p>Depuis WordPress 5.8, l&rsquo;interface de publication affiche l&rsquo;ic\u00f4ne et le titre du site afin de pr\u00e9ciser l&rsquo;endroit o\u00f9 vous allez publier vos articles ou vos pages (<a href=\"https:\/\/make.wordpress.org\/core\/2021\/04\/14\/whats-new-in-gutenberg-10-4-14-april\/\">Gutenberg 10.4<\/a>).<\/p>\n<figure id=\"attachment_98620\" aria-describedby=\"caption-attachment-98620\" style=\"width: 562px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98620 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/publishing-ui-wp-57.png\" alt=\"Publishing UI in WordPress 5.7.\" width=\"562\" height=\"730\"><figcaption id=\"caption-attachment-98620\" class=\"wp-caption-text\">Interface utilisateur de publication dans WordPress 5.7.<\/figcaption><\/figure>\n<figure id=\"attachment_98621\" aria-describedby=\"caption-attachment-98621\" style=\"width: 562px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98621 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/publishing-ui-wp-58.png\" alt=\"Interface utilisateur de publication dans WordPress 5.8.\" width=\"562\" height=\"730\"><figcaption id=\"caption-attachment-98621\" class=\"wp-caption-text\">Interface utilisateur de publication dans WordPress 5.8.<\/figcaption><\/figure>\n<p><a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/30231\">Cette am\u00e9lioration<\/a> est b\u00e9n\u00e9fique si vous travaillez en mode plein \u00e9cran ou sur des appareils mobiles.<\/p>\n<h2>R\u00e9glages et styles de blocs avec theme.json<\/h2>\n<p>Avec WordPress 5.8, le <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/introducing-theme-json-in-wordpress-5-8\/\">fichier <strong>theme.json<\/strong><\/a> devient \u00ab\u00a0un point central de configuration\u00a0\u00bb, offrant aux d\u00e9veloppeurs de th\u00e8mes un nouveau moyen de personnaliser les r\u00e9glages et les styles de l&rsquo;\u00e9diteur.<\/p>\n<p>\u00c0 l&rsquo;aide d&rsquo;un fichier <strong>theme.json<\/strong>, les th\u00e8mes peuvent d\u00e9finir des pr\u00e9-r\u00e9glages personnalis\u00e9s et\/ou ajouter la prise en charge de nouvelles fonctionnalit\u00e9s, telles que duotone et les bordures de tableau (voir <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/\">R\u00e9glages et styles globaux<\/a>).<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">Selon <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/introducing-theme-json-in-wordpress-5-8\/\">Andr\u00e9 Maneiro<\/a> :<\/span><\/p>\n<blockquote><p>Ce nouveau m\u00e9canisme vise \u00e0 reprendre et \u00e0 consolider tous les diff\u00e9rents appels <code>add_theme_support<\/code> qui \u00e9taient auparavant n\u00e9cessaires pour contr\u00f4ler l&rsquo;\u00e9diteur.<\/p><\/blockquote>\n<p>Par exemple, vous pouvez d\u00e9finir globalement un pr\u00e9r\u00e9glage personnalis\u00e9 de duotone avec le code suivant :<\/p>\n<pre><code class=\"language-javascript\">{\n\t\"version\": 1,\n\t\"settings\": {\n\t\t\"color\": {\n\t\t\t\"duotone\": [\n\t\t\t\t{\n\t\t\t\t\t\"colors\": [ \"#000\", \"#0FF\" ],\n\t\t\t\t\t\"slug\": \"black-cyan\",\n\t\t\t\t\t\"name\": \"Black Cyan\"\n\t\t\t\t}\n\t\t\t],<\/code><\/pre>\n<p>Cela \u00e9craserait les pr\u00e9r\u00e9glages par d\u00e9faut, et vous ne verriez qu&rsquo;une seule option de duotone :<\/p>\n<figure id=\"attachment_99016\" aria-describedby=\"caption-attachment-99016\" style=\"width: 1264px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-99016 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/custom-duotone-preset.jpg\" alt=\"Pr\u00e9-s\u00e9lection personnalis\u00e9e de duotone dans theme.json.\" width=\"1264\" height=\"802\"><figcaption id=\"caption-attachment-99016\" class=\"wp-caption-text\">Pr\u00e9-s\u00e9lection personnalis\u00e9e de duotone dans theme.json.<\/figcaption><\/figure>\n<p>Ce nouveau m\u00e9canisme permet de contr\u00f4ler les r\u00e9glages de mani\u00e8re globale ou par bloc. Par exemple, vous pouvez ajouter une taille de police personnalis\u00e9e de 12px globalement en ajoutant le pr\u00e9-r\u00e9glage suivant \u00e0 votre fichier <strong>theme.json<\/strong> :<\/p>\n<pre><code class=\"language-javascript\">{\n\t\"version\": 1,\n\t\"settings\": {\n\t\t\"typography\": {\n\t\t\t\"customLineHeight\": true,\n\t\t\t\"fontSizes\": [\n\t\t\t\t{\n\t\t\t\t\t\"slug\": \"extra-extra-small\",\n\t\t\t\t\t\"size\": \"12px\",\n\t\t\t\t\t\"name\": \"Extra extra small\"\n\t\t\t\t},\n\t\t\t\t{...}<\/code><\/pre>\n<p>Il en r\u00e9sulte une nouvelle taille de police que les utilisateurs peuvent utiliser avec <em>n&rsquo;importe quel <\/em>texte dans leur contenu.<\/p>\n<figure id=\"attachment_99017\" aria-describedby=\"caption-attachment-99017\" style=\"width: 560px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-99017 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/extra-extra-small-font-size-settings.png\" alt=\"Une taille de police personnalis\u00e9e d\u00e9finie globalement dans theme.json.\" width=\"560\" height=\"754\"><figcaption id=\"caption-attachment-99017\" class=\"wp-caption-text\">Une taille de police personnalis\u00e9e d\u00e9finie globalement dans theme.json.<\/figcaption><\/figure>\n<p>Si vous souhaitez uniquement personnaliser le bloc Paragraphe, votre code sera l\u00e9g\u00e8rement diff\u00e9rent :<\/p>\n<pre><code class=\"language-javascript\">{\n\t\"version\": 1,\n\t\"settings\": {\n\t\t\"blocks\": {\n\t\t\t\"core\/paragraph\": {\n\t\t\t\t\"typography\": {\n\t\t\t\t\t\"fontSizes\": [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"slug\": \"extra-extra-small\",\n\t\t\t\t\t\t\t\"size\": \"12px\",\n\t\t\t\t\t\t\t\"name\": \"Extra extra small\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"slug\": \"extra-small\",\n\t\t\t\t\t\t\t\"size\": \"16px\",\n\t\t\t\t\t\t\t\"name\": \"Extra small\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"slug\": \"small\",\n\t\t\t\t\t\t\t\"size\": \"18px\",\n\t\t\t\t\t\t\t\"name\": \"Small\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"slug\": \"normal\",\n\t\t\t\t\t\t\t\"size\": \"20px\",\n\t\t\t\t\t\t\t\"name\": \"Normal\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"slug\": \"large\",\n\t\t\t\t\t\t\t\"size\": \"24px\",\n\t\t\t\t\t\t\t\"name\": \"Large\"\n\t\t\t\t\t\t}\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>Voil\u00e0, c&rsquo;est fait ! Vous venez de d\u00e9finir vos pr\u00e9-r\u00e9glages de taille de police personnalis\u00e9e pour le bloc de paragraphe.<\/p>\n<figure id=\"attachment_99018\" aria-describedby=\"caption-attachment-99018\" style=\"width: 558px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-99018 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/paragraph-block-custom-settings.png\" alt=\"Un bloc Paragraphe avec des pr\u00e9-s\u00e9lections de taille de police personnalis\u00e9es.\" width=\"558\" height=\"1216\"><figcaption id=\"caption-attachment-99018\" class=\"wp-caption-text\">Un bloc Paragraphe avec des pr\u00e9-s\u00e9lections de taille de police personnalis\u00e9es.<\/figcaption><\/figure>\n<p>Les blocs du c\u0153ur ont \u00e9t\u00e9 mis \u00e0 jour pour suivre le nouveau m\u00e9canisme, tandis que les blocs tiers peuvent s&rsquo;adapter au nouveau m\u00e9canisme en utilisant le crochet React <code>useSetting<\/code> (pour en savoir plus sur cette fonction, consultez la <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/introducing-theme-json-in-wordpress-5-8\/\">dev-note<\/a> et la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-block-editor\/#useSetting\">documentation API<\/a>) :<\/p>\n<pre><code class=\"language-javascript\">const isEnabled = useSetting( 'spacing.margin' );<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Les r\u00e9glage d\u00e9clar\u00e9s dans <strong>theme.json<\/strong> auront la priorit\u00e9 sur les r\u00e9glages d\u00e9clar\u00e9s via\u00a0<code>add_theme_support<\/code>.<\/p>\n<\/aside>\n\n<p>Le nouveau m\u00e9canisme bas\u00e9 sur le fichier <strong>theme.json<\/strong> ne s&rsquo;applique pas uniquement aux r\u00e9glages des blocs. En effet, \u00e0 partir de WordPress 5.8, il ne sera plus n\u00e9cessaire de cr\u00e9er des styles d&rsquo;\u00e9diteur et de les mettre en file d&rsquo;attente. Il suffira de d\u00e9clarer des pr\u00e9r\u00e9glages \u00e0 l&rsquo;int\u00e9rieur du fichier <strong>theme.json<\/strong> ; le moteur g\u00e9n\u00e9rera les classes et les mettra automatiquement en file d&rsquo;attente \u00e0 la fois dans l&rsquo;\u00e9diteur et dans l\u2019interface publique.<\/p>\n<p>Le moteur g\u00e9n\u00e9rera \u00e9galement les <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty-one\/#styles-and-css-custom-properties\">propri\u00e9t\u00e9s personnalis\u00e9es CSS<\/a> correspondantes.<\/p>\n<p>Dans l&rsquo;exemple pr\u00e9c\u00e9dent, nous avons d\u00e9fini cinq pr\u00e9-r\u00e9glages <code>fontSizes<\/code> pour le bloc de paragraphes. Pour ces pr\u00e9-r\u00e9glages, les propri\u00e9t\u00e9s personnalis\u00e9es CSS suivantes seront g\u00e9n\u00e9r\u00e9es :<\/p>\n<pre><code class=\"language-css\">p {\n\t--wp--preset--font-size--extra-extra-small: 12px;\n\t--wp--preset--font-size--extra-small: 16px;\n\t--wp--preset--font-size--small: 18px;\n\t--wp--preset--font-size--normal: 20px;\n\t--wp--preset--font-size--large: 24px;\n}<\/code><\/pre>\n<p>Une fois que vous avez d\u00e9fini la taille de la police du paragraphe dans votre fichier <strong>theme.json<\/strong>, l&rsquo;\u00e9l\u00e9ment <code>p<\/code> correspondant prend la classe <code>has-{preset-slug}-{preset-category}<\/code>.<\/p>\n<p>Cela signifie qu&rsquo;un paragraphe avec une taille de police <code>extra-extra-small<\/code> aura la classe <code>has-extra-extra-small-font-size<\/code> :<\/p>\n<pre><code class=\"language-html\">&lt;p class=\"has-extra-extra-small-font-size\"&gt;Lorem ipsum dolor...&lt;\/p&gt;<\/code><\/pre>\n<p>Et voici le bloc de d\u00e9claration CSS :<\/p>\n<pre><code class=\"language-css\">p.has-extra-extra-small-font-size {\n\tfont-size: var(--wp--preset--font-size--extra-extra-small) !important;\n}<\/code><\/pre>\n<p>Pour une vue plus d\u00e9taill\u00e9e des r\u00e9glages et des styles de <strong>theme.json<\/strong>, n&rsquo;oubliez pas de consulter la <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/introducing-theme-json-in-wordpress-5-8\/\">note de d\u00e9veloppement<\/a> et la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/themes\/theme-json\/#presets\">documentation API<\/a>.<\/p>\n<p>Consultez \u00e9galement l&rsquo;<a href=\"https:\/\/make.wordpress.org\/test\/2021\/06\/24\/call-for-testing-thrive-with-theme-json\/\">appel \u00e0 tests FSE<\/a> d&rsquo;Anne McCarty pour une lecture plus utile et un d\u00e9fi passionnant pour les d\u00e9veloppeurs qui veulent explorer les nouvelles fonctionnalit\u00e9s de <strong>theme.json<\/strong>.<\/p>\n<h2>Am\u00e9liorations de l&rsquo;API de bloc<\/h2>\n<p>Les <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/23\/block-api-enhancements-in-wordpress-5-8\/\">am\u00e9liorations de l&rsquo;API de bloc<\/a> apport\u00e9es par WordPress 5.8 m\u00e9ritent une attention particuli\u00e8re de la part des d\u00e9veloppeurs d\u2019extensions.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">L&rsquo;utilisation du fichier <strong>block.json<\/strong> est d\u00e9sormais encourag\u00e9e comme moyen canonique d&rsquo;<a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-metadata\/\">enregistrer les types de blocs<\/a> et pr\u00e9sente plusieurs avantages :<\/span><\/p>\n<ul>\n<li>En ce qui concerne les performances, si le th\u00e8me prend en charge le <a href=\"https:\/\/kinsta.com\/fr\/blog\/lazy-load-wordpress\/\">chargement diff\u00e9r\u00e9 des ressources<\/a>, l&rsquo;enregistrement des types de blocs via le fichier <strong>block.json<\/strong> optimisera automatiquement la mise en file d&rsquo;attente des ressources. En effet, les ressources sp\u00e9cifi\u00e9es par les propri\u00e9t\u00e9s de <code>style<\/code> et de <code>script<\/code> seront mises en file d&rsquo;attente sur l\u2019interface publique uniquement lorsque le bloc sera d\u00e9tect\u00e9. Cela permet de d\u00e9velopper des extensions plus efficaces, de r\u00e9duire la taille des pages et d&rsquo;\u00e9viter plusieurs des probl\u00e8mes abord\u00e9s dans <a href=\"https:\/\/kinsta.com\/fr\/blog\/desactiver-chargement-plugins-wordpress\/\">cet article<\/a>.<\/li>\n<li>Le fichier <strong>block.json<\/strong> simplifie l&rsquo;enregistrement des blocs c\u00f4t\u00e9 serveur en permettant au <a href=\"https:\/\/developer.wordpress.org\/rest-api\/reference\/\">point de terminaison REST API<\/a>\u00a0<a href=\"https:\/\/developer.wordpress.org\/rest-api\/reference\/block-types\/\">Types de blocs<\/a>\u00a0de lister le bloc.<\/li>\n<li>Le fichier\u00a0<strong>block.json<\/strong>\u00a0est \u00e9galement n\u00e9cessaire si vous d\u00e9cidez d\u2019envoyer votre extension dans le d\u00e9p\u00f4t d\u2019extensions WordPress.<\/li>\n<\/ul>\n<h3>Modifications de la fonction register_block_type<\/h3>\n<p>Depuis WordPress 5.8, la fonction <code>register_block_type<\/code> a \u00e9t\u00e9 am\u00e9lior\u00e9e pour lire les m\u00e9ta-donn\u00e9es du fichier <strong>block.json<\/strong>. D\u00e9sormais, le <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type\/\">premier param\u00e8tre<\/a> accepte le chemin d&rsquo;acc\u00e8s au dossier o\u00f9 se trouve le fichier <strong>block.json<\/strong>.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">Cette fonction peut \u00eatre utilis\u00e9e comme indiqu\u00e9 dans l&rsquo;exemple suivant :<\/span><\/p>\n<pre><code class=\"language-php\">function create_custom_block_init() {\n\tregister_block_type( __DIR__ );\n}\nadd_action( 'init', 'create_custom_block_init' );<\/code><\/pre>\n<p>Il renvoie le type de bloc enregistr\u00e9 ou <code>false<\/code> en cas d&rsquo;\u00e9chec.<\/p>\n<p>Comme vous pouvez le remarquer, la fonction <code>register_block_type<\/code> est maintenant utilis\u00e9e de la m\u00eame mani\u00e8re que la fonction <code>register_block_type_from_metadata<\/code>, qui \u00e9tait auparavant la seule fonction <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_block_type_from_metadata\/\">disponible pour enregistrer un type de bloc<\/a> en lisant les m\u00e9ta-donn\u00e9es du fichier <strong>block.json<\/strong>. Comme expliqu\u00e9 par <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/23\/block-api-enhancements-in-wordpress-5-8\/\">Greg Zi\u00f3\u0142kowski<\/a> :<\/p>\n<blockquote><p>Nous avons d\u00e9cid\u00e9 de consolider la fonctionnalit\u00e9 pr\u00e9existante disponible avec la m\u00e9thode <code>register_block_type_from_metadata<\/code> dans <code>register_block_type<\/code> pour \u00e9viter la confusion qu&rsquo;elle cr\u00e9ait. Il est toujours possible d&rsquo;utiliser les deux fonctions, mais \u00e0 partir de maintenant nous pr\u00e9voyons de n&rsquo;utiliser que la version courte dans les documents et outils officiels.<\/p><\/blockquote>\n<p>Une fois le bloc enregistr\u00e9 sur le serveur, il vous suffit d&rsquo;<a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-registration\/\">enregistrer les r\u00e9glages<\/a> sur le client en utilisant le m\u00eame nom de bloc dans votre fichier <strong>index.js<\/strong>.<\/p>\n<p>Pour un aper\u00e7u plus approfondi des am\u00e9liorations de l&rsquo;API de bloc introduites par WordPress 5.8, assurez-vous de consulter la <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/23\/block-api-enhancements-in-wordpress-5-8\/\">dev-note de Greg Zi\u00f3\u0142kowski<\/a>.<\/p>\n<h2>Prise en charge de WebP dans WordPress 5.8<\/h2>\n<p>Ici, chez Kinsta, nous sommes obs\u00e9d\u00e9s par la vitesse des sites et les performances de WordPress. C&rsquo;est pourquoi la prise en charge du format <a href=\"https:\/\/kinsta.com\/fr\/blog\/webp\/\">WebP<\/a> dans WordPress 5.8 est une nouvelle si excitante pour nous.<\/p>\n<p>Consid\u00e9r\u00e9 comme un <a href=\"https:\/\/web.dev\/uses-webp-images\/\">format de nouvelle g\u00e9n\u00e9ration<\/a>, WebP est un <a href=\"https:\/\/kinsta.com\/fr\/blog\/types-fichier-image\/\">format d&rsquo;image<\/a> d\u00e9velopp\u00e9 par Google qui offre \u00ab\u00a0une meilleure compression que PNG ou JPEG, ce qui signifie des t\u00e9l\u00e9chargements plus rapides et une moindre consommation de donn\u00e9es\u00a0\u00bb.<\/p>\n<figure id=\"attachment_98615\" aria-describedby=\"caption-attachment-98615\" style=\"width: 1406px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98615 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/next-gen-image-formats-lighthouse.png\" alt=\"Google Lighthouse sugg\u00e8re d'utiliser des formats d'image de nouvelle g\u00e9n\u00e9ration.\" width=\"1406\" height=\"338\"><figcaption id=\"caption-attachment-98615\" class=\"wp-caption-text\">Google Lighthouse sugg\u00e8re d&rsquo;utiliser des formats d&rsquo;image de nouvelle g\u00e9n\u00e9ration.<\/figcaption><\/figure>\n<p><a href=\"https:\/\/developers.google.com\/speed\/webp\">Selon Google<\/a> :<\/p>\n<blockquote><p>WebP est un <strong>format d&rsquo;image<\/strong> moderne qui offre une compression sup\u00e9rieure <strong>avec et sans perte<\/strong> pour les images sur le web. Gr\u00e2ce \u00e0 WebP, les webmasters et les d\u00e9veloppeurs web peuvent cr\u00e9er des images plus l\u00e9g\u00e8res et plus riches qui rendent le web plus rapide.<\/p>\n<p>Les images WebP sans perte sont 26 % plus petites en taille par rapport aux PNGs. Les images WebP avec perte sont 25 \u00e0 34 % plus petites que les <a href=\"https:\/\/kinsta.com\/fr\/blog\/jpg-vs-jpeg\/\">images JPEG<\/a> comparables \u00e0 un indice de qualit\u00e9 SSIM \u00e9quivalent.<\/p><\/blockquote>\n<p>\u00c0 partir de WordPress 5.8, vous pourrez utiliser le format d&rsquo;image WebP de la m\u00eame mani\u00e8re que les formats JPEG, PNG et GIF. Il vous suffit de t\u00e9l\u00e9verser vos images dans votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/bibliotheque-medias-wordpress\/\">m\u00e9diath\u00e8que<\/a> et de les inclure dans votre contenu.<\/p>\n<p>Dans un <a href=\"https:\/\/kinsta.com\/fr\/blog\/webp\/\">article pr\u00e9c\u00e9dent<\/a>, nous avons examin\u00e9 en profondeur le format WebP et les outils disponibles pour l&rsquo;utiliser dans WordPress. Maintenant, gr\u00e2ce \u00e0 la <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/07\/wordpress-5-8-adds-webp-support\/\">prise en charge des images WebP dans WordPress 5.8<\/a>, les choses peuvent changer un peu. Comme le format WebP est pris en charge d\u00e8s le d\u00e9part, vous n&rsquo;avez pas besoin d&rsquo;installer des extensions tierces pour t\u00e9l\u00e9verser des images WebP dans WordPress, du moins dans les cas d&rsquo;utilisation les plus courants.<\/p>\n<p>Notez que, m\u00eame si vous pouvez d\u00e9sormais t\u00e9l\u00e9verser vos images WebP sur WordPress en utilisant la biblioth\u00e8que de m\u00e9dias, WordPress ne prend pas en charge la conversion automatique des images au format WebP. Pour activer cette fonctionnalit\u00e9 sur votre site web, vous aurez besoin d&rsquo;une <a href=\"https:\/\/kinsta.com\/fr\/blog\/webp\/#how-to-use-webp-images-on-wordpress\">extension WordPress WebP<\/a> tierce.<\/p>\n<h3>Comment utiliser des images WebP dans WordPress<\/h3>\n<p>Vous pouvez convertir vos images en WebP de plusieurs mani\u00e8res diff\u00e9rentes :<\/p>\n<ul>\n<li>Vous pouvez utiliser les <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/precompiled\">utilitaires et la biblioth\u00e8que WebP pr\u00e9-compil\u00e9s<\/a> de Google pour Linux, Windows ou Mac OS X.<\/li>\n<li>Les utilisateurs de Mac peuvent installer un <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/precompiled#os_x_package_managers\">gestionnaire de paquets<\/a> tel que le <a href=\"https:\/\/formulae.brew.sh\/formula\/webp\">paquet Homebrew WebP<\/a> ou le <a href=\"https:\/\/ports.macports.org\/?search=webp&#038;search_by=name\">paquet Macports WebP<\/a>.<\/li>\n<li>Vous pouvez utiliser un outil d&rsquo;\u00e9dition d&rsquo;image prenant en charge WebP, comme <a href=\"https:\/\/squoosh.app\/\">Squoosh<\/a> de <a href=\"https:\/\/github.com\/GoogleChromeLabs\/squoosh\">Google Chrome Labs<\/a>, le convertisseur d&rsquo;image par lot <a href=\"https:\/\/www.xnview.com\/en\/xnconvert\/\">XnConvert<\/a>, un \u00e9diteur d&rsquo;image populaire comme <a href=\"https:\/\/www.gimp.org\/\">GIMP<\/a>, et bien d&rsquo;autres.<\/li>\n<li>Vous pouvez installer une <a href=\"https:\/\/kinsta.com\/fr\/blog\/webp\/#how-to-use-webp-images-on-wordpress\">extension WordPress WebP<\/a> pour un meilleur contr\u00f4le global des images WebP dans WordPress.<\/li>\n<\/ul>\n<figure id=\"attachment_98680\" aria-describedby=\"caption-attachment-98680\" style=\"width: 582px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98680 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/webp-export-settings-gimp.jpg\" alt=\"Exporter l'image en tant que WebP dans GIMP.\" width=\"582\" height=\"596\"><figcaption id=\"caption-attachment-98680\" class=\"wp-caption-text\">Exporter l&rsquo;image en tant que WebP dans GIMP.<\/figcaption><\/figure>\n<p>Si vous optez pour un outil en ligne de commande, vous pouvez coder et d\u00e9coder vos images \u00e0 l&rsquo;aide des utilitaires <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/cwebp\">cwebp<\/a> et <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/dwebp\">dwebp<\/a>. Par exemple, la commande suivante ex\u00e9cute une conversion JPEG vers WebP de base :<\/p>\n<pre><code class=\"language-bash\">cwebp [options] original_image.jpg -o compressed_image.webp<\/code><\/pre>\n<p>Vous pouvez \u00e9galement effectuer une conversion group\u00e9e de vos images en utilisant Bash et cwebp (exemple de <a href=\"https:\/\/www.smashingmagazine.com\/2018\/07\/converting-images-to-webp\/\">Jeremy Wagner<\/a>) :<\/p>\n<pre><code class=\"language-bash\">find .\/ -type f -name '*.png' -exec sh -c 'cwebp -q 75 $1 -o \"${1%.png}.webp\"' _ {} \\;\n<\/code><\/pre>\n<p>La commande ci-dessus convertit toutes les images <strong>.png<\/strong> au format <strong>.webp<\/strong> avec un facteur de compression de 75.<\/p>\n<figure id=\"attachment_98677\" aria-describedby=\"caption-attachment-98677\" style=\"width: 1269px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98677 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/webp-quality-vs-file-size.jpg\" alt=\"Comparaison du facteur de compression et de la taille des fichiers.\" width=\"1269\" height=\"870\"><figcaption id=\"caption-attachment-98677\" class=\"wp-caption-text\">Comparaison du facteur de compression et de la taille des fichiers.<\/figcaption><\/figure>\n<p>Une fois que vous avez vos images WebP, vous pouvez simplement les t\u00e9l\u00e9verser en utilisant la <a href=\"https:\/\/kinsta.com\/fr\/blog\/bibliotheque-medias-wordpress\/\">m\u00e9diath\u00e8que<\/a> de WordPress. Ci-dessous, vous pouvez voir une image JPEG de 127 Ko avant conversion dans la m\u00e9diath\u00e8que :<\/p>\n<figure id=\"attachment_98641\" aria-describedby=\"caption-attachment-98641\" style=\"width: 1960px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98641 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/webp-image.jpg\" alt=\"La taille du fichier JPEG compress\u00e9 est de 127 Ko.\" width=\"1960\" height=\"1280\"><figcaption id=\"caption-attachment-98641\" class=\"wp-caption-text\">La taille du fichier JPEG compress\u00e9 est de 127 Ko.<\/figcaption><\/figure>\n<p>La taille de l&rsquo;image WebP compress\u00e9e est 42\u00a0% plus petite que l&rsquo;image JPEG originale !<\/p>\n<figure id=\"attachment_98641\" aria-describedby=\"caption-attachment-98641\" style=\"width: 1960px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98641 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/webp-image.jpg\" alt=\"La m\u00eame image en format WebP p\u00e8se 74 Ko.\" width=\"1960\" height=\"1280\"><figcaption id=\"caption-attachment-98641\" class=\"wp-caption-text\">La m\u00eame image en format WebP p\u00e8se 74 Ko.<\/figcaption><\/figure>\n<p>Enfin, les images WebP disposent des m\u00eames fonctions d&rsquo;\u00e9dition que les images JPEG, PNG et GIF. Vous pouvez les recadrer, les faire pivoter, les retourner et les mettre \u00e0 l&rsquo;\u00e9chelle, et appliquer les modifications aux tailles d&rsquo;image de votre choix.<\/p>\n<h3>Avertissements \u00e0 propos de WebP dans WordPress 5.8<\/h3>\n<p>Selon Adam Silverstein :<\/p>\n<blockquote><p>Les images WebP prennent en charge la compression avec ou sans perte, ainsi qu&rsquo;un format anim\u00e9 et la prise en charge des images transparentes. Dans WordPress, le format WebP sans perte n&rsquo;est pris en charge que lorsque le serveur d&rsquo;h\u00e9bergement utilise Imagick (la biblioth\u00e8que PHP) jusqu&rsquo;\u00e0 ce que LibGD ajoute un support. En outre, les formats anim\u00e9s et alpha ne sont pas encore pris en charge pour les images redimensionn\u00e9es (lorsque vous t\u00e9l\u00e9versez des images dans ces formats, des images avec perte sont cr\u00e9\u00e9es \u00e0 la place).<\/p><\/blockquote>\n<p>Si votre h\u00e9bergeur ne prend pas en charge les images WebP, un message d&rsquo;erreur s&rsquo;affichera lorsque vous tenterez de les t\u00e9l\u00e9verser. Si vous n&rsquo;\u00eates pas s\u00fbr que votre h\u00e9bergeur prenne en charge la biblioth\u00e8que Imagick, l&rsquo;onglet Info de l&rsquo;outil de sant\u00e9 du site comprend un champ consacr\u00e9 \u00e0 la <strong>biblioth\u00e8que Imagick<\/strong> qui fournit cette information.<\/p>\n<figure id=\"attachment_99311\" aria-describedby=\"caption-attachment-99311\" style=\"width: 1600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-99311 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/site-health-tool-1.jpg\" alt=\"Kinsta prend en charge la biblioth\u00e8que Imagick.\" width=\"1600\" height=\"1222\"><figcaption id=\"caption-attachment-99311\" class=\"wp-caption-text\">Kinsta prend en charge la biblioth\u00e8que Imagick.<\/figcaption><\/figure>\n<p>Avec la prise en charge de WebP, WordPress 5.8 introduit \u00e9galement deux champs suppl\u00e9mentaires dans la section Traitement des m\u00e9dias de Sant\u00e9 du site : la <strong>version d&rsquo;Imagick<\/strong> et les <strong>formats de fichiers pris en charge par ImageMagick<\/strong>.<\/p>\n<figure id=\"attachment_98634\" aria-describedby=\"caption-attachment-98634\" style=\"width: 1600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98634 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/site-health-media-handling.jpg\" alt=\"Champ de la version d'ImageMagick dans Sant\u00e9 du site.\" width=\"1600\" height=\"473\"><figcaption id=\"caption-attachment-98634\" class=\"wp-caption-text\">Champ de la version d&rsquo;ImageMagick dans Sant\u00e9 du site.<\/figcaption><\/figure>\n<p>Si le format WebP ne figure pas parmi les types de fichiers pris en charge, vous devrez contacter votre h\u00e9bergeur pour obtenir de l&rsquo;aide.<\/p>\n<p>La <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/07\/wordpress-5-8-adds-webp-support\/\">note de d\u00e9veloppement<\/a> fournit des <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/07\/wordpress-5-8-adds-webp-support\/#comment-41376\">informations suppl\u00e9mentaires<\/a> sur la prise en charge de WebP dans WordPress 5.8, une FAQ utile et d&rsquo;autres ressources.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">Si l&rsquo;optimisation des images vous int\u00e9resse, vous aimerez peut-\u00eatre les tutoriels suivants:<\/span><\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/\">Comment optimiser les images pour le web et les performances<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/compression-avec-perte\/\">Pourquoi et comment utiliser la compression avec perte sur vos images WordPress<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/webp\/\">Comment utiliser des images WebP sur WordPress (et r\u00e9duire la taille des fichiers image jusqu&rsquo;\u00e0 35\u00a0%)<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/types-fichier-image\/\">15 meilleurs types de fichiers image<\/a><\/li>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/tailles-images-wordpress\/\">Tout ce que vous devez savoir sur les tailles d&rsquo;images de WordPress<\/a><\/li>\n<\/ul>\n<h2>Fonctionnalit\u00e9s suppl\u00e9mentaires pour les d\u00e9veloppeurs<\/h2>\n<p>Vous trouverez des dizaines de fonctionnalit\u00e9s int\u00e9ressantes pour les d\u00e9veloppeurs dans WordPress 5.8. Dans cet article, nous avons accord\u00e9 plus d&rsquo;attention \u00e0 celles qui devraient avoir l&rsquo;impact le plus significatif sur votre travail de d\u00e9veloppement. Mais il existe effectivement de nombreuses nouvelles fonctionnalit\u00e9s qui m\u00e9ritent l&rsquo;attention, notamment les suivantes:<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"disc\" selector=\"h3\" count-number=\"4\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>API de prise en charge de bloc<\/h3>\n<p>WordPress 5.8 ajoute de <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/block-supports-api-updates-for-wordpress-5-8\/\">nouveaux indicateurs de prise en charge des blocs<\/a> permettant aux d\u00e9veloppeurs de personnaliser les blocs enregistr\u00e9s avec les derni\u00e8res fonctionnalit\u00e9s des blocs.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">En plus de la <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/#duotone-block-support\">prise en charge du bloc exp\u00e9rimental duotone<\/a> mentionn\u00e9 pr\u00e9c\u00e9demment (<code>color._experimentalDuotone<\/code>), WordPress 5.8 ajoute \u00e9galement la prise en charge de la couleur des liens. Pour profiter de cette fonctionnalit\u00e9, il suffit d&rsquo;ajouter l&rsquo;indicateur suivant aux m\u00e9ta-donn\u00e9es de votre bloc a:<\/span><\/p>\n<pre><code class=\"language-javascript\">supports: {\n\tcolor: {\n\t\tlink: true;\n\t}\n}<\/code><\/pre>\n<p>Vous pouvez d\u00e9finir des valeurs par d\u00e9faut \u00e0 l&rsquo;aide d&rsquo;attributs, comme le montre l&rsquo;exemple suivant, ou d\u00e9finir vos pr\u00e9-r\u00e9glages dans <em>theme.json <\/em>:<\/p>\n<pre><code class=\"language-javascript\">attributes: {\n\tstyle: {\n\t\ttype: 'object',\n\t\tdefault: {\n\t\t\tcolor: {\n\t\t\t\tlink: '#FF0000',\n\t\t\t}\n\t\t}<\/code><\/pre>\n<p>Les autres modifications apport\u00e9es \u00e0 l&rsquo;API de bloc sont les suivantes :<\/p>\n<ul>\n<li>Les prises en charge de <code>fontSize<\/code> et de <code>lineHeight<\/code> deviennent stables.<\/li>\n<li>La prise en charge de <code>spacing<\/code> a \u00e9t\u00e9 \u00e9tendue, et vous pouvez d\u00e9sormais contr\u00f4ler <code>margin<\/code> et <code>padding<\/code>, ainsi que contr\u00f4ler individuellement les tailles <code>top<\/code>, <code>right<\/code>, <code>bottom<\/code> et <code>left<\/code>.<\/li>\n<\/ul>\n<p>Vous pouvez en savoir plus sur l&rsquo;API de prise en charge des blocs dans WordPress 5.8 dans la dev-note sur les <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/25\/block-supports-api-updates-for-wordpress-5-8\/\">mises \u00e0 jour de l&rsquo;API de prise en charge des blocs<\/a>.<\/p>\n<p><span style=\"font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;font-size: 1rem\">Pour une vue plus d\u00e9taill\u00e9e de l&rsquo;utilisation de l&rsquo;API de prise en charge de bloc, consultez la documentation officielle de l&rsquo;<a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-supports\/\">API de prise en charge de bloc<\/a>.<\/span><\/p>\n<h3>Onglets personnalis\u00e9s pour la sant\u00e9 du site<\/h3>\n<p><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/22\/extending-the-site-health-interface-in-wordpress-5-8\/\">Deux nouveaux crochets<\/a> permettent d\u00e9sormais aux d\u00e9veloppeurs d&rsquo;ajouter leurs onglets personnalis\u00e9s \u00e0 l&rsquo;interface Sant\u00e9 du site et de personnaliser les \u00e9crans disponibles.<\/p>\n<p>Le filtre <strong><code>site_health_navigation_tabs<\/code><\/strong> est un tableau associatif d&rsquo;ID d&rsquo;onglets et de libell\u00e9s permettant d&rsquo;enregistrer un nouvel onglet dans l&rsquo;\u00e9cran Sant\u00e9 du site. Vous pouvez utiliser ce filtre en ajoutant l&rsquo;exemple de code suivant au <a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-personnaliser-theme-wordpress\/#the-theme-editor-and-why-not-to-use-it\">fichier de fonctions de votre th\u00e8me<\/a> ou dans votre extension personnalis\u00e9e :<\/p>\n<pre><code class=\"language-php\">function kinsta_site_health_navigation_tabs( $tabs ) {\n\t$tabs['kinsta-site-health-tab'] = esc_html_x( 'Kinsta', 'Site Health', 'text-domain' );\n\n\treturn $tabs;\n}\nadd_filter( 'site_health_navigation_tabs', 'kinsta_site_health_navigation_tabs' );<\/code><\/pre>\n<p>L&rsquo;image ci-dessous montre le nouvel onglet Sant\u00e9 du site :<\/p>\n<figure id=\"attachment_98633\" aria-describedby=\"caption-attachment-98633\" style=\"width: 1646px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-98633 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/06\/site-health-custom-tabs.png\" alt=\"Un onglet personnalis\u00e9 a \u00e9t\u00e9 ajout\u00e9 au menu de navigation Sant\u00e9 du site.\" width=\"1646\" height=\"1068\"><figcaption id=\"caption-attachment-98633\" class=\"wp-caption-text\">Un onglet personnalis\u00e9 a \u00e9t\u00e9 ajout\u00e9 au menu de navigation Sant\u00e9 du site.<\/figcaption><\/figure>\n<p>Gr\u00e2ce au filtre <code>site_health_navigation_tabs<\/code>, il est \u00e9galement possible de r\u00e9organiser les onglets ou de supprimer un ou plusieurs \u00e9l\u00e9ments.<\/p>\n<p>L&rsquo;<strong>action <code>site_health_tab_content<\/code><\/strong> se d\u00e9clenche lorsqu&rsquo;un utilisateur se rend sur l&rsquo;\u00e9cran Sant\u00e9 du site, \u00e0 l&rsquo;exception de l&rsquo;\u00e9cran <strong>\u00c9tat<\/strong> par d\u00e9faut. Vous pouvez utiliser ce crochet comme indiqu\u00e9 dans l\u2019extrait suivant (exemple tir\u00e9 de la <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/22\/extending-the-site-health-interface-in-wordpress-5-8\/\">dev note<\/a>) :<\/p>\n<pre><code class=\"language-php\">function kinsta_site_health_tab_content( $tab ) {\n\t\/\/ Return if this is not your tab.\n\tif ( 'kinsta-site-health-tab' !== $tab ) {\n\t\treturn;\n\t}\n\n\t\/\/ Include the interface, kept in a separate file just to differentiate code from views.\n\tinclude trailingslashit( plugin_dir_path( __FILE__ ) ) . 'views\/kinsta-site-health-tab.php';\n}\nadd_action( 'site_health_tab_content', 'kinsta_site_health_tab_content' );<\/code><\/pre>\n<p>Tout d&rsquo;abord, elle d\u00e9tecte si l&rsquo;onglet actuel est votre onglet personnalis\u00e9, puis elle charge le contenu de votre \u00e9cran Sant\u00e9 du site \u00e0 partir d&rsquo;un fichier <strong>.php<\/strong>. L&rsquo;action <code>site_health_tab_content<\/code> permet \u00e9galement aux d\u00e9veloppeurs d&rsquo;\u00e9tendre l&rsquo;onglet <strong>Info<\/strong> par d\u00e9faut en ajoutant des \u00e9l\u00e9ments d&rsquo;information sp\u00e9cifiques \u00e0 leurs extensions ou th\u00e8mes.<\/p>\n<h3>Modification de l&rsquo;API de l&rsquo;\u00e9diteur de blocs pour prendre en charge plusieurs \u00e9crans d&rsquo;administration<\/h3>\n<p>Avec WordPress 5.8, l&rsquo;\u00e9diteur d&rsquo;articles n&rsquo;est plus le seul \u00e9cran d&rsquo;administration \u00e0 utiliser l&rsquo;\u00e9diteur de blocs (l&rsquo;\u00e9cran des widgets en est un exemple).<\/p>\n<p>Les contributeurs du c\u0153ur ont trouv\u00e9 plusieurs crochets d\u00e9finis sur le serveur d\u00e9pendant de l&rsquo;objet <code>$post<\/code>. Cet objet n&rsquo;est pas pr\u00e9sent dans l&rsquo;\u00e9dition du site, les widgets et les \u00e9crans de navigation. \u00c0 l&rsquo;avenir, plusieurs filtres ont \u00e9t\u00e9 d\u00e9pr\u00e9ci\u00e9s et remplac\u00e9s par des substitutions tenant compte du contexte.<\/p>\n<p>En outre, une nouvelle classe <code>WP_Block_Editor_Context<\/code> repr\u00e9sentant le contexte actuel de l&rsquo;\u00e9diteur de blocs et diverses m\u00e9thodes a \u00e9t\u00e9 introduite.<\/p>\n<p>Ces changements am\u00e9liorent ces \u00e9crans avec de nouvelles capacit\u00e9s et permettront aux d\u00e9veloppeurs d&rsquo;ajouter leurs personnalisations.<\/p>\n<p>Pour obtenir une liste compl\u00e8te des modifications apport\u00e9es \u00e0 l&rsquo;API de l&rsquo;\u00e9diteur de blocs en ce qui concerne les \u00e9crans d&rsquo;administration, consultez la <a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/16\/block-editor-api-changes-to-support-multiple-admin-screens-in-wp-5-8\/\">note de d\u00e9veloppement<\/a> de Greg Zi\u00f3\u0142kowski.<\/p>\n<h3>Fonctionnalit\u00e9s et am\u00e9liorations suppl\u00e9mentaires<\/h3>\n<p>Il y a tellement de nouvelles fonctionnalit\u00e9s et de changements pour les d\u00e9veloppeurs apport\u00e9s par WordPress 5.8 qu&rsquo;il nous serait impossible de les mentionner tous dans cet article. Mais nous avons rassembl\u00e9 une liste de notes de d\u00e9veloppement non couvertes ici pour votre lecture suppl\u00e9mentaire :<\/p>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/news\/2021\/05\/dropping-support-for-internet-explorer-11\/\">Abandon de la prise en charge d&rsquo;Internet Explorer 11<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/07\/01\/block-styles-loading-enhancements-in-wordpress-5-8\/\">Am\u00e9lioration du chargement des styles de blocs dans WordPress 5.8<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/blocks-in-an-iframed-template-editor\/\">Blocs dans un \u00e9diteur ifram\u00e9 (mod\u00e8le)<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/on-layout-and-content-width-in-wordpress-5-8\/\">Sur la mise en page et la largeur du contenu dans WordPress 5.8<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/introducing-update-uri-plugin-header-in-wordpress-5-8\/\">Introduction de l&rsquo;en-t\u00eate de plugin \u00ab\u00a0Update URI\u00a0\u00bb dans WordPress 5.8<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/block-editor-api-removals-58\/\">Diverses suppressions de l&rsquo;API de l&rsquo;\u00e9diteur de blocs dans WordPress 5.8<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/29\/rest-api-changes-in-wordpress-5-8\/\">Changements de l&rsquo;API REST dans WordPress 5.8<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/06\/28\/miscellaneous-developer-focused-changes-in-wordpress-5-8\/\">Diverses modifications destin\u00e9es aux d\u00e9veloppeurs dans WordPress 5.8<\/a><\/li>\n<li><a href=\"https:\/\/make.wordpress.org\/core\/2021\/07\/12\/miscellaneous-block-editor-api-additions-in-wordpress-5-8\/\">Divers ajouts \u00e0 l&rsquo;API de l&rsquo;\u00e9diteur de blocs dans WordPress 5.8<\/a><\/li>\n<\/ul>\n\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>WordPress 5.8 marque une \u00e9tape importante sur la voie du Full Site Editing. Mais la deuxi\u00e8me version de WordPress de l&rsquo;ann\u00e9e apporte bien plus que FSE. Les utilisateurs et les d\u00e9veloppeurs trouveront des tonnes d&rsquo;am\u00e9liorations dans l&rsquo;\u00e9diteur de blocs, un nouveau m\u00e9canisme <strong>theme.json<\/strong>, une API de blocs plus puissante, la prise en charge du format d&rsquo;image WebP, et bien plus encore.<\/p>\n<p>Nous avons \u00e9t\u00e9 particuli\u00e8rement impressionn\u00e9s par les am\u00e9liorations, petites et grandes, apport\u00e9es \u00e0 l&rsquo;\u00e9diteur de blocs et \u00e0 son interface utilisateur. Nous appr\u00e9cions la navigation am\u00e9lior\u00e9e entre les blocs, la barre d&rsquo;outils de bloc remani\u00e9e, la clart\u00e9 enrichie de l&rsquo;interface et les am\u00e9liorations apport\u00e9es \u00e0 plusieurs blocs.<\/p>\n<p>Ces petits changements am\u00e9liorent peu \u00e0 peu l&rsquo;exp\u00e9rience d&rsquo;\u00e9dition et, sans presque s&rsquo;en rendre compte, on se retrouve \u00e0 utiliser un logiciel plus performant et plus robuste. C&rsquo;est <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-wordpress\/\">WordPress<\/a> !<\/p>\n<p><em>C&rsquo;est \u00e0 vous maintenant ! Que pensez-vous de Full Site Editing ? Et quels sont vos changements pr\u00e9f\u00e9r\u00e9s dans WordPress 5.8 ?<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress 5.8 \u00ab Tatum \u00bb est arriv\u00e9 et il s&rsquo;agit d&rsquo;une version importante. Outre le nombre incroyable de fonctionnalit\u00e9s, d&rsquo;am\u00e9liorations et de corrections de bugs, WP &#8230;<\/p>\n","protected":false},"author":36,"featured_media":47294,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[85,33],"topic":[1040],"class_list":["post-47239","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-cms","tag-wordpress","topic-mises-a-jour-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>Nouveaut\u00e9s de WordPress 5.8<\/title>\n<meta name=\"description\" content=\"Consultez notre revue d\u00e9taill\u00e9e de WordPress 5.8 et d\u00e9couvrez toutes les fonctionnalit\u00e9s majeures de la derni\u00e8re version (il y en a beaucoup) !\" \/>\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\/wordpress-5-8\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Nouveaut\u00e9s de WordPress 5.8 (Full Site Editing, images WebP, styles et r\u00e9glages globaux, et bien plus encore)\" \/>\n<meta property=\"og:description\" content=\"Consultez notre revue d\u00e9taill\u00e9e de WordPress 5.8 et d\u00e9couvrez toutes les fonctionnalit\u00e9s majeures de la derni\u00e8re version (il y en a beaucoup) !\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/\" \/>\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=\"2021-07-19T13:35:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-08T12:23:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/11\/FR-Homepage-featured-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Consultez notre revue d\u00e9taill\u00e9e de WordPress 5.8 et d\u00e9couvrez toutes les fonctionnalit\u00e9s majeures de la derni\u00e8re version (il y en a beaucoup) !\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/wordpress-5.8.jpg\" \/>\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=\"48 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Nouveaut\u00e9s de WordPress 5.8 (Full Site Editing, images WebP, styles et r\u00e9glages globaux, et bien plus encore)\",\"datePublished\":\"2021-07-19T13:35:02+00:00\",\"dateModified\":\"2024-10-08T12:23:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/\"},\"wordCount\":9234,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/07\/wordpress-5.8.jpg\",\"keywords\":[\"CMS\",\"WordPress\"],\"articleSection\":[\"Nouveaut\u00e9s WordPress\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/\",\"name\":\"Nouveaut\u00e9s de WordPress 5.8\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/07\/wordpress-5.8.jpg\",\"datePublished\":\"2021-07-19T13:35:02+00:00\",\"dateModified\":\"2024-10-08T12:23:49+00:00\",\"description\":\"Consultez notre revue d\u00e9taill\u00e9e de WordPress 5.8 et d\u00e9couvrez toutes les fonctionnalit\u00e9s majeures de la derni\u00e8re version (il y en a beaucoup) !\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/07\/wordpress-5.8.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/07\/wordpress-5.8.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mises \u00e0 jour WordPress\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/mises-a-jour-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Nouveaut\u00e9s de WordPress 5.8 (Full Site Editing, images WebP, styles et r\u00e9glages globaux, et bien plus encore)\"}]},{\"@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":"Nouveaut\u00e9s de WordPress 5.8","description":"Consultez notre revue d\u00e9taill\u00e9e de WordPress 5.8 et d\u00e9couvrez toutes les fonctionnalit\u00e9s majeures de la derni\u00e8re version (il y en a beaucoup) !","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\/wordpress-5-8\/","og_locale":"fr_FR","og_type":"article","og_title":"Nouveaut\u00e9s de WordPress 5.8 (Full Site Editing, images WebP, styles et r\u00e9glages globaux, et bien plus encore)","og_description":"Consultez notre revue d\u00e9taill\u00e9e de WordPress 5.8 et d\u00e9couvrez toutes les fonctionnalit\u00e9s majeures de la derni\u00e8re version (il y en a beaucoup) !","og_url":"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2021-07-19T13:35:02+00:00","article_modified_time":"2024-10-08T12:23:49+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/11\/FR-Homepage-featured-image.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Consultez notre revue d\u00e9taill\u00e9e de WordPress 5.8 et d\u00e9couvrez toutes les fonctionnalit\u00e9s majeures de la derni\u00e8re version (il y en a beaucoup) !","twitter_image":"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/07\/wordpress-5.8.jpg","twitter_creator":"@carlodaniele","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Carlo Daniele","Dur\u00e9e de lecture estim\u00e9e":"48 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Nouveaut\u00e9s de WordPress 5.8 (Full Site Editing, images WebP, styles et r\u00e9glages globaux, et bien plus encore)","datePublished":"2021-07-19T13:35:02+00:00","dateModified":"2024-10-08T12:23:49+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/"},"wordCount":9234,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/07\/wordpress-5.8.jpg","keywords":["CMS","WordPress"],"articleSection":["Nouveaut\u00e9s WordPress"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/","url":"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/","name":"Nouveaut\u00e9s de WordPress 5.8","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/07\/wordpress-5.8.jpg","datePublished":"2021-07-19T13:35:02+00:00","dateModified":"2024-10-08T12:23:49+00:00","description":"Consultez notre revue d\u00e9taill\u00e9e de WordPress 5.8 et d\u00e9couvrez toutes les fonctionnalit\u00e9s majeures de la derni\u00e8re version (il y en a beaucoup) !","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/07\/wordpress-5.8.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2021\/07\/wordpress-5.8.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-8\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Mises \u00e0 jour WordPress","item":"https:\/\/kinsta.com\/fr\/sujets\/mises-a-jour-wordpress\/"},{"@type":"ListItem","position":3,"name":"Nouveaut\u00e9s de WordPress 5.8 (Full Site Editing, images WebP, styles et r\u00e9glages globaux, et bien plus encore)"}]},{"@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\/47239","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=47239"}],"version-history":[{"count":18,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/47239\/revisions"}],"predecessor-version":[{"id":47363,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/47239\/revisions\/47363"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/47239\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/47239\/translations\/it"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/47239\/translations\/es"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/47239\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/47239\/translations\/fr"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/47239\/translations\/nl"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/47239\/translations\/de"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/47239\/translations\/dk"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/47239\/translations\/jp"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/47239\/translations\/se"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/47239\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/47294"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=47239"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=47239"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=47239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}