Nouveautés de WordPress 6.4 : Blocks Hooks, flux de travail amélioré, nouveaux outils de conception, nouveau thème par défaut, et bien plus encore

La sortie de WordPress 6.4 est prévue pour le 7 novembre, et il est temps pour nous d’explorer les fonctionnalités et améliorations les plus remarquables qui seront livrées avec la nouvelle version de WordPress.

Les ajouts les plus intéressants comprennent les Blocks Hooks, une meilleure organisation des modèles, une palette de commandes redessinée et améliorée, des changements dans les pages de pièces jointes, un effet de visionneuse sur les images, et plusieurs améliorations dans le flux de travail de rédaction.

L’amélioration du chargement des modèles, l’affinement des stratégies de chargement des scripts et d’autres améliorations des performances permettront à votre site WordPress de fonctionner plus rapidement, tandis que les améliorations de l’affichage en liste et plusieurs mises à jour de l’interface utilisateur de l’administrateur la rendront plus utilisable et plus accessible.

WordPress 6.4 apporte également un nouveau thème par défaut avec des tonnes de modèles prêts à l’emploi qui rationaliseront votre processus d’édition.

Cela fait beaucoup de choses, n’est-ce pas ? Alors n’attendez plus et découvrez les nouveautés de WordPress 6.4.

Block Hooks

Les Block Hooks (anciennement nommés Auto-inserting blocks) permettent aux extensions d’interagir automatiquement avec l’éditeur Gutenberg.

Plus précisément, grâce aux Block Hooks, un bloc peut être automatiquement placé à une position spécifique lorsqu’un autre bloc est ajouté au contenu.

Deux principes guident la manière dont les Block Hooks doivent fonctionner :

• L’utilisateur ne doit pas être invité à insérer manuellement le bloc dans l’éditeur, et l’insertion du bloc dans la partie publique doit se produire immédiatement après l’activation de l’extension fournissant le bloc accroché. La désactivation de l’extension devrait automatiquement supprimer le bloc.
• Le bloc doit être visible dans l’éditeur et l’utilisateur doit pouvoir contrôler l’insertion automatique.

Pour tenir compte de ces deux principes et préserver les informations contenues dans le code, les blocs accrochés ne fonctionnent que dans les modèles et parties de modèles non modifiés et dans les modèles fournis par les thèmes, copiés à partir du répertoire des modèles ou enregistrés avec la fonction register_block_pattern. Ils ne fonctionnent pas dans le contenu des messages, les modèles et parties de modèles modifiés et les modèles créés par les utilisateurs.

En outre, la note de développement met en garde :

à partir de WordPress 6.4, vous ne pouvez pas insérer automatiquement des blocs qui ont une fonction de sauvegarde, ou des erreurs de validation de bloc se produiront. En termes familiers, cela signifie que les Block Hooks fonctionnent avec des blocs dynamiques, et non avec des blocs statiques.

Pour en savoir plus sur les blocs statiques et dynamiques.

Vous pouvez implémenter les Block Hooks de deux manières : en utilisant le fichier block.json ou le nouveau filtre hooked_block_types.

Accrocher des blocs via block.json

L’utilisation de block.json est un moyen simple et rapide d’accrocher un bloc tiers, mais il n’offre pas une grande flexibilité, ce qui signifie qu’un bloc automatiquement inséré via block.json sera attaché à toutes les instances de la cible sans condition.

Vous pouvez ajouter des blocs accrochés en utilisant la nouvelle propriété blockHooks, qui prend un objet de paires clé/valeur où la clé est le nom du bloc que vous voulez accrocher, et la valeur spécifie sa position par rapport au bloc cible.

Vous pouvez définir l’une des positions suivantes :

• before le bloc cible
• after le bloc cible
• firstChild du bloc conteneur cible
• lastChild du bloc conteneur cible

Par exemple, vous pouvez relier un bloc à chaque bloc d’espacement en utilisant blockHooks de cette manière :

{
	blockHooks: {
		'core/spacer': 'after'
	}
}

Lorsque vous utilisez firstChild ou lastChild avec block.json, un nouveau panneau Extensions dans l’inspecteur de blocs répertorie les blocs qui sont censés être insérés automatiquement, avec des options permettant d’activer ou de désactiver l’insertion automatique des blocs.

Accrocher des blocs à l’aide de hooked_block_types

Une façon plus flexible d’accrocher des blocs à une cible est d’utiliser le nouveau filtre hooked_block_types. Il vous permet d’accrocher des blocs inconditionnellement, tout comme la méthode block.json, ou en fonction d’une condition – par exemple accrocher un bloc à une cible en fonction du modèle, de la partie du modèle ou de la composition où il se trouve.

La fonction de rappel de hooked_block_types accepte quatre paramètres :

• $hooked_blocks – Un tableau de blocs accrochés.
• $position – Il peut s’agir de before, after, first_child ou last_child.
• $anchor_block – Le nom du bloc d’ancrage.
• $context – Le modèle de bloc, la partie de modèle ou la composition auquel le bloc d’ancrage appartient.

Pour plus d’informations techniques sur les Block Hooks, consultez la note de développement.

Améliorations du système de compositions

Les compositions de blocs sont un outil de conception puissant qui peut être utilisé dans votre contenu ou vos modèles, vous permettant de construire des structures complexes de blocs en toute simplicité. Vous pouvez utiliser les compositions fournies par votre thème de bloc, ou vous pouvez ajouter d’autres compositions en les copiant depuis le répertoire des compositions.

Vous pouvez également créer vos compositions à partir de zéro dans l’interface de l’éditeur de site/publication. Et si vous vous sentez à l’aise avec le codage, vous pouvez ajouter des compositions à votre thème actuel – ou à votre thème enfant – à l’aide d’un fichier .php. De nos jours, les compositions sont si importantes dans WordPress que nous avons publié un guide approfondi sur tout ce qui concerne les blocs de compositions.

Ceci étant dit, voyons ce qu’il y a de nouveau dans le système de compositions avec WordPress 6.4.

Tout d’abord, les catégories de compositions. Dans la version précédente de WordPress, lorsque vous créiez une nouvelle composition vous ne pouviez définir que le nom et le type de composition, synchronisé ou non synchronisé.

A partir de WordPress 6.4, vous pouvez également ajouter une catégorie pour votre composition afin qu’elle soit plus facilement identifiable dans l’éditeur de site et de publications.

Il est également possible de modifier les catégories lorsque vous modifiez la composition.

De plus, l’onglet Compositions synchronisées de l’outil d’insertion de blocs a été supprimé et vous pouvez désormais accéder à toutes vos compositions à partir du même onglet Compositions.

Il est également plus facile d’importer ou d’exporter des compositions au format JSON depuis l’éditeur de site.

D’autres changements améliorent la compatibilité des compositions avec les thèmes classiques et ouvrent la voie à de futures implémentations.

Twenty Twenty-Four

Twenty Twenty-Four est le nouveau thème WordPress par défaut qui arrive avec WordPress 6.4. Il s’agit d’un thème WordPress multifonctionnel et minimal conçu pour trois cas d’utilisation principaux : les propriétaires de petites entreprises, les photographes et les artistes, ainsi que les écrivains et les blogueurs.

Twenty Twenty-Four n’ajoute aucune fonctionnalité à votre site web. Il s’agit plutôt d’une collection de modèles et de compositions qui, combinés ensemble, vous permettent de créer une grande variété de sites web.

De plus, il fournit beaucoup de contenu par défaut avec des tonnes d’exemples réels de structures de pages que vous pouvez éditer et personnaliser en fonction de vos besoins.

Nous avons un article complet qui couvre le nouveau thème Twenty Twenty-Four. Consultez-le pour en savoir plus.

Nouveaux outils et fonctionnalités de conception

Avec WordPress 6.4, plusieurs outils et fonctionnalités de conception font leur apparition. Les plus intéressants sont les suivants :

Contrôle des couleurs pour le bloc de contenu

Le bloc Contenu est un enfant du bloc Boucle de requête et est particulièrement utile lorsque vous avez besoin de personnaliser l’apparence du contenu dans une boucle de requête.

Il est disponible dans l’éditeur de publications lorsque vous modifiez une boucle de requête et dans l’éditeur de site lorsque vous créez ou modifiez un modèle.

Avec WordPress 6.4, le bloc Contenu a été amélioré et supporte désormais les couleurs pour le texte, l’arrière-plan et les liens.

Prise en charge des blocs d’images d’arrière-plan

La prise en charge d’un nouveau bloc d’image d’arrière-plan a été ajouté avec WordPress 6.4, avec le bloc Groupe activé par défaut.

Lorsqu’un thème utilise la fonctionnalité appearanceTools dans le theme.json, un panneau Arrière-plan affiche le contrôle de l’image d’arrière-plan correspondant, qui montre également un aperçu de l’image d’arrière-plan.

La définition d’une image d’arrière-plan ajoute la propriété background-image à l’élément div du bloc, ainsi qu’une déclaration background-size: cover qui garantit que l’image couvre le bloc de groupe.

Vous avez deux possibilités pour ajouter la prise en charge des images d’arrière-plan à vos thèmes. La première, et la plus simple, consiste à opter pour la propriété appearanceTools. Cela permet d’utiliser plusieurs outils de conception, y compris les images d’arrière-plan.

Si vous avez besoin d’un contrôle plus granulaire sur les outils de conception, vous pouvez utiliser la propriété backgroundImage dans votre theme.json de cette façon :

{
	"settings": {
		"background": {
			"backgroundImage": true
		}
	}
}

Effet de visionneuse à lumière sur les images

Un nouveau bouton Agrandir au clic dans le panneau Réglages d’image de bloc vous permet d’activer/désactiver l’effet lightbox sur vos images. Il s’agit de la première itération de cette fonctionnalité, qui devrait être améliorée dans les prochaines versions.

L’effet de visionneuse fonctionne également avec les filtres duotone, mais il est un peu déroutant lorsqu’il s’agit de galeries d’images. À l’heure où nous écrivons ces lignes, il n’est pas possible d’activer l’effet de visionneuse au niveau de la galerie et vous devez activer cette fonctionnalité sur les images individuelles.

Pour mettre en œuvre cette fonctionnalité dans les versions précédentes de WordPress, vous deviez utiliser une extension. Maintenant, elle fait partie du cœur et cela signifie moins de code tiers pour votre site web WordPress.

Orientation verticale du texte

Une nouvelle option d’orientation du texte permet aux thèmes de prendre en charge le texte vertical. Si votre thème supporte cette fonctionnalité, vous pouvez activer le texte vertical de droite à gauche dans les réglages de typographie.

Cette fonctionnalité est désactivée par défaut. Les développeurs de thèmes peuvent ajouter la prise en charge de l’orientation du texte en ajoutant un nouveau réglage writingMode à leur theme.json:

{
	settings: {
		"typography": {
			"writingMode": true
		}
	}
}

Vous pouvez également définir un comportement par défaut différent pour des blocs spécifiques. L’exemple suivant montre comment définir l’orientation vertical-rl pour tous les blocs de paragraphe :

{
	"styles": {
		"blocks": {
			"core/paragraph": {
				"typography": {
					"writingMode": "vertical-rl"
				}
			},
		}
	}
}

Améliorations pour le bloc des notes de bas de page

WordPress 6.4 introduit également quelques améliorations pour le bloc Notes de bas de page. Il supporte désormais les couleurs de lien, d’arrière-plan et de texte. Il fournit également des contrôles pour la typographie, les dimensions et les bordures.

Les contrôles de couleur du texte et des liens sont développés par défaut. Les autres contrôles sont réduits au chargement de la page.

Boutons autorisés dans le bloc Navigation

Les boutons figurent désormais dans la liste des éléments internes autorisés du bloc Navigation.

Lorsque vous créez un nouvel élément de menu, vous pouvez facilement le transformer en bouton depuis la barre d’outils du bloc.

Améliorations de l’interface utilisateur et du flux de travail

WordPress 6.4 apporte également plusieurs améliorations à l’interface de l’éditeur, améliorant l’expérience d’édition et rationalisant le flux de travail. Nos changements préférés sont les suivants :

Palette de commandes améliorée

Introduite pour la première fois avec WordPress 6.3, la palette de commandes vous permet de lancer des actions fréquemment utilisées dans l’interface de l’éditeur de site. WordPress 6.4 marque un nouveau pas en avant avec une mise à jour de la conception et quelques améliorations supplémentaires.

Les images ci-dessous montrent un exemple de comportement différent de la palette de commandes dans WordPress 6.3 et 6.4.

Cette version ajoute également quelques nouvelles commandes et améliore la cohérence et la dénomination. Les nouvelles commandes incluent les transformations de blocs et les options de duplication, de copie, de suppression et d’insertion avant/après.

Un léger changement supprime les verbes au début de nombreuses commandes. Cela améliore la recherche et la clarté de plusieurs commandes.

La nouvelle version ajoute également des commandes de sélection de blocs. Pour le voir en action, sélectionnez quelques blocs dans l’éditeur de site et appuyez sur cmd + k (MacOS) ou ctrl + k (Windows) et saisissez une clé de recherche telle que « transform ». Vous devriez voir les suggestions suivantes :

Vous pouvez effectuer plusieurs commandes sur une sélection de blocs. Par exemple, vous pouvez regrouper quelques blocs :

Vous pouvez également les dégrouper.

À l’heure où nous écrivons ces lignes, les commandes de sélection de blocs sont les suivantes : Ajouter avant, Ajouter après, Supprimer, Dupliquer, Déplacer vers, Grouper, Dissocier et Transformer en.

Amélioration de la vue en liste

La vue en liste vous permet de parcourir le contenu de la page et d’effectuer plusieurs actions sur les blocs, les groupes et les compositions. Ces actions incluent Copier, Dupliquer, Grouper, et bien plus encore. Cette fonction est particulièrement utile pour les structures complexes de blocs imbriqués, car elle vous permet de développer et de réduire des groupes d’éléments et d’effectuer plusieurs actions sur des blocs, des groupes et des compositions uniques.

A partir de WordPress 6.4, vous pouvez également renommer un groupe de blocs, prévisualiser les images pour les blocs Galerie et Image, dupliquer des blocs en utilisant le raccourci cmd + shift + d (ctrl + shift + d sur Windows).

Barres d’outils attachées

Lorsque vous modifiez des blocs avec plusieurs enfants, il peut être difficile de travailler avec les blocs intérieurs. C’est particulièrement vrai pour le bloc Navigation.

Avant WordPress 6.4, lors de la sélection des blocs internes, la barre d’outils du bloc se déplaçait vers une position différente sur l’écran. Ce comportement conduisait à une mauvaise expérience utilisateur pour les blocs tels que Navigation et Liste.

Depuis WordPress 6.4, la barre d’outils du bloc enfant est attachée à la position du parent. Ainsi, lorsque vous passez d’un bloc à l’autre, la barre d’outils reste fixée au même endroit que le parent.

La barre d’outils capturée est actuellement mise en œuvre dans les blocs Navigation, Liste et Citation.

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

Plus de 100 mises à jour de performance ont été intégrées au cœur, ainsi que plusieurs changements pour les développeurs de thèmes. Examinons quelques changements intéressants.

Stratégies de chargement des scripts

Les stratégies de chargement des scripts ont été introduites avec WordPress 6.3 et permettent d’éviter qu’un script ne soit chargé dans un ordre inattendu dans l’arbre de dépendance des scripts à l’aide des attributs async et defer.

Avec WordPress 6.4, les stratégies de chargement de scripts sont implémentées pour les scripts frontend dans les thèmes principaux et les thèmes intégrés.

En outre, à partir de WordPress 6.4, les scripts « chargés avec l’attribut defer ont été déplacés du pied de page vers head afin qu’ils soient découverts plus tôt pendant le chargement du document et qu’ils puissent s’exécuter plus tôt une fois le document chargé »

D’autres changements améliorent la sécurité de base et la maintenabilité. Pour un aperçu plus technique du chargement des scripts, consultez la note de développement WP 6.4.

Changements dans les pages de fichiers joints

A partir de WordPress 6.4, les pages de fichiers joints pour les nouvelles installations de WordPress sont totalement désactivées.

Avant WordPress 6.4, WordPress créait automatiquement une page de fichier joint pour chaque fichier multimédia téléversé. Mais cela n’avait pas de sens pour de nombreux sites web. Ces pages sont indexées par les moteurs de recherche et peuvent entrainer une mauvaise expérience pour les utilisateurs.

Depuis WordPress 6.4, une option de la base de données wp_attachment_pages_enabled permet de contrôler le comportement des pages de fichiers joints.

Cette option est réglée sur 1 pour les sites web existants (pages de pièces jointes activées) et sur 0 pour les nouveaux sites web (pages de fichiers joints désactivées) à partir de WordPress 6.4.

Les administrateurs de site peuvent modifier cette valeur via WP CLI :

wp option set wp_attachment_pages_enabled 0|1

Ou en visitant wp-admin/options.php sur votre site web et en changeant la valeur de l’option wp_attachment_pages_enabled.

Composant ProgressBar

Un composant horizontal de base ProgressBar a été introduit pour remplacer le composant Spinner utilisé précédemment lors du chargement de contenu dans l’éditeur de site.

Chargement des compositions dans WordPress 6.4

Avant WordPress 6.4, la fonction _register_theme_block_patterns() était utilisée pour enregistrer toutes les compositions que le thème actif pouvait fournir dans son répertoire patterns. En raison des nombreuses opérations de fichiers nécessaires par cette fonction, son utilisation a conduit à un problème de surcharge de ressources, particulièrement perceptible avec les thèmes fournissant des tonnes de compositions, comme Twenty Twenty-Four.

Pour résoudre ce problème, WordPress 6.4 introduit une nouvelle fonction _wp_get_block_patterns() qui stocke les compositions dans un cache transitoire. Grâce à cette nouvelle fonction, les requêtes suivantes n’ont pas besoin de rechercher des fichiers, ce qui améliore considérablement les performances.

Les développeurs peuvent contourner le cache de compositions en activant le mode développement pour un thème, en mettant à jour le numéro de version du thème, en changeant de thème ou en appelant la méthode WP_Theme::delete_caches().

Moins de vérifications de l’existence des fichiers

Auparavant, quelques fonctions de l’API des thèmes exécutaient plusieurs vérifications de l’existence de fichiers dans un thème enfant avant de revenir au thème parent.

Cela n’était pas optimal car ces fonctions ne tenaient pas compte du fait que le thème en cours était un thème enfant ou non.

Pour éviter les vérifications inutiles de l’existence de fichiers, plusieurs fonctions et méthodes de l’API Themes ont été mises à jour et vérifient désormais si le répertoire de la feuille de style du thème actuel correspond au répertoire du modèle avant de procéder aux vérifications de l’existence de fichiers.

Cela devrait permettre d’améliorer considérablement les performances, en particulier pour les thèmes qui ne sont pas des enfants.

D’autres améliorations des performances concernent les fonctions get_block_theme_folders() et the_header_image_tag().

Nouvelle fonction d’options

Les options sont chargées automatiquement par défaut. Lorsqu’un site web a trop d’options, cela peut entrainer un ralentissement du temps de réponse du serveur et des bogues. Pour éviter ce comportement, les développeurs d’extensions peuvent désormais profiter de plusieurs nouvelles fonctions qui leur permettent de gérer les options, d’améliorer les performances et de définir un comportement par défaut différent.

Deux fonctions permettent de récupérer plusieurs options avec une seule requête de base de données.

prime_options() permet de récupérer plusieurs options à l’aide d’une seule requête de base de données. Les valeurs des options sont stockées dans le cache, de sorte que les appels ultérieurs à get_option() ne nécessitent pas de requêtes supplémentaires à la base de données.

prime_options() prend un tableau de noms d’options et ne renvoie aucune valeur d’option, sa seule responsabilité étant de mettre à jour le cache correspondant.

prime_options_by_group() fonctionne de la même manière que prime_options() mais pour un groupe d’options spécifique.

Deux autres fonctions permettent de définir les valeurs de chargement automatique des options.

wp_set_option_autoload_values() peut être utilisée pour définir la valeur de chargement automatique d’une seule option.

wp_set_options_autoload_values() peut être utilisée pour définir les valeurs de chargement automatique pour plusieurs options.

Changements supplémentaires pour les développeurs

Les changements supplémentaires pour les développeurs sont les suivants :

• Remplacement des balises de style codées en dur par wp_add_inline_style() (voir la note de développement)
• Valeurs minimales et maximales configurables pour la typographie fluide dans theme.json (voir la note de développement)
• Désactivation des contrôles de mise en page dans theme.json (voir la note de développement)
• Définir le mode d’édition des blocs en utilisant le nouveau crochet useBlockEditingMode (voir la note de développement)
• La fonction wp_get_loading_optimization_attributes() a été améliorée et de nouveaux filtres ont été introduits pour contrôler les attributs d’optimisation du chargement (voir la note de développement)
• Une nouvelle API registerInserterMediaCategory permet aux développeurs dextensions d’enregistrer des catégories de médias d’insertion personnalisés et de fournir aux utilisateurs plus d’options. L’API permet uniquement d’ajouter des catégories de médias d’insertion personnalisées, mais ne permet pas de contrôler les catégories principales, à l’exception de la catégorie Openverse (voir la note de développement)
• Deux nouvelles fonctions wp_get_admin_notice() et wp_admin_notice() « réduisent la charge de maintenance, encouragent la cohérence et permettent le filtrage des arguments et des messages pour toutes les notifications d’administration » (voir la note de développement)
• WP_Query le système de mise en cache de WP_Term_Query a été amélioré, réduisant les requêtes de base de données et améliorant l’efficacité globale (voir la note de développement)
• Le balisage des pages de connexion et d’inscription a été amélioré afin d’optimiser sa structure et d’offrir aux développeurs une plus grande flexibilité dans les personnalisations (voir la note de développement)

Résumé

La troisième version de WordPress 2023 apporte un grand nombre de nouvelles fonctionnalités, de nouveaux outils de conception et un certain nombre d’améliorations de l’interface utilisateur, de corrections de bugs et d’autres petits changements.

Elle introduit également un nouveau thème par défaut léger et multifonctionnel avec des tonnes de compositions et de modèles que vous pouvez personnaliser pour vos cas d’utilisation spécifiques.

Maintenant, à vous de jouer : Avez-vous déjà eu l’occasion de tester WordPress 6.4 ? Si vous souhaitez tester et/ou contribuer à WordPress, nous vous recommandons notre suite de développement WordPress locale et gratuite, DevKinsta.

Quelles sont les fonctionnalités de la version 6.4 que vous appréciez le plus ? Faites-nous part de vos impressions dans les commentaires ci-dessous.