Nouveautés de WordPress 6.5

WordPress 6.5 « Regina » a été publié le 2 avril, et nous sommes ici pour vous montrer les fonctionnalités fantastiques qui l’accompagnent.

La version 6.5 introduit de nouvelles API puissantes, amenant l’expérience de développement de WordPress à un niveau supérieur. Mais cela apporte aussi des tonnes de changements qui vous rendront heureux quand il s’agit de la construction de sites et de la création de contenu.

Grâce à la nouvelle bibliothèque de polices, vous pourrez injecter des valeurs de champs personnalisés dans le contenu des blocs principaux et télécharger et installer des polices Google directement depuis l’éditeur de site. De nouveaux outils de conception et plusieurs améliorations de l’interface utilisateur permettront d’améliorer l’expérience globale d’édition.

Mais il ne s’agit là que de quelques mises à jour de WordPress 6.5. La nouvelle version rassemble tellement d’améliorations et de mises à jour qu’il serait impossible de les mentionner toutes dans un seul article de blog. Nous avons donc rassemblé les plus perturbatrices et les plus excitantes dans ce long article détaillé.

Commençons notre voyage à la découverte de WordPress 6.5.

La nouvelle bibliothèque de polices de WordPress

Avant toute chose, WordPress 6.5 introduit une nouvelle fonctionnalité qui permet de gérer les polices de caractères depuis l’interface Styles.

La nouvelle bibliothèque de polices de WordPress vous permet de gérer les polices d’une manière qui ressemble à la gestion des médias dans la médiathèque, mais pour les polices.

Grâce à la bibliothèque de polices, vous pouvez facilement installer/désinstaller les polices locales et les polices Google et choisir celles que vous voulez activer/désactiver quel que soit votre thème actif.

Ça a l’air génial, non ? Nous avons maintenant beaucoup plus de contrôle sur un aspect essentiel de chaque site web : la typographie. Pour utiliser des polices personnalisées dans votre site web WordPress, vous n’aurez plus besoin de compter sur les polices de votre thème ou de jouer avec le CSS.

L’utilisation est assez simple. Dans l’interface de l’éditeur de site, ouvrez la colonne latérale Styles globaux et sélectionnez Typographie.

Le nouveau panneau Typographie dans WordPress 6.5

Ici, vous devriez voir une liste des polices et des éléments disponibles. Cliquez sur le bouton Gérer les polices à droite, et une fenêtre contextuelle avec trois onglets apparaitra.

L'interface de la bibliothèque de polices dans WordPress 6.5 — L’interface de la bibliothèque de polices dans WordPress 6.5

L’onglet Bibliothèque fournit un aperçu des polices disponibles, l’onglet Téléchargement comprend une zone de glisser-déposer pour télévers des ressources de polices depuis votre ordinateur, et l’onglet Installer des polices vous permet d’installer des polices à partir de Google Fonts.

Dans l'onglet Installer des polices, vous pouvez vous connecter à Google Fonts. — Dans l’onglet Installer des polices, vous pouvez vous connecter à Google Fonts.

Une fois connecté à Google Fonts, une liste de toutes les polices disponibles apparaitra dans le même panneau.

Vous pouvez aussi rechercher des polices par leur nom.

Recherche de polices par nom dans WordPress 6.5

Choisissez les variantes de polices dont vous avez besoin, cliquez sur Installer, et vous avez terminé.

Variantes de polices Ubuntu sur Google Fonts

Quand vous installez une nouvelle police, la bibliothèque de polices ajoute la définition de la famille de polices aux polices installées et télécharge la ressource dans le dossier wp-content/uploads/fonts.

Désactiver la bibliothèque de polices

Les développeurs d’extensions et de thèmes peuvent désactiver la bibliothèque de polices à l’aide du nouveau filtre PHP fontLibraryEnabled:

function disable_font_library_ui( $editor_settings ) { 
	$editor_settings['fontLibraryEnabled'] = false;
	return $editor_settings; 
}
add_filter( "block_editor_settings_all", "disable_font_library_ui" );

Vues de données

Les vues de données sont un composant permettant de rendre des ensembles de données à l’aide de différents types de mises en page, tels que tableau, grille, liste, et plus encore.

Avec cette itération, de nouvelles vues et des fonctionnalités connexes pour la gestion des pages, des compositions et des modèles viennent s’ajouter au cœur, et nous pouvons nous attendre à des améliorations supplémentaires avec les prochaines versions de WordPress.

Pour l’instant, WordPress 6.5 introduit les vues suivantes dans l’éditeur de site :

Modèles > Gérer tous les modèles : Table et Grille.
Compositions > Parties du modèle > Gérer toutes les parties du modèle : Table et Grille.
Compositions : Disposition en grille.
Pages > Gérer toutes les pages : Mises en pages de tableau et de grille.

Réglage de mise en page en grille pour les modèles

Outre les mises en page, les vues de données ajoutent plusieurs fonctions de visualisation, notamment les filtres, la recherche, la pagination, le tri, le masquage et l’affichage des champs.

Un bouton de modification groupée vous permet d’effectuer plusieurs actions groupées en fonction de l’ensemble de données actuel. Pour les pages, vous pouvez déplacer vers la corbeille, restaurer et supprimer définitivement.

Modifier des pages de façon groupée dans WordPress 6.5

Les vues de données sont également accompagnées d’une nouvelle API de filtre primaire visant à ajouter un type de filtre spécial – toujours visible à l’écran – aux vues de données. L’image ci-dessous montre le nouveau filtre primaire de l’état de la synchronisation dans la section d’administration des compositions.

Le filtre primaire état de la synchronisation pour les compositions

L’API DataViews est fournie avec le nouveau paquet @wordpress/dataviews npm qui permet aux développeurs d’expérimenter avec les vues de données.

API Block Bindings

L’API Block Bindings est une nouvelle API qui vise à connecter les attributs des blocs à des valeurs provenant de différentes sources de données. Ces valeurs peuvent varier en fonction du contexte. Un exemple simple serait un titre contenant le nom de l’auteur qui changerait en fonction de la valeur post_author.

Il s’agit d’une amélioration remarquable car elle étend les capacités de plusieurs blocs de base. Grâce à la nouvelle API, vous pouvez lier des données dynamiques provenant de n’importe quelle source à un attribut de bloc.

Les sources de données peuvent être les plus diverses : Données du site, champs personnalisés, données utilisateur, modèles, codes courts, autres blocs, et même outils externes utilisant Gutenberg. Un exemple de cela pourrait être un site web Drupal avec Gutenberg.

D’un point de vue technique, nous pouvons décrire le fonctionnement de l’API Block Bindings comme un processus en trois étapes:

Premièrement, vous créez une liaison entre les attributs du bloc et une source de données à l’aide d’un objet bindings.
L’API obtient la valeur de la source de données définie dans la liaison.
Ensuite, elle met à jour le code HTML du bloc à l’aide des valeurs reçues de la source de données.

La première implémentation de l’API Block Bindings qui arrive avec WordPress 6.5 permet de connecter les attributs des blocs et les champs personnalisés. Une deuxième implémentation annoncée, Synced Patterns Overrides, a été reportée à une prochaine version.

Dans un premier temps, seul un nombre limité de blocs, tels que les titres, les paragraphes, les images et les boutons, prendront en charge l’API Block Bindings. Avec les itérations futures, d’autres blocs, même des blocs personnalisés, seront ajoutés à la liste.

Cette première mise en œuvre de l’API permet également aux développeurs d’extensions d’enregistrer leurs sources de la même manière que Gutenberg enregistre la source de données core/post-meta. En te basant sur l’exemple de Santos Guillamot, vous pouvez enregistrer la source de données de votre extension de cette façon :

register_block_bindings_source(
	'myplugin/plugin-data',
	array(
		'label'              => _x( 'Plugin Data', 'block bindings source' ),
		'get_value_callback' => 'myplugin_block_bindings_post_meta_callback',
	)
);

Puis ajouter un objet bindings à votre bloc :

<!-- wp:paragraph 
{
	"metadata": {
		"bindings": {
			"content": {
				"source": "myplugin/plugin-data",
				"args": {
					"key":"plugin_key"
				}
			}
		}
	}
}
-->
<p>Paragraph</p>
<!-- /wp:paragraph -->

Voici une description de chaque propriété :

metadata: Un objet de métadonnées de bloc.
bindings: Un objet contenant une ou plusieurs liaisons.
content: L’attribut du bloc à lier à une source de données. Dans cet exemple, l’attribut content d’un bloc Paragraphe.
source: La source des liaisons.
args: Un objet d’arguments à transmettre à la source de liaisons du bloc.

Les prochaines itérations ajouteront d’autres fonctionnalités à l’API des liaisons de blocs. En outre, nous devrions bientôt pouvoir créer des liaisons à partir de l’éditeur visuel, connecter les attributs des blocs à davantage de sources de données, telles que les données du site ou de la taxonomie, et utiliser cette fonctionnalité avec davantage de blocs.

Ceci étant dit, plongeons plus profondément dans les premières implémentations de l’API Block Bindings.

Connecter des champs personnalisés à des blocs

Avant WordPress 6.5, il n’y avait aucun moyen d’injecter des valeurs de champs personnalisés dans le contenu des blocs principaux. Les développeurs pouvaient seulement créer des blocs personnalisés pour afficher les champs personnalisés sur l’interface publique.

Depuis WordPress 6.5, vous pouvez afficher les données stockées dans les champs personnalisés dans les blocs principaux, y compris les boutons, les en-têtes, les images et les paragraphes.

Comme nous l’avons déjà mentionné, l’API Block Bindings vous permet de connecter les attributs des blocs et différentes sources de données, y compris la source « meta_fields ». Pour utiliser cette fonctionnalité, vous devez d’abord activer les champs personnalisés dans l’éditeur à partir de Options -> Préférences -> Général -> Avancé.

La fenêtre modale des préférences dans l'éditeur de publications — La fenêtre modale des préférences dans l’éditeur de publications

Notez que, depuis WordPress 6.5, vous n’avez pas de contrôle d’interface utilisateur pour lier la valeur d’un champ personnalisé à un attribut de bloc.

Ainsi, une fois que vous avez ajouté la clé et la valeur de votre champ personnalisé, vous devez passer à l’éditeur de code et ajouter un objet « bindings » à l’intérieur du délimiteur de bloc, comme le montre le code ci-dessous :

<!-- wp:paragraph 
	{
		"metadata": {
			"bindings": {
				"content": {
					"source":"core/post-meta",
					"args": {
						"key":"my_custom_field"
					}
				}
			}
		}
	} -->
	<p>Paragraph</p>
<!-- /wp:paragraph -->

L’ajout d’un champ personnalisé à un bloc verrouille les contrôles appropriés, ce qui rend le contenu du bloc non modifiable.

Voyons maintenant comment cela fonctionne avec un bloc Image. Ajoute deux champs personnalisés pour les attributs alt et src.

Deux champs personnalisés pour stocker les valeurs alt et src

Ajoutez ensuite un bloc Image, passez à l’éditeur de code et ajoutez un objet bindings au bloc, comme dans l’exemple suivant :

<!-- wp:image {
	"metadata":{
		"bindings":{
			"url":{
				"source":"core/post-meta",
				"args":{
					"key":"img_src"
				}
			},
			"alt":{
				"source":"core/post-meta",
				"args":{
					"key":"img_alt"
				}
			}
		}
	}
}
-->
<figure class="wp-block-image"><img src="" alt="" /></figure>
<!-- /wp:image -->

Vous remarquerez que vous ne pourrez pas remplacer la source de l’image en utilisant les contrôles de l’éditeur.

L'espace réservé de l'image sans les contrôles des médias — L’espace réservé de l’image sans les contrôles des médias

Avec cette première itération, seuls les attributs de bloc suivants peuvent être connectés aux champs personnalisés :

Paragraphe : contenu.
Titre : contenu.
Image : URL, alt et titre.
Bouton : texte, URL, linkTarget, rel.

Pour un aperçu plus complet de la connexion des champs personnalisés avec les attributs de bloc, voir cette introduction complète aux Block Bindings.

Système de révision amélioré

Les révisions vous donnent l’assurance que vous pouvez annuler tout changement en rétablissant une version antérieure de l’apparence du site à n’importe quel moment. En raison de l’importance d’un système de révision fiable sur les sites web collaboratifs, les révisions de style occupent une place prépondérante dans la phase actuelle de développement de WordPress. WordPress 6.5 apporte plusieurs améliorations significatives au système de révision.

Voici ce à quoi vous pouvez vous t’attendre avec les révisions dans WordPress 6.5.

Description des changements

Dans la version précédente de WordPress, seuls la date, l’heure et l’auteur de chaque révision étaient visibles. À partir de WordPress 6.5, en plus de ces détails, vous verrez également un bref résumé et d’autres détails de cette version.

Révisions et pagination illimitées

Avant la version 6.5, en raison de la limite de l’API Rest, il n’était possible d’afficher qu’un maximum de 100 révisions dans un seul panneau de la colonne latérale.

Grâce aux deux nouveaux sélecteurs getRevisions et getRevision, introduits avec Gutenberg 17.2 et désormais fusionnés dans le cœur avec WordPress 6.5, la limite de 100 révisions n’existe plus. De plus, vous pouvez parcourir toutes les révisions existantes divisées en pages de 10 éléments chacune.

Intégration du livre de style des révisions

Un autre changement fait que le panneau des révisions est également disponible avec le livre de style. Cela vous permet de vérifier les modifications que vous avez apporté à vos styles sur les compositions et les blocs qui ne sont pas inclus dans le modèle actuel.

Le livre de style prend désormais en charge les révisions

Révisions des modèles et des parties de modèles

Les révisions de modèles et de parties de modèles sont également disponibles pour que vous puissiez passer à une version précédente de votre projet de conception, ce qui ajoute une couche de sécurité supplémentaire à votre flux de travail.

API d’interactivité

Avant WordPress 6.5, pour ajouter de l’interactivité à leurs pages, les développeurs auraient dû implémenter eux-mêmes leurs bibliothèques JavaScript préférées. Malheureusement, cela a conduit à un manque de cohérence dans le développement JavaScript dans l’interface publique.

À partir de WordPress 6.5, une nouvelle API d’interactivité fournit un moyen moderne et standardisé d’ajouter de l’interactivité à l’interface publique de vos sites WordPress.

Si vous vous demandez ce que fait cette nouvelle API, nous en avons eu un avant-gout plus tôt dans WordPress 6.4 puisque les blocs principaux Image, Recherche, Fichier, Navigation et Requête ont été remaniés à l’aide de la version privée de l’API. L’effet lightbox sur les images est un autre bon exemple.

La pagination dynamique, la recherche instantanée et l’interaction en temps réel entre les blocs ne sont que quelques exemples de ce que vous pourrez mettre en œuvre sur vos sites web en utilisant l’API Interactivité :

Les blocs peuvent partager des données, des actions et des rappels entre eux. Cela rend la communication entre les blocs plus simple et moins sujette aux erreurs. Par exemple, un clic sur un bloc « ajouter au panier » peut mettre à jour de façon transparente un bloc « panier » séparé.

Et c’est incroyablement rapide. Tous les scripts nécessaires pour ajouter de l’interactivité ne seront chargés sur l’interface publique que si vous avez au moins un bloc interactif sur la page.

L’API Interactivité adopte une approche moderne du développement frontend qui exploite la puissance des attributs HTML personnalisés pour réduire la quantité de JavaScript nécessaire pour ajouter de l’interactivité à vos pages.

Si vous connaissez les bibliothèques frontend telles que HTMX et Alpine.js, vous serez heureux de voir la même logique mise en œuvre dans WordPress avec l’API d’interactivité. Alors, de quoi s’agit-il ? Allons-y plus en profondeur.

Qu’est-ce que l’API d’interactivité ?

L’API d’interactivité est un nouveau système standard de directives pour la création de blocs interactifs qui permettra aux développeurs d’ajouter facilement de l’interactivité à la partie frontend de leurs blocs afin que les visiteurs du site puissent interagir avec votre contenu sans avoir à recharger la page. Pensez à des choses comme la recherche instantanée, l’ajout de commentaires, l’ajout à un panier et la pagination dynamique.

La nouvelle API répond à un certain nombre d’exigences qui en font un outil de développement moderne, notamment :

Elle prend en charge le rendu côté serveur et le HTML hydraté par le client.
Elle fonctionne bien avec PHP et le système de blocs actuel.
Elle est rétrocompatible avec les crochets WordPress et les bibliothèques JavaScript existantes.
Elle suit une approche déclarative au lieu d’une approche impérative.
Elle est performante et extensible.
Elle est atomique et composable: Chaque directive contrôle une petite partie du DOM, et plusieurs directives peuvent être combinées pour créer des applications complexes.
Elle est compatible avec les outils de développement WordPress existants.

Comme mentionné ci-dessus, l’API Interactivité est basée sur des directives, qui sont des attributs HTML spéciaux qui vous permettent d’attacher un comportement spécifique aux éléments du DOM. Voici un exemple de bloc interactif :

<div
	<?php echo get_block_wrapper_attributes(); ?>
	data-wp-interactive='{ "namespace": "create-block" }'
	data-wp-context='{ "isOpen": false }'
	data-wp-watch="callbacks.logIsOpen"
>
	<button
		data-wp-on--click="actions.toggle"
		data-wp-bind--aria-expanded="context.isOpen"
		aria-controls="<?php echo esc_attr( $unique_id ); ?>"
	>
		<?php esc_html_e( 'Toggle', 'inter-block' ); ?>
	</button>

	<p
		id="<?php echo esc_attr( $unique_id ); ?>"
		data-wp-bind--hidden="!context.isOpen"
	>
		<?php
			esc_html_e( 'Inter Block - hello from an interactive block!', 'inter-block' );
		?>
	</p>
</div>

WordPress traite ces directives sur le serveur et génère le balisage correspondant.

Comment commencer avec l’API d’interactivité

La mise en œuvre de l’API d’interactivité n’affectera pas le flux de travail de création des blocs. Vous pouvez mettre en place une extension qui enregistre un bloc interactif à l’aide de la commande @wordpress/create-block et d’un modèle interactif spécifique.

Lancez votre outil de ligne de commande préféré, naviguez jusqu’à votre répertoire plugins, et exécutez la commande suivante :

npx @wordpress/create-block@latest my-interactive-block --template @wordpress/create-block-interactive-template

Ceci génère un bloc interactif à partir d’un modèle qui utilise le champ de métadonnées viewScriptModule. Le module de script déclaré dans viewScriptModule sera mis en file d’attente lorsqu’un bloc sera rendu sur l’interface publique. (Voir aussi les notes viewScriptModule et Script Modules).

Un projet de bloc interactif dans Visual Studio Code

Une fois le processus d’installation terminé, vous trouverez une nouvelle extension dans votre tableau de bord WordPress. Activez-la, puis retournez à la ligne de commande, naviguez jusqu’au répertoire de la nouvelle extension, et démarrez le service :

cd my-interactive-block && npm start

Maintenant, créez un nouvel article ou une nouvelle page, ouvrez l’insertion de blocs et descendez jusqu’à la section Widgets. Vous y trouverez un nouveau bloc appelé My Interactive Block que vous pourrez utiliser comme modèle pour de nouvelles créations passionnantes et interactives :

Ajoutez le bloc à votre contenu et enregistrez l’article. L’aperçu de l’article affichera une bascule qui cache/affiche un texte factice. Et c’est tout. Maintenant, vous pouvez commencer à construire des blocs interactifs.

Vous pouvez en savoir plus sur la façon de créer des blocs interactifs à l’aide de l’API d’interactivité sur le blog WordPress Core, la documentation de GitHub et la note de développement de l’API d’interactivité.

Le site de démonstration wpmovies.dev est un excellent exemple de l’API d’interactivité à l’œuvre.

Nouveaux outils de conception

WordPress 6.5 introduit également de nouveaux outils de conception qui vous permettent de personnaliser davantage votre design sans avoir recours à un code CSS personnalisé.

Prise en charge de la taille et de la répétition de l’image d’arrière-plan pour le bloc Groupe

Le bloc Groupe prend désormais en charge les fonctions de taille et de répétition pour les images d’arrière-plan. Cela vous permet également de définir la taille de l’image d’arrière-plan pour couvrir ou contenir, en conservant le même rapport d’aspect.

Contrôle de la taille de l'image d'arrière-plan pour un bloc Groupe — Contrôle de la taille de l’image d’arrière-plan pour un bloc Groupe

De plus, lorsque vous définissez la taille de l’arrière-plan sur Fixe, une bascule Répéter s’affiche pour vous permettre d’activer ou de désactiver la répétition de l’arrière-plan.

Prise en charge des proportions pour le bloc Couverture

Le bloc Couverture prend désormais en charge le ration d’aspect. Vous pouvez contrôler le rapport d’aspect du bloc au niveau global à partir de l’interface Style global ou l’ajuster individuellement dans votre contenu.

Le contrôle du rapport d'aspect pour le bloc Couverture — Le contrôle du rapport d’aspect pour le bloc Couverture

Prise en charge de l’ombre pour d’autres blocs

Jusqu’à présent, le bloc Bouton était le seul bloc à prendre en charge les ombres. WordPress 5.6 ajoute la prise en charge des ombres aux blocs Colonne et Colonne et Image.

Vous pouvez ajouter des ombres à ces blocs à partir de l’onglet Styles du bloc dans les réglages du bloc.

Le bloc Image prend désormais en charge les ombres

Mises à jour de l’éditeur de site

Plusieurs améliorations apportées à l’éditeur de site devraient considérablement améliorer votre expérience d’édition et rationaliser votre flux de travail.

Améliorations de l’affichage des listes

La vue en liste est un élément central du flux de travail de conception, et WordPress 6.5 apporte quelques améliorations.

Tout d’abord, vous pouvez maintenant faire un clic droit sur la vue en liste pour accéder à la liste déroulante des réglages du bloc. Il s’agit d’une petite amélioration utile qui devrait rationaliser votre processus de création, car elle facilite l’accès aux réglages des blocs à partir de la vue en liste.

Une deuxième amélioration vous permet de renommer presque tous les blocs de la vue en liste, à l’exception des blocs suivants :

core/block
core/template-part
core/pattern
core/navigation

La vue en liste a également été améliorée grâce à un raccourci clavier. Vous pouvez maintenant sélectionner tous les blocs de la vue Liste en cliquant sur CTRL + A sous Windows et CMD + A sous Mac. Cela vous permet d’effectuer facilement des actions groupées.

Dupliquer et renommer les compositions

Les compositions fournies par les thèmes ne sont pas modifiables, vous ne pouvez donc pas les utiliser pour créer vos propres compositions ou simplement changer quelque chose dans la composition. WordPress 6.5 ajoute une petite fonction très utile permettant de dupliquer et de renommer les compositions, ce qui vous permet de changer les réglages de synchronisation et de modifier les compositions selon vos besoins.

Il est désormais possible de renommer et de supprimer des compositions

En outre, deux nouvelles catégories de compositions ont été ajoutées : Audio et Vidéo.

Le panneau des catégories de compositions dans WordPress 6.5

Un panneau de préférences amélioré

Avec WordPress 6.5, le panneau des préférences a été mis à jour, et les réglages existants ont été réorganisés. Les principaux changements comprennent :

De nouveaux panneaux « Apparence » et « Accessibilité ».
Un nouveau réglage de la barre d’outils supérieure sous Apparence.

L’activation de la barre d’outils supérieure déplace tous les outils de bloc et de document dans une seule barre d’outils en haut de l’éditeur.

L'interface des préférences remaniée avec la barre d'outils supérieure activée — L’interface des préférences remaniée avec la barre d’outils supérieure activée

Barre d’outils de bloc en mode sans distraction

Avant WordPress 6.5, l’accès à la barre d’outils de bloc n’était pas possible en mode sans distraction, et vous étiez obligé de l’activer et de la désactiver à chaque changement. Depuis WordPress 6.5, le passage du curseur sur la zone supérieure de l’éditeur permet d’afficher la barre d’outils bloc pour vos personnalisations.

La barre d'outils des blocs en mode sans distraction — La barre d’outils des blocs en mode sans distraction

Composant LinkControl amélioré

Le composant LinkControl a été amélioré et il est désormais plus facile d’ajouter des liens. L’image suivante montre le nouveau panneau qui apparait lorsque vous cliquez sur un lien à modifier.

Édition d'un lien dans WordPress 6.5 — Édition d’un lien dans WordPress 6.5

Pour une liste complète des modifications apportées au composant LinkControl, voir PR #50891.

Améliorations du glisser-déposer

Le glisser-déposer a été amélioré dans plusieurs zones de l’éditeur.

Dans la vue en liste :

Lorsque vous déposez un bloc dans un bloc réduit, ce dernier s’agrandit.
Un curseur de déplacement apparait lorsque vous faites glisser des éléments.

Dans le canevas de l’éditeur :

Vous pouvez maintenant faire glisser et déposer des éléments au début ou à la fin de votre contenu.
Le glisser-déposer d’éléments entre blocs conteneurs frères a été amélioré.
Il est également possible de faire glisser des blocs dans des parties de modèles.
Une nouvelle indication visuelle vous informe désormais qu’un bloc n’est pas « glissable ».
Vous pouvez faire glisser et déposer des éléments au début ou à la fin d’un document.
Vous pouvez créer des rangées ou des galeries en faisant simplement glisser et en déposant des blocs près d’autres blocs. Par exemple, l’ajout d’une image à côté d’une autre image convertira le bloc Image existant en bloc Galerie.

Glisser-déposer une image près d'un bloc Image — Glisser-déposer une image près d’un bloc Image

Vous pouvez maintenant convertir un bloc Image en Galerie en faisant glisser et en déposant des images

Pour une liste plus complète des améliorations apportées au glisser-déposer, consultez le glisser-déposer des blocs.

Changements et améliorations supplémentaires

Mais attendez, ce n’est pas tout ! WordPress 6.5 apporte également un tas d’autres changements et améliorations qui méritent d’être mentionnés.

Outils d’apparence pour les thèmes classiques

Les thèmes classiques peuvent également profiter de certaines des fonctionnalités de conception introduites dans l’éditeur de site, même sans utiliser theme.json. À partir de WordPress 6.5, opter pour la prise en charge du thème appearanceTool inclura les fonctionnalités de conception suivantes :

Bordure
Couleur
Espacement
Typographie

Cela peut donner aux utilisateurs de thèmes classiques un aperçu des capacités de l’éditeur de site et simplifier la transition entre les thèmes classiques et les thèmes en bloc.

Outils d'apparence dans WordPress 6.5 avec le thème Twenty Twenty-One — Outils d’apparence dans WordPress 6.5 avec le thème Twenty Twenty-One

Prise en charge de l’AVIF

WordPress 6.5 introduit également la prise en charge du format d’image AVIF, caractérisé par un algorithme de compression avancé permettant d’obtenir une qualité d’image supérieure avec un taux de compression élevé. Par conséquent, AVIF produit des fichiers d’image plus petits que les formats conventionnels, y compris le format WebP.

Les utilisateurs peuvent désormais téléverser des fichiers AVIF de manière transparente via la médiathèque de WordPress, comme pour les autres formats d’image. Cependant, vérifie la compatibilité de ta plateforme d’hébergement avec le format de fichier AVIF.

Prise en charge par le navigateur du format d'image AVIF — Prise en charge par le navigateur du format d’image AVIF (Source : Can I Use)

Vous pouvez vérifier si votre hébergeur prend en charge le format d’image AVIF dans l’écran Santé du site de votre installation WordPress en cliquant sur l’onglet Info et en développant la section Traitement des médias.

Dépendances des plugins

Certaines extensions ajoutent de nouvelles fonctionnalités par-dessus d’autres extensions en tant qu’extensions/modules. Pour que ces extensions fonctionnent, vous devez d’abord installer et activer leurs dépendances – les extensions sur lesquels elles s’appuient.

Depuis WordPress 6.5, les développeurs d’extensions peuvent utiliser un nouvel en-tête d’extension « Requires Plugins ». Cet en-tête débloque une fonction puissante qui rationalise le processus d’installation et d’activation des dépendances. Il contient une liste de slugs séparés par des virgules des dépendances nécessaires au fonctionnement d’une extension dépendante.

Cela fournit des informations à l’utilisateur de l’extension avec des liens vers le dépôt d’extensions de WordPress.org pour installer et activer les dépendances.

De plus, l’extension de dépendance fournit un détail « Required by » qui liste les extensions dépendantes qui ont besoin d’elle lui pour fonctionner. Vous remarquerez également que vous n’êtes pas autorisé à supprimer l’extension de dépendance à moins que vous ne supprimiez l’extension dépendante.

Extensions nécessaires dans WordPress 6.5

WordPress 6.5 introduit également un nouveau filtre wp_plugin_dependencies_slug qui vous permet de filtrer les extensions de dépendance de manière programmatique.

Voir la note de développement sur les dépendances des extensions pour une discussion plus approfondie.

Mises à jour de l’API HTML

Avec WordPress 6.5, le processeur de balises de l’API HTML a reçu plusieurs améliorations, et il analyse désormais tous les types de balises syntaxiques, y compris les balises et les commentaires, les définitions de doctype et les nœuds de texte.

Cela permet de modifier le texte enveloppé dans les limites du jeton, appelé texte modifiable, sans affecter la structure d’un document.

Le texte modifiable est le contenu entier d’un nœud de texte, le contenu d’un commentaire HTML ou le contenu entre les balises d’ouverture et de fermeture d’éléments spéciaux, tels que les éléments script ou style.

Un certain nombre de nouvelles méthodes ont été introduites :

next_token() – passe à l’élément suivant dans le document
get_token_type() – obtient le type d’élément trouvé
get_token_name() – obtient le nom d’un élément
get_modifiable_text() – renvoie le contenu textuel correctement décodé pour un élément donné.
get_comment_type() – obtient le type de commentaire
paused_at_incomplete_token() – retourne true si le Tag Processor atteint la fin d’un document tronqué au milieu d’un élément.

Pour un aperçu plus complet, consulte la note de développement sur les mises à jour de l’API HTML dans la version 6.5.

Unification des éditeurs de sites et d’articles

Dans WordPress 6.5, les éditeurs reçoivent plusieurs mises à jour visant à unifier l’interface utilisateur et le comportement.

Plusieurs panneaux de la colonne latérale ont été déplacés du package edit-post au package @wordpress/editor pour apporter les fonctionnalités correspondantes à l’éditeur de site :

Attributs de la page (PR #57151)
Taxonomie des messages (PR #57049)
Ajout d’un lien Afficher dans l’éditeur de site pour les types de publication (PR #57153)
Ajout du panneau Discussion à la colonne latérale de l’éditeur de site pour les types de publication qui le prennent en charge (PR #57150)
Ajout du panneau de l’image mise en avant (PR #57053)
Ajout du panneau de révision à l’éditeur de site (PR #57010)

Un autre changement permet de prévisualiser le modèle lors de l’édition d’une page dans l’éditeur d’articles, comme c’était déjà possible dans l’éditeur de site, et vous pouvez activer/désactiver la prévisualisation du modèle à partir de la colonne latérale de la page Réglages.

Améliorations des performances

Plus de 110 améliorations des performances ont permis d’augmenter considérablement la vitesse et l’efficacité de l’éditeur d’articles et de l’éditeur de site. Les temps de chargement sont désormais deux fois plus rapides qu’avec la version 6.4, et la vitesse de traitement des entrées est presque quatre fois plus rapide. De plus, l’intégration de la bibliothèque i18 de Performant Translations contribue à réduire l’utilisation de la mémoire et le temps de chargement des sites web traduits.

Améliorations de l’accessibilité

Avec la sortie de WordPress 6.5, plus de 65 mises à jour seront fusionnées dans le cœur afin d’améliorer l’accessibilité dans l’ensemble du panneau d’administration. Ces améliorations comprennent le style de mise au point, le rapport de contraste, l’ordre des menus de la personnalisation, et plus encore.

Mises à jour des Block Hooks

Introduits pour la première fois avec WordPress 6.4, les Block Hooks permettent de placer automatiquement un bloc dans une position spécifique lorsqu’un autre bloc est ajouté au contenu.

Les Block Hooks étaient auparavant disponibles pour les modèles, les parties de modèles et les compositions qui n’avaient pas été modifiés par l’utilisateur. Désormais, ils peuvent également être utilisés avec des mises en page modifiées.

Avant WordPress 6.5, un Block Hook ne pouvait être ajouté qu’avant ou après le bloc Navigation. Avec cette itération, les Blocs Hooks peuvent également être ajoutés à un bloc Navigation en tant que premier ou dernier enfant.

De plus, cette itération introduit les nouveaux filtres hooked_block et hooked_block_{$hooked_block_type}.

Pour un aperçu plus approfondi et des exemples d’utilisation, voir la note de développement Block Hook.

Résumé

WordPress 6.5 apporte des tonnes de changements qui vous rendront heureux quand il s’agit de la construction de sites et de la création de contenu.

La nouvelle bibliothèque de polices de WordPress vous permet de gérer les polices d’une manière qui ressemble à la gestion des médias dans la médiathèque, ce qui vous donne un plus grand contrôle sur la typographie. Avec les vues de données, vous pouvez rendre vos ensembles de données en utilisant différentes mises en page, filtres et options de recherche, ce qui améliore l’expérience globale. Avec l’API Block Bindings et l’API d’interactivité, vous pouvez offrir une expérience plus dynamique et personnalisée aux utilisateurs de votre site.

Avec toutes ces mises à jour passionnantes, WordPress 6.5 change la donne.

Avez-vous la nouvelle version de WordPress dans votre environnement de développement ? Quelles sont les fonctionnalités que vous préférez dans WordPress 6.5 ? Partagez vos réflexions dans la section des commentaires.

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.