{"id":45059,"date":"2021-03-12T07:33:44","date_gmt":"2021-03-12T06:33:44","guid":{"rendered":"https:\/\/kinsta.com\/?p=90307"},"modified":"2025-09-10T16:00:04","modified_gmt":"2025-09-10T15:00:04","slug":"wordpress-5-7","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-7\/","title":{"rendered":"Quoi de neuf dans WordPress 5.7 (chargement diff\u00e9r\u00e9, HTTPS, mises \u00e0 jour de l’UI, nouvelles API, et bien plus encore)"},"content":{"rendered":"

Nous avons l’habitude de voir des changements mineurs et d’autres plus ou moins mineurs, ainsi que de nouvelles fonctionnalit\u00e9s ajout\u00e9es au c\u0153ur de WordPress<\/a> \u00e0 chaque nouvelle version. WordPress 5.7 ne fait pas exception \u00e0 la r\u00e8gle, et il est bon de voir comment chaque nouvelle version nous rapproche un peu plus de la vue d\u2019ensemble<\/a>.<\/p>\n

Avec plusieurs versions de l’\u00e9diteur de blocs fusionn\u00e9es dans le c\u0153ur, la nouvelle version am\u00e9liore l’exp\u00e9rience globale d’\u00e9dition et permet aux d\u00e9veloppeurs de construire des blocs plus avanc\u00e9s et d’ajouter des personnalisations plus puissantes \u00e0 l’\u00e9diteur de blocs.<\/p>\n

En plus de l’\u00e9diteur, WordPress 5.7 introduit \u00e9galement des tonnes de changements et de fonctionnalit\u00e9s int\u00e9ressantes, notamment des iframes \u00e0 chargement diff\u00e9r\u00e9 (lazy loading), des mises \u00e0 jour de l’interface de connexion et d’inscription, des liens de r\u00e9initialisation des mots de passe, un grand nombre de corrections de bogues, et bien plus encore.<\/p>\n

Nous avons effectu\u00e9 nos tests sur DevKinsta<\/a>, et nous sommes pr\u00eats \u00e0 partager avec vous nos fonctionnalit\u00e9s favorites et les changements qui sont apport\u00e9s \u00e0 WordPress 5.7 – avec, bien s\u00fbr, des tonnes de captures d’\u00e9cran et de codes.<\/p>\n

Si vous voulez vous plonger plus profond\u00e9ment dans la premi\u00e8re grande version de 2021, consultez le cycle de d\u00e9veloppement<\/a> de WordPress 5.7, le Planning Roundup<\/a> et le Field Guide<\/a>.<\/p>\n

Donc, pendant que nous continuons \u00e0 attendre l’\u00e9dition compl\u00e8te du site<\/a> (dans WordPress 5.8), mettons-nous \u00e0 l’aise et profitons des nouveaut\u00e9s de WordPress 5.7 !<\/p>\n\n

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

Quoi de neuf dans l’\u00e9diteur de bloc<\/h2>\n

WordPress 5.7 apporte de nombreuses versions de l\u2019extension Gutenberg<\/a> au c\u0153ur. Il serait impossible de mentionner ici tous ces ajouts en plus des nombreuses modifications et corrections de bogues apport\u00e9es \u00e0 l’\u00e9diteur, mais vous pouvez vous rendre sur les liens suivants pour plonger dans chaque version : 9.3<\/a>,\u00a09.4<\/a>,\u00a09.5<\/a>,\u00a09.6<\/a>,\u00a09.7<\/a>,\u00a09.8<\/a>,\u00a09.9<\/a>.<\/p>\n

Les corrections de bogues et les am\u00e9liorations de performance de Gutenberg 10.0 et 10.1 font \u00e9galement partie de WordPress 5.7.<\/p>\n

Ceci dit, passons en revue notre liste des fonctionnalit\u00e9s et des changements les plus int\u00e9ressants ajout\u00e9s \u00e0 l’\u00e9diteur de blocs avec WordPress 5.7 :<\/p>\n

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

Fonctionnalit\u00e9s, am\u00e9liorations et API des variations de bloc<\/h3>\n

Introduites avec WordPress 5.4, les variations de blocs<\/a> permettent \u00e0 l\u2019utilisateur de s\u00e9lectionner une instance diff\u00e9rente du m\u00eame bloc.<\/p>\n

Cette fonctionnalit\u00e9 fonctionne en tandem avec l’API de variations de bloc<\/a>, un outil puissant qui permet aux d\u00e9veloppeurs d’ajouter, de g\u00e9rer ou de supprimer des variations de blocs.<\/p>\n

WordPress 5.7 introduit plusieurs am\u00e9liorations, fonctionnalit\u00e9s et nouvelles API pour les variations de blocs, offrant une meilleure interface utilisateur et des outils plus puissants pour les d\u00e9veloppeurs. Plongeons dans le vif du sujet.<\/p>\n

Transformations des variations de bloc<\/h4>\n

Introduit pour la premi\u00e8re fois avec Gutenberg 9.4<\/a> et maintenant ajout\u00e9 \u00e0 WordPress 5.7, un commutateur de transformation pour variation<\/strong> appara\u00eet sous la carte de bloc pour les blocs supportant cette fonction.<\/p>\n

\"Le
Le commutateur de transformation de variation pour un bloc de boutons<\/figcaption><\/figure>\n

Lors de l’enregistrement d’une nouvelle variation de bloc, les d\u00e9veloppeurs de blocs peuvent ajouter le commutateur de variation \u00e0 l’inspecteur de bloc en ajoutant la nouvelle option transform<\/code> pour la variation de bloc au champ scope<\/code>, comme le montre l’exemple suivant (code JS uniquement) :<\/p>\n

wp.blocks.registerBlockVariation( 'core\/heading', { \n\tname: 'green-text', \n\ttitle: 'Green Text', \n\tdescription: 'This block has green text. It overrides the default description.',  \n\tattributes: { \n\t\tcontent: 'Green Text', \n\t\ttextColor: 'vivid-green-cyan' \n\t}, \n\ticon: 'palmtree', \n\tscope: [ 'inserter', 'transform' ] \n} );<\/code><\/pre>\n
Dans cet exemple, une variation de bloc appara\u00eet dans deux zones de l’interface utilisateur de l’\u00e9diteur, l’outil d’insertion de bloc et l’inspecteur de bloc.<\/p>\n
\"Exemple
Exemple de variation en bloc avec le scope transform<\/figcaption><\/figure>\n
Pour un aper\u00e7u approfondi des transformations de variation de bloc, voir \u00e9galement PR #26687<\/a>.<\/p>\n
Les informations sur les blocs correspondent maintenant aux variations des blocs<\/h4>\n
Depuis WordPress 5.7 (et Gutenberg 9.7<\/a>), l’interface utilisateur affiche des informations plus sp\u00e9cifiques sur les variations de blocs, alors qu’auparavant elle ne pr\u00e9sentait que des informations g\u00e9n\u00e9riques.<\/p>\n
\"Avant
Avant WordPress 5.7, les \u00e9l\u00e9ments de l’interface pr\u00e9sentaient des informations g\u00e9n\u00e9riques sur les variations des blocs<\/figcaption><\/figure>\n
Les blocs int\u00e9gr\u00e9s et les ic\u00f4nes sociales sont construits comme des variations de blocs ; ils fournissent de bons exemples de WordPress faisant correspondre des informations de blocs avec des variations de blocs.<\/p>\n
\"Les
Les \u00e9l\u00e9ments de l’interface affichent maintenant des informations sp\u00e9cifiques aux variations de blocs<\/figcaption><\/figure>\n
Ces changements affectent l’inspecteur de bloc, le bloc de barre de navigation et les fils d\u2019Ariane. Depuis Gutenberg 9.8<\/a>, cette am\u00e9lioration de l’UI s’applique \u00e9galement au commutateur de bloc.<\/p>\n
\"Am\u00e9lioration
Am\u00e9lioration de l’UI pour les variations de bloc dans le commutateur de bloc<\/figcaption><\/figure>\n
Nouvelles API de variations de blocs<\/h4>\n
WordPress 5.7 introduit \u00e9galement de nouvelles API<\/a> que les d\u00e9veloppeurs peuvent utiliser lors de l’enregistrement des variations de blocs pour afficher les informations correctes d’une variation de bloc (Gutenberg 9.7<\/a>).<\/p>\n
La nouvelle propri\u00e9t\u00e9 isActive<\/code> est une fonction qui accepte les attributs d’un bloc. Vous pouvez utiliser les attributs de la variation pour d\u00e9terminer si une variation est active (voir aussi la r\u00e9f\u00e9rence API de bloc<\/a>).<\/p>\n
Les d\u00e9veloppeurs de blocs peuvent utiliser cette fonction pour afficher des informations sur les variations au lieu des informations sur les blocs. Un exemple pourrait \u00eatre le bloc embed<\/code>, o\u00f9 nous pouvons modifier la valeur de l’attribut providerNameSlug<\/code> (un exemple tir\u00e9 de la note de dev<\/a>) :<\/p>\n
const variations = [\n{\n\tname: 'wordpress',\n\ttitle: 'WordPress',\n\tkeywords: [ __( 'post' ), __( 'blog' ) ],\n\tdescription: __( 'Embed a WordPress post.' ),\n\tattributes: { providerNameSlug: 'wordpress' },\n\tisActive: ( blockAttributes, variationAttributes ) =>\n\t\tblockAttributes.providerNameSlug === variationAttributes.providerNameSlug,\n},\n];<\/code><\/pre>\n
Dans l’exemple suivant, la propri\u00e9t\u00e9 isActive<\/code> est utilis\u00e9e pour modifier l’attribut de couleur :<\/p>\n
variations: [\n{\n\tname: 'blue',\n\ttitle: __( 'Blue Quote' ),\n\tisDefault: true,\n\tattributes: { color: 'blue', className: 'is-style-blue-quote' },\n\ticon: 'format-quote',\n\tisActive: ( blockAttributes, variationAttributes ) =>\n\t\tblockAttributes.color === variationAttributes.color\n},\n],<\/code><\/pre>\n
Le nouveau hook useBlockDisplayInformation<\/code> renvoie des informations sur un bloc donn\u00e9. Le nouveau hook prend en compte la propri\u00e9t\u00e9 isActive<\/code> d\u2019une variation de bloc et renvoie title<\/code>, icon<\/code> et description<\/code> du bloc.<\/p>\n
Ces changements concernent le bloc carte (outils de l’inspecteur), la navigation en vue liste (barre sup\u00e9rieure) et les fils d\u2019Ariane (voir aussi PR #27469<\/a>).<\/p>\n
Nouvelles fonctionnalit\u00e9s de bloc de boutons<\/h3>\n
Quelques nouvelles caract\u00e9ristiques am\u00e9liorent la fonctionnalit\u00e9 et l’interface du bloc de boutons.<\/p>\n
Dimensions des boutons<\/h4>\n
Un nouveau contr\u00f4le disponible dans la colonne lat\u00e9rale des r\u00e9glages nous permet d\u00e9sormais de d\u00e9finir un pourcentage de largeur pour les boutons log\u00e9s dans les blocs de boutons (Gutenberg 9.4<\/a>).<\/p>\n
\"R\u00e9glages
R\u00e9glages de largeur des boutons<\/figcaption><\/figure>\n
Il suffit de s\u00e9lectionner un bouton et de choisir 25\u00a0%, 50\u00a0%, 75\u00a0% ou 100\u00a0%. Les pourcentages se r\u00e9f\u00e8rent au conteneur parent. L’image ci-dessous montre diff\u00e9rentes combinaisons de dimensions de boutons.<\/p>\n
\"Combinaisons
Combinaisons de boutons avec des valeurs de largeur diff\u00e9rentes<\/figcaption><\/figure>\n
Pour plus d’informations techniques, consultez les PR #25999<\/a> et #26781<\/a>.<\/p>\n
Mise en page verticale<\/h4>\n
Cette nouvelle fonctionnalit\u00e9 ajoute des variations pour l’orientation verticale du bloc de boutons. Les utilisateurs peuvent passer d’une mise en page horizontale \u00e0 une disposition verticale en utilisant le commutateur Transformations disponible dans le panneau des r\u00e9glages du bloc (Gutenberg 9.6<\/a>).<\/p>\n
\"Bloc
Bloc de boutons avec orientation verticale<\/figcaption><\/figure>\n
Am\u00e9liorations des ic\u00f4nes sociales<\/h3>\n
WordPress 5.7 ajoute de nouvelles options de personnalisation aux ic\u00f4nes sociales<\/a> : prise en charge de la taille et des couleurs personnalis\u00e9es.<\/p>\n
Taille des ic\u00f4nes sociales<\/h4>\n
Le bloc d\u2019ic\u00f4nes sociales \u00e9tant s\u00e9lectionn\u00e9, la barre d’outils du bloc propose d\u00e9sormais un menu d’options de taille<\/strong> avec les tailles disponibles (Gutenberg 9.4<\/a>).<\/p>\n
\"Une
Une taille \u00ab \u00e9norme \u00bb pour les ic\u00f4nes sociales<\/figcaption><\/figure>\n
Couleurs personnalis\u00e9es dans les ic\u00f4nes sociales<\/h4>\n
Le m\u00eame bloc prend d\u00e9sormais en charge les r\u00e9glages de couleur, ce qui nous permet de d\u00e9finir diff\u00e9rentes couleurs personnalis\u00e9es pour les ic\u00f4nes et les arri\u00e8re-plans (Gutenberg 9.9<\/a>).<\/p>\n
\"Ic\u00f4nes
Ic\u00f4nes sociales avec un arri\u00e8re-plan noir<\/figcaption><\/figure>\n
Vous pouvez maintenant utiliser la palette de couleurs du th\u00e8me pour les ic\u00f4nes sociales, ce qui permet d’\u00e9viter que les couleurs des ic\u00f4nes<\/a> ne correspondent pas \u00e0 celles de votre site web (voir aussi PR #28084<\/a>).<\/p>\n
Prise en charge de taille de police<\/h3>\n
WordPress 5.7 ajoute la prise en charge de la taille des polices<\/a> pour les blocs Liste et Code.<\/p>\n
Taille de police dans le bloc Liste<\/h4>\n
Une carte de typographie avec des contr\u00f4les pour la taille des polices a \u00e9t\u00e9 ajout\u00e9e aux r\u00e9glages du bloc Liste (Gutenberg 9.4<\/a>).<\/p>\n
\"Taille
Taille de police dans les r\u00e9glages du bloc Liste<\/figcaption><\/figure>\n
Les utilisateurs peuvent choisir l’une des tailles de police disponibles pour les \u00e9l\u00e9ments de la liste ou d\u00e9finir une taille de police personnalis\u00e9e exprim\u00e9e en pixels. Le bouton \u00ab\u00a0R\u00e9initialiser\u00a0\u00bb r\u00e9tablit les valeurs par d\u00e9faut.<\/p>\n
Prise en charge de la taille de police dans le bloc Code<\/h4>\n
WordPress 5.7 prend \u00e9galement en charge la gestion de la taille des polices dans les blocs Code. Lorsqu’un bloc code est s\u00e9lectionn\u00e9, la colonne lat\u00e9rale des r\u00e9glages du bloc affiche un nouveau contr\u00f4le de la taille de la police<\/strong>. Ce contr\u00f4le vous permet soit de choisir l’une des tailles pr\u00e9d\u00e9finies disponibles dans votre th\u00e8me<\/a>, soit de d\u00e9finir une valeur personnalis\u00e9e en pixels (Gutenberg 9.5<\/a>).<\/p>\n
\"Tailles
Tailles de police globales disponibles dans Twenty Twenty<\/figcaption><\/figure>\n
L’impl\u00e9mentation de cette fonctionnalit\u00e9 permet \u00e9galement d’utiliser des variables de style globales dans le CSS des blocs de code (voir aussi PR #27294<\/a>). L’image ci-dessous montre un bloc de code sur l\u2019interface publique avec le th\u00e8me Twenty Twenty<\/a> install\u00e9.<\/p>\n
\"Styles
Styles CSS globaux dans un bloc Code<\/figcaption><\/figure>\n
Alignement sur toute la hauteur dans le bloc Couverture<\/h3>\n
WordPress 5.7 introduit un nouveau composant d’alignement de la barre d’outils en pleine hauteur. Il a d’abord \u00e9t\u00e9 ajout\u00e9 \u00e0 l’\u00e9diteur de blocs avec Gutenberg 9.5<\/a>. Maintenant, il est fusionn\u00e9 dans le c\u0153ur et impl\u00e9ment\u00e9 dans le bloc Couverture.<\/p>\n
\"L'alignement
L’alignement sur toute la hauteur a \u00e9t\u00e9 impl\u00e9ment\u00e9 dans le bloc Couverture<\/figcaption><\/figure>\n
Si vous activez le bouton de la barre d’outils de bloc, en gardant un \u0153il sur le contr\u00f4le de la hauteur minimale, vous verrez que l’alignement sur toute la hauteur n’est qu’une abr\u00e9viation pour 100vh<\/code> (pour en savoir plus sur les longueurs en pourcentage de vue<\/a>).<\/p>\n
\"Alignement
Alignement sur toute la hauteur d’un bloc Couverture<\/figcaption><\/figure>\n
Vous pouvez utiliser l’alignement en hauteur en combinaison avec d’autres r\u00e9glages de contr\u00f4le comme l’arri\u00e8re-plan fixe, la position du contenu, etc. Vous serez probablement surpris par le nombre d’effets impressionnants que vous pourrez cr\u00e9er sur vos pages.<\/p>\n
Blocs et compostions en glisser-d\u00e9poser depuis l’outil d’insertion<\/h3>\n
L’outil d’insertion de blocs supporte d\u00e9sormais le glisser-d\u00e9poser pour les blocs et les compositions<\/a>. Les utilisateurs peuvent saisir n’importe quel bloc ou composition depuis l’outil d’insertion et les placer n’importe o\u00f9 sur le canevas de l\u2019article (Gutenberg 9.6<\/a> et 9.7<\/a>).<\/p>\n
\"Vous
Vous pouvez maintenant faire glisser des blocs ou des compositions<\/figcaption><\/figure>\n
Notez que le glisser-d\u00e9poser ne fonctionne que si votre th\u00e8me prend en charge les compositions de blocs.<\/p>\n
Bloc d’espace semi-transparent<\/h3>\n
Au lieu de l’ancienne couleur gris opaque, le bloc Espace a maintenant un arri\u00e8re-plan semi-transparent (Gutenberg 9.8<\/a>).<\/p>\n
\"Un
Un bloc d’espace opaque dans WordPress 5.6<\/figcaption><\/figure>\n
Cette fonction devrait permettre d’identifier plus facilement le bloc Espace qui se trouve au-dessus de toute couleur d\u2019arri\u00e8re-plan.<\/p>\n
\"Un
Un bloc d’espace semi-transparent dans WordPress 5.7<\/figcaption><\/figure>\n
Am\u00e9liorations suppl\u00e9mentaires dans l’\u00e9diteur de bloc m\u00e9ritant d’\u00eatre mentionn\u00e9es<\/h3>\n
Notre liste ne couvre pas toutes les fonctionnalit\u00e9s et am\u00e9liorations fusionn\u00e9es dans le c\u0153ur, alors assurez-vous de consulter la documentation officielle et les notes de d\u00e9veloppement pour un registre plus complet des nouveaut\u00e9s dans l’\u00e9diteur de blocs avec WordPress 5.7.<\/p>\n
Mais pour n’en citer que quelques-unes, vous trouverez \u00e9galement dans 5.7 :<\/p>\n