{"id":61187,"date":"2022-09-09T08:48:32","date_gmt":"2022-09-09T07:48:32","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=61187&preview=true&preview_id=61187"},"modified":"2023-09-14T16:48:10","modified_gmt":"2023-09-14T15:48:10","slug":"wordpress-6-1","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/wordpress-6-1\/","title":{"rendered":"Nouveaut\u00e9s de WordPress 6.1 : Typographie fluide, syst\u00e8me de mod\u00e8les am\u00e9lior\u00e9, nouveaux contr\u00f4les de sant\u00e9 du site, et bien plus encore !"},"content":{"rendered":"

WordPress 6.1 \u00ab Misha \u00bb a \u00e9t\u00e9 publi\u00e9 le 1er novembre 2022<\/a>. La troisi\u00e8me version majeure de l’ann\u00e9e suit WordPress 6.0 Arturo<\/a>, publi\u00e9 le 24 mai, et WordPress 5.9 Josephine<\/a>, publi\u00e9 le 25 janvier.<\/p>\n

Comme cela arrive toujours, les nouvelles versions de WordPress apportent de nouvelles fonctionnalit\u00e9s, des am\u00e9liorations et des corrections de bogues des derni\u00e8res versions de l’extension Gutenberg dans le noyau. Et WordPress 6.1 ne fait pas exception, puisque 11 versions de l’extension Gutenberg<\/a> ont \u00e9t\u00e9 fusionn\u00e9es dans le noyau, de 13.1 \u00e0 14.1.<\/p>\n

Dans cet article, nous allons jeter un coup d’\u0153il dans les coulisses et pr\u00e9senter les nouvelles fonctionnalit\u00e9s passionnantes \u00e0 venir avec la nouvelle version majeure de WordPress.<\/p>\n

Matias Ventura nous a donn\u00e9 quelques aper\u00e7us de la feuille de route de la 6.1<\/a>, o\u00f9 il a dit que l’objectif de la 6.1 est d’affiner les exp\u00e9riences introduites avec la 5.9 et la 6.0 et de corriger certaines choses \u00e0 l’approche de la phase 3 de la feuille de route de Gutenberg.<\/p>\n\n

1. Am\u00e9liorations de l’\u00e9diteur de mod\u00e8les <\/strong>: L’une des principales nouveaut\u00e9s est l’\u00e9diteur de mod\u00e8les<\/a>. WordPress 6.1 devrait introduire la possibilit\u00e9 de parcourir, de visualiser et de modifier la structure du site.<\/p>\n

2. Compositions de bloc <\/strong>: L’objectif est de donner aux compositions de bloc un r\u00f4le central<\/a> dans la cr\u00e9ation de mod\u00e8les et de pages, en les adaptant aux types de publication et aux types de publications personnalis\u00e9s (CPT)<\/a>, en renfor\u00e7ant la fonctionnalit\u00e9 de verrouillage, en am\u00e9liorant la gestion des compositions enregistr\u00e9es, etc.<\/p>\n

3. Styles et blocs globaux et outils de conception <\/strong>: WordPress 6.1 permettra de g\u00e9rer les polices web, d’impl\u00e9menter la typographie responsive et d’\u00e9tendre la palette d’outils disponibles pour les blocs. Cela dit, examinons de plus pr\u00e8s certaines des fonctionnalit\u00e9s les plus puissantes de WordPress 6.1.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Typographie fluide et espacement<\/h2>\n

WordPress 6.1 ajoute le support<\/a> de la typographie fluide<\/a> via des fonctions CSS calc<\/code><\/a>\/clamp<\/code><\/a> .<\/p>\n

L’expression typographie fluide<\/a> d\u00e9crit la capacit\u00e9 du texte \u00e0 s’adapter \u00e0 la largeur du viewport, en passant en douceur d’une largeur minimale \u00e0 une largeur maximale.<\/p>\n

C’est quelque chose de diff\u00e9rent de ce que vous pouvez r\u00e9aliser avec les requ\u00eates m\u00e9dia, car ces derni\u00e8res permettent aux th\u00e8mes de redimensionner le texte en fonction de tailles de viewport sp\u00e9cifiques, mais ne font rien entre diff\u00e9rentes valeurs.<\/p>\n

Certains th\u00e8mes prennent d\u00e9j\u00e0 en charge la typographie fluide. Twenty Twenty-Two<\/a>, par exemple, utilise la fonction CSS clamp()<\/code> pour plusieurs tailles de police. Par exemple :<\/p>\n

\"settings\": {\n\t...\n\t\"custom\": {\n\t\t\"spacing\": {\n\t\t\t\"small\": \"max(1.25rem, 5vw)\",\n\t\t\t\"medium\": \"clamp(2rem, 8vw, calc(4 * var(--wp--style--block-gap)))\",\n\t\t\t\"large\": \"clamp(4rem, 10vw, 8rem)\",\n\t\t\t\"outer\": \"var(--wp--custom--spacing--small, 1.25rem)\"\n\t\t},\n\t\t\"typography\": {\n\t\t\t\"font-size\": {\n\t\t\t\t\"huge\": \"clamp(2.25rem, 4vw, 2.75rem)\",\n\t\t\t\t\"gigantic\": \"clamp(2.75rem, 6vw, 3.25rem)\",\n\t\t\t\t\"colossal\": \"clamp(3.25rem, 8vw, 6.25rem)\"\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n
Comme vous pouvez le voir dans le code ci-dessus, des valeurs de taille de police fluide sont utilis\u00e9es pour chaque taille de police.<\/p>\n
Maintenant, \u00e0 partir de WordPress 6.1, les th\u00e8mes peuvent g\u00e9n\u00e9rer automatiquement des tailles de police fluides<\/a> en d\u00e9clarant la nouvelle propri\u00e9t\u00e9 typography.fluid<\/code> comme suit :<\/p>\n
\"settings\": {\n\t....\n\t\"typography\": {\n\t\t\"fluid\": true,\n\t\t\"fontSizes\": [\n\t\t\t{\n\t\t\t\t\"size\": \"2rem\",\n\t\t\t\t\"fluid\": {\n\t\t\t\t\t\"min\": \"2rem\",\n\t\t\t\t\t\"max\": \"2.5rem\"\n\t\t\t\t},\n\t\t\t\t\"slug\": \"medium\",\n\t\t\t\t\"name\": \"Medium\"\n\t\t\t}\n\t\t]\n}<\/code><\/pre>\n
En utilisant typography.fluid<\/code> et typography.fontSizes[].fluid<\/code>, la valeur de chaque taille de police est automatiquement calcul\u00e9e \u00e0 l’aide de la formule<\/a> suivante :<\/p>\n
--wp--preset--font-size--{slug}: clamp({fluid.min}, {fluid.min} + ((1vw - 0.48rem) * 1.592), {fluid.max});<\/code><\/pre>\n
Par exemple :<\/p>\n
--wp--preset--font-size--large: clamp(2rem, 2rem + ((1vw - 0.48rem) * 1.592), {2.5rem});<\/code><\/pre>\n
Notez qu’au moment de la r\u00e9daction de cet article, la typographie fluide est une fonctionnalit\u00e9 exp\u00e9rimentale. Vous pouvez plonger dans les d\u00e9tails techniques dans Supports de bloc : ajouter la typographie fluide<\/a>.<\/p>\n
\n
Fluid typography is a significant improvement for building modern #WordPress<\/a> websites. We just updated @frostwp<\/a> to include this feature. Here\u2019s a great read from @richard_tabor<\/a> into what it is and why it matters. https:\/\/t.co\/Bq5YuHX3wi<\/a><\/p>\n
— Brian Gardner (@bgardner) August 8, 2022<\/a><\/p><\/blockquote>\n