Envie de d\u00e9couvrir les nouveaut\u00e9s \u00e0 venir ? Plongeons-nous dans WordPress 7.1.
\n
Traitement des m\u00e9dias c\u00f4t\u00e9 client<\/h2>\n
Jusqu\u2019\u00e0 WordPress 7.0, la g\u00e9n\u00e9ration des dimensions d\u2019image et des miniatures destin\u00e9es \u00e0 l\u2019affichage sur l\u2019interface publique, la conversion des formats et la gestion de la rotation des images \u00e9taient enti\u00e8rement g\u00e9r\u00e9es c\u00f4t\u00e9 serveur via PHP.<\/p>\n
D\u00e9sormais, WordPress 7.1 introduit une nouvelle architecture de traitement des m\u00e9dias : le redimensionnement des images, la conversion de format, la rotation EXIF et la g\u00e9n\u00e9ration de miniatures s\u2019effectuent d\u00e9sormais c\u00f4t\u00e9 client, directement dans le navigateur de l\u2019utilisateur.<\/p>\n
Ce changement devrait am\u00e9liorer consid\u00e9rablement les performances du site et r\u00e9duire la consommation de ressources du serveur.<\/p>\n
Examinons de plus pr\u00e8s les changements apport\u00e9s au traitement des images :
\n
1. Qu\u2019est-ce que le traitement des m\u00e9dias c\u00f4t\u00e9 client ?<\/h3>\n
Alors qu\u2019auparavant les images \u00e9taient trait\u00e9es sur le serveur par PHP \u00e0 l\u2019aide des biblioth\u00e8ques GD<\/a> ou Imagick<\/a>, la g\u00e9n\u00e9ration d\u2019images dans diff\u00e9rentes tailles, la conversion de format et la rotation EXIF s\u2019effectuent d\u00e9sormais directement dans le navigateur de l\u2019utilisateur \u2014 \u00e0 condition que ce dernier prenne en charge l\u2019en-t\u00eate Le traitement s\u2019effectuant dans le navigateur, WordPress ne re\u00e7oit plus une seule image, mais l\u2019ensemble des fichiers image r\u00e9sultant du pipeline de traitement. Cela a deux cons\u00e9quences principales : une r\u00e9duction de l\u2019utilisation du processeur et de la m\u00e9moire vive du serveur, et un nombre accru de requ\u00eates HTTP pour le t\u00e9l\u00e9versement des miniatures individuelles.<\/p>\n \u00c0 la date de r\u00e9daction de cet article, seuls Chrome 137 et Microsoft Edge 137 (version bureau) prennent enti\u00e8rement en charge le pipeline \u00ab D\u2019un point de vue architectural, le traitement des m\u00e9dias c\u00f4t\u00e9 client est g\u00e9r\u00e9 par trois paquets principaux :<\/p>\n Outre le traitement des images, cette nouvelle fonctionnalit\u00e9 introduit la conversion automatique des GIF anim\u00e9s en vid\u00e9os MP4\/WebM. La conversion est g\u00e9r\u00e9e par le nouveau package \u00ab Le traitement multim\u00e9dia c\u00f4t\u00e9 client introduit \u00e9galement de nouveaux points de terminaison de l\u2019API REST ( Le traitement des m\u00e9dias c\u00f4t\u00e9 client transf\u00e8re la charge de traitement des images du serveur vers le client. Cela lib\u00e8re le serveur de la lourde charge de travail li\u00e9e \u00e0 la g\u00e9n\u00e9ration de miniatures de diff\u00e9rentes dimensions, \u00e0 la rotation des images et \u00e0 la conversion des formats, en transf\u00e9rant directement cette t\u00e2che au navigateur de l\u2019utilisateur.<\/p>\n Voici quelques-uns des avantages pour les utilisateurs li\u00e9s au transfert du traitement des m\u00e9dias vers le client :<\/p>\n De plus, les GIF anim\u00e9s peuvent \u00eatre automatiquement convertis en vid\u00e9os \u00e0 lecture automatique plus efficaces ; les photos HEIC t\u00e9l\u00e9vers\u00e9es depuis des iPhone peuvent \u00eatre converties au format JPG par le navigateur avant leur t\u00e9l\u00e9versement (ce qui permet de contourner d\u2019\u00e9ventuels probl\u00e8mes de compatibilit\u00e9 avec le serveur), et la prise en charge du format AVIF fonctionne d\u00e9sormais m\u00eame en l\u2019absence de capacit\u00e9s AVIF c\u00f4t\u00e9 serveur (la v\u00e9rification du type MIME est contourn\u00e9e pour les t\u00e9l\u00e9versements d\u00e9cod\u00e9s c\u00f4t\u00e9 client).<\/p>\n Les d\u00e9veloppeurs peuvent d\u00e9sactiver le traitement des m\u00e9dias c\u00f4t\u00e9 client \u00e0 l\u2019aide du nouveau filtre \u00ab Au-del\u00e0 de cela, il n\u2019y a pas de perturbations majeures pour les d\u00e9veloppeurs d’extensions. Les hooks associ\u00e9s au traitement des m\u00e9dias continuent de se d\u00e9clencher exactement comme si les images \u00e9taient trait\u00e9es sur le serveur.<\/p>\n Les filtres existants lisent les r\u00e9glages depuis le serveur et continuent de fonctionner comme pr\u00e9vu. Par exemple, le filtre ` Pour les d\u00e9veloppeurs de th\u00e8mes, les tailles d\u2019image enregistr\u00e9es via Bien que le traitement des m\u00e9dias c\u00f4t\u00e9 client soit principalement con\u00e7u pour am\u00e9liorer les performances et l\u2019efficacit\u00e9 plut\u00f4t que pour la s\u00e9curit\u00e9, il offre plusieurs avantages qui renforcent la s\u00e9curit\u00e9 des sites WordPress.<\/p>\n Tout d\u2019abord, il r\u00e9duit la surface d\u2019attaque. Comme mentionn\u00e9 pr\u00e9c\u00e9demment, avant WordPress 7.1, le traitement des images s\u2019appuyait sur des biblioth\u00e8ques c\u00f4t\u00e9 serveur telles que GD et Imagick. Au fil du temps, ces biblioth\u00e8ques ont \u00e9t\u00e9 affect\u00e9es par diverses failles de s\u00e9curit\u00e9 li\u00e9es au d\u00e9codage des images.<\/p>\n Avec le traitement des images c\u00f4t\u00e9 client, le serveur n\u2019a plus besoin de GD ni d\u2019Imagick, car il re\u00e7oit des images pr\u00e9trait\u00e9es. Cela r\u00e9duit consid\u00e9rablement la quantit\u00e9 de code sensible ex\u00e9cut\u00e9 sur le serveur.<\/p>\n Un autre avantage en mati\u00e8re de s\u00e9curit\u00e9 r\u00e9side dans le fait que le traitement des images s\u2019effectue au sein d\u2019un environnement de navigateur isol\u00e9, \u00e0 l\u2019aide de WebAssembly dans un Web Worker.<\/p>\n Le traitement c\u00f4t\u00e9 client r\u00e9duit \u00e9galement le risque d\u2019attaques par d\u00e9ni de service (DoS), car la charge de calcul repose sur le client.<\/p>\n Pour traiter les images c\u00f4t\u00e9 client, WordPress s\u2019appuie sur Pour autoriser l\u2019acc\u00e8s \u00e0 En r\u00e9sum\u00e9, si l\u2019objectif principal du traitement multim\u00e9dia c\u00f4t\u00e9 client est d\u2019am\u00e9liorer les performances et l\u2019efficacit\u00e9 de la gestion des m\u00e9dias, cette nouvelle fonctionnalit\u00e9 apporte \u00e9galement des am\u00e9liorations notables en mati\u00e8re de s\u00e9curit\u00e9.<\/p>\n Le traitement des m\u00e9dias c\u00f4t\u00e9 client a fait l\u2019objet d\u2019une documentation exhaustive destin\u00e9e tant aux utilisateurs qu\u2019aux d\u00e9veloppeurs. Consultez les ressources suivantes pour plus de d\u00e9tails :<\/p>\n Introduites pour la premi\u00e8re fois dans WordPress 6.9<\/a>, les notes ont b\u00e9n\u00e9fici\u00e9 de nombreux ajouts et am\u00e9liorations qui en font un outil de collaboration plus complet.<\/p>\n Tout d\u2019abord, WordPress 7.1 ajoute la prise en charge du texte enrichi dans les notes<\/a>, ce qui les rend \u00ab plus expressives, plus claires \u00e0 lire et mieux adapt\u00e9es aux attentes des utilisateurs vis-\u00e0-vis d\u2019outils tels que Google Docs, Figma, GitHub et d\u2019autres \u00e9diteurs collaboratifs \u00bb.<\/p>\n Cela inclut les formats de base en ligne tels que le gras (Ctrl\/\u2318 B), l\u2019italique (Ctrl\/\u2318 I), les liens (Ctrl\/\u2318 K) et les emojis.<\/p>\n Vous pouvez d\u00e9sormais ajouter des notes en ligne en s\u00e9lectionnant des fragments de texte plut\u00f4t qu\u2019un bloc entier (commentaires en ligne<\/a>). Il est \u00e9galement possible d\u2019ajouter plusieurs notes<\/a> au m\u00eame bloc ou \u00e0 la m\u00eame s\u00e9lection de texte.<\/p>\n WordPress 7.1 introduit \u00e9galement les @mentions<\/a> pour taguer vos collaborateurs dans les notes, ce qui rend la fonctionnalit\u00e9 \u00ab Notes \u00bb plus similaire aux outils de collaboration courants. Lorsque vous tapez le caract\u00e8re @, un panneau s\u2019affiche avec la liste des utilisateurs de votre site pour faciliter la s\u00e9lection. Le destinataire de la mention recevra une notification par e-mail contenant un lien vers l\u2019article.<\/p>\n Une autre nouveaut\u00e9 concerne la partie visible des notes. Les notes longues sont d\u00e9sormais masqu\u00e9es par d\u00e9faut<\/a> afin de ne pas encombrer excessivement l\u2019espace \u00e0 l\u2019\u00e9cran. Un bouton \u00ab Afficher plus<\/strong>\/ Afficher moins<\/strong> \u00bb vous permet d\u2019afficher ou de masquer l\u2019int\u00e9gralit\u00e9 du texte.<\/p>\n Vous pouvez consulter la liste compl\u00e8te des nouvelles fonctionnalit\u00e9s des \u00ab Notes \u00bb incluses dans WordPress 7.1 dans la section \u00ab Notes \u00bb de la version 7.1 de WordPress<\/a>.<\/p>\n L\u2019interface utilisateur d\u2019administration b\u00e9n\u00e9ficie de plusieurs mises \u00e0 jour qui am\u00e9liorent la coh\u00e9rence de l\u2019interface et simplifient la navigation entre les \u00e9crans. Avant WordPress 7.1, la barre d\u2019administration n\u2019apparaissait pas dans l\u2019\u00e9diteur de publication ni dans l\u2019\u00e9diteur de site. Ce comportement manquait de coh\u00e9rence, car la barre d\u2019administration est l\u2019\u00e9l\u00e9ment le plus utilis\u00e9 de l\u2019interface d\u2019administration, et son omission dans les \u00e9diteurs n\u2019\u00e9tait pas consid\u00e9r\u00e9e comme optimale. \u00c0 partir de WordPress 7.1, ce comportement change, et la barre d\u2019outils d\u2019administration est d\u00e9sormais visible dans l\u2019\u00e9diteur de publication et l\u2019\u00e9diteur de site<\/a>.<\/p>\n Une autre am\u00e9lioration visant \u00e0 harmoniser l\u2019apparence de tous les espaces d\u2019administration consiste \u00e0 appliquer \u00e0 l\u2019\u00e9diteur de site le m\u00eame th\u00e8me de couleurs<\/a> que celui d\u00e9fini par l\u2019utilisateur sur sa page de param\u00e8tres. Avant la version 7.1, la barre lat\u00e9rale de l\u2019\u00e9diteur de site \u00e9tait syst\u00e9matiquement noire.<\/p>\n La colonne lat\u00e9rale de l\u2019\u00e9diteur b\u00e9n\u00e9ficie \u00e9galement d\u2019une mise \u00e0 jour avec WordPress 7.1. L\u2019ic\u00f4ne du site a \u00e9t\u00e9 supprim\u00e9e de la barre d\u2019outils de l\u2019\u00e9diteur et appara\u00eet d\u00e9sormais dans la barre d\u2019outils de WordPress.<\/p>\n Dans les versions pr\u00e9c\u00e9dentes, pour revenir \u00e0 l\u2019interface d\u2019administration de WordPress, vous deviez cliquer sur l\u2019ic\u00f4ne du site, qui n\u2019\u00e9tait pas techniquement un bouton \u00ab Retour \u00bb.<\/p>\n Par cons\u00e9quent, l\u2019ic\u00f4ne du site n\u2019appara\u00eet d\u00e9sormais que dans la barre d\u2019outils d\u2019administration, tandis qu\u2019un bouton \u00ab Retour \u00bb plus clair figure dans la barre d\u2019outils de l\u2019\u00e9diteur.<\/p>\n La palette de commandes a fait l\u2019objet de plusieurs ajouts et modifications<\/a> visant \u00e0 am\u00e9liorer sa facilit\u00e9 d\u2019utilisation. Tout d\u2019abord, les commandes disponibles ont \u00e9t\u00e9 r\u00e9parties en sections (r\u00e9centes, suggestions et r\u00e9sultats) afin de faciliter leur recherche.<\/p>\n La fen\u00eatre modale a \u00e9t\u00e9 redimensionn\u00e9e (512 px) et les commandes sont d\u00e9sormais plus faciles \u00e0 lire.<\/p>\n Un nouvel \u00e9l\u00e9ment \u00ab Identit\u00e9 \u00bb<\/strong> appara\u00eet d\u00e9sormais dans le menu \u00ab Conception \u00bb<\/strong> de l\u2019\u00e9diteur de site. L\u2019\u00e9cran correspondant vous permet de configurer le titre, le slogan<\/a>, le logo et l\u2019ic\u00f4ne<\/a> de votre site. Vous pouvez ainsi modifier les r\u00e9glages d\u2019identit\u00e9 de votre site sans quitter l\u2019\u00e9diteur de site.<\/p>\n Jusqu\u2019\u00e0 WordPress 7.0, il \u00e9tait possible d\u2019activer le d\u00e9filement infini pour l\u2019affichage en grille de la m\u00e9diath\u00e8que via le filtre \u00c0 partir de WordPress 7.1<\/a>, le filtre ` De plus, un nouveau r\u00e9glage disponible sur la page de profil utilisateur dans l\u2019interface d\u2019administration de WordPress vous permet de d\u00e9finir vos pr\u00e9f\u00e9rences en mati\u00e8re de d\u00e9filement infini.<\/p>\n WordPress enregistre le choix de l\u2019utilisateur dans les options utilisateur \u00e0 l\u2019aide de la cl\u00e9 m\u00e9ta \u00ab WordPress 7.1 introduit deux nouveaux blocs et apporte diverses am\u00e9liorations aux blocs existants. Un nouveau bloc \u00ab Liste de lecture \u00bb<\/strong><\/a> vous permet d\u2019int\u00e9grer une liste de lecture simple dans votre contenu.<\/p>\n Les utilisateurs peuvent personnaliser plusieurs aspects de l\u2019apparence du bloc, notamment la typographie, l\u2019arri\u00e8re-plan, les dimensions, la bordure et les \u00e9l\u00e9ments. Les commandes de style sp\u00e9cifiques \u00e0 ce bloc comprennent \u00ab Forme d\u2019onde et bouton de lecture<\/strong> \u00bb et \u00ab Arri\u00e8re-plan de la forme d\u2019onde<\/strong> \u00bb. La commande \u00ab Forme<\/strong> \u00bb vous permet de modifier la visualisation de la forme d\u2019onde audio<\/a>.<\/p>\n Le bloc Liste de lecture<\/a>\u00a0prend en charge tous les fichiers audio compatibles avec votre installation WordPress. Si vous ajoutez la prise en charge d\u2019un nouveau type MIME, le bloc en h\u00e9rite automatiquement.<\/p>\n Le nouveau bloc Onglets<\/a> int\u00e9gr\u00e9 au c\u0153ur du syst\u00e8me est con\u00e7u pour organiser le contenu en onglets. Chaque onglet peut contenir n\u2019importe quel bloc, ce qui le rend particuli\u00e8rement utile pour h\u00e9berger du contenu class\u00e9 par th\u00e8me, des FAQ ou des comparaisons de produits\/services.<\/p>\n Le bloc \u00ab HTML personnalis\u00e9 \u00bb a b\u00e9n\u00e9fici\u00e9 d\u2019une nouvelle am\u00e9lioration<\/a>. Vous pouvez d\u00e9sormais ajouter des blocs modifiables directement au sein du code HTML. Cela vous permet de combiner du code HTML statique et des blocs modifiables au sein d\u2019un m\u00eame extrait de code.<\/p>\n Bien qu\u2019ils puissent \u00eatre modifi\u00e9s, les blocs modifiables ne peuvent ni \u00eatre d\u00e9plac\u00e9s ni supprim\u00e9s, et il n\u2019est pas possible d\u2019ajouter des blocs suppl\u00e9mentaires via l\u2019\u00e9diteur visuel. Toutefois, le code sous-jacent reste enti\u00e8rement modifiable dans l\u2019\u00e9diteur de code.<\/p>\n Avant WordPress 7.1, votre contenu devait \u00eatre soit enti\u00e8rement en HTML statique, soit enti\u00e8rement compos\u00e9 de blocs. Vous pouvez d\u00e9sormais combiner librement du code HTML et des blocs, ce qui s\u2019av\u00e8re particuli\u00e8rement utile lors de la g\u00e9n\u00e9ration de contenu \u00e0 l\u2019aide de mod\u00e8les d\u2019IA.<\/p>\n Cette modification s\u2019accompagne de la possibilit\u00e9 d\u2019ajouter du code HTML statique aux variantes de blocs. Gr\u00e2ce \u00e0 la nouvelle prise en charge de la balise La valeur \u00ab Veuillez noter que \u00ab WordPress 7.0 a introduit un nouveau bloc \u00ab Ic\u00f4ne \u00bb<\/a> et une biblioth\u00e8que d\u2019ic\u00f4nes. Avec WordPress 7.1, le syst\u00e8me de gestion des ic\u00f4nes dispose d\u00e9sormais d\u2019une API publique, permettant d\u2019enregistrer, d\u2019afficher et de supprimer des ic\u00f4nes par programmation, ainsi que de les r\u00e9cup\u00e9rer via l\u2019API REST.<\/p>\n Pour enregistrer une ic\u00f4ne ou un ensemble d\u2019ic\u00f4nes, vous devez d\u2019abord enregistrer une collection d\u2019ic\u00f4nes en accrochant la nouvelle fonction ` Une collection poss\u00e8de un nom unique, qui la distingue des ic\u00f4nes du c\u0153ur du syst\u00e8me et des autres ensembles d\u2019ic\u00f4nes enregistr\u00e9s par des plugins tiers. Le nom de la collection doit commencer et se terminer par une lettre minuscule et peut contenir des lettres minuscules, des chiffres, des tirets et des traits de soulignement.<\/p>\n Le deuxi\u00e8me argument de la fonction est un tableau contenant le libell\u00e9 de la collection affich\u00e9 dans la biblioth\u00e8que d\u2019ic\u00f4nes, ainsi qu\u2019une description facultative.<\/p>\n Pour supprimer une collection, utilisez la fonction ` Pour enregistrer une ic\u00f4ne individuelle, utilisez la fonction ` Dans l\u2019exemple ci-dessus, nous avons enregistr\u00e9 une ic\u00f4ne \u00e0 l\u2019aide d\u2019une cha\u00eene SVG. Vous pouvez \u00e9galement enregistrer une ic\u00f4ne directement \u00e0 partir d\u2019un fichier Il est important de noter que le code SVG est valid\u00e9 \u00e0 l\u2019aide de Pour supprimer une ic\u00f4ne, vous pouvez utiliser la fonction La biblioth\u00e8que d\u2019ic\u00f4nes a \u00e9t\u00e9 mise \u00e0 jour en cons\u00e9quence et comporte d\u00e9sormais une colonne lat\u00e9rale affichant la liste des collections d\u2019ic\u00f4nes enregistr\u00e9es sur le site.<\/p>\n Le bloc \u00ab Ic\u00f4ne \u00bb a \u00e9galement \u00e9t\u00e9 mis \u00e0 jour. Par d\u00e9faut, le bloc affiche d\u00e9sormais l\u2019ic\u00f4ne \u00ab Info \u00bb au lieu d\u2019un espace vide comme dans les versions pr\u00e9c\u00e9dentes. De plus, deux nouvelles commandes dans la barre d\u2019outils du bloc vous permettent de retourner l\u2019ic\u00f4ne verticalement et horizontalement.<\/p>\n De nouveaux points de terminaison de l\u2019API REST en lecture seule ont \u00e9galement \u00e9t\u00e9 introduits pour acc\u00e9der \u00e0 des collections d\u2019ic\u00f4nes ou \u00e0 des ic\u00f4nes sp\u00e9cifiques.<\/p>\n Pour les collections d\u2019ic\u00f4nes, vous utiliserez les points de terminaison suivants :<\/p>\n Pour lire les ic\u00f4nes, vous utiliserez plut\u00f4t les points de terminaison suivants :<\/p>\n Un utilisateur disposant de la capacit\u00e9 \u00ab edit_posts \u00bb doit authentifier les requ\u00eates.<\/p>\n Pour un aper\u00e7u plus d\u00e9taill\u00e9 du syst\u00e8me d\u2019ic\u00f4nes dans WordPress 7.1, consultez la note de d\u00e9veloppement<\/a>.<\/p>\n Les cr\u00e9ateurs et les \u00e9diteurs disposent d\u00e9sormais de nouveaux outils de conception am\u00e9lior\u00e9s qui leur permettent de styliser les blocs de contenu sans avoir recours \u00e0 du CSS personnalis\u00e9. WordPress 7.1 introduit la prise en charge de Dans la colonne lat\u00e9rale des r\u00e9glages de bloc, un nouveau panneau \u00ab Arri\u00e8re-plan \u00bb dot\u00e9 de commandes distinctes pour \u00ab Image \u00bb, \u00ab Couleur \u00bb et \u00ab D\u00e9grad\u00e9 \u00bb vous permet d\u2019exp\u00e9rimenter diff\u00e9rentes combinaisons d\u2019images d\u2019arri\u00e8re-plan, de couleurs et de d\u00e9grad\u00e9s tout en \u00e9vitant les conflits.<\/p>\n Dans WordPress 7.1, la prise en charge des d\u00e9grad\u00e9s d\u2019arri\u00e8re-plan ( Une autre nouveaut\u00e9 de WordPress 7.1 qui ravira les concepteurs et les d\u00e9veloppeurs de th\u00e8mes est la prise en charge de la dimension \u00ab Les d\u00e9veloppeurs de th\u00e8mes peuvent ajouter la prise en charge de la largeur minimale via \u00ab Vous pouvez \u00e9galement activer la prise en charge de la largeur minimale de mani\u00e8re globale ou bloc par bloc :<\/p>\n Les d\u00e9veloppeurs de blocs peuvent de la m\u00eame mani\u00e8re ajouter la prise en charge de Ce r\u00e9glage est masqu\u00e9 par d\u00e9faut dans la colonne lat\u00e9rale, mais vous pouvez modifier le r\u00e9glage par d\u00e9faut \u00e0 l\u2019aide de WordPress 7.1 introduit la prise en charge des ombres de texte ( Document-Isolation-Policy<\/code> (DIP) pour autoriser l\u2019acc\u00e8s \u00e0 SharedArrayBuffer<\/code>.<\/p>\nDocument-Isolation-Policy<\/code> \u00bb. Safari et Firefox ne prennent pas en charge le pipeline WASM, bien que Safari prenne en charge le d\u00e9codage natif des formats HEIC\/HEIF<\/a> vers le format JPG.<\/p>\n![\"Flux](\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/08\/wp-71-client-side-media-upload-flow.png\")
2. Quelles sont les caract\u00e9ristiques techniques du traitement des m\u00e9dias c\u00f4t\u00e9 client ?<\/h3>\n
\n
@wordpress\/vips<\/code> \u00bb g\u00e8re le traitement c\u00f4t\u00e9 client \u00e0 l\u2019aide de la biblioth\u00e8que \u00ablibvips<\/code> \u00bb<\/a> compil\u00e9e en WebAssembly (wasm-vips<\/code>). Largement consid\u00e9r\u00e9e comme l\u2019une des biblioth\u00e8ques de traitement d\u2019images les plus rapides et les plus efficaces du march\u00e9, elle s\u2019ex\u00e9cute en parall\u00e8le au sein d\u2019un Web Worker, ce qui emp\u00eache le gel de l\u2019interface utilisateur et offre des performances nettement sup\u00e9rieures \u00e0 celles du JavaScript pur.<\/li>\n@wordpress\/upload-media<\/code> g\u00e8re le pipeline de t\u00e9l\u00e9versement, notamment la gestion des files d\u2019attente de t\u00e9l\u00e9versement, la concurrence des t\u00e9l\u00e9versements (jusqu\u2019\u00e0 5 t\u00e9l\u00e9versements simultan\u00e9s et 2 op\u00e9rations de traitement d\u2019images), les nouvelles tentatives automatiques, la reprise des t\u00e9l\u00e9versements interrompus et la prise en charge hors ligne.<\/li>\n@wordpress\/media-utils<\/code> \u00bb g\u00e8re le transport HTTP et les requ\u00eates API REST.<\/li>\n<\/ul>\n![\"Pr\u00e9sentation](\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/08\/wp-71-client-side-media-processing-architecture-overview.png\")
@wordpress\/video-conversion<\/code> \u00bb, qui int\u00e8gre la biblioth\u00e8que \u00abmediabunny<\/code> \u00bb<\/a> dans un Web Worker afin de convertir les GIF opaques (sans arri\u00e8re-plan transparent) en fichiers vid\u00e9o l\u00e9gers.<\/p>\nsideload<\/code>, finalize<\/code> et replace_file<\/code>) ainsi que deux nouveaux param\u00e8tres : generate_sub_sizes<\/code> et convert_format<\/code>.<\/p>\n3. Quels sont les avantages pour les utilisateurs de WordPress ?<\/h3>\n
\n
PHP memory limit exceeded<\/code>) qui survenaient auparavant lors du traitement de fichiers image volumineux.<\/li>\nlibvips<\/code> utilise des algorithmes de compression avanc\u00e9s qui produisent des images dont la taille est, en moyenne, inf\u00e9rieure d\u2019environ 15 % \u00e0 celle des images g\u00e9n\u00e9r\u00e9es par GD ou Imagick. Cela se traduit par des images plus l\u00e9g\u00e8res et des temps de chargement des pages plus rapides.<\/li>\n4. Quels changements pour les d\u00e9veloppeurs ?<\/h3>\n
wp_client_side_media_processing_enabled<\/code> \u00bb. En voici un exemple :<\/p>\nadd_filter( 'wp_client_side_media_processing_enabled', '__return_false' );<\/code><\/pre>\nwp_generate_attachment_metadata<\/code> ` s\u2019ex\u00e9cute deux fois : une premi\u00e8re fois lors du t\u00e9l\u00e9versement initial (create<\/code>) et une seconde fois apr\u00e8s l\u2019appel du point de terminaison de finalisation (update<\/code>). Les plugins utilisant ce filtre continueront de fonctionner comme pr\u00e9vu.<\/p>\nadd_image_size()<\/code> sont d\u00e9sormais g\u00e9n\u00e9r\u00e9es c\u00f4t\u00e9 client. Si un th\u00e8me d\u00e9finit une taille d\u2019image dont les dimensions sont identiques \u00e0 celles d\u2019une taille WordPress par d\u00e9faut, les images sont \u00ab d\u00e9dupliqu\u00e9es \u00bb en un seul fichier image enregistr\u00e9 sous les deux noms de taille.<\/p>\n5. Quels sont les avantages en mati\u00e8re de s\u00e9curit\u00e9 ?<\/h3>\n
SharedArrayBuffer<\/code><\/a>, un objet JavaScript qui permet au thread principal et aux Web Workers de partager le m\u00eame espace m\u00e9moire.<\/p>\nSharedArrayBuffer<\/code>, WordPress active l\u2019en-t\u00eate<\/a> \u00ab Document-Isolation-Policy: isolate-and-credentialless<\/code> \u00bb. Cela fournit un contexte d\u2019ex\u00e9cution isol\u00e9 pour l\u2019\u00e9diteur de blocs dans les navigateurs Chromium 137 (Chrome 137 et Edge 137).<\/p>\n6. Ressources officielles<\/h3>\n
\n
Am\u00e9liorations apport\u00e9es aux notes<\/h2>\n
![\"Les](\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/07\/wp-71-notes-formatting-options.png\")
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/07\/Screenshot-2026-07-20-alle-08.02.31.png\")
Am\u00e9liorations de l\u2019interface utilisateur d\u2019administration<\/h2>\n
\nBarre d\u2019administration persistante dans l\u2019\u00e9diteur d\u2019articles et l\u2019\u00e9diteur de site<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/07\/wp-71-admin-toolbar-in-post-editor.png\")
![\"The](\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/07\/wp-71-admin-toolbar-in-site-editor.png\")
Extension du th\u00e8me de couleurs de l\u2019utilisateur \u00e0 l\u2019\u00e9diteur de site<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/07\/wp-71-site-editor-ui.jpg\")
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/08\/editor-toolbar-in-wp-70.png\")
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/08\/wp-71-editor-toolbar.png\")
Cat\u00e9gories de commandes et am\u00e9lioration de l\u2019interface utilisateur de la palette de commandes<\/h3>\n
![\"Les](\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/07\/wp-71-command-palette-sections.png\")
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/07\/wp-71-command-palette-search-results.png\")
\u00c9cran \u00ab Identit\u00e9 \u00bb dans l\u2019\u00e9diteur de site<\/h3>\n
![\"R\u00e9glages](\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/07\/identity-settings.png\")
D\u00e9filement infini pour l\u2019affichage en grille de la m\u00e9diath\u00e8que<\/h3>\n
media_library_infinite_scrolling<\/code>, qui \u00e9tait d\u00e9fini par d\u00e9faut sur false<\/code>. Les d\u00e9veloppeurs pouvaient modifier ce r\u00e9glage par d\u00e9faut en ajoutant la ligne suivante \u00e0 leurs extensions :<\/p>\nadd_filter( 'media_library_infinite_scrolling', '__return_true' );<\/code><\/pre>\nmedia_library_infinite_scrolling<\/code> ` est d\u00e9fini sur ` true<\/code> `, ce qui signifie que le d\u00e9filement infini dans la vue en grille de la m\u00e9diath\u00e8que est activ\u00e9 par d\u00e9faut pour tous les utilisateurs.<\/p>\n![\"Option](\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/07\/wp-71-disable-infinite-scrolling.png\")
infinite_scrolling<\/code> \u00bb. Vous pouvez r\u00e9cup\u00e9rer la pr\u00e9f\u00e9rence de l\u2019utilisateur de la mani\u00e8re suivante :<\/p>\n$infinite_scrolling = get_user_option( 'infinite_scrolling', $user_id );<\/code><\/pre>\nBlocs principaux et am\u00e9liorations apport\u00e9es aux blocs<\/h2>\n
\nNouveaux blocs \u00ab Liste de lecture \u00bb et \u00ab Onglets \u00bb<\/h3>\n
![\"Le](\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/07\/wp-71-playlist-block.png\")
![\"Personnalisation](\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/07\/wp-71-playlist-block-customized.png\")
![\"WordPress](\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/07\/wp-71-tabs-block.jpg\")
Blocs modifiables \u00e0 l\u2019int\u00e9rieur du bloc \u00ab HTML personnalis\u00e9 \u00bb<\/h3>\n
![\"Le](\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/08\/wp-71-custom-html-block.png\")
innerContent<\/code>, vous pouvez enregistrer une variante du bloc \u00ab Code HTML \u00bb comme illustr\u00e9 dans l\u2019exemple ci-dessous :<\/p>\nwp.blocks.registerBlockVariation( 'core\/html', {\n\tname: 'custom-image-card',\n\ttitle: 'Custom image card',\n\tdescription: 'A custom HTML block with static header\/footer and an editable image.',\n\tinnerContent: [ \n\t\t'<h2>Static heading<\/h2>\\n', \n\t\tnull, \n\t\t'\\n<footer>Static footer<\/footer>' \n\t],\n\tinnerBlocks: [ \n\t\t[ \n\t\t\t'core\/image', \n\t\t\t{ \n\t\t\t\tid: 419,\n\t\t\t\tsizeSlug: 'medium',\n\t\t\t\tlinkDestination: 'none',\n\t\t\t\turl: 'https:\/\/example.com\/wp-content\/uploads\/...',\n\t\t\t\talt: ''\n\t\t\t} \n\t\t] \n\t],\n} );<\/code><\/pre>\nnull<\/code> \u00bb dans \u00ab innerContent<\/code> \u00bb sert d\u2019espace r\u00e9serv\u00e9 pour le bloc \u00ab Image \u00bb.<\/p>\ninnerContent<\/code> \u00bb n\u2019est disponible que pour le bloc \u00ab HTML personnalis\u00e9 \u00bb. Son application aux variantes d\u2019autres blocs n\u2019aura aucun effet.<\/p>\nAm\u00e9liorations apport\u00e9es au syst\u00e8me d\u2019ic\u00f4nes SVG<\/h2>\n
Enregistrement et d\u00e9senregistrement des ic\u00f4nes<\/h3>\n
wp_register_icon_collection()<\/code> ` \u00e0 l\u2019action `init` :<\/p>\nfunction custom_icons_register_icon_collection() {\n\twp_register_icon_collection(\n\t\t'my-icon-set',\n\t\tarray(\n\t\t\t'label' => __( 'My awesome icons', 'my-plugin' ),\n\t\t\t'description' => __( 'My personal set of icons.', 'my-plugin' ),\n\t\t)\n\t);\n}\nadd_action( 'init', 'custom_icons_register_icon_collection' );<\/code><\/pre>\nwp_unregister_icon_collection()<\/code> `. La suppression d\u2019une collection entra\u00eene automatiquement la suppression de toutes les ic\u00f4nes qui y sont associ\u00e9es.<\/p>\nwp_register_icon()<\/code> `, comme le montre l\u2019exemple suivant :<\/p>\nwp_register_icon(\n\t'my-icon-set\/motorbike',\n\tarray(\n\t\t'label' => __( 'Motorbike', 'my-plugin' ),\n\t\t'content' => '<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\">...<\/svg>',\n\t)\n);<\/code><\/pre>\n.svg<\/code>:<\/p>\nwp_register_icon(\n\t'my-icon-set\/motorbike',\n\tarray(\n\t\t'label' => __( 'Motorbike', 'my-plugin' ),\n\t\t'file_path' => plugin_dir_path( __FILE__ ) . 'icons\/motorbike.svg',\n\t)\n);<\/code><\/pre>\nwp_kses<\/code>, et que seuls les \u00e9l\u00e9ments <svg><\/code>, <path><\/code> et <polygon><\/code> sont actuellement autoris\u00e9s. Tous les autres \u00e9l\u00e9ments sont filtr\u00e9s, bien que la liste d’autorisations puisse \u00eatre \u00e9tendue \u00e0 l\u2019avenir pour inclure des \u00e9l\u00e9ments et attributs suppl\u00e9mentaires.<\/p>\nwp_unregister_icon()<\/code>.<\/p>\nMises \u00e0 jour de la biblioth\u00e8que d\u2019ic\u00f4nes et des blocs<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/07\/wp-71-icon-collection.png\"){kind=icon}
![\"Une](\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/07\/wp-71-custom-icon-collection.png\"){kind=icon}
![\"R\u00e9glages](\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/07\/wp-71-icon-block.png\"){kind=icon}
Nouveaux points de terminaison de l\u2019API REST pour les ic\u00f4nes<\/h3>\n
GET \/wp\/v2\/icon-collections\nGET \/wp\/v2\/icon-collections\/<collection><\/code><\/pre>\nGET \/wp\/v2\/icons - Introduced with WordPress 7.0.\nGET \/wp\/v2\/icons\/<collection>\nGET \/wp\/v2\/icons\/<collection>\/<name><\/code><\/pre>\nNouveaux outils de conception<\/h2>\n
\nPrise en charge des d\u00e9grad\u00e9s d\u2019arri\u00e8re-plan<\/h3>\n
background.gradient<\/code><\/a> ainsi qu\u2019un nouveau contr\u00f4le de l\u2019interface d\u2019administration pour les d\u00e9grad\u00e9s d\u2019arri\u00e8re-plan.<\/p>\n![\"WordPress](\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/08\/wp-71-background-gradient.jpg\")
background.gradient<\/code> ) est activ\u00e9e par d\u00e9faut pour les blocs \u00ab Groupe \u00bb, \u00ab Accord\u00e9on \u00bb, \u00ab Citation en exergue \u00bb, \u00ab Contenu d\u2019article \u00bb et \u00ab Citation \u00bb. Les d\u00e9veloppeurs de th\u00e8mes peuvent ajouter la prise en charge des d\u00e9grad\u00e9s d\u2019 background.gradient<\/code> dans le fichier block.json en ajoutant une propri\u00e9t\u00e9 \u00ab gradient \u00bb sous \u00ab styles.background \u00bb ou au cas par cas pour chaque bloc, comme indiqu\u00e9 dans le code suivant :<\/p>\n{\n\t\"styles\": {\n\t\t\"background\": {\n\t\t\t\"gradient\": \"linear-gradient( 135deg, #1e3c72 0%, #2a5298 100% )\"\n\t\t},\n\t\t\"blocks\": {\n\t\t\t\"core\/group\": {\n\t\t\t\t\"background\": {\n\t\t\t\t\t\"gradient\": \"linear-gradient( 135deg, #f5f7fa 0%, #c3cf8d 100% )\"\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\nPrise en charge de la largeur minimale<\/h3>\n
minWidth<\/code> \u00bb<\/a>. Celle-ci vient s\u2019ajouter \u00e0 la prise en charge existante des dimensions \u00ab height<\/code> \u00bb, \u00ab minHeight<\/code> \u00bb et \u00ab width<\/code> \u00bb, compl\u00e9tant ainsi l\u2019ensemble des outils de conception pour les dimensions.<\/p>\ntheme.json<\/code> \u00bb, soit en activant les outils d\u2019apparence, soit en ajoutant le champ \u00ab dimensions.minWidth<\/code> \u00bb dans les r\u00e9glages :<\/p>\n{\n\t\"settings\": {\n\t\t\"dimensions\": {\n\t\t\t\"minWidth\": true\n\t\t}\n\t}\n}<\/code><\/pre>\n![\"Contr\u00f4le](\"https:\/\/kinsta.com\/wp-content\/uploads\/2026\/08\/wp-71-min-width.jpg\")
{\n\t\"styles\": {\n\t\t\"dimensions\": {\n\t\t\t\"minWidth\": \"400px\"\n\t\t},\n\t\t\"blocks\": {\n\t\t\t\"core\/group\": {\n\t\t\t\t\"dimensions\": {\n\t\t\t\t\t\"minWidth\": \"400px\"\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\nminWidth<\/code> \u00e0 block.json<\/code>:<\/p>\n{\n\t\"supports\": {\n\t\t\"dimensions\": {\n\t\t\t\"minWidth\": true\n\t\t}\n\t}\n}<\/code><\/pre>\n__experimentalDefaultControls<\/code>. Dans \u00ab Styles globaux \u00bb, ce r\u00e9glage est visible par d\u00e9faut.<\/p>\nPrise en charge des ombres de texte dans les \u00ab Styles globaux \u00bb<\/h3>\n
text-shadow<\/code> ) dans les \u00ab Styles globaux \u00bb<\/a>. Auparavant, vous auriez d\u00fb utiliser une extension ou recourir \u00e0 du CSS personnalis\u00e9.<\/p>\n