Quoi de Neuf dans WordPress 5.3 (Nouveaux Blocs, Nouvelles APIs, Interface d’Administration Améliorée)

WordPress 5.3 « Kirk » est sorti officiellement le 12 novembre 2019 et est disponible en téléchargement.

Qu’est-ce qui a changé avec WordPress 5.3 ?

D’abord et avant tout, un nombre impressionnant de versions de l’extension Gutenberg a été fusionnée en noyau, passant de la version 5.4 à 6.6. Cela signifie que nous verrons un grand nombre de fonctionnalités et d’améliorations pour les utilisateurs et les développeurs, ainsi qu’un nombre important d’améliorations de la performance.

Mais il y a beaucoup plus que Gutenberg dans WordPress 5.3. En fait, cette release comporte plusieurs améliorations liées à l’outil de santé du site, un tout nouveau thème par défaut (TwentyTwenty), des améliorations dans l’interface utilisateur d’administration, un meilleur support pour PHP 7.4, une meilleure accessibilité, et plus encore.

Cela fait beaucoup de choses incroyables, non ? Alors, bouclons nos ceintures et creusons plus profondément dans WordPress 5.3.

Quoi de Neuf dans l’Éditeur de Blocs

Depuis qu’il a été lancé, l’éditeur de blocs a été régulièrement amélioré grâce à l’engagement de contributeurs du monde entier. Cependant, les nouvelles versions ne sont pas fusionnées dans le noyau dès qu’elles sont disponibles.

Avec la version 5.3, treize versions de l’extension Gutenberg ont été fusionnées d’un coup. Donc, si vous n’avez pas encore utilisé l’extension Gutenberg et que vous ne l’avez pas mis à jour régulièrement, vous trouverez beaucoup d’améliorations et de nouvelles fonctionnalités dans l’éditeur de blocs avec la version 5.3 de WordPress.

Des améliorations générales de performance ont également été signalées. Le benchmark suivant compare les performances d’un énorme article (36.000 mots/1.000 blocs) avec différentes versions de l’extension Gutenberg.

Vous remarquerez les différences de temps de chargement avec les articles normaux, mais l’amélioration générale de la performance de l’éditeur est claire.

Version	Temps de Chargement	Événement KeyPress (Saisie)
Gutenberg 6.6.0	4.7s	38.96ms
Gutenberg 6.5.0	4.68s	42.96ms
WordPress 5.2	5.69s	57.65ms

Il serait difficile de faire une liste complète de tous les ajouts, changements et corrections de bogues, alors nous avons sélectionné ceux qui ont le plus grand impact sur l’expérience utilisateur/développeur et les avons regroupés ci-dessous :

• Améliorations de l’expérience d’édition
• Fonctionnalités pour les Développeurs et les Concepteurs de Thèmes
• Fonctionnalités pour les Développeurs de Blocs

Améliorations de l’Expérience d’Édition

Si vous n’avez jamais installé l’extension Gutenberg auparavant, vous trouverez un tout nouveau bloc : le bloc Groupe. Ajouté à l’éditeur avec Gutenberg 5.5, le bloc Groupe est un conteneur polyvalent pour d’autres blocs vous permettant de créer des modèles de blocs avancés à inclure dans n’importe quelle page de votre site WordPress.

Le nouveau bloc Groupe prend en charge les alignements larges et les couleurs d’arrière-plan, offrant aux utilisateurs de WordPress une grande liberté lors de la création de contenu.

En plus du bloc Groupe, nous avons examiné dix améliorations dans l’éditeur de blocs qui devraient avoir un grand impact sur la façon dont vous utilisez l’éditeur.

1. Le Bloc Annexe

Les blocs Groupe et Colonnes affichent maintenant une annexe de bloc à l’état vide. L’annexe n’est qu’une zone grise avec un signe plus à l’intérieur qui rend l’interface utilisateur plus claire et améliore la convivialité du bloc.

2. Regroupement des Blocs par Interaction de Groupe

Vous pouvez maintenant créer des blocs de groupe par interaction de « groupe », ce qui signifie que vous pouvez sélectionner plusieurs blocs et les regrouper en quelques clics seulement. Il suffit d’ajouter tous les blocs nécessaires à la sélection, puis de cliquer sur Groupe dans le menu. C’est fait !

3. Personnalisation avec Colonnes

Le bloc Colonnes prend désormais en charge un contrôle par slider dans les réglages de bloc vous permettant de définir une largeur personnalisée pour chaque colonne (dans une version ultérieure, nous pouvons nous attendre à d’autres améliorations du bloc Colonnes avec l’introduction d’un contrôle de redimensionnement en glisser-déposer).

4. Un Sélecteur de Mise en Page pour les Blocs de Colonnes

Une amélioration supplémentaire au bloc Colonnes dans WordPress 5.3 est le sélecteur de mise en page. Ajouté à l’éditeur avec Gutenberg 6.0, cette fonctionnalité permet aux utilisateurs de choisir parmi plusieurs mises en page prédéfinies (schémas) ou de passer à la mise en page par défaut, ce qui accélère un peu le processus d’édition et rend le bloc plus facile à utiliser pour les utilisateurs moins technophiles.

Le sélecteur de mise en page est une implémentation de l’API de schémas de bloc qui permet de sélectionner un ensemble prédéfini d’options à choisir lors de l’ajout d’un bloc. En plus du bloc Colonnes, nous pouvons trouver des exemples de schémas de blocs dans les blocs Tableau et Couverture. Vous pouvez en savoir plus sur le API de schémas de blocs sur GitHub.

5. Améliorations du Bloc Tableau

Le bloc Tableau a été enrichi de plusieurs nouvelles fonctionnalités. Il prend désormais en charge les alignements de texte dans les colonnes, l’en-tête et le pied de page du tableau, ainsi que les couleurs d’arrière-plan.

6. Mode de Navigation de Bloc

Gutenberg 6.3 a introduit le mode Navigation pour naviguer entre les blocs en utilisant les touches Tab ou les touches fléchées sans entrer dans le contenu des blocs. Les utilisateurs peuvent passer du mode « Navigation » au mode « Édition » et inversement en appuyant simplement sur Enter ou Esc. Cette fonctionnalité est une grande amélioration dans la facilité d’utilisation, en particulier quand il s’agit de lecteurs d’écran.

7. Ajout d’un Mouvement pour les Changements et les Réarrangements de Bloc

Une amélioration supplémentaire de la convivialité vient avec l’introduction du mouvement pour bloquer les changements, la création, la suppression et la réorganisation. Matías Ventura explique pourquoi cette caractéristique est pertinente :

Prenons le cas d’une liste contenant un ensemble d’éléments : l’action de déplacer, de réorganiser, etc. n’affecte pas seulement l’élément sur lequel on agit, mais aussi le reste de l’ensemble, en particulier celui avec lequel on « échange les places ». La réalité nous dit que pour mettre quelque chose à la place de quelque chose d’autre, les deux choses doivent bouger. Le changement d’état général pour l’ensemble du groupe peut être plus difficile à saisir en changeant l’ordre instantanément. Il faut un moment pour se réorienter. Les transitions et les interactions gestuelles aident généralement à relier ces deux états d’une manière qui rend l’interaction (ce qui vient de se passer) plus immédiatement compréhensible.

8. Réorganisation en Ligne des Images dans les Blocs de Galerie

Le bloc Galerie a été enrichi avec une réorganisation en ligne des images. Nous pouvons maintenant réorganiser les images dans la galerie d’un simple clic sur les boutons Déplacer l’image vers l’avant et Déplacer l’image vers l’arrière sans ouvrir l’écran modal du média.

9. Améliorations Apportées au Bloc des Derniers Articles

Le bloc Derniers articles prend désormais en charge les extraits et les itérations de contenu (voir le pull #1462727).

Le panneau de configuration des blocs contient maintenant une section où l’utilisateur peut activer/désactiver le contenu de l’article. Si Contenu de l’article est actif, vous pouvez choisir entre les options Extrait et Article complet. Enfin, un curseur vous permet de contrôler la longueur de l’extrait si Extrait est coché.

Ce dernier changement s’inscrit dans le cadre d’une stratégie plus vaste axée sur l’amélioration globale de l’interface utilisateur. Dans Itérations sur le bloc « Derniers articles », Mel Choyce dit :

En préparation pour travailler sur des modèles de page dans Gutenberg, nous voudrons un ensemble robuste de blocs dynamiques qui peuvent être déposés dans n’importe quel article ou page. L’expansion de ce bloc nous placera dans une meilleure position pour faire face à des blocs dynamiques ou globaux plus complexes à l’avenir.

Les utilisateurs ne devraient pas avoir à savoir comment écrire des requêtes personnalisées ou comprendre la boucle pour ajouter des articles à leur page d’accueil. Le bloc des articles récents est un bon début, mais pour être une solution pleinement fonctionnelle, il doit prendre en charge plus que les titres et les dates de publication.

10. Améliorations du Bloc des Listes

Les blocs de listes prennent désormais en charge les raccourcis indent/outdent, la valeur de début et la prise en charge de l’ordre inversé pour les listes ordonnées.

Améliorations Supplémentaires pour l’Éditeur de Blocs

En raison du grand nombre de versions de l’extension Gutenberg fusionnant dans le noyau, il y a des tonnes de changements, d’améliorations et de corrections de bugs que nous n’avons pas pu mentionner ici. Quelques améliorations supplémentaires et de nouvelles fonctionnalités incluent :

• Le bloc Colonnes supporte maintenant l’alignement vertical (Gutenberg 5.4).
• Le bloc Média & Texte supporte maintenant l’alignement vertical (Gutenberg 5.5).
• Le bloc Bouton supporte maintenant une option de cible de lien (Gutenberg 6.2).
• Le bloc Séparateur supporte maintenant la couleur de bordure (Gutenberg 6.3).
• Les blocs Couverture sont maintenant redimensionnables (Gutenberg 6.4).
• Amélioration de l’expérience de saisie de texte, en particulier utile sur mobile (Gutenberg 6.4).
• Le bloc Image a maintenant une variation de rognage en cercle (Gutenberg 6.4).
• Un tout nouveau bloc Liens Sociaux a été ajouté (Gutenberg 6.5).
• Le bloc Galerie prend désormais en charge les fonctions de Légendes de galerie (Gutenberg 6.5).

Fonctionnalités Intéressantes pour les Développeurs et les Concepteurs de Thèmes

WordPress 5.3 ajoute de nombreuses fonctionnalités et améliorations à l’éditeur de blocs pour les développeurs de thèmes et les concepteurs.

Trois changements principaux impliquent des concepteurs de thèmes et sont liés au CSS et au HTML de plusieurs blocs.

1. Conteneur Intérieur de Groupe de Bloc

Le bloc Groupe contient maintenant un conteneur intérieur (wp-block-group__inner-container) qui pourrait s’étendre au-delà du conteneur principal du bloc s’il n’était pas soigneusement conçu. Cela pourrait avoir des effets inattendus sur l’apparence de la page.

Par conséquent, avec des thèmes supportant des alignements larges et complets, un conteneur de bloc peut nécessiter un CSS supplémentaire pour qu’il apparaisse comme prévu.

Voici un exemple tiré du blog Make WordPress Core montrant comment styliser les blocs pour éviter ce genre de problèmes :

// Apply entry-content styles to the group block's inner container as well. 
.entry-content,
.wp-block-group__inner-container {
	width: 60vw;
	margin: 0 auto;
}
 
// When a group block has a wide alignment, make sure that its full-width children do not extend beyond the width of the container. 
.alignwide,
.wp-block-group.alignwide .alignfull {
	margin-left: -10vw;
	width: 80vw;
}
 
.alignfull {
	margin-left: -20vw;
	width: 100vw;
}
 
// Ensure wide and full-width children do not extend beyond the width of a standard-aligned Group block.
.wp-block-group:not(.alignwide):not(.alignfull) * {
	max-width: 100%;
	margin-left: 0;
}

2. Nouveaux Noms de Classes pour les Alignements de Texte

Avant WordPress 5.3, les styles en ligne étaient utilisés pour changer l’alignement des blocs de texte (Titre, Paragraphe, Citation et Vers).

La haute spécificité des styles en ligne pourrait rendre difficile la personnalisation de l’apparence de ces blocs. Mais les concepteurs de thèmes peuvent maintenant profiter de trois nouvelles classes CSS qui remplacent les styles en ligne :

• has-text-align-right
• has-text-align-center
• has-text-align-left

Les blocs existants seront automatiquement convertis et les classes appliquées dès que les articles seront ouverts et enregistrés dans l’éditeur de blocs.

3. Mise à Jour du Balisage des Blocs de Galerie et de Tableau

Les blocs Galerie et Tableau sont maintenant enveloppés dans des « figure ». Les styles des éléments changent en conséquence et les thèmes peuvent être affectés et nécessiter une mise à jour. Voici le nouveau balisage pour un bloc de tableau :

<figure class="wp-block-table is-style-stripes">
	<table class="">
		<tbody>
			<tr>
				<td>Left</td>
				<td>Center</td>
				<td>Right</td>
			</tr>
		</tbody>
	</table>
</figure>

Pour plus de détails sur les noms de classes et les changements supplémentaires liés aux thèmes, consultez le blog Make WordPress Core.

Fonctionnalités pour les Développeurs de Blocs

WordPress 5.3 apporte des changements et des améliorations aux API de bloc.

1. Enregistrer et Dés-Enregistrer les Styles de Blocs

Avant la version 5.3, les développeurs et les concepteurs devaient écrire du JavaScript pour les styles d’enregistrement/dés-enregistrement.

Avec la sortie de WordPress 5.3, nous pouvons maintenant profiter de deux nouvelles fonctionnalités des fonctions d’aide permettant d’enregistrer et de dés-enregistrer les styles de blocs via PHP : register_block_style et unregister_block_style.

La fonction register_block_style enregistre un nouveau style pour le bloc spécifié. La fonction conserve deux arguments :

• le nom du bloc.
• un tableau de propriétés de style.

Le tableau peut inclure les paramètres suivants :

• name : (obligatoire) un identifiant unique pour le style.
• label : Libellé lisible par l’homme (obligatoire).
• inline_style : (facultatif) un code CSS qui enregistre la classe CSS pour le style.
• style_handle : (optionnel) un handle pour un style déjà enregistré (le handle de style demande où le style est nécessaire).

Nous pouvons enregistrer des styles en ligne avec quelque chose comme le code suivant :

add_action( 'init', 'register_custom_block_style' ); 

function register_custom_block_style() {
	if( ! function_exists( 'register_block_style' ) ) return;

	register_block_style(
		'core/quote',
		array(
			'name'			=> 'blue-quote',
			'label'			=> __( 'Blue Quote' ),
			'inline_style'	=> '.wp-block-quote.is-style-blue-quote { color: blue; }',
		)
	);
};

Le nouveau style est maintenant disponible dans la section des réglages des Styles.

Au lieu d’enregistrer un style en ligne, nous pouvons passer un handle pour un style précédemment enregistré :

wp_register_style( 'custom-style', get_template_directory_uri() . '/custom-style.css' );
 
register_block_style(
	'core/quote',
	array(
		'name'			=> 'custom-quote',
		'label'			=> 'Custom Quote',
		'style_handle'	=> 'custom-style',
	)
);

L’image suivante montre la citation bleue enregistrée dans l’exemple ci-dessus.

Pour dés-enregistrer un style précédemment enregistré sur le serveur avec register_block_style, nous pouvons utiliser la fonction unregister_block_style.

Nous pouvons utiliser unregister_block_style :

unregister_block_style( 'core/quote', 'custom-quote' );

2. Exemple d’API de Bloc

WordPress 5.3 ajoute une nouvelle propriété JS permettant de prévisualiser le bloc sélectionné depuis la bibliothèque avant de l’ajouter au contenu.

Nous pouvons ajouter la prise en charge de cette fonctionnalité en définissant la propriété d’exemple dans les réglages de bloc comme ci-dessous :

const blockSettings = {
	// ... 
 
	example: {
		attributes: { 
			content: __( 'Content of the block' )
		},
		innerBlocks: []
	} 
}
registerBlockType( name, settings );

Améliorations Apportées au Composant de Santé du Site

WordPress 5.2 a introduit l’outil de santé du site pour fournir des informations sur la santé d’un site et pour aider les administrateurs du site à récupérer leurs sites en cas de difficultés techniques. Avec la sortie de WordPress 5.3, l’outil de santé du site obtient plusieurs améliorations et changements des deux côtés du composant.

1. Suppression de la Classification de l’État de Santé du Site

Dans WordPress 5.2, une note en pourcentage était affichée en haut de la page sur l’état de santé du site. Cependant, certaines personnes ont exprimé des inquiétudes au sujet de la note, la jugeant ambiguë et déroutante, car les utilisateurs pourraient chercher à obtenir une note de 100% au-dessus de ce qui est le mieux pour leur site (pour en savoir plus, voir la section cet article).

L’indicateur affiche combien de tests un site a passé, mais pas son niveau de « santé ». Pour cette raison, le pourcentage a été supprimé et l’outil de santé du site affiche maintenant l’un des deux états qui pourraient être considérés comme des rappels plutôt que des indicateurs précis des performances et de la sécurité d’un site :

• Doit être amélioré
• Bon

2. Emails de Récupération Améliorés

Quand une erreur survient, WordPress tente d’envoyer un e-mail de récupération à l’administrateur du site. Malheureusement, ces e-mails ne fournissent pas d’informations utiles pour le débogage, et nous sommes simplement informés que quelque chose s’est mal passé sur notre site.

Pour fournir des informations plus utiles pour la restauration de votre site WordPress, WordPress 5.3 introduit le filtre recovery_email_debug_info, qui est un tableau associé d’informations de débogage. L’e-mail de récupération contient maintenant les informations de base qui devraient vous aider à dépanner votre site ou, à tout le moins, obtenir de l’aide des autres.

Les e-mails d’échec comprendront une section supplémentaire commençant par la chaîne suivante :

 Lorsque vous demandez de l'aide à ce sujet, il se peut qu'on vous demande de fournir certains des renseignements suivants :

Ensuite, les informations suivantes sont fournies :

• Version de WordPress.
• Version de PHP.
• Thème et version actuels.
• Le nom et la version de l’extension à l’origine du problème.

L’information est intentionnellement réduite au strict minimum pour éviter toute confusion pour les utilisateurs finaux, mais les développeurs peuvent utiliser le filtre recovery_email_debug_info pour ajouter plus de détails si nécessaire (voir #48090 pour plus d’informations).

3. Filtres pour les Tests de l’État de Santé du site Complétés

Le nouveau filtre site_status_test_result permet aux développeurs de filtrer la sortie d’un test de statut terminé pour étendre le résultat d’un test.

Les développeurs peuvent également utiliser ce filtre pour fournir des actions supplémentaires. Voici un excellent exemple d’utilisation (voir ticket #47864) :

Un exemple pourrait être un hébergeur, les extensions PHP sont manquantes, ils ajoutent donc un lien actif vers le gestionnaire d’extensions PHP de leur panneau de contrôle.
Peut-être voulaient-ils être plus directs, ils voulaient la vérification de la version de PHP, qui recommande la mise à jour de l’utilisateur, ils ajoutent un bouton ajax qui va changer la version de PHP pour eux sur place.

Ce filtre est disponible à la fois en PHP, pour les tests directs, et en implémentation JavaScript, pour les tests asynchrones.

Améliorations de l’Expérience d’Administration

Outre l’outil de santé du site, WordPress 5.3 apporte plusieurs améliorations de l’interface d’administration qui devraient améliorer considérablement l’expérience globale de l’ensemble du tableau de bord WordPress.

1. Amélioration du Contraste des Couleurs

Le contraste des couleurs a été amélioré et de nombreux problèmes d’accessibilité ont été corrigés.

2. Vérification de l’Adresse Email de l’Administrateur

Une vérification de l’email de l’administrateur se déclenche maintenant après qu’un administrateur ne se soit pas connecté dans une période de temps. Par défaut, cet intervalle est fixé à six mois, mais les développeurs peuvent définir un intervalle différent en utilisant le filtre admin_email_check_interval (voir les tickets #4634349 et #48144).

Pour désactiver les vérifications des emails de l’administrateur, vous pouvez utiliser le filtre suivant :

add_filter( 'admin_email_check_interval', '__return_false' );

3. Reprise des Téléversements

Téléverser de grandes images à partir d’un smartphone ne brisera pas les choses au milieu du processus car WordPress prend désormais en charge la reprise des téléversements lorsqu’ils échouent.

4. Rotation de l’Image

Les images sont maintenant correctement pivotées lors du téléversement selon les métadonnées d’orientation EXIF.

Un Tout Nouveau Thème par Défaut : Twenty Twenty

WordPress 5.3 est livré avec un tout nouveau thème par défaut : Twenty Twenty. Il s’agit d’un thème minimal conçu pour la flexibilité, la clarté et la lisibilité, avec un accent particulier sur l’Éditeur de blocs.

Twenty Twenty a été construit sur un thème gratuit existant dans la communauté, Chaplin par Andérs Noren, et présente une police gratuite et open source à forte personnalité : Inter par Rasmus Andersson.

Vous pouvez en savoir plus sur Twenty Twenty dans notre article de fond sur notre blog : Twenty Twenty : Une introduction au nouveau thème par défaut de WordPress.

Changements pour les Développeurs WordPress

WordPress 5.3 est livré avec plusieurs changements et améliorations pour les développeurs WordPress. Parmi les nombreux changements, nous pensons que ceux-ci méritent d’être mentionnés :

• Améliorations de composant de date et d’heure du noyau
• Nouvel attribut aria-current
• Nouvel attribut aria-label
• Fonctions pour ajouter une valeur UGC aux attributs rel dans les liens
• L’API REST dans WordPress 5.3

Améliorations des Composants de Date et d’Heure du Noyau

Le composant de Date/Heure du noyau s’occupe de tout ce qui est lié à la date, à l’heure et aux fuseaux horaires dans WordPress. Comme Andrey « Rarst » Savchenko l’explique :

Le composant Date/Heure reposait sur ce qu’on appelle « l’horodatage WordPress » – une somme d’horodatage Unix avec un décalage de fuseau horaire. Cela causait de nombreux bogues et un manque d’interopérabilité avec PHP en amont ou tout autre système externe. La documentation en ligne se réfère par erreur à ces derniers en tant qu’horodatages Unix.

Alors qu’il était impossible de supprimer complètement les horodatages WordPress sans problèmes de rétrocompatibilité, le code du composant a été amélioré avec plusieurs corrections de bugs, et la documentation en ligne a été mise à jour et corrigée là où c’était nécessaire.

De plus, avec WordPress 5.3, nous avons accès à plusieurs nouvelles fonctions d’API de Date/Heure :

• wp_timezone_string() – Cette fonction récupère le fuseau horaire du site sous forme de chaîne. Elle peut retourner une chaîne de fuseau horaire PHP ou un décalage ±HHH:MM.
• wp_timezone() – Cette fonction récupère le fuseau horaire du site sous la forme d’un objet DateTimeZone.
• wp_date() – C’est une nouvelle fonction pour la localisation de date. Il est destiné à remplacer date_i18n().
• current_datetime() – Cette fonction récupère l’heure actuelle sous la forme d’un objet DateTimeImmutable avec le fuseau horaire à partir des réglages.
• get_post_datetime() – Récupère l’heure de l’articleDateTimeObjet inestimable.
• get_post_timestamp() – Récupère l’heure de l’article sous la forme d’un horodatage Unix.

Toutes ces fonctions sont définies et documentées dans wp-includes/functions.php.

L’utilisation de current_time(), get_post_time() et date_i18n() est maintenant déconseillée.

Voir aussi Améliorations des composants Date/Heure dans WordPress 5.3 et WordPress 5.3. Nouvelles fonctions à ajouter à l’API sur GitHub.

Nouvel Attribut Aria-Current

Lorsqu’une nouvelle page ou un nouvel article est publié, son nom apparaît dans plusieurs menus et widgets. Avant WordPress 5.3, de nombreux utilisateurs n’auraient pas reconnu ce lien et cela aurait pu être source de confusion, surtout pour les utilisateurs handicapés et/ou les utilisateurs de lecteurs d’écran.

Avec la sortie de WordPress 5.3, un nouvel attribut aria-current="page" est ajouté pour indiquer les liens vers la même page et les développeurs de thèmes sont encouragés à ajouter des styles spécifiques à ces liens. Ce changement affecte les widgets du noyau suivants :

• Articles récents.
• Menu de navigation.
• Pages.
• Catégorie.
• Archives.

Voici un exemple d’utilisation :

a[aria-current] {
	/* CSS styles for current link */
}

Nouveaux Attributs Aria-Label dans les Menus de Navigation

« Les points de repère fournissent un moyen puissant d’identifier l’organisation et la structure d’une page Web » et permettent aux développeurs de thèmes d’ajouter la prise en charge de la navigation au clavier dans les pages Web en utilisant les rôles de points de repère.

Les repères ARIA fournissent un contexte pour le contenu Web et sont particulièrement utiles pour les utilisateurs de technologies d’assistance.

En raison de l’importance des repères ARIA pour l’accessibilité, WordPress 5.3 ajoute maintenant le support des attributs aria-label dans la navigation des articles et des commentaires.

Les développeurs et concepteurs de thèmes peuvent ajouter des repères ARIA aux menus de navigation des articles et des et commentaires en ajoutant un nouveau paramètre aria_label aux fonctions suivantes :

• _navigation_markup()
• get_the_post_navigation()
• get_the_posts_navigation()
• get_the_posts_pagination()
• get_the_comments_navigation()
• get_the_comments_pagination()
• the_post_navigation()
• the_posts_navigation()
• the_posts_pagination()
• the_comments_navigation()
• the_comments_pagination()

En savoir plus sur les attributs aria-label dans la navigation des articles et des commentaires sur Make WordPress Core.

Fonctions pour Ajouter une Valeur UGC aux Attributs Rel dans les Liens

En septembre 2019, Google a annoncé deux nouveaux attributs permettant d’identifier la nature des liens : rel="sponsored" et rel="ugc" :

rel= »ugc » : UGC signifie User Generated Content (Contenu Généré par l’Utilisateur), et la valeur de l’attribut UGC est recommandée pour les liens dans le contenu généré par l’utilisateur, tels que les commentaires et les articles du forum.

WordPress 5.3 ajoute le support de l’attribut rel="ugc" dans les commentaires. Ce changement a été implémenté en quelques heures et il est intéressant de voir à quelle vitesse l’équipe de développement a réagi à l’annonce de Google (voir ticket #48022).

En outre, WordPress 5.3 introduit deux nouvelles fonctions permettant aux développeurs d’ajouter des valeurs nofollow et ugc aux attributs rel dans les liens :

• wp_rel_callback() est utilisé pour ajouter des attributs « rel » aux liens spécifiés, et remplacer la fonction wp_rel_nofollow_callback() devenue obsolète.
  La fonction est définie dans wp-includes/formatting.php:

  /**
  	 * Callback to add a rel attribute to HTML A element.
  	 *
  	 * Will remove already existing string before adding to prevent invalidating (X)HTML.
  	 *
  	 * @since 5.3.0
  	 *
  	 * @param array  $matches Single match.
  	 * @param string $rel     The rel attribute to add.
  	 * @return string HTML A element with the added rel attribute.
  	 */
  	function wp_rel_callback( $matches, $rel ) {}

• wp_rel_ugc() ajoutes les valeurs « nofollow » et « ugc » aux attributs « rel » dans les liens. La fonction est définie dans wp-includes/formatting.php:

  /**
  		 * Adds `rel="nofollow ugc"` string to all HTML A elements in content.
  		 *
  		 * @since 5.3.0
  		 *
  		 * @param string $text Content that may contain HTML A elements.
  		 * @return string Converted content.
  		 */
  		function wp_rel_ugc( $text ) {
  			// This is a pre-save filter, so text is already escaped.
  			$text = stripslashes( $text );
  			$text = preg_replace_callback(
  				'||i',
  				function( $matches ) {
  					return wp_rel_callback( $matches, 'nofollow ugc' );
  				},
  				$text
  			);
  			return wp_slash( $text );
  		}

Ainsi, à partir de maintenant, les développeurs peuvent ajouter l’attribut rel="nofollow ugc" aux liens comme ci-dessous :

$link = 'User generated link example';
$ugc_link = wp_rel_ugc( $link );
echo $ugc_link;
// output: User generated link example

L’API REST dans WordPress 5.3

WordPress 5.3 apporte plusieurs modifications et améliorations de l’API REST.

L’un des changements les plus pertinents est la prise en charge des types de données « objet » et « array » pour les fonctions register_meta.

Grâce à cette amélioration, l’API REST prend désormais en charge nativement les types de métadonnées complexes. Cela nous permet d’utiliser l’API pour effectuer une validation basée sur des schémas et pourrait simplifier l’interaction du code client avec des valeurs complexes et permet finalement aux développeurs de créer des méta-blocs complexes via la REST API.

Pour une vue plus approfondie de ce sujet, voir WP 5.3 Supports Object and Array Meta Types in the REST API

Une deuxième amélioration significative concerne le paramètre _fields qui permet de limiter les champs inclus dans les objets JSON retournés par l’API REST. Voir l’exemple suivant :

/wp/v2/posts?_fields=id,title,author

Depuis WordPress 5.3, le paramètre _fields peut être utilisé pour filtrer l’objet de réponse de l’API REST par champs imbriqués, de sorte que nous pouvons demander des meta-champs ou des propriétés spécifiques dans un objet complexe. Nous pouvons utiliser le paramètre _fields comme ci-dessous :

?_fields=meta.meta-key-1,meta.meta-key-2,meta.meta-key-3.nested-prop

Pour un aperçu plus complet des améliorations apportées à l’API REST avec WordPress 5.3, voir THE REST API in WordPress 5.3.

Comment Mettre à Jour vers WordPress 5.3

WordPress 5.3 a été publié le 12 novembre 2019. Vous pouvez suivre les instructions ci-dessous pour mettre à jour votre site.

Comme le site de chaque client est différent, vous devriez toujours utiliser l’environnement de staging standard fourni par Kinsta (ou ajouter un nouvel environnement de staging premium si votre staging existant est déjà utilisé). Vous pouvez cloner votre site en production en quelques secondes, puis tester WordPress 5.3 avec votre thème et vos extensions existantes pour vérifier la compatibilité. Vous pouvez bien sûr aussi faire une sauvegarde manuelle avant la mise à jour de votre site en production, juste pour être tranquille.

Pour mettre à jour WordPress vers la version 5.3, cliquez simplement sur l’icône de mise à jour dans votre tableau de bord d’administration WordPress. Et cliquez sur le bouton « Mettre à jour maintenant ». Pendant la mise à jour de votre site, il sera en mode de maintenance. Dès que vos mises à jour seront terminées, votre site reviendra à la normale.

Tant que tout va bien avec la mise à jour, vous devriez alors voir l’écran « Bienvenue sur WordPress 5.3 ». Et c’est tout ! Rapide et facile.

Après avoir cliqué dans le tableau de bord, vous recevrez également un message pour mettre à jour votre base de données vers la dernière version. Cliquez simplement sur le bouton « Mettre à jour la base de données de WordPress » et vous êtes prêt à y aller.

Dépannage des Problèmes avec la Mise à Jour de WordPress

Chaque fois que les gens mettent à jour une version majeure de WordPress, il y en a toujours qui rencontrent des problèmes, et cela est dû aux milliers d’extensions et de thèmes différents qui coexistent actuellement sur le marché. Voici quelques façons de dépanner les problèmes courants.

• Votre site peut encore être partiellement mis en cache. Vous pouvez résoudre ce problème en vidant le cache de votre site WordPress.
• Essayez de désactiver toutes vos extensions pour voir si cela résout votre problème. Réactivez-les une par une jusqu’à ce que vous trouviez quelle extension pourrait avoir besoin d’une mise à jour de la part du développeur.
• Essayez de passer à un thème WordPress par défaut, tel que Twenty Twenty. Si cela résout votre problème, vous voudrez peut-être vous adresser à votre développeur de thème.
• Dépannez et diagnostiquez les problèmes JavaScript dans votre navigateur.

Résumé

Nous avons décrit les fonctionnalités et améliorations les plus intéressantes de WordPress 5.3.

Avec treize versions de l’extension Gutenberg fusionnées dans le noyau, plusieurs améliorations de l’outil de santé du site, un tout nouveau thème par défaut, des améliorations dans l’interface d’administration, de nouvelles fonctions et fonctionnalités pour les développeurs et les concepteurs de thèmes, un meilleur support pour PHP 7.4, et un nombre incroyable de petits changements, corrections de bugs et suppressions, WordPress 5.3 pose un jalon important dans l’évolution du CMS.

Quelles sont vos caractéristiques/améliorations préférées ? Avons-nous manqué quelque chose d’important ? Faites-nous part de vos réflexions dans la section des commentaires.