Wordpress & Woocommerce · 4 min de lecture

WordPress 7.1 « Mary Lou » : styles responsive, nouvel éditeur d’images et traitement des médias dans le navigateur

WordPress 7.1 « Mary Lou » : styles responsive, nouvel éditeur d’images et traitement des médias dans le navigateur

Sortie le 19 août et déjà corrigée trois fois depuis, WordPress 7.1 « Mary Lou » est maintenant la version que l’on installe par défaut. Au-delà des nouveaux blocs, elle change deux choses qui comptent au quotidien : on peut enfin régler l’affichage mobile sans CSS, et le traitement des images quitte en partie le serveur.

Des styles différents selon la taille d’écran

C’était la demande la plus fréquente des intégrateurs qui passent d’un constructeur de pages à l’éditeur de blocs. Avec 7.1, on peut définir des styles par taille d’écran dans les styles globaux comme dans les réglages d’un bloc. L’éditeur de site permet aussi de prévisualiser la mise en page à plusieurs largeurs.

Pour les développeurs de thèmes, theme.json accepte désormais ces styles responsive, avec des points de rupture mobile et tablette propres au thème, ainsi que les pseudo-états :hover, :focus, :focus-visible et :active. Le bloc Bouton en profite : on règle les états survol, focus et actif pour un bouton ou pour tous.

Autre changement de fond : l’éditeur d’articles est maintenant entièrement chargé dans une iframe, quel que soit le thème, comme l’éditeur de site. Les unités de viewport et les media queries ciblent donc directement le canevas. Si vous injectez du CSS d’administration qui débordait jusqu’ici dans l’éditeur, il faut le revoir.

Un vrai éditeur d’images, et moins de travail pour le serveur

L’outil de recadrage intégré est remplacé par une fenêtre dédiée qui regroupe recadrage libre ou par ratio, retournement horizontal et vertical, rotation précise et édition des métadonnées. Le bouton Recadrer ouvre toujours cet outil.

Le changement le plus intéressant pour l’hébergement se passe au moment de l’envoi des fichiers. La compression, le redimensionnement et la génération des miniatures se font dans le navigateur, grâce à une version WebAssembly de la bibliothèque libvips. Résultat : moins de charge serveur, et moins d’erreurs de mémoire PHP ou de délai dépassé quand un client envoie une série de photos lourdes. WordPress 7.1 ajoute aussi :

  • la prise en charge native de l’AVIF, du HEIC et des gain maps HDR ;
  • une conversion optionnelle des GIF en vidéo, plus légère ;
  • des barres de progression et des nouvelles tentatives automatiques à l’envoi ;
  • le défilement infini par défaut dans la médiathèque, avec une option de pagination par utilisateur.

Sur un site vitrine qui publie beaucoup de photos, testez l’envoi depuis le navigateur des rédacteurs, et vérifiez que vos extensions d’optimisation d’images ne refont pas le même travail derrière.

Le chargement spéculatif réglable sans extension

Le chargement spéculatif précharge la page suivante quand le visiteur s’apprête à cliquer. Par défaut, WordPress utilise le mode prefetch avec une impatience conservative. Depuis 7.1, on peut changer ces valeurs par des constantes ou des variables d’environnement, sans extension. Comme le note 365i, la bascule automatique vers moderate quand un cache est détecté, évoquée dans la feuille de route, n’a pas été livrée.

// wp-config.php, avant la ligne "That's all, stop editing!"
define( 'WP_SPECULATIVE_LOADING_DEFAULT_MODE', 'prerender' );       // prefetch (défaut) ou prerender
define( 'WP_SPECULATIVE_LOADING_DEFAULT_EAGERNESS', 'moderate' );  // conservative (défaut), moderate ou eager

Avec WP-CLI : wp config set WP_SPECULATIVE_LOADING_DEFAULT_EAGERNESS moderate. Attention : en mode moderate ou eager, des pages peuvent être générées sans être visitées. Sans cache de pages, c’est une charge supplémentaire pour le serveur. Excluez aussi les URL qui déclenchent une action (panier, recherche, compteurs) avec le filtre wp_speculation_rules_href_exclude_paths. Le chargement spéculatif est désactivé pour les utilisateurs connectés et ne fonctionne en pratique que sur Chrome et Edge.

Les autres nouveautés à connaître

  • Notes : les annotations collaboratives peuvent viser un passage de texte précis, avec texte enrichi et mentions @ qui notifient les collègues.
  • Nouveaux blocs : Playlist (pistes audio avec forme d’onde optionnelle), Onglets et Icône.
  • API d’icônes SVG rendue publique, avec wp_register_icon_collection(), wp_register_icon() et wp_get_icon().
  • Abilities API enrichie : cycle d’exécution filtrable, validation personnalisée et découverte partagée, utile pour l’automatisation et les outils d’IA.
  • La barre d’administration s’affiche maintenant dans tous les éditeurs.

Ce qu’il faut retenir

  • WordPress 7.1 permet des styles par taille d’écran, dans l’interface et dans theme.json.
  • L’éditeur d’articles est entièrement en iframe : vérifiez le CSS d’administration de vos thèmes et extensions.
  • Les images sont traitées dans le navigateur (libvips en WebAssembly), avec AVIF et HEIC en natif.
  • Le chargement spéculatif se règle par constante ; ne passez en moderate que si un cache de pages est en place.
  • Installez directement la dernière version mineure de la branche 7.1, qui contient les correctifs de sécurité.

Photo d’illustration : freddie marriage fredmarriage, Wikimedia Commons, CC0.

  1. WordPress 7.1 « Mary Lou » – WordPress.orgwordpress.org
  2. WordPress 7.1 speculative loading and hosting – 365i365i.co.uk

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Demander un devisÉcrire