WordPress 6.3 « Lionel » est disponible ! Il s’agit de la dernière version majeure de la phase 2 de la feuille de route de WordPress.

Au cours de cette deuxième phase, le développement s’est principalement concentré sur l’éditeur de site, a augmenté ses fonctionnalités et a amélioré l’interface et la convivialité.

Désormais, les créateurs de sites peuvent concevoir des mises en page et gérer le contenu dans la même interface, sans avoir à passer d’une zone d’administration à l’autre et sans avoir à écrire une seule ligne de code.

Avec WordPress 6.3, 10 versions de l’extension Gutenberg sont fusionnées dans le cœur, et si vous n’utilisez pas Gutenberg sur votre site web, vous verrez beaucoup de changements dans l’interface de l’éditeur de site.

Avec WordPress 6.3, l’expérience d’édition a été considérablement améliorée. Plusieurs changements techniques ont affecté l’éditeur de site, résultant en une nouvelle façon d’explorer les thèmes basés sur des blocs et d’utiliser l’éditeur de site lui-même. Navigation améliorée, mode sans distraction, prévisualisation des blocs basés sur des thèmes, révision des styles et des modèles, nouvelle palette de commandes, et bien plus encore.

Il y a beaucoup à dire sur WordPress 6.3. Alors, n’attendez plus et découvrez les nouveautés de la version finale de la phase 2.

Découvrez notre guide vidéo sur WordPress 6.3 :

Navigation améliorée dans l’éditeur de site

Avec WordPress 6.3, la navigation dans l’éditeur de site a été considérablement améliorée avec l’ajout de nouveaux points d’entrée vers différentes zones de l’éditeur. Avant la version 6.3, ces sections de l’administrations étaient accessibles à partir de points d’accès placés dans différents menus et écrans d’administration. Le résultat de ces changements est une expérience d’édition plus facile et plus cohérente.

L’image suivante compare le menu de navigation de l’éditeur dans WordPress 6.2 et 6.3.

Navigation de l'éditeur de site dans WordPress 6.2 vs 6.3
Navigation de l’éditeur de site dans WordPress 6.2 vs 6.3

La première chose que vous remarquerez dans l’image ci-dessus est la présence de deux boutons dans le coin supérieur droit de la colonne latérale de l’éditeur. Le bouton Voir le site apparaît au survol de la souris et permet d’accéder rapidement à l’interface de votre site WordPress. Il s’agit d’un petit ajout utile qui vous permet d’accéder rapidement aux pages du site quel que soit l’endroit où vous vous trouvez dans l’éditeur de site lorsque le menu Navigation est ouvert.

Le bouton Ouvrir la palette de commandes (l’icône de la lentille) permet d’accéder à une nouvelle fonctionnalité de WordPress 6.3, la Palette de commandes (plus d’informations à ce sujet ci-dessous).

Boutons Afficher le site et Ouvrir la palette de commandes dans l'éditeur de site
Boutons Afficher le site et Ouvrir la palette de commandes dans l’éditeur de site

Le nouvel éditeur Navigation comprend les éléments suivants.

Navigation

Une fois que vous avez créé un menu de navigation, celui-ci apparaît dans le menu Navigation de l’éditeur de site. Vous pouvez y déplacer les éléments du menu vers le haut ou vers le bas ou les supprimer d’une liste déroulante. Vous pouvez également faire glisser les éléments pour modifier l’ordre du menu.

Menus de navigation dans l'éditeur de site
Menus de navigation dans l’éditeur de site

En cliquant sur un élément de menu, vous accédez aux détails de la page. Vous pouvez également y modifier le contenu et la présentation de la page (voir ci-dessous).

Styles

Le menu Styles vous permet d’accéder aux variations de style en mode navigation. Vous pouvez prévisualiser les styles disponibles, en appliquer un et le personnaliser.

Menu Styles dans WordPress 6.3
Menu Styles dans WordPress 6.3

L’icône en forme d’œil lance le livre des styles, une fonctionnalité introduite avec la version 6.2 qui permet de prévisualiser les blocs disponibles avec les différents styles appliqués sans quitter l’interface de l’éditeur.

Vous pouvez facilement accéder au cahier des styles à partir du panneau Styles de l'éditeur de site
Vous pouvez facilement accéder au cahier des styles à partir du panneau Styles de l’éditeur de site

Pages

L’élément de menu Pages vous permet d’accéder aux 10 dernières pages mises à jour du site ainsi qu’à plusieurs fonctions d’édition. Dans cette section, vous pouvez créer de nouvelles pages, modifier le contenu et la mise en page des pages existantes, accéder aux détails des pages, etc.

L’ajout le plus intéressant est qu’il est désormais possible de créer de nouvelles pages sans quitter l’interface de l’éditeur.

Lorsque vous cliquez sur l’icône + dans le panneau Navigation, une nouvelle fenêtre modale au milieu de la page vous permet de définir un titre pour la nouvelle page, et affiche également une infobulle avec des suggestions pour votre titre.

Rédiger une nouvelle page dans WordPress 6.3
Rédiger une nouvelle page dans WordPress 6.3

Lorsque vous cliquez sur Créer un brouillon, vous êtes redirigé vers l’éditeur d’articles avec une nouvelle page chargée.

Sous Pages, vous pouvez également modifier le contenu des pages directement à partir de l’éditeur de site.

Menu Pages dans WordPress 6.3
Menu Pages dans WordPress 6.3

Vous pouvez maintenant modifier le contenu et le style de la page au même endroit. Cela vous donne un plus grand contrôle sur tous les aspects de la page et devrait améliorer de manière significative l’expérience d’édition.

En mode édition, vous avez la possibilité de basculer facilement entre l’éditeur de pages et l’éditeur de modèles. Cela devrait éviter toute confusion sur ce que vous êtes en train de modifier et vous permettre de déterminer si vos modifications doivent uniquement affecter la page actuelle ou s’appliquer également aux autres pages qui utilisent le même modèle.

Le même écran affiche également les détails de la page.

Détails de la page dans l'éditeur de site
Détails de la page dans l’éditeur de site

Les détails comprennent actuellement :

  • État
  • Slug
  • Modèle
  • Parent
  • Mots
  • Temps de lecture
  • Dernière modification

Modèles

Cet écran vous permet d’accéder aux modèles de page. La structure de l’écran Modèles ne change pas beaucoup. Cependant, avec WordPress 6.3, lorsque vous créez un nouveau modèle, une nouvelle fenêtre modale vous propose une liste de pages à choisir pour votre modèle.

Une nouvelle fenêtre modale fournit une liste de pages par défaut à choisir lors de la création d'un nouveau modèle
Une nouvelle fenêtre modale fournit une liste de pages par défaut à choisir lors de la création d’un nouveau modèle

Dans un second temps, une nouvelle fenêtre modale fournit une liste de modèles de blocs que vous pouvez utiliser pour construire votre modèle.

Choisissez un modèle dans le processus de création du modèle
Choisissez un modèle dans le processus de création du modèle

Compositions

Nommée Bibliothèque dans une précédente itération, la section d’administration des compositions reflète un certain nombre de changements notables qui impliquent le système des compositions de blocs. Il ne s’agit pas seulement de modifications de l’interface utilisateur. Il s’agit d’une refonte générale de l’ensemble de l’architecture des compositions de blocs.

L'écran Compositions dans WordPress 6.3
L’écran Compositions dans WordPress 6.3

Dans la section d’administration des compositions, vous serez en mesure de gérer les parties de modèles et les compositions. Vous trouverez ici un menu qui vous donne accès aux parties de modèles et aux compositions de blocs divisés par catégorie. Une icône de cadenas identifie les compositions de thèmes qui ne peuvent pas être modifiés par l’utilisateur.

Parties de modèle et compositions de thème dans la nouvelle section Compositions de l'éditeur de site
Parties de modèle et compositions de thème dans la nouvelle section Compositions de l’éditeur de site

Dans cette section, vous pouvez créer de nouvelles parties de modèles et de compositions de blocs personnalisés et les gérer en même temps que les modèles de votre thème.

Créer de nouvelles parties de modèle et de nouvelles compositions de blocs dans WordPress 6.3
Créer de nouvelles parties de modèle et de nouvelles compositions de blocs dans WordPress 6.3

Lorsque vous cliquez sur le bouton Créer une composition, une nouvelle fenêtre modale vous permet d’attribuer un nom à votre composition et de définir le type de composition que vous allez créer, synchrone ou non synchrone.

Création d'une composition synchronisée dans WordPress 6.3
Création d’une composition synchronisée dans WordPress 6.3

Une fois que vous avez créé au moins une composition de bloc personnalisé, vous pouvez y accéder à partir de Mes compositions, qui apparaît en haut du menu Compositions.

Mes compositions dans WordPress 6.3
Mes compositions dans WordPress 6.3

Vous pouvez sélectionner votre composition de bloc et accéder à un nouveau panneau où vous pouvez voir les détails de la composition. En déplaçant la poignée vers la droite ou la gauche, vous pouvez prévisualiser la composition dans différentes résolutions et vérifier sa réactivité.

La section Détails affiche l’état de synchronisation de la composition actuelle.

Prévisualisation d'une composition de bloc personnalisé dans WordPress 6.3
Prévisualisation d’une composition de bloc personnalisé dans WordPress 6.3

En bas du menu Modèles, vous trouverez également deux liens : Gérer toutes les parties de modèle et Gérer toutes mes compositions. Ces liens vous permettent d’accéder directement aux parties du modèle et aux compositions personnalisées.

Il s’agit de la nouvelle interface d’administration des compositions dans l’éditeur de site. Découvrons maintenant les changements apportés à la structure et aux fonctionnalités du système de compositions de blocs.

Un nouveau système de compositions de blocs

À partir de WordPress 6.3 (et Gutenberg 16.1) :

  • Les blocs réutilisables ont été renommés en compositions synchronisées,
  • les compositions de blocs normaux sont maintenant nommés Compositions non synchronisées,
  • le type de publication personnalisé wp_block a été étendu pour prendre en charge les champs personnalisés et un nouveau champ méta wp_block_sync_status a été ajouté pour stocker l’état de synchronisation d’une composition,
  • une propriété source a été ajoutée au schéma des compositions de bloc et à la réponse pour distinguer les compositions du cœur et les compositions d’utilisateur,
  • l’API REST a été étendue avec un nouvel attribut
wp-block-sync-status
Le champ méta wp_block_sync_status est utilisé pour stocker l’état de synchronisation d’une composition de bloc

Il est désormais plus clair que toutes les modifications apportées à une composition synchronisée seront appliquées à toutes les occurrences de ce bloc sur l’ensemble de votre site web.

À l’inverse, les modifications apportées à une composition de bloc non synchronisée n’affecteront que cette instance spécifique de la composition et ne s’appliqueront pas aux autres instances que vous avez pu ajouter à d’autres articles ou pages de votre site web.

Grâce au nouveau système de gestion des compositions, vous pouvez désormais créer des compositions de blocs synchronisés et non synchronisés directement à partir de l’éditeur du site ou de l’article, alors qu’auparavant il n’était possible que de créer des blocs réutilisables (désormais des compositions synchronisées).

Pour essayer cette nouvelle fonctionnalité dans l’éditeur d’articles, ouvrez votre tableau de bord WordPress et allez dans Articles -> Ajouter. Une fois sur place, créez un nouveau groupe de blocs ou sélectionnez simplement les blocs que vous souhaitez ajouter à votre composition de bloc. Sélectionnez ensuite Créer une composition/un bloc réutilisable dans le menu contextuel de la barre d’outils des blocs.

Créer une composition/bloc réutilisable dans l'éditeur d'articles
Créer une composition/bloc réutilisable dans l’éditeur d’articles

En outre, dans l’éditeur de site, un bouton Créer une composition vous permet de créer une nouvelle partie de modèle ou une nouvelle composition.

Créer une nouvelle composition dans l'éditeur de site
Créer une nouvelle composition dans l’éditeur de site

En cliquant sur Créer une partie de modèle, vous ouvrez une fenêtre modale/popup qui vous permet d’ajouter un nom à votre partie de modèle et la zone de la page à laquelle la partie de modèle est destinée.

Créer une partie de modèle dans l'éditeur de site
Créer une partie de modèle dans l’éditeur de site

Lorsque vous cliquez sur Créer une composition, une autre fenêtre modale/popup vous permet de donner un nom à votre composition et de choisir de créer une composition synchronisée ou non synchronisée.

Créer une composition dans l'éditeur de site
Créer une composition dans l’éditeur de site

Confirmez et construisez votre composition ou votre partie de modèle dans l’éditeur de site.

Construire une composition de bloc dans l'éditeur de site
Construire une composition de bloc dans l’éditeur de site

Une fois que vous êtes satisfait de vos modifications, enregistrez la composition de bloc et retournez dans l’éditeur de site. Ouvrez la section Composition et cliquez sur Gérer toutes mes compositions. L’écran Compositions affiche votre nouvelle composition de bloc personnalisé.

L'écran Compositions dans WordPress 6.3
L’écran Compositions dans WordPress 6.3

Les compositions de blocs tirent également profit des contrôles de ratio d’aspect du bloc Image. Désormais, si vous définissez un rapport d’aspect pour une image, il sera conservé lorsque vous remplacerez l’image par une autre de dimensions différentes. Cela sera particulièrement utile avec les compositions de blocs car vous n’aurez plus à vous soucier des dimensions de l’image lorsque vous remplacerez des images dans des compositions de blocs.

Le contrôle du rapport hauteur/largeur du bloc d'images
Le contrôle du rapport hauteur/largeur du bloc d’images

Pour un aperçu plus approfondi des changements apportés au système de compositions de blocs, consultez les PR #51078, #51144, et #50028.

Exposition des révisions de style dans l’éditeur de site

L’éditeur de site affiche désormais un historique des révisions, ce qui vous permet de parcourir les modifications et d’en choisir une à restaurer.

Pour accéder à l’historique des révisions, cliquez sur le nouveau bouton Révisions dans le panneau Styles.

Accéder à l'historique des révisions dans WordPress 6.3
Accéder à l’historique des révisions dans WordPress 6.3

Ce panneau fournit une liste des révisions dans une chronologie. Il fournit également le nom de l’auteur de chaque révision ainsi que la date et l’heure de chaque révision dans une infobulle. Vous pouvez prévisualiser toutes les révisions et choisir celle que vous souhaitez restaurer.

Révisions de style dans WordPress 6.3
Révisions de style dans WordPress 6.3

Vous pouvez naviguer à travers les révisions dans l’interface des styles globaux, prévisualiser et restaurer votre contenu à tout moment.

Le développement des révisions ne s’arrête pas là. Au fur et à mesure que nous avançons dans la phase 3, les révisions devraient être affectées par de nouveaux ajouts et améliorations qui devraient encore améliorer leur facilité d’utilisation et débloquer de nouvelles fonctionnalités.

La palette de commandes

La palette de commandes est une nouvelle fonctionnalité qui vous permet d’exécuter des actions fréquemment utilisées, telles que le passage à d’autres pages ou modèles dans l’éditeur, à l’aide de commandes.

Dans l’éditeur de site, cliquez sur l’icône de la lentille ou appuyez sur cmd + k (ctrl + k sous Windows et Linux). La palette de commandes s’ouvre alors.

Lorsque vous commencez à saisir une commande, la palette de commandes vous propose un choix de commandes. Vous disposez ainsi d’un moyen rapide d’effectuer des tâches ou d’accéder à des zones spécifiques de l’éditeur de site.

La palette de commandes dans WordPress 6.3
La palette de commandes dans WordPress 6.3

La première implémentation de cette fonctionnalité apporte une fonction de recherche rapide et quelques actions telles que la navigation dans l’éditeur de site, la création d’un nouvel article ou d’une nouvelle page, le basculement des éléments de l’interface utilisateur, la réinitialisation ou la suppression d’un modèle ou d’une partie de modèle, et bien d’autres choses encore. D’autres commandes devraient être ajoutées dans les prochaines itérations.

Le nouvel outil offre une infinité de possibilités d’utilisation. Par exemple, la palette de commandes peut être nécessaire pour afficher des options de conception pour des articles ou des pages spécifiques.

Vous pouvez également enregistrer vos commandes personnalisées grâce à la nouvelle API de la palette de commandes qui permet de rendre, d’enregistrer et de désenregistrer des commandes.

Il existe différentes façons d’enregistrer des commandes en fonction du type de commande que vous enregistrez.

  • Commandes statiques : Les développeurs peuvent enregistrer des commandes statiques personnalisées à l’aide de l’action wp.data.dispatch( wp.commands.store ).registerCommand ou du hook React wp.data.useCommand.
  • Commandes dynamiques : Ces commandes sont incluses dans la liste des commandes en fonction du terme de recherche saisi par l’utilisateur dans le champ de saisie de la palette de commandes ou lorsqu’une commande n’est disponible que si certaines conditions sont remplies.
  • Commandes contextuelles : Ces commandes sont prioritaires dans des contextes spécifiques, ce qui signifie qu’elles apparaissent automatiquement dans le bon contexte (par exemple, lorsque vous modifiez un modèle). Les commandes Réinitialiser le modèle et Supprimer le modèle sont des exemples de commandes contextuelles. Pour l’instant, deux contextes ont été mis en place :
    • site-editor : Ce contexte est défini lorsque vous naviguez dans l’éditeur de site
    • site-editor-edit : ce contexte est activé lorsque vous modifiez quelque chose (modèle, partie de modèle ou page) dans l’éditeur

Vous pouvez obtenir la liste des commandes disponibles sur wp.data.select( wp.commands.store ).getCommands() dans la console du navigateur.

Liste des commandes dans WordPress 6.3
Liste des commandes dans WordPress 6.3

Initialement disponible dans les éditeurs d’articles et de sites, la palette de commandes devrait être étendue à l’ensemble de l’administration dans le futur.

Pour un aperçu de la palette de commandes pour les développeurs, consultez la demande de rappel.

Fonctionnalités supplémentaires et améliorations de l’éditeur de site

En plus des fonctionnalités et des améliorations discutées dans les sections précédentes, WordPress 6.3 nous apporte :

Prévisualisation du thème dans l’éditeur de site

A partir de la version 6.3, un nouveau paramètre theme_preview permet à chaque thème basé sur des blocs d’être chargé dans l’éditeur de site et d’être prévisualisé avant d’être activé.

Prévisualisation du thème TT1 Blocks dans l'éditeur de site
Prévisualisation du thème TT1 Blocks dans l’éditeur de site

Pour prévisualiser un thème de bloc, accédez à l’écran Apparence > Thèmes et survolez n’importe quel thème basé sur des blocs. Vous devriez voir un bouton Prévisualiser en direct au-dessus de chaque thème de bloc. Cliquez simplement sur ce bouton pour lancer l’aperçu du thème dans l’éditeur de site. Pour les thèmes qui ne sont pas basés sur des blocs, le bouton Prévisualiser en direct lance la Personnalisation du thème.

Amélioration de l’état de chargement

Avec WordPress 6.3, l’état de chargement de l’éditeur a été amélioré pour empêcher l’utilisateur d’interagir avec l’éditeur avant qu’il ne soit complètement chargé.

Désormais, l'utilisateur ne peut plus interagir avec l'éditeur tant que le chargement n'est pas terminé
Désormais, l’utilisateur ne peut plus interagir avec l’éditeur tant que le chargement n’est pas terminé

Mode sans distraction

WordPress 6.3 introduit un mode d’édition sans distraction dans l’éditeur de site. Il s’agit de la même fonctionnalité disponible dans l’éditeur d’articles depuis WordPress 6.2

Mode sans distraction dans l'éditeur de site
Mode sans distraction dans l’éditeur de site

Vous pouvez activer cette fonctionnalité dans le panneau d’options de l’éditeur de site. Une fois le mode sans distraction activé, les colonnes latérales et les barres d’outils disparaissent, vous laissant libre de vous concentrer sur vos modifications.

Améliorations supplémentaires de l’interface utilisateur

  • Un nouveau composant <ViewLink> affiche désormais un bouton permettant d’ouvrir n’importe quel type de publication publié dans une nouvelle fenêtre. Il s’agit d’une petite fonctionnalité utile qui vous permet de voir le type de publication actuel sans avoir à chercher le lien dans la colonne latérale des réglages (PR #50260)
  • Les descriptions des modèles ont été améliorées pour mieux expliquer ce que fait exactement chaque modèle. Cela devrait aider les utilisateurs à choisir le bon modèle à personnaliser dans l’éditeur de site.
  • Auparavant, les réglages du filtre Duotone n’étaient disponibles que dans la barre d’outils du bloc. Avec la version 6.3, les contrôles Duotone sont maintenant disponibles dans la colonne latérale des réglages (PR #49838)
  • Avant WordPress 6.3, les grandes polices ne s’adaptaient pas suffisamment aux petits écrans. Maintenant, la typographie fluide s’adapte en douceur grâce à un facteur d’échelle logarithmique utilisé pour calculer une taille de police minimale pour les petits écrans (PR #49707)

Nouveaux blocs et outils de conception améliorés

WordPress 6.3 propose également deux blocs utiles qui devraient faire le bonheur de nombreux rédacteurs de contenu.

Nouveau bloc de notes de bas de page

WordPress 6.3 nous apporte également un bloc de Notes de bas de page très utile.

Ajouter une note de bas de page à un bloc de texte
Ajouter une note de bas de page à un bloc de texte

Avec cet ajout, l’ajout d’une note de bas de page à un bloc de texte (paragraphe, titre et liste) ne nécessite que quelques clics. Placez le curseur à l’endroit où vous souhaitez ajouter le lien et cliquez sur le bouton Note de bas de page disponible dans le menu contextuel du bloc. Une note de bas de page sera ainsi ajoutée au bas de la page.

Le bloc Notes de bas de page dans WordPress 6.3
Le bloc Notes de bas de page dans WordPress 6.3

Le bloc Notes de bas de page ajoute, supprime et réorganise automatiquement vos notes de bas de page au fur et à mesure que vous modifiez votre texte, ce qui est extrêmement utile, en particulier pour les longs articles.

Nouveau bloc Détails

Vous pouvez désormais masquer un élément de contenu jusqu’à ce que le lecteur soit prêt à lire votre FAQ, à regarder votre vidéo ou à écouter votre podcast grâce au nouveau bloc Détails.

Un bloc Détails vide avec un résumé et un contenu masqué
Un bloc Détails vide avec un résumé et un contenu masqué

Le nouveau bloc se compose de deux éléments distincts : le résumé et le contenu masqué. Par défaut, le contenu est masqué, mais vous pouvez modifier ce réglage dans la colonne latérale des réglages du bloc.

Un bloc Détails avec un résumé et un contenu vidéo
Un bloc Détails avec un résumé et un contenu vidéo

Le bloc utilise un élément details avec un texte riche summary et un élément div contenant l’élément caché (voir aussi PR #45055).

Améliorations du bloc Couverture

Le bloc Couverture a été amélioré avec quelques caractéristiques de conception qui le rendent plus facile à utiliser et ouvrent plus de possibilités de personnalisation.

Tout d’abord, le bloc Couverture prend désormais en charge l’outil de conception de la couleur du texte. Grâce à cet ajout, les utilisateurs et les auteurs de thèmes peuvent modifier la couleur de tous les blocs internes en définissant simplement la couleur du texte dans le bloc de couverture. De plus, il est plus facile de gérer les transformations à partir du bloc Média et texte, car les couleurs de texte sont désormais transmises en douceur aux blocs résultants.

Le bloc Couverture prend désormais en charge l'outil de conception de la couleur du texte
Le bloc Couverture prend désormais en charge l’outil de conception de la couleur du texte

Un autre ajout au bloc Couverture qui arrive avec WordPress 6.3 est la prise en charge de tous les outils de conception liés aux bordures. Cet ajout devrait réduire le besoin de personnaliser le style des blocs.

Contrôles des bordures pour le bloc Couverture
Contrôles des bordures pour le bloc Couverture

WordPress 6.3 ajoute également le support de la mise en page contrainte/flux pour le bloc Couverture qui peut maintenant être géré comme pour le bloc Groupe. Ce changement ajoute de la cohérence à la gestion de la mise en page et devrait certainement faciliter la tâche des utilisateurs et des développeurs de thèmes pour leurs personnalisations.

Réglages de mise en page pour le bloc Couverture
Réglages de mise en page pour le bloc Couverture

Cependant, les développeurs de thèmes devraient effectuer quelques tests sur leurs thèmes existants, car le système de mise en page du bloc peut remplacer les implémentations personnalisées.

Filtre Duotone amélioré

Quelques changements améliorent la façon dont nous utilisons le filtre duotone.

Tout d’abord, vous pouvez désormais définir un filtre duotone globalement à partir du panneau Style de l’éditeur de site. Auparavant, vous ne pouviez appliquer des filtres duotone globalement qu’à partir du fichier theme.json.

Application du filtre duotone dans le panneau Style de l'éditeur de site
Application du filtre duotone dans le panneau Style de l’éditeur de site

Ceci est possible parce que les valeurs duotone sont maintenant définies en utilisant des bouchons de couleur au lieu de valeurs de couleur. Cela signifie également que vous pouvez définir les valeurs duotone une seule fois et les appliquer quel que soit le thème ou la variation de thème en cours, tant qu’il utilise le même slug.

Enfin, pour les plus avertis, les styles duotone sont désormais générés par le moteur de style de WordPress et sont stockés avec les blocs de CSS au lieu d’être intégrés.

Améliorations supplémentaires

  • Le bloc Bouton supporte désormais la couleur, le style et la largeur de la bordure (PR #44574)
  • Le contrôle de la longueur de l’extrait a été ajouté au bloc Extrait de publication – (PR #44964)
  • Vous pouvez maintenant contrôler le ratio d’aspect du bloc Image mise en avant de la publication (PR #47854)
  • L’interface des styles globaux inclut désormais des contrôles de couleur et de typographie pour l’élément Légende (PR #49141)
  • Une variation de la date de modification de la publication a été ajoutée au bloc Date de la publication. Elle est utile si vous souhaitez ajouter rapidement la date de modification de la publication au lieu de la date de publication (PR #49111)
  • Le logo du site peut désormais être remplacé depuis la colonne latérale (PR #49992)

Améliorations des performances et changements pour les développeurs

WordPress 6.3 apporte également de nombreux changements et de nouvelles fonctionnalités destinées à améliorer les performances du site et les flux de travail des développeurs. Parmi les nombreux ajouts, nous avons sélectionné les suivants :

Suppression du support de PHP 5

A partir de WordPress 6.3, PHP 5 ne sera plus supporté. La nouvelle version minimale supportée sera PHP 7.0.0. La version recommandée de PHP est 7.4 ou plus. 7.la version 4 est également la plus utilisée par 50,8 % des sites web WordPress.

Versions de PHP utilisées sur les sites WordPress existants en juillet 2023
Versions de PHP utilisées sur les sites WordPress existants en juillet 2023 (Source de l’image : WordPress.org)

Ceci est important non seulement pour les développeurs, mais aussi pour tous les utilisateurs de WordPress, car cela améliore la sécurité et les performances de votre site web.

C’est également la raison pour laquelle l’hébergement Kinsta n’autorise que les versions supportées de PHP. Nous effectuons régulièrement des tests de performance pour les versions de PHP supportées afin de vérifier les améliorations de performance apportées par les nouvelles versions.

Versions de PHP utilisées sur les sites WordPress existants en juillet 2023
Versions de PHP supportées à partir de juillet 2023 (Image source : PHP.net)

Amélioration des performances dans le chargement des images

Depuis WordPress 6.3, l’attribut fetchpriority avec une valeur de "high" est assigné à l’image pour déterminer s’il s’agit de l’image LCP (Largest Contentful Pain), alors que la Largest Contentful Pain est une mesure qui rapporte le temps de rendu de l’élément le plus grand à l’intérieur de la fenêtre de visualisation.

L’attribut fetchpriority indique au navigateur de donner la priorité à cette image, avant même que la mise en page n’ait été calculée.

Une autre amélioration est la gestion automatique du chargement différé des images avec l’attribut loading. Cet attribut a été introduit pour la première fois dans WordPress 5.5, puis il a été amélioré avec WordPress 5.9 pour omettre l’attribut loading="lazy" pour la première image de contenu (voir Amélioration des performances du chargement différé dans WordPress 5.9). Maintenant, avec WordPress 6.3, tous les problèmes résiduels devraient avoir été corrigés, conduisant à de bonnes améliorations des performances.

Les attributs fetchpriority et loading sont désormais contrôlés par la nouvelle fonction wp_get_loading_optimization_attributes(). Cette fonction renvoie un tableau associatif d’attributs afin d’optimiser les performances de chargement. Actuellement, les attributs possibles renvoyés par cette fonction sont les suivants :

  • loading avec une valeur de "lazy"
  • fetchpriority avec une valeur de "high"

Notez qu’aucun élément ne doit avoir les deux attributs car ils s’excluent mutuellement. Si un élément doit contenir les deux attributs, un avertissement sera déclenché.

Pour une présentation plus approfondie de la fonction wp_get_loading_optimization_attributes() et des attributs fetchpriority et loading avec des exemples d’utilisation, voir Amélioration des performances des images dans WordPress 6.3.

Prise en charge des attributs HTML 5 async et defer

async et defer sont deux attributs HTML 5 qui indiquent au navigateur de télécharger JavaScript sans interrompre l’analyse HTML.

Il existe une différence essentielle entre ces deux attributs :

  • Les scripts dotés de l’attribut async sont exécutés de manière asynchrone dès qu’ils sont chargés. Une fois le script chargé, le navigateur interrompt l’analyse du code HTML et exécute le script.
  • Les scripts dotés de l’attribut defer ne sont exécutés que lorsque l’analyse de la page est terminée.

À partir de WordPress 6.3, vous pouvez désormais enregistrer des scripts avec les attributs async et defer en utilisant le paramètre booléen $in_footer des fonctions wp_register_script() ou wp_enqueue_script() (voir aussi Comment mettre en file d’attente vos ressources dans WordPress).

Ce paramètre a été surchargé et accepte maintenant un nouveau paramètre array$args vous permettant de spécifier une stratégie de chargement pour vos scripts.

Voici un exemple de définition d’une stratégie de report dans le fichier PHP d’une extension en utilisant wp_register_script (le code serait le même avec wp_enqueue_script) :

wp_register_script( 
	'custom-script', 
	plugins_url( '/js/custom-script.js' , __FILE__ ), 
	array(), 
	'1.0.0', 
	array(
		'strategy' => 'defer'
	) 
);

La rétrocompatibilité est assurée, vous pouvez donc continuer à demander à WordPress de charger votre script dans le pied de page :

wp_register_script( 
	'custom-script', 
	plugins_url( '/js/custom-script.js' , __FILE__ ), 
	array(), 
	'1.0.0', 
	array(
		'in_footer' => true,
		'strategy' => 'defer'
	) 
);

Grâce aux nouvelles implémentations, il est maintenant possible d’empêcher un script d’être chargé dans un ordre inattendu dans l’arbre de dépendance des scripts, ce qui n’était pas possible avec les outils disponibles avant WordPress 6.3. Pour un aperçu plus détaillé des changements apportés à l’API Scripts, avec des exemples supplémentaires et des détails techniques, consultez la note de développement de Simon Dowdles.

Mode de développement

WordPress 6.3 introduit un nouveau mode de développement que les développeurs peuvent activer en utilisant une nouvelle constante WP_DEVELOPMENT_MODE. Cette nouvelle constante est recommandée pour tout site de développement et sa valeur dépend du type de développement en cours.

WP_DEVELOPMENT_MODE la constante peut prendre l’une des valeurs suivantes :

  • core – Utilisée pour indiquer qu’un site web est utilisé comme environnement de développement principal.
  • plugin – Utilisé pour le développement d’extensions.
  • theme – Utilisé pour le développement de thèmes.
  • all – Cette valeur est utilisée pour indiquer qu’un site web est utilisé pour les trois types de développement.
  • Une chaîne vide est la valeur par défaut et indique que le site web n’est pas utilisé comme environnement de développement.

WP_DEVELOPMENT_MODE ne doit être utilisé que dans les installations de développement. Elle n’est pas pertinente en production.

Le mode développement affecte certains aspects de bas niveau du comportement de WordPress. Au moment où nous écrivons ces lignes, la seule différence concerne la mise en cache du fichier theme.json, qui est contournée lorsque WP_DEVELOPMENT_MODE est configuré sur 'theme'.

WP_DEVELOPMENT_MODE fonctionne différemment des constantes WP_DEBUG et WP_ENVIRONMENT_TYPE habituellement utilisées dans le développement car WP_DEBUG et WP_ENVIRONMENT_TYPE n’affectent en rien le comportement de WordPress. Vous devriez probablement utiliser WP_DEVELOPMENT_MODE lorsque WP_ENVIRONMENT_TYPE est soit 'development' soit 'local', car le développement ne devrait jamais avoir lieu sur des sites web en production.

Vous pouvez activer le mode développement de cette manière :

define( 'WP_DEVELOPMENT_MODE', 'theme' );

WordPress 6.3 introduit également une nouvelle fonction wp_in_development_mode() qui vous permet de vérifier si votre site web est en mode développement. La nouvelle fonction permet également de vérifier le type de développement en cours, grâce à un paramètre $mode dont les valeurs possibles sont 'core', 'plugin', et 'theme':

if ( wp_in_development_mode( 'theme' ) ) { ... }

Vous pouvez également vérifier la valeur actuelle de WP_DEVELOPMENT_MODE dans le panneau Info de l’outil Santé du site.

Changements supplémentaires pour les développeurs

Résumé

Avec WordPress 6.3, nous arrivons à la fin de la phase 2 : Personnalisation de la feuille de route de développement de Gutenberg. Cette nouvelle version nous apporte des améliorations significatives dans l’expérience d’édition, y compris de nouvelles fonctionnalités d’édition dans l’éditeur de site, un nouveau système de modèle de bloc plus flexible, de nouveaux blocs, de meilleures performances, des améliorations de l’accessibilité et de l’internationalisation, et bien plus encore.

Avec la prochaine version de WordPress, attendue en novembre 2023, nous entrons dans la phase 3 : Collaboration, dont l’objectif principal est d’apporter des fonctionnalités de collaboration avancées à l’éditeur.

Si vous souhaitez tester et/ou contribuer à WordPress, notre suite de développement WordPress locale et gratuite DevKinsta est ce que vous devriez utiliser.

Maintenant, à vous de jouer : Avez-vous déjà testé WordPress 6.3 dans votre environnement de développement ? Quelles sont les fonctionnalités de la version 6.3 que vous appréciez le plus ? Faites-nous part de vos réflexions dans les commentaires ci-dessous.

Carlo Daniele Kinsta

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.