Quoi de neuf dans WordPress 6.0 : Nouveaux blocs, changement de style, édition de modèles, Webfonts API, et bien plus encore

WordPress 6.0 Arturo est arrivé et, comme d’habitude, nous avons jeté un coup d’œil derrière les rideaux pour donner à nos lecteurs un aperçu des nouveautés de la dernière version majeure de WordPress.

Disons tout de suite que, si WordPress 5.9 nous a fait entrer au cœur de la phase 2 de Gutenberg, WordPress 6.0 vise à consolider les outils de personnalisation déjà disponibles.

Mais la nouvelle version n’est pas que ça. Comme l’a souligné Matias Ventura dans la feuille de route préliminaire de la 6.0, l’introduction de l’éditeur de site a marqué une étape importante, mais aussi seulement une première étape du voyage.

WordPress 6.0 apporte des améliorations significatives dans plusieurs domaines du CMS, de la convivialité aux performances, depuis les éléments suivants :

Architecture d’information et expérience de navigation des modèles améliorées
Création de modèles améliorée
Nouveaux hooks
Une nouvelle interface utilisateur de navigation
Un nouveau mode de navigation pour l’éditeur de site
Des styles globaux alternatifs
Un bloc de navigation amélioré
De nouveaux outils de conception
Performances améliorées
Et bien plus encore…

Mais attendez, ce n’est pas tout. WordPress 6.0 apporte un nombre impressionnant de changements, avec 251 tickets Trac, dont 97 fonctionnalités et améliorations et 131 corrections de bugs.

Oui, il y a beaucoup de choses à dire. Alors n’attendons pas plus longtemps et découvrons les nouveautés de WordPress 6.0.

API Webfonts

Une nouvelle API Webfonts fournit désormais un moyen standardisé de charger des polices web dans WordPress en garantissant les performances et la confidentialité des utilisateurs.

À partir de WordPress 6.0, vous pouvez uniquement enregistrer une nouvelle webfont à partir de votre theme.json.

L’utilisation du theme.json est assez simple. Tout ce que vous devez faire est d’ajouter une nouvelle famille de polices à la section typography. Le code suivant fournit un exemple d’enregistrement de webfont :

{
	"settings": {
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
					"name": "System Font",
					"slug": "system-font"
				},
				{
					"fontFamily": "\"Source Serif Pro\", serif",
					"name": "Source Serif Pro",
					"slug": "source-serif-pro"
				},
				{
					"fontFamily": "\"Inter\", sans-serif",
					"name": "Inter",
					"slug": "inter",
					"fontFace": [
						{
							"fontFamily": "Inter",
							"fontWeight": "200 900",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/inter/Inter.ttf" ]
						}
					]
				}
			]
		}
	}
}

Le code ci-dessus ajoute la famille de polices Inter au réglage par défaut des familles de polices disponibles dans Twenty Twenty-Two. Si vous voulez l’essayer vous-même, téléchargez la webfont Inter depuis Google Fonts dans le dossier ./assets/fonts, puis ajoutez le code ci-dessus à la section settings.typography du theme.json de Twenty Twenty-Two. Une fois que vous avez terminé, enregistrez le fichier et revenez à l’interface d’édition du site.

L’image suivante montre le résultat dans l’éditeur.

Une nouvelle famille de polices a été enregistrée dans Twenty Twenty-Two.

L’API Webfonts n’enregistre que les polices nécessaires au rendu des blocs sur la page actuelle, ce qui est particulièrement utile avec les polices Webfont définies dans les variations de style. En outre, l’API optimise le nombre de requêtes HTTP en enregistrant et en mettant en file d’attente les polices par famille de polices.

Vous pouvez lire la suite sur la nouvelle API dans la requête pull API Webfonts, dans le statut de l’API Webfonts pour l’inclusion de WordPress 6.0, et dans les variations de styles globaux dans WordPress 6.0.

Changement de styles globaux

Les variations de styles globaux sont l’une des fonctionnalités les plus attendues de WordPress 6.0. Les auteurs de thèmes peuvent désormais regrouper plusieurs ensembles de styles globaux avec leurs thèmes, ce qui permet aux utilisateurs de passer d’une variation de style à l’autre en un seul clic.

C’est un peu comme avoir des thèmes enfants prêts à l’emploi, avec un ensemble prédéfini de styles pour chacun d’eux.

Pour ajouter une variation de style à votre thème de bloc, vous ajouterez un fichier JSON alternatif dans un répertoire styles situé dans la racine de votre thème.

Les thèmes prenant en charge les variations de styles globaux affichent un nouvel élément Parcourir les styles dans la colonne latérale des Styles globaux. Cela amène à un panneau où les utilisateurs du thème trouvent une liste des styles disponibles.

Parcourir les styles dans WordPress 6.0.

Choisissez un style global dans la liste et le style est automatiquement appliqué à l’ensemble de votre site web.

Choisir un style en un seul clic dans WordPress 6.0.

La nouvelle fonctionnalité permet aux développeurs de thèmes de créer un nombre illimité de variations de style et se combine parfaitement avec la nouvelle API Webfonts.

L’image suivante montre un style personnalisé de l’exemple précédent, avec une police différente appliquée aux titres.

Une variation de style avec une police personnalisée dans WordPress 6.0.

Si vous voulez l’essayer vous-même, ajoutez un répertoire styles à la racine de votre thème de bloc, créez un nouveau fichier JSON avec un nom significatif, ouvrez-le dans votre éditeur de code préféré et ajoutez le code suivant :

{
	"version": 2,
	"settings": {
		"color": {
			"duotone": [
				{
					"colors": [ "#143F6B", "#EFEFEF" ],
					"slug": "foreground-and-background",
					"name": "Foreground and background"
				},
				{
					"colors": [ "#143F6B", "#FEB139" ],
					"slug": "foreground-and-secondary",
					"name": "Foreground and secondary"
				},
				{
					"colors": [ "#143F6B", "#F6F54D" ],
					"slug": "foreground-and-tertiary",
					"name": "Foreground and tertiary"
				},
				{
					"colors": [ "#F55353", "#EFEFEF" ],
					"slug": "primary-and-background",
					"name": "Primary and background"
				},
				{
					"colors": [ "#F55353", "#FEB139" ],
					"slug": "primary-and-secondary",
					"name": "Primary and secondary"
				},
				{
					"colors": [ "#F55353", "#F6F54D" ],
					"slug": "primary-and-tertiary",
					"name": "Primary and tertiary"
				}
			],
			"palette": [
				{
					"slug": "foreground",
					"color": "#143F6B",
					"name": "Foreground"
				},
				{
					"slug": "background",
					"color": "#EFEFEF",
					"name": "Background"
				},
				{
					"slug": "primary",
					"color": "#F55353",
					"name": "Primary"
				},
				{
					"slug": "secondary",
					"color": "#FEB139",
					"name": "Secondary"
				},
				{
					"slug": "tertiary",
					"color": "#F6F54D",
					"name": "Tertiary"
				}
			]
		},
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": ""Inter", sans-serif",
					"name": "Inter",
					"slug": "inter",
					"fontFace": [
						{
							"fontFamily": "Inter",
							"fontWeight": "200 900",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/inter/Inter.ttf" ]
						}
					]
				}
			]
		}
	},
	"styles": {
		"blocks": {
			"core/post-title": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"core/query-title": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)"
				}
			}
		},
		"elements": {
			"h1": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h2": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h3": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h4": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h5": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h6": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			}
		},
		"typography": {
			"fontFamily": "var(--wp--preset--font-family--inter)"
		}
	}
}

Vous pouvez trouver le code complet utilisé dans l’exemple ci-dessus sur GitHub et gist.

Les développeurs trouveront des aperçus approfondis des styles globaux et de Theme.json dans les articles de la documentation Global Settings & Styles et Theme.json.

Vous pouvez également consulter la dernière version de Twenty Twenty-Two, qui propose désormais trois nouvelles variations de style.

Parcourir les styles dans Twenty Twenty-Two.

Des compositions de blocs partout

Une chose est sûre, les compositions de blocs jouent un rôle central dans la phase actuelle du développement de WordPress. Introduites pour la première fois avec WordPress 5.5, les compositions de blocs ont été régulièrement améliorées au fil du temps.

De plus, à partir de WordPress 5.9, les compositions figurant dans le répertoire des compositions ont fait leur chemin dans nos sites web WordPress, étant récupérés dynamiquement dans le répertoire des compositions et chargées dans l’outil d’insertion de blocs.

Et maintenant, tout le monde peut devenir un développeur de compositions, grâce à un tout nouvel outil en ligne. Le créateur de compositions vous permet de construire, de modifier et d’envoyer vos meilleures compositions de blocs au Répertoire des compositions. Tout ce dont vous avez besoin pour commencer est un compte WordPress.org.

Recherche d'images dans le créateur de compositions — Recherche d’images dans le créateur de compositions

Et WordPress 6.0 apporte de nouvelles améliorations aux compositions de bloc.

Tout d’abord, les compositions de bloc sont plus faciles à trouver dans l’édition de modèles. Désormais, l’inserteur rapide n’affiche les patrons de bloc que lorsque vous y accédez au niveau supérieur d’un modèle, c’est-à-dire lorsque le bloc que vous allez ajouter à votre modèle est le descendant direct du document.

Voici quand les conditions suivantes sont réunies :

Vous êtes en train de modifier un modèle de bloc
L’inserteur rapide se trouve au niveau de la racine
Vous ajoutez un bloc entre d’autres blocs (c’est-à-dire ni le premier ni le dernier bloc de la page)

L'inserteur rapide n'affiche les compositions de bloc que dans l'éditeur de modèle. — L’inserteur rapide n’affiche les compositions de bloc que dans l’éditeur de modèle.

Une autre fonctionnalité utile permet désormais aux développeurs de thèmes d’ajouter des compositions recommandées au theme.json. Pour l’essayer, cherchez dans le répertoire des compositions, trouvez les compositions que vous souhaitez recommander aux utilisateurs de votre thème, puis récupérez le slug de la composition à partir de l’URL et ajoutez-le à votre theme.json comme suit :

"patterns": [
	"image-with-angled-overlay-shape-call-to-action-button-and-description",
	"hero-section-with-overlap-image"
],

Les utilisateurs trouveront vos compositions recommandés dans l’outil d’insertion de blocs.

Compositions recommandées dans l'insertion rapide. — Compositions recommandées dans l’insertion rapide.

L’enregistrement implicite des compositions est une fonctionnalité puissante liée aux compositions qui sera intégrée à WordPress 6.0. Les thèmes peuvent désormais enregistrer implicitement des compositions en les déclarant en tant que fichiers PHP dans un nouveau répertoire /patterns à la racine du thème.

Le processus est assez simple :

créez un nouveau répertoire patterns à la racine de votre thème,
créez un groupe de blocs dans l’éditeur de blocs,
copiez et collez votre HTML dans un nouveau fichier texte,
ajoutez l’en-tête suivant,
et enregistrez le fichier en tant que PHP dans votre répertoire patterns.

<?php
/**
 * Title: My pattern
 * Slug: my-theme/my-pattern
 * Categories: text
 */
?>

Et c’est tout. Vous avez maintenant une nouvelle composition de bloc à faire apparaître dans l’insertion de blocs.

Une composition personnalisée dans l'insertion rapide de blocs. — Une composition personnalisée dans l’insertion rapide de blocs.

Les compositions de création de page sont une autre fonctionnalité liée aux compositions de bloc introduite avec WordPress 6.0. Désormais, quand vous créez une nouvelle page, l’écran de création de page affiche une modale proposant un ensemble de modèles de blocs parmi lesquels vous pouvez choisir pour créer votre page.

La modale n’est affichée que quand au moins un modèle déclare le support des types de blocs cœur/post-contenu.

WordPress 6.0 n’inclut aucun de ces modèles, de sorte que la modale n’apparaîtra pas à moins que vous n’ajoutiez le support à une composition existante. Mais l’ajout de la modale à l’écran de création de page est assez simple.

Si vous avez enregistré un modèle de bloc pour votre thème, comme le montre l’exemple ci-dessus, vous pouvez ajouter le support de la modale du modèle en utilisant la propriété Block Types, comme l’affiche l’exemple de composition ci-dessous :

<?php
/**
 * Title: Pattern with columns
 * Slug: twentytwentytwo/pattern-with-columns
 * Block Types: core/post-content
 * Categories: text
 */
?>
<!-- wp:heading -->
<h2>Hello there!</h2>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading -->
<h2>Heading</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Paragraph</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:list -->
<ul><li>List item</li></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Enregistrez ce code dans un fichier PHP dans le répertoire /patterns de votre thème. Ensuite, dans votre tableau de bord WordPress, créez une nouvelle page. Vous devriez afficher une nouvelle modale comme indiqué dans l’image suivante :

Composition d'une page — Composition d’une page

Pour une vue plus détaillée des modèles de création de pages, voir également Modèles de création de pages dans WordPress 6.0.

Pour une vue globale du développement des compostions de bloc, voir aussi Nouvelles fonctionnalités pour travailler avec les compositions et les thèmes dans WordPress 6.0 et le problème de suivi sur GitHub.

Fonctions d’édition de site

Le développement complet de l’édition de site ne s’est pas terminé avec WordPress 5.9. WordPress 6.0 va encore plus loin en améliorant les fonctionnalités de création de thèmes visuels et en proposant de nouvelles options de modèles pour les thèmes de blocs. Et d’autres fonctionnalités sont en route.

Construction visuelle de thèmes

WordPress 6.0 introduit un outil d’exportation de thème de bloc amélioré, qui vous permet de télécharger le thème actuel avec toutes vos modifications et personnalisations.

Si vous n’avez pas encore utilisé l’outil d’exportation de thème de bloc, il s’agit d’un outil d’édition de site puissant qui vous permet d’exporter vos styles et modèles en tant que thème entier.

Lorsque vous êtes satisfait de vos modifications, à partir de l’interface de l’éditeur de site, ouvrez la colonne latérale des Options et trouvez la section Outils. Ici, un bouton Exporter vous permet de télécharger le thème actuel avec toutes vos personnalisations de styles et de modèles dans un fichier zip.

Exporter un thème depuis l'interface de l'éditeur. — Exporter un thème depuis l’interface de l’éditeur.

Vous pouvez ensuite exporter votre thème et l’installer sur n’importe quel site web WordPress.

Nous avons testé l’outil d’exportation de thème amélioré sur une installation WordPress locale, et nous avons constaté que presque tout fonctionne comme prévu… 😅

Quoi qu’il en soit, l’outil d’exportation est toujours en cours de développement, et aujourd’hui nous ne pouvons qu’entrevoir son énorme potentiel. Pensez à la possibilité de créer vos thèmes depuis l’interface d’édition de votre site web et de les distribuer sur un nombre arbitraire d’installations. Et ce, que vous soyez ou non un développeur…

Il y a encore beaucoup de problèmes ouverts à résoudre, ce qui nous fait penser que nous verrons bientôt plusieurs améliorations. Si vous êtes curieux et souhaitez en savoir plus sur la construction visuelle de thème (comme nous le sommes), vous pouvez suivre le Tracking Issue sur GitHub.

Plus d’options de modèles dans les thèmes à base de blocs

Dans les versions précédentes de WordPress, nous avions un nombre limité de types de modèles disponibles.

Ajout d'un nouveau modèle dans WordPress 5.9. — Ajout d’un nouveau modèle dans WordPress 5.9.

Maintenant, WordPress 6.0 introduit plusieurs nouveaux types de modèles, notamment Author, Category, Date, Tag, et Taxonomy.

Ajout d'un nouveau modèle dans WordPress 6.0. — Ajout d’un nouveau modèle dans WordPress 6.0.

Cet ajout devrait simplifier le flux de travail d’édition de votre site. Pour l’essayer, il suffit de choisir un nouveau modèle dans la liste déroulante, d’ajouter les blocs nécessaires, d’enregistrer vos modifications et de vérifier l’aspect du site. Oui, c’est aussi simple que ça. Maintenant, considérez cela en combinaison avec la fonction d’exportation de thème mentionnée ci-dessus et vous comprendrez mieux ce à quoi nous pouvons bientôt nous attendre avec l’édition de site.

Améliorations de l’interface et de l’utilisabilité

WordPress 6.0 introduit un certain nombre de changements dans l’interface utilisateur, dont beaucoup sont destinés à mettre de l’ordre dans la colonne latérale. Tous ensemble, ces changements devraient avoir un impact considérable sur l’expérience globale d’édition. Nous n’en mentionnerons ici que quelques-unes, mais vous pouvez consulter les notes de version de Gutenberg pour une liste plus complète des changements (voir Gutenberg 12.4, 12.5, 12.6, 12.7, 12.8, 12.9, 13.0).

Améliorations de la vue de liste

La vue en liste est affectée par un nombre considérable de changements améliorant l’utilisabilité du composant.

Développement de la vue Liste lors de la sélection

Lorsque vous cliquez sur un bloc dans l’éditeur, le bloc est désormais automatiquement mis en évidence dans la vue Liste. Si le bloc est imbriqué dans un bloc parent, le bloc parent se développe en affichant l’élément dans l’arborescence du bloc.

Bloc de groupe développé en vue Liste lors de la sélection d'un bloc. — Bloc de groupe développé en vue Liste lors de la sélection d’un bloc.

Vue en liste dépliée par défaut

Avant WordPress 6.0, lorsque vous ouvrez le panneau List View, il est développé par défaut.

Vue Liste par défaut dans WordPress 5.9.

Mais comme un article est souvent constitué de structures complexes de blocs imbriqués, le fait que l’arborescence des blocs se réduise lors de l’ouverture de la vue Liste est parfaitement logique.

Avec la version 6.0, la vue Liste est réduite par défaut dans tous les éditeurs, ce qui rend l’arborescence des blocs beaucoup plus compréhensible en un coup d’œil.

Vue Liste par défaut dans WordPress 6.0.

Focus sur le bouton Vue liste

Lorsque vous ouvrez le panneau d’affichage de liste, le focus revient maintenant correctement sur le bouton d’affichage de liste. Cela est particulièrement utile lorsque vous parcourez la vue Liste à partir de votre clavier, et se traduit par une expérience d’édition plus fluide et plus transparente.

Sélection de blocs multiples et glisser-déposer

Une autre modification apportée à la vue en liste vous permet de sélectionner plusieurs blocs au même niveau et de les glisser-déposer vers une autre position dans la liste.

Aperçu des styles de bloc

Avant WordPress 6.0, les aperçus des styles de blocs étaient placés dans la colonne latérale des blocs, occupant une partie considérable du panneau Styles.

Aperçu du style de bloc dans WordPress 5.9.

Avec 6.0, seuls les noms des variations de style apparaissent dans le panneau Styles, tandis que les aperçus de style s’affichent en dehors de la colonne latérale lorsque le nom du style est survolé ou reçoit le focus.

Ce changement réduit les dimensions de la colonne latérale et devrait rendre les noms de style plus évidents.

Aperçu du style de bloc dans WordPress 6.0.

Section typographie de paragraphe

Dans le but de mettre de l’ordre dans la colonne latérale des blocs, la commande Lettrine du bloc Paragraphe a été déplacée de sa section à la section Typographie.

Avec ce changement, tous les contrôles des réglages de typographie sont maintenant placés sous la même section, ce qui conduit à une expérience utilisateur plus cohérente.

Réglages de la typographie dans WordPress 5.9 vs WordPress 6.0.

Réglages de bordure et de couleur déplacés sous le panneau Outils

Dans le but de mettre de l’ordre dans une colonne latérale de réglages désordonnée, les contrôles des réglages des bordures et des couleurs ont été déplacés dans le panneau d’outils et peuvent être dépliés et réduits dans plusieurs contextes.

Le nouveau panneau des réglages de bordure.

Ce changement devrait simplifier l’expérience d’édition de plusieurs blocs et apporter plus de cohérence à la colonne latérale.

Rappel de la catégorie dans le panneau de publication des articles

Lorsque vous êtes pressé ou que vous publiez régulièrement un bon nombre d’articles de blog, vous pouvez facilement oublier les étiquettes ou les catégories. Si vous vous retrouvez souvent dans une telle situation, vous trouverez le rappel des étiquettes apparaissant dans le panneau de publication des articles extrêmement utile.

Maintenant, pour aider les administrateurs de sites et les auteurs à s’assurer que leurs articles ont les catégories nécessaires assignées, avec WordPress 6.0 une nouvelle Suggestion : Assigner une catégorie apparaît dans le panneau de publication des articles lorsqu’une catégorie n’a pas encore été ajoutée à l’article.

L’image ci-dessous compare le panneau de publication des articles dans WordPress 5.9 par rapport à 6.0.

Panneau de publication des articles dans WordPress 5.9 vs. 6.0.

L’éditeur de code ajouté à l’éditeur de site

Depuis WordPress 6.0, l’éditeur de code est également disponible dans l’éditeur de site. Comme pour l’éditeur d’articles, vous trouverez l’éditeur de code dans le menu Options.

WordPress 6.0 ajoute l'éditeur de code à l'éditeur du site. — WordPress 6.0 ajoute l’éditeur de code à l’éditeur du site.

Interface utilisateur de verrouillage des blocs

Un nouvel élément de verrouillage dans la liste déroulante Plus de réglages ouvre une fenêtre popup où vous pouvez empêcher les utilisateurs de déplacer ou de supprimer des blocs (ou les deux).

Verrouillage d'un groupe de blocs. — Verrouillage d’un groupe de blocs.

Ceci est particulièrement utile dans l’édition de modèles et de blocs réutilisables, où vous pouvez également restreindre l’édition des blocs.

Verrouillage d'un bloc Groupe réutilisable. — Verrouillage d’un bloc Groupe réutilisable.

La nouvelle fonctionnalité peut être désactivée par programme à l’aide du nouveau réglage canLockBlocks.

Le code suivant active la fonction de verrouillage des blocs uniquement pour les utilisateurs ayant un rôle d’éditeur ou supérieur :

add_filter(
	'block_editor_settings_all',
	function( $settings, $context ) {

		$settings['canLockBlocks'] = current_user_can( 'delete_others_posts' );
 
		return $settings;
	},
	10,
	2
);

Les développeurs peuvent également masquer l’interface utilisateur de verrouillage des blocs sur des types de blocs spécifiques à l’aide de la propriété lock :

{
	"apiVersion": 2,
	"supports": {
		"lock": false
	}
}

Vous pouvez en lire plus sur le verrouillage des blocs dans les réglages de verrouillage des blocs dans WordPress 6.0.

Multi-sélection

Il est désormais possible de sélectionner du texte dans plusieurs blocs.

Sélection de texte dans deux paragraphes.

Conservation du style

Lorsque vous transformez des blocs ou créez de nouveaux boutons, plusieurs styles sont désormais conservés.

L’image ci-dessous montre un bloc Liste avec différents styles.

Un bloc Liste avec différents styles appliqués.

Lorsque vous transformez le bloc Liste en paragraphes, les nouveaux blocs conservent les mêmes styles que les éléments de liste précédents.

Transformation d'une liste en paragraphes. — Transformation d’une liste en paragraphes.

La même amélioration s’applique aux nouveaux boutons ajoutés à un bloc Boutons, qui héritent désormais du style des boutons adjacents.

Nouveaux blocs du cœur

Le nombre de blocs de base est en constante augmentation. Si vous vous demandez quels sont les blocs du cœur actuellement disponibles, il existe désormais une page de manuel fournissant une liste complète des blocs de base inclus dans l’extension Gutenberg. Pour chaque bloc, le nom, la catégorie, les supports et les attributs sont fournis, ainsi qu’un lien utile vers le code source que les développeurs de blocs vont adorer.

Et d’autres blocs sont à venir avec WordPress 6.0. Retrouvez ici les blocs auxquels vous pouvez vous attendre avec la prochaine version.

Boucle de requête de commentaires

Similaire au bloc Boucle de requête, un nouveau bloc Boucle de requête de commentaires affiche les commentaires des articles. Il s’agit d’un bloc avancé qui comprend plusieurs blocs internes que vous pouvez modifier et configurer séparément.

Comme le montre l’image ci-dessous, vous pouvez sélectionner n’importe lequel des blocs contenus dans le bloc de boucle de requête de commentaires pour personnaliser son apparence comme vous le souhaitez. Vous pouvez également ajouter d’autres blocs ou déplacer ou supprimer des blocs existants (Code source).

Configuration du bloc de boucle de requête de commentaires

Lire la suite

Un nouveau bloc Lire la suite personnalisable vous permet de personnaliser différents aspects du bouton Lire la suite : bordures, couleurs, coins, typographie, et plus encore (Code source).

C’est un excellent ajout car il vous permet d’ajouter et de personnaliser le lien Lire la suite en dehors du contexte du bloc Extrait.

Aucun résultat dans la boucle de requête

Le bloc Aucun résultat est un conteneur de bloc dans lequel vous pouvez ajouter n’importe quel texte ou bloc à afficher lorsque la requête n’a aucun résultat. Pour ajouter le bloc Aucun résultat à une boucle de requête, il suffit de sélectionner la boucle de requête et de cliquer sur l’icône plus dans le coin inférieur droit pour lancer l’insertion rapide. Recherchez ensuite le bloc Aucun résultat. Le bloc n’est pas disponible en dehors de la boucle de requête (code source).

Ajout du bloc Aucun résultat à la boucle de requête.

Avatar et biographie de l’auteur ou l’autrice de l’article

WordPress 6.0 introduit également de nouveaux types de blocs pour diviser le bloc Auteur/autrice en ses composants et les utiliser séparément dans votre contenu.

Le bloc Biographie de l’auteur de l’article fournit la description de l’auteur ou l’autrice (Code source).

Le bloc Avatar affiche simplement l’avatar d’un compte vous permettant de choisir entre les auteurs du site (Code source).

Le bloc Avatar dans WordPress 6.0.

Ce bloc est particulièrement utile pour afficher l’avatar d’un auteur en dehors du contexte du bloc Info Auteur ou des commentaires. Par exemple, vous pouvez l’utiliser sur une page dédiée à tous les auteurs, ou sur une page montrant les critiques de vos utilisateurs/lecteurs.

Améliorations apportées aux blocs existants

WordPress 6.0 introduit également plusieurs changements et améliorations aux blocs existants qui auront potentiellement un fort impact sur votre flux d’édition. Le bloc Navigation sera affecté par plusieurs changements, mais vous verrez également des améliorations dans d’autres blocs, notamment Boucle de requête, Image mise en avant, Groupe, et Icônes sociales.

Améliorations du bloc Navigation

Au cours des derniers mois, le bloc Navigation a reçu plusieurs améliorations et dispose désormais d’une interface nettement plus facile à utiliser.

Tout d’abord, un aperçu enrichi a été ajouté au bloc Lien de navigation. Lorsque vous ajoutez un lien pointant vers une ressource accessible au public, un clic sur le bouton du lien dans la barre d’outils du bloc fait apparaître une image d’aperçu de cette ressource.

Aperçu riche pour les liens de navigation.

Quelques changements supplémentaires affectent l’expérience globale d’édition.

Désormais, lorsque vous ajoutez un nouveau menu et qu’il n’existe qu’un seul menu de navigation, il s’agit par défaut du seul menu disponible. Ce changement devrait accélérer votre flux de travail d’édition si vous n’avez qu’un seul menu de navigation.

Les liens de navigation disposaient déjà d’un champ de description dans lequel les utilisateurs pouvaient saisir un texte décrivant leurs liens de navigation. Cependant, dans les versions précédentes de WordPress, les thèmes ne pouvaient pas prendre en charge cette fonctionnalité.

Maintenant, avec WordPress 6.0, un <span class="wp-block-navigation-item__description"> apparaît après le libellé du lien.

La description du lien de navigation apparaît après le libellé du lien.

Dans Twenty Twenty-Two, l’élément .wp-block-navigation-item__description est masqué via CSS, mais les thèmes peuvent ajouter une propriété display: block pour afficher la description du lien.

Description du lien de navigation dans WordPress 6.0 et Twenty Twenty-Two.

Filtres de boucle de requête et images mises en avant

La section des réglages des filtres de boucle de requête affiche désormais des champs de saisie pour les taxonomies personnalisées. Cela permet aux utilisateurs de filtrer le type d’article actuel par une ou plusieurs taxonomies personnalisées enregistrées pour le type de publication sélectionné.

Il est désormais également possible de filtrer les articles en fonction de plusieurs auteurs, alors que dans les versions précédentes, vous ne pouviez sélectionner qu’un seul auteur dans une liste déroulante.

Réglages du filtre de boucle de requête dans WordPress 6.0.

En outre, vous pouvez maintenant définir les dimensions de l’image mise en avant à l’intérieur d’un bloc Boucle de requête, également.

Controlling Featured Image dimensions in a Query Loop block. — Contrôle des dimensions de l’image mise en avant dans un bloc de boucle de requête.

Prise en charge de la typographie et des bordures dans les blocs de groupe responsives

Les blocs de groupe et de rangée prennent désormais en charge les réglages de typographie. Ce changement permet aux utilisateurs d’appliquer les mêmes réglages de typographie à tout un groupe de blocs en une seule fois, ce qui permet d’économiser quelques clics lorsqu’il s’agit de formater un groupe contenant plusieurs blocs imbriqués.

Réglages de typographie pour un bloc Groupe.

Le bloc Groupe a été encore amélioré et vous pouvez maintenant facilement regrouper des blocs en pile ou en rangée d’un simple clic.

Il suffit de sélectionner les blocs que vous souhaitez regrouper et de choisir l’une des trois commandes disponibles dans la barre d’outils du bloc : Groupe, Rangée, Pile.

Une fois que vous avez regroupé des blocs, un nouveau panneau dans la colonne latérale des réglages affiche les descriptions des variations du groupe, ce qui vous permet de changer de variation en quelques clics.

Un bloc Rangée affiche les blocs horizontalement.

WordPress 6.0 introduit également la prise en charge des marges pour les blocs Group, permettant aux utilisateurs de contrôler séparément les marges supérieure et inférieure.

Contrôle des marges avec un bloc Groupe.

Image mise en avant dans le bloc Couverture

Vous pouvez maintenant utiliser des images mises en avant dans les blocs de couverture car, avec WordPress 6.0, une bascule Utiliser l’image mise en avant a été ajoutée à la barre d’outils du bloc. Grâce à ce nouveau contrôle, vous pouvez passer de l’image actuelle à l’image mise en avant en un seul clic.

Utiliser l'image mise en avant avec un bloc Couverture. — Utiliser l’image mise en avant avec un bloc Couverture.

Afficher/masquer les libellés dans les icônes sociales

Une petite mais utile amélioration du bloc Icônes sociales permet désormais aux utilisateurs d’activer/désactiver les libellés des liens des icônes.

Une commande Afficher le libellé permet d'activer/désactiver les libellés dans les icônes sociales. — Une commande Afficher le libellé permet d’activer/désactiver les libellés dans les icônes sociales.

En activant cette option, vous pouvez afficher le nom du service par défaut ou définir séparément des libellés personnalisées pour vos icônes.

Améliorations supplémentaires des blocs

La prochaine version de WordPress apporte également un grand nombre d’améliorations à de nombreux autres blocs.

Par exemple, vous pouvez maintenant contrôler les bordures des blocs Colonnes (Gutenberg 12.7).

Contrôles des bordures pour le bloc Colonnes.

Une autre amélioration UX utile vous permet d’insérer des liens internes à l’aide d’un simple déclencheur clavier [[.

L'ajout de liens internes dans WordPress 6.0 est plus facile. — L’ajout de liens internes dans WordPress 6.0 est plus facile.

Il est désormais plus facile de contrôler l’espace autour des images dans un bloc Galerie grâce au nouveau contrôle d’espacement des blocs.

Modifications pour les développeurs et améliorations des performances

WordPress 6.0 ajoute également de nombreuses fonctionnalités pour les développeurs.

Un nouveau filtre wp_content_img_tag permet d’ajuster les images dans un blob de contenu HTML (voir Nouveau filtre pour modifier les images du contenu dans WordPress 6.0).
La méthode parse_request a été modifiée pour réduire le nombre de requêtes quand le filtre do_parse_request renvoie false (voir Modifications du filtre do_parse_request dans WordPress 6.0).
Vous pouvez désormais enregistrer des blocs depuis un thème (voir Enregistrement de blocs depuis des thèmes).
Une nouvelle propriété ancestrale rend un bloc uniquement disponible à l’intérieur des types de blocs spécifiés (voir Nouvelle propriété ancestrale dans block.json).

La nouvelle version donne également un coup de pouce aux performances, avec quelques ajouts à l’API de mise en cache de WordPress, des améliorations des performances des requêtes de termes de taxonomie, et d’autres améliorations des performances des sites uniques avec un grand nombre d’utilisateurs.

Ceci termine notre tour d’horizon des nouvelles fonctionnalités et des changements que vous verrez une fois vos sites web WordPress mis à jour en version 6.0.

Mais ce ne sont là que quelques-unes des améliorations apportées par WordPress 6.0. Pour une liste complète, consultez les notes de publication de Gutenberg et le guide de champ de WordPress 6.0.

Comment installer WordPress 6.0 sur un environnement de développement local

Si vous voulez essayer les versions de développement de WordPress avant la sortie officielle, suivez ces étapes :

Ouvrez DevKinsta et créez un nouveau site WordPress local
Lorsque cela est fait, ouvrez votre tableau de bord WordPress et allez vers Extensions → Ajouter
Recherchez et installez l’extension WordPress Beta Tester
Activez l’extension et allez dans Outils → Test Beta
Dans l’onglet Réglages de WP Beta Tester choisissez l’option Version en cours de développement et enregistrez les réglages
De retour à votre tableau de bord WordPress, ouvrez l’écran Mises à jour et mettez à jour vers la dernière version nocturne

C’est tout ! Vous avez maintenant une installation locale de développement de WordPress et vous êtes libre d’effectuer tous vos tests. Jetez-y un coup d’œil et faites-nous savoir ce que vous pensez des nouvelles fonctionnalités.

Avec DevKinsta, il suffit de quelques clics pour disposer d’un environnement de développement moderne pour WordPress sur votre machine locale. 🖥

Téléchargez DevKinsta gratuitement ici! 👈

Résumé

Comme mentionné ci-dessus, nous pouvons maintenant dire que nous sommes au milieu de la phase deux du développement de Gutenberg, la phase de personnalisation.

L’édition complète du site fait désormais partie du cœur de WordPress et la version 6.0 et les suivantes apporteront de nouvelles améliorations à ce que nous avons déjà et pouvons utiliser dès maintenant.

Tout ceci aura un impact énorme sur l’écosystème WordPress et sur le web dans son ensemble, si l’on considère également qu’au moment où nous écrivons ces lignes,

WordPress est utilisé par 64,2 % de tous les sites web dont nous connaissons le système de gestion de contenu. Cela représente 43,0 % de tous les sites web. (Source W3Techs)

Nous nous arrêterons ici pour le moment. Notre liste de fonctionnalités et d’améliorations à venir avec WordPress 6.0 ne peut pas être épuisée en un seul article, mais nous espérons avoir au moins mis en évidence les ajouts qui auront le plus grand impact sur la façon dont nous utilisons WordPress au jour le jour.

Nous aimerions maintenant conclure cet article avec quelques questions pour nos lecteurs !

S’il vous plaît, partagez vos pensées avec la communauté dans la section des commentaires ci-dessous. 👇

Carlo Daniele Kinsta

Carlo est un passionné de webdesign et de développement frontend. Il joue avec WordPress depuis plus de 10 ans, notamment en collaboration avec des universités et des établissements d'enseignement italiens et européens. Il a écrit des dizaines d'articles et de guides sur WordPress, publiés à la fois sur des sites web italiens et internationaux, ainsi que dans des magazines imprimés. Vous pouvez trouver Carlo sur X et LinkedIn.