Nouveautés de WordPress 7.0 : intégration de l’IA, nouveaux blocs et bien plus encore

Préparez le feu d’artifice ! Avec la version 7.0, WordPress entre dans une nouvelle ère.

Il s’agit probablement de la plus grande avancée de la plateforme au cours des dernières années.

WordPress 7.0 affine l’interface d’administration et introduit de nouveaux blocs et outils de développement, tels que l’éditeur d’articles iframed et les blocs PHP uniquement.

Préparez-vous une tasse de café et installez-vous confortablement, car cette lecture va être longue et passionnante.

Intégration avec l’IA

Avec la version 7.0, WordPress a fait un grand bond en avant. Oubliez la plateforme de blogs de ses débuts. Aujourd’hui, WordPress est une plateforme collaborative nativement prête pour l’intelligence artificielle.

Ce projet ambitieux visait à fournir une infrastructure fiable et sécurisée permettant aux utilisateurs de WordPress et aux développeurs de plugins d’interagir avec les grands modèles de langage (LLM) d’une manière standardisée.

Le nouveau paradigme architectural ouvre la voie à un « WordPress agentique ». Il s’agit d’un changement vers une utilisation agentique où WordPress est nativement capable d’interagir avec des agents d’intelligence artificielle externes via des interfaces standardisées et conviviales pour les machines.

Il y a beaucoup à dire, mais avant d’entrer dans les détails de l’intégration de l’IA, voici quelques définitions préliminaires.

Architecture IA de WordPress : Concepts de base

Pour comprendre l’architecture IA de WordPress 7.0, il est essentiel d’identifier quatre composantes essentielles.

• Client d’IA : une infrastructure d’IA agnostique qui fournit un moyen standardisé pour le code PHP et JS de WordPress d’interagir avec des modèles d’IA génératifs. Parce que le client d’IA est agnostique, le système peut fonctionner indépendamment d’un fournisseur d’IA particulier.
• Fournisseur d’IA : l’entité ou l’entreprise qui développe, possède et gère les grands modèles de langage (LLM), comme Anthropic, Google et OpenAI.
• Connecteur : le composant qui permet l’intégration entre WordPress et les fournisseurs d’IA. WordPress 7.0 inclut 3 connecteurs par défaut – OpenAI, Anthropic, et Google – accessibles depuis Réglages > Connecteurs.
• Abilities API : une nouvelle interface fonctionnelle conçue pour permettre aux extension, aux thèmes et au coeur de WordPress d’exposer leurs capacités dans des formats lisibles à la fois par l’homme et par la machine, permettant aux agents d’IA d’interagir avec les fonctionnalités de WordPress (par exemple, la création d’articles ou l’ajout d’un extrait) d’une manière structurée. C’est ce qui rend WordPress 7.0 nativement agentique.

Connecteurs

Les versions précédentes de WordPress nécessitaient une extension pour chaque fournisseur d’IA que vous souhaitiez utiliser sur votre site. WordPress 7.0 introduit une interface unifiée pour gérer les connecteurs d’intelligence artificielle sous Réglages > Connecteurs.

Vous n’avez plus besoin de coller vos clés API à plusieurs endroits. Saisissez vos clés une seule fois dans l’écran Connecteurs, et toutes les extensions compatibles pourront utiliser cette connexion à travers le client IA.

En outre, la nouvelle interface vous permet de passer d’un fournisseur d’IA à l’autre à partir d’un seul endroit sans risquer de casser quoi que ce soit.

Dans l’interface Connecteurs, cliquez sur le bouton Installer pour votre fournisseur d’IA et saisissez votre clé API. Sauvegardez vos réglages, et vous êtes prêt à interagir avec le fournisseur d’IA sur votre site WordPress.

Si vous ne savez pas par où commencer, installez et activez l’extension AI Experiments. Elle vous permet d’ajouter des images mises en avant générées par l’IA, du texte alt, des extraits, etc.

La nouvelle intégration de l’IA introduit non seulement une nouvelle interface utilisateur, mais permet également aux développeurs d’enregistrer de nouveaux fournisseurs d’IA via l’API Connectors.

Les développeurs peuvent désormais enregistrer et gérer les connecteurs à l’aide des nouvelles classes et méthodes de base. Une fois enregistré, chaque connecteur apparait sous la forme d’une carte dans l’écran Connecteurs.

La nouvelle API propose également trois fonctions publiques.

• wp_is_connector_registered() : vérifie si un connecteur est enregistré.
• wp_get_connector() : récupère les données d’un seul connecteur.
• wp_get_connectors() : récupère tous les connecteurs enregistrés.

De plus, le nouveau crochet d’action wp_connectors_init vous permet de remplacer les métadonnées des connecteurs enregistrés.

Construire avec le client IA

L’écran Connecteurs fournit l’interface IA. Le client IA est le moteur sous le capot une couche d’abstraction unifiée qui standardise la façon dont WordPress interagit avec l’IA. Que ce soit OpenAI, Anthropic, ou Google Gemini, votre code reste le même. WordPress s’occupe de la traduction, ce qui vous permet de vous concentrer sur la logique de votre application.

La nouvelle fonction wp_ai_client_prompt() est au cœur de cette implémentation.

Voici un exemple simple en PHP :

$ai_response = wp_ai_client_prompt( "Create a professional post about WordPress" )
	->generate_text();

if ( is_wp_error( $ai_response ) ) {
	wp_die( $ai_response->get_error_message() );
}

echo wp_kses_post( $ai_response );

L’exemple suivant montre comment définir le schéma de réponse pour rendre les données prêtes à l’emploi.

$taxonomy_schema = array(
	'type'       => 'object',
	'properties' => array(
		'category' => array( 'type' => 'string' ),
		'tags'     => array( 
			'type'  => 'array',
			'items' => array( 'type' => 'string' )
		),
	),
	'required'   => array( 'category', 'tags' ),
);

$post_body = "Working from a small tavern in Crete was a game-changer. I realized that Greece is becoming the ultimate hub for remote workers in 2026.";

$json = wp_ai_client_prompt( "Based on this text, suggest the most appropriate category and 3-5 relevant tags: $post_body" )
	->using_temperature( 0.1 )
	->as_json_response( $taxonomy_schema )
	->generate_text();

if ( is_wp_error( $json ) ) {
	return $json;
}

$suggested_taxonomies = json_decode( $json, true );

Dans ce code,

• Avec as_json_response(), WordPress s’assure que la sortie est purement JSON et conforme au schéma spécifié ($taxonomy_schema).
• using_temperature() contrôle la réponse de l’IA, la rendant plus ou moins déterministe (ou aléatoire). Une température basse (0,1) permet d’obtenir une plus grande précision, tandis qu’une température élevée encourage une réponse plus créative.
• Le tableau $suggested_taxonomies fournit les catégories et les étiquettes générées par l’IA. Vous pouvez les attribuer automatiquement à votre article.

Une sortie structurée garantit des résultats prévisibles et constitue un format idéal pour l’utilisation de l’API Abilities. Par exemple, le code ci-dessus peut être utilisé pour créer automatiquement un article avec la catégorie et les étiquettes spécifiées.

L’API ne prend pas seulement en charge le texte. Grâce à la méthode generate_image(), le client IA peut également générer des images.

Vous pouvez demander plusieurs résultats en un seul appel. Par exemple, vous pouvez demander 3 options de texte ou d’image en passant une valeur numérique aux méthodes generate_text() ou generate_image(): en appelant generate_image( 3 ), vous obtiendrez 3 variantes de la même image.

L’API fournit également un ensemble de méthodes qui renvoient des informations supplémentaires. Ces méthodes renvoient un objet GenerativeAiResult contenant des métadonnées riches, telles que l’utilisation du jeton, le fournisseur et le modèle qui a répondu à l’invite :

• generate_text_result()
• generate_image_result()
• convert_text_to_speech_result()
• generate_speech_result()
• generate_video_result()

Comme vous pouvez le constater, ces méthodes offrent une série de fonctionnalités supplémentaires, notamment la prise en charge de la conversion texte-parole, de la parole et de la vidéo.

Les autres méthodes de l’API sont les suivantes :

• using_max_tokens() : limite la longueur de la réponse (par exemple, ->using_max_tokens( 500 ))
• using_model_preference() : définit un modèle spécifique (par exemple, ->using_model_preference( 'gemini-2.5-flash' ))

Pour une analyse plus approfondie et des exemples de code supplémentaires, reportez-vous à la page du projet GitHub WP AI Client et aux changements effectués en préparation de WordPress 7.0.

Nouveaux blocs et outils de conception

WordPress 7.0 introduit de nouveaux blocs et outils de conception qui amélioreront considérablement l’expérience d’édition. Voici ce qu’il y a de nouveau et comment vos flux de travail créatifs changent.

Nouveau bloc Breadcrumbs

WordPress 7.0 introduit un nouveau bloc de fils d’Ariane qui reflète la hiérarchie affichée de la page.

À la base, le nouveau bloc comprend un composant dynamique qui interroge la structure de données de WordPress pour identifier automatiquement l’emplacement actuel des visiteurs du site en fonction de la hiérarchie de la page (parent/enfant) ou des termes de la taxonomie de l’article.

Dans l’image ci-dessous, le bloc Breadcrumbs affiche la hiérarchie des catégories d’un article de blog ordinaire.

Le bloc Breadcrumbs prend également en charge la boucle de requête. Lorsque vous ajoutez un bloc Fil d’Ariane à un bloc Boucle de requête, le bloc affiche les chemins d’accès des articles individuels extraits de la requête.

Le bloc Breadcrumbs dispose de quelques options de configuration qui vous permettent de :

• Afficher/masquer le lien vers la page d’accueil comme point de départ de la navigation.
• Afficher/masquer le fil d’Ariane actuel.
• Modifier le séparateur du fil d’Ariane.
• Afficher les fils d’Ariane sur la page d’accueil.
• Préférer la hiérarchie des articles (par défaut) ou la hiérarchie des termes de taxonomie.

Le bloc Fil d’Ariane prend en charge les outils de conception Gutenberg et introduit deux filtres qui permettent aux développeurs de contrôler les fils d’Ariane de manière programmatique.

Le nouveau filtre block_core_breadcrumbs_post_type_settings permet aux développeurs de spécifier quelle taxonomie et quel terme doivent être utilisés dans les fils d’Ariane lorsqu’un article a plusieurs taxonomies ou termes.

Dans l’exemple suivant, le filtre est utilisé pour afficher les étiquettes au lieu des catégories :

add_filter( 'block_core_breadcrumbs_post_type_settings', function( $settings, $post_type ) {
	if ( 'post' === $post_type ) {
		$settings['taxonomy'] = 'post_tag';
	}
	return $settings;
}, 10, 2 );

Le filtre block_core_breadcrumbs_items permet aux développeurs de modifier, d’ajouter ou de supprimer des éléments du fil d’Ariane final avant qu’il ne soit rendu. Voici quelques cas d’utilisation :

• Remplacer l’icône Accueil par une image (un SVG, le logo de votre entreprise, etc.) pour gagner de l’espace ou rendre le bloc plus cohérent avec l’image de marque de votre site.
• Raccourcir le titre d’un article dans le fil d’Ariane s’il est trop long.
• Injecter des catégories ou des termes personnalisés, par exemple, en forçant une étape dans le fil d’Ariane.

Le code suivant utilise le nouveau filtre pour tronquer les étiquettes du fil d’Ariane lorsque leur longueur dépasse 20 caractères :

add_filter( 'block_core_breadcrumbs_items', function( $items ) {
	foreach ( $items as $key => $item ) {
		if ( mb_strlen( $item['label'] ) > 20 ) {
			// Truncate the string to 17 characters and append '...'
			$items[$key]['label'] = mb_strimwidth( $item['label'], 0, 17, '...' );
		}
	}
	return $items;
}, 10, 1 );

Pour un aperçu plus approfondi des filtres de blocs Breadcrumbs et d’autres exemples de code, consultez la note de développement.

Nouveau bloc d’icône

Un nouveau bloc d’icône vous permet d’ajouter des icônes SVG dans votre contenu. Le nouveau bloc vise à fournir une solution standard native pour gérer le balisage et assurer la cohérence de l’accessibilité, sans nécessiter l’installation d’extensions tierces juste pour ajouter quelques icônes.

Actuellement, le nouveau bloc d’icône est livré avec un jeu par défaut à partir duquel vous pouvez sélectionner vos icônes. Toutefois, il est prévu d’ajouter la possibilité pour les utilisateurs d’enregistrer des jeux d’icônes tiers à l’avenir.

Le bloc est basé sur une nouvelle API d’enregistrement d’icônes SVG côté serveur. Cela garantit que les mises à jour du registre des icônes sont propagées à tous les utilisateurs sans erreur. L’introduction du nouveau bloc d’icônes est associée à un nouveau point de terminaison de l’API /wp/v2/icons.

Superpositions de navigation personnalisables

Avant WordPress 7.0, les menus de navigation mobiles étaient fixes, et vous ne pouviez pas modifier le design, la mise en page ou le contenu par défaut. WordPress 7.0 introduit des superpositions de navigation personnalisables, vous donnant un contrôle total sur vos menus de navigation. Vous pouvez créer un menu superposé en utilisant des blocs et des motifs, et un nouveau bloc de fermeture de superposition de navigation pour ajouter un bouton de fermeture n’importe où dans la superposition de navigation.

Techniquement, les superpositions de navigation sont des éléments de modèle. Une fois que vous aurez créé la vôtre, vous la trouverez dans la section Modèles de la colonne latérale de l’éditeur de site. Chaque superposition est assignée à un bloc de navigation, mais vous pouvez assigner plusieurs blocs de navigation à la même superposition.

En fait, il s’agit d’un canevas de bloc qui peut contenir n’importe quel type de bloc. Vous pouvez ajouter un bloc de navigation, mais c’est vous qui décidez des blocs que vous ajoutez. Il peut s’agir d’icônes sociales, d’un champ de recherche, du logo de votre site, etc.

Les superpositions de navigation ne peuvent être utilisées que dans le bloc Navigation. Pour éviter toute utilisation accidentelle dans d’autres parties d’un modèle, ils sont exclus de l’outil d’insertion de blocs.

Vous pouvez créer une superposition de navigation personnalisée à partir de la section Superpositions dans la colonne latérale du bloc Navigation dans l’éditeur de site.

Lorsque vous sélectionnez le bloc Navigation, la colonne latérale de la partie modèle affiche les paramètres de la superposition de navigation, divisés en deux sections. La section Contenu indique les types de blocs inclus dans la superposition, tandis que la section Conception propose une série de conceptions prédéfinies.

Le bloc latéral est divisé en deux onglets, l’un pour les réglages et l’autre pour les styles de la partie de modèle Navigation Overlay.

L’onglet Styles de l’onglet des blocs de la superposition de navigation est l’endroit où vous pouvez personnaliser l’apparence de votre superposition en définissant les couleurs, l’image d’arrière-plan, la typographie, la taille, la bordure et l’ombre.

Les développeurs de thèmes peuvent facilement ajouter des superpositions de navigation prédéfinies à leurs thèmes. Vous pouvez fournir à la fois un modèle de superposition par défaut (la superposition elle-même) et un ensemble de modèles de superposition (modèles préconstruits qui apparaissent lors de l’édition d’une superposition de navigation).

Pour un aperçu plus approfondi et des exemples de code, reportez-vous à la note de développement officielle et à cette pull request.

Améliorations du bloc Paragraphe

Plusieurs nouveaux ajouts au bloc Paragraphe offrent une plus grande souplesse dans la mise en forme du texte.

Tout d’abord, une nouvelle option dans les réglages de typographie vous permet de définir le retrait de la première ligne.

Vous pouvez contrôler l’indentation du texte pour des paragraphes individuels, ou vous pouvez l’appliquer à tous les paragraphes via les réglages du style global sous Éditeur > Styles > Blocs > Paragraphe.

Les développeurs de thèmes peuvent activer/désactiver et contrôler granulairement l’indentation des lignes dans le fichier theme.json à l’aide de la nouvelle propriété textIndent.

Le bloc Paragraphe prend désormais en charge l’alignement large et complet. L’image suivante montre le nouveau contrôle Alignement.

Un autre ajout utile au bloc Paragraphe est la prise en charge des colonnes de texte. Cette nouvelle option est disponible dans les réglages de typographie de la colonne latérale du bloc.

Vidéos d’arrière-plan intégrées pour le bloc Couverture

Avec WordPress 7.0, vous pouvez utiliser des vidéos intégrées, telles que celles de YouTube ou de Vimeo, comme vidéos d’arrière-plan pour le bloc Couverture. Auparavant, vous ne pouviez utiliser que des vidéos téléversées.

Cette fonctionnalité est particulièrement utile pour ceux qui souhaitent économiser de la bande passante en hébergeant des vidéos sur des plateformes externes.

Pour ajouter une vidéo hébergée, cliquez sur Ajouter un média dans la barre d’outils du bloc de couverture, puis sélectionnez Intégrer une vidéo à partir d’une URL.

Il vous sera alors demandé de saisir l’URL de la vidéo.

Votre vidéo intégrée apparaitra en tant que vidéo d’arrière-plan pour votre bloc de couverture, à la fois dans l’éditeur et sur le site web.

Bloc de grille réactif

Le bloc Grille a été mis à jour pour être nativement réactif. Dans les versions précédentes de WordPress, les utilisateurs ne pouvaient choisir qu’entre les modes Auto et Manuel. En mode Auto, vous pouviez définir la largeur minimale des colonnes pour que le bloc soit réactif. En mode manuel, vous pouviez définir le nombre de colonnes, qui restait fixe.

A partir de WordPress 7.0, le bloc Grille est nativement réactif. Le nombre de colonnes se comporte désormais comme le maximum, et vous pouvez affiner la taille minimale des colonnes et le nombre maximal de colonnes tout en gardant le bloc réactif.

Support CSS personnalisé pour les blocs individuels

Vous pouvez désormais ajouter des styles personnalisés à des instances de blocs spécifiques à partir des réglages avancés du bloc.

Lorsque vous ajoutez des styles personnalisés à un bloc, WordPress ajoute automatiquement la classe has-custom-css. Si vous inspectez le bloc dans l’éditeur de code, vous verrez un bloc de code similaire à ce qui suit :

<!-- wp:image {
	"id":848,
	"sizeSlug":"large",
	"linkDestination":"none",
	"style":{ "css":"border: 4px solid blue;" }
} -->
	<figure class="wp-block-image size-large has-custom-css">
		<img src="http://example.com/wp-content/uploads/2026/03/example-768x1024.jpg" alt=" class="wp-image-848"/>
	</figure>
<!-- /wp:image -->

Le style personnalisé se charge après les valeurs par défaut de WordPress et les styles globaux, ce qui garantit que les modifications que vous apportez n’affecteront pas l’apparence des autres instances du même bloc.

Visibilité du bloc en fonction de la fenêtre de visualisation

Dans WordPress 7.0, vous pouvez cacher ou afficher les blocs individuellement selon que l’utilisateur se trouve sur un appareil mobile, une tablette ou un ordinateur de bureau.

Cette première itération ajoute la nouvelle propriété viewport à blockVisibility.

{
	"metadata" : {
		"blockVisibility" : {
			"viewport" : {
				"mobile" : false,
				"tablet" : true,
				"desktop" : true
			}
		}
	}
}

Vous pouvez activer le contrôle de la visibilité en ajoutant l’objet JSON ci-dessus au bloc directement dans l’éditeur de code ou via la palette de commandes.

Une fois que vous avez activé le contrôle de la visibilité des blocs, vous pouvez accéder aux options de visibilité des blocs en ouvrant la fenêtre modale à partir de la barre d’outils des blocs, de la colonne latérale de l’inspecteur de blocs ou de la palette de commandes.

Les prochaines versions devraient inclure des points de rupture configurables et une intégration avec theme.json pour la visibilité des blocs.

Options de style pour le bloc Math

Avant WordPress 7.0, les utilisateurs ne pouvaient pas personnaliser l’apparence du bloc Mathématique. La nouvelle version de WordPress ajoute des options de couleur, de typographie, de dimensions et de bordure pour le bloc Mathématiques.

L’image suivante fournit un exemple de style pour le bloc Math :

Mises à jour du bloc HTML

Le bloc HTML a été entièrement repensé. Désormais, lorsque vous insérez un bloc HTML dans votre contenu, une fenêtre modale s’affiche avec trois onglets distincts pour la saisie de votre code HTML, CSS et JavaScript.

Si vous avez besoin de plus d’espace, un bouton situé dans le coin supérieur droit de la fenêtre modale vous permet d’activer ou de désactiver le mode plein écran.

Améliorations du bloc image

Le bloc d’images a été mis à jour avec plusieurs améliorations qui offrent de plus grandes options de personnalisation.

Le bloc Image prend désormais en charge le contrôle du ratio d’aspect pour l’alignement large et complet (PR #74519). Cette nouvelle fonctionnalité est disponible dans l’onglet Styles de la colonne latérale des réglages du bloc.

Un autre ajout utile est le contrôle du point focal. Avec cette nouvelle fonctionnalité, vous pouvez ajuster la partie visible d’une image lorsqu’elle est recadrée (PR #73115)

Le composant de recadrage d’image dans l’éditeur a été déplacé dans un package spécifique, et il peut maintenant être utilisé dans toute l’application, et pas seulement dans l’éditeur de blocs (PR #73277)

Amélioration de l’expérience d’administration

Avec la sortie de WordPress 7.0, la zone d’administration de WordPress a été redessinée et modernisée. Il s’agit d’une amélioration substantielle de l’expérience d’administration visant à rendre la navigation du site plus fluide, plus cohérente et visuellement attrayante.

Améliorations visuelles

Lorsque vous ouvrirez le panneau d’administration de WordPress 7.0, vous remarquerez immédiatement que les éléments de l’interface sont différents. Ces changements ont été largement discutés et ont été jugés nécessaires pour moderniser l’apparence du tableau de bord et réduire les incohérences entre l’ancien tableau de bord et l’éditeur de blocs.

L’objectif est de moderniser l’apparence de l’administration, de réduire les incohérences entre les anciens écrans et les nouveaux écrans de l’éditeur de blocs / éditeur de site, et de mieux l’aligner avec le système de conception de WordPress dans son ensemble.

La refonte visuelle s’est concentrée sur une série de composants centraux qui apparaissent dans toute la zone d’administration de WordPress. Comme l’a souligné Fabian Kaegy, il s’agit de changements purement visuels, sans mises à jour architecturales ou fonctionnelles.

Vous pouvez explorer les nouveaux menus, boutons et transitions de WordPress 7.0 dans le système de design officiel de WordPress sur Figma.

Révisions visuelles

Les révisions sont désormais présentées sous forme d’aperçus dans une interface de type éditeur qui met en évidence les différences visuelles. Vous n’avez plus besoin de lire tout l’article pour voir ce qui a changé, car les différences entre les versions d’un même contenu sont désormais mises en évidence au niveau du bloc. Le système identifie également les changements de style, ce qui permet de repérer facilement les ajustements apportés à la palette de couleurs, à la typographie, aux dimensions, etc.

Des couleurs différentes identifient les différents types de changements :

• Le jaune met en évidence un bloc ou un texte qui a été modifié.
• Le rouge met en évidence un bloc ou un texte qui a été supprimé.
• Le vert identifie un bloc ou un texte qui a été ajouté.

Avec les révisions, vous pouvez voir toute la puissance d’Yjs car lors de la restauration d’une version précédente, le système ne restaure que les modifications apportées au document par bloc, et non l’ensemble du contenu.

Le système devrait être amélioré par de futures mises à jour, et nous pouvons nous attendre à de nouvelles fonctionnalités puissantes. Pour un aperçu plus détaillé de ce qui a été fait et de ce que nous devrions voir à l’avenir, consultez cet article de Mathias Ventura de 2023, ainsi que les numéros #60096 et #61161.

Voir les transitions

Avec WordPress 7.0, le paquet de démarrage – le composant responsable de l’initialisation de l’éditeur et de la gestion des transitions entre les différents écrans d’administration – reçoit une mise à jour significative. Grâce à cette nouvelle infrastructure, la navigation entre les écrans du tableau de bord ne nécessite plus de rechargement brutal de la page, mais propose des transitions élégantes qui améliorent significativement l’expérience de l’administrateur.

Techniquement parlant, en implémentant l’API View Transitions dans le paquetage de démarrage, WordPress peut maintenant orchestrer des animations de zoom et de glissement pendant les changements d’état. Cela évite de remonter le canevas lors des changements de route, assurant une transition fluide pour la navigation à la racine.

Changements pour les développeurs

WordPress 7.0 est plus qu’une simple mise à jour visuelle ; il introduit des changements structurels qui simplifient considérablement le flux de travail des développeurs. Parmi les points forts, citons la réduction des CSS personnalisés grâce à un theme.json plus puissant, une gestion plus prévisible de la mise en page grâce à l’utilisation accrue des iframes, et de nouveaux outils déclaratifs pour les interfaces d’administration, avec des DataViews, DataForm et Field API améliorés, ainsi qu’une nouvelle Client-side Abilities API qui fournit un moyen standardisé d’exposer et d’interagir avec les capacités de l’application via le JavaScript.

Si vous êtes un développeur, voici les changements techniques les plus importants de WordPress 7.0 que vous devez connaitre.

Support des pseudo-classes dans theme.json

Bonne nouvelle pour les développeurs de thèmes. Depuis WordPress 7.0, vous pouvez utiliser des sélecteurs de pseudo-classes (:hover, :focus, :focus-visible, et :active) directement sur vos blocs et variations de style dans votre theme.json.

Avant WordPress 7.0, les pseudo-classes n’étaient supportées que pour les éléments HTML comme les boutons et les liens, et leur utilisation au niveau des blocs n’était possible que dans les CSS personnalisés.

Pour utiliser les pseudo-classes au niveau des blocs, vous devez ajouter votre configuration de style dans la section styles de votre fichier theme.json. Voici un exemple simple d’utilisation des pseudo-classes pour un bloc Bouton (voir aussi PR #71418) :

{
	"version" : 3,
	"styles" : {
		"blocks" : {
			"core/button" : {
				"border" : {
					"width" : "2px",
					"style" : "solid",
					"color" : "#000000"
				},
				":hover" : {
					"border" : {
						"color" : "#ff4400"
					},
					"shadow" : "0 8px 15px rgba(255, 68, 0, 0.3)",
					"typographie" : {
						"textDecoration" : "underline"
					}
				},
				":active" : {
					"filter" : "brightness(0.8)",
					"shadow" : "none"
				}
			}
		}
	}
}

L’image suivante montre les différents états du bloc Bouton.

L’exemple suivant montre comment utiliser les pseudo-classes pour une variation de bloc dans theme.json :

{
	"version" : 3,
	"styles" : {
		"blocks" : {
			"core/button" : {
				"variations" : {
					"neon" : {
						"border" : {
							"width" : "2px",
							"style" : "solid",
							"color" : "#00ff00"
						},
						"color" : {
							"text" : "#00ff00",
							"background" : "transparent"
						},
						":hover" : {
							"border" : {
								"color" : "#ffffff"
							},
							"shadow" : "0 0 20px #00ff00, 0 0 40px #00ff00",
							"color" : {
								"text" : "#ffffff"
							},
							"typographie" : {
								"textDecoration" : "none"
							}
						},
						":active" : {
							"filter" : "brightness(1.5) blur(1px)",
							"shadow" : "0 0 10px #ffffff"
						}
					}
				}
			}
		}
	}
}

Éditeur d’articles encadré

Depuis WordPress 7.0, l’éditeur d’articles est chargé dans une iframe si le contenu ne contient que des blocs utilisant la version 3 de l’API des blocs ou une version supérieure. Avant la version 7.0, l’éditeur d’articles n’était chargé dans une iframe que si tous les blocs enregistrés (même ceux qui n’étaient pas inclus dans le contenu) utilisaient la version 3 de l’API de blocs.

Le principal avantage du chargement de l’éditeur dans une iframe est qu’il isole les styles de l’interface utilisateur de l’éditeur des styles du contenu du thème. Sans iframe, les feuilles de style de l’éditeur et du thème coexistent dans le même document, ce qui entraine souvent des problèmes de compatibilité et complique la tâche des développeurs lorsqu’il s’agit d’assurer la cohérence visuelle entre le backend et le frontend.

Les principaux avantages de l’éditeur de texte iframé sont les suivants :

Isolation du style

• Pas d’infiltration de CSS : l’iframe empêche les styles de l’administration de WordPress de s’infiltrer dans le canevas de l’éditeur et vice versa, ce qui garantit que l’apparence des blocs n’est pas affectée par l’interface utilisateur environnante.
• Pas besoin de réinitialiser le CSS : les développeurs n’ont plus besoin de réinitialiser manuellement les règles CSS de l’administrateur WordPress pour que le contenu de l’éditeur corresponde à l’apparence du frontend.
• Pas de préfixe : les développeurs de thèmes n’ont plus besoin d’ajouter des préfixes ou des sélecteurs de haute spécificité à leurs règles CSS pour éviter de casser l’interface d’administration.

Cohérence de la mise en page

• Unités relatives à la vue : sans iframe, les unités telles que vw (viewport width) et vh (viewport height) se réfèrent à l’ensemble de la page d’administration (y compris la colonne latérale) ; elles ne doivent être utilisées que dans le canevas de l’éditeur.
• Requêtes multimédias natives : les requêtes multimédias fonctionnent de manière native dans l’iframe, reflétant la taille du canevas de l’éditeur plutôt que celle de la fenêtre entière du navigateur.

Expérience des développeurs

• Flux de travail simplifié : les auteurs de thèmes et d’extensions peuvent « reporter » les styles du frontend dans l’éditeur avec un minimum de changements, voire aucun.
• Sélections persistantes : les Iframes maintiennent la sélection dans l’éditeur (par exemple, le texte sélectionné) visible même lorsque l’utilisateur interagit avec les éléments de l’interface utilisateur, tels que les contrôles de la colonne latérale.
• Prévisibilité : l’éditeur iframed résout également le problème de l’incohérence visuelle, en empêchant l’éditeur de changer soudainement de mode en fonction des extensions installées.

Rétrocompatibilité

Si un article contient un bloc utilisant des versions plus anciennes de l’API, l’iframe est automatiquement supprimé pour assurer la rétrocompatibilité. Pour profiter de ces améliorations, les développeurs de blocs sont encouragés à mettre à jour leurs blocs avec la version 3 de l’API des blocs.

Enregistrement de blocs en PHP uniquement

WordPress 7.0 introduit la possibilité d’enregistrer des blocs exclusivement via PHP avec des contrôles d’inspecteur générés automatiquement. Cet ajout rationalise les flux de travail des développeurs et encourage les sites qui utilisent des thèmes hybrides ou des fonctions PHP et des codes courts à adopter et à développer l’éditeur de blocs. Voici un exemple de bloc enregistré via PHP :

/**
 * Render callback (frontend and editor)
 */
function my_php_only_block_render( $attributes ) {
	return '<div>
		<h3>🚀 PHP-only Block</h3>
		<p>This block was created with only PHP!</p>
	</div>';
}

/**
 * Register the block on the 'init' hook.
 */
add_action( 'init', function() {
	register_block_type( 'my-plugin/php-only-test-block', array(
		'title'		   => 'My PHP-only Block',
		'icon'			=> 'welcome-learn-more',
		'category'		=> 'text',
		'render_callback' => 'my_php_only_block_render',
		'supports'		=> array(
			// Automatically registers the block in the Editor JS (previously auto_ssr)
			'auto_register' => true, 
		),
	) );
});

À l’heure où nous écrivons ces lignes, les blocs en PHP uniquement ne sont pas dynamiques et ne peuvent utiliser que des contrôles de configuration spécifiques. Mais il existe encore de nombreux cas d’utilisation à explorer. C’est pourquoi nous avons publié un tutoriel couvrant uniquement les blocs PHP. Si vous êtes un développeur PHP, il vaut la peine d’y jeter un coup d’œil.

Améliorations des API DataViews, DataForm et Field

WordPress 7.0 apporte plusieurs améliorations aux DataViews, marquant un pas décisif vers une interface administrative plus moderne et modulaire. Cette mise à jour transforme la gestion des données en une expérience hautement personnalisable avec une approche déclarative. Les développeurs peuvent désormais créer des interfaces personnalisées complexes en définissant simplement leurs règles au format JSON, permettant au noyau de générer l’interface.

Les nouveaux ajouts incluent :

• Amélioration de la visualisation des données (DataViews) : le nouveau modèle d’activité utilise un style de ligne temporelle de flux d’activité. Il existe également un nouveau mode d’affichage compact pour les listes.
• Amélioration des formulaires (DataForm) : la nouvelle présentation Détails est désormais disponible, ainsi que les icônes d’édition pour la présentation Panneau. Ces icônes peuvent être configurées pour n’apparaitre qu’en cas de besoin.
• Amélioration du contrôle des données (Field API) : la validation automatique des champs est disponible, ainsi que de nouvelles options de personnalisation du formatage pour les types de champs numériques et de dates.

Voici un exemple de définition d’une vue qui regroupe et affiche des données en mode compact :

const myCompactView = {
	type: 'list',
	layout: { 
		density: 'compact' 
	},
	groupBy: {
		field: 'status',
		direction: 'desc',
		showLabel: true
	}
};

Pour un aperçu détaillé des améliorations apportées aux DataViews, DataForm et Field API, veuillez consulter la note de développement.

API de capacités côté client

WordPress 6.9 a introduit l’API Abilities, une nouvelle interface fonctionnelle qui fournit un registre standardisé pour les extensions, les thèmes et le cœur de WordPress pour interagir avec WordPress en exposant leurs capacités dans des formats lisibles à la fois par l’homme et par la machine.

WordPress 7.0 introduit maintenant une API JavaScript qui vous permet d’implémenter des fonctionnalités côté client comme la navigation ou l’ajout de blocs à votre contenu directement à partir de JavaScript, d’une manière sécurisée et standardisée.

La nouvelle API Client-side Abilities est divisée en deux paquets.

• @wordpress/core-abilities : si votre extension a besoin d’accéder aux capacités enregistrées sur le serveur, vous devrez vous connecter au paquet @wordpress/core-abilities. Ce paquet récupère toutes les capacités et catégories enregistrées via l’API REST et les stocke dans le magasin @wordpress/abilities.
• @wordpress/abilities : ce paquet fournit le magasin de capacités sans charger les capacités enregistrées sur le serveur. Si votre extension n’a besoin que d’enregistrer des capacités côté client et n’a pas besoin d’accéder aux capacités enregistrées sur le serveur, elle doit mettre en file d’attente @wordpress/abilities.

Reportez-vous à la note du développeur pour une analyse détaillée de la nouvelle API « Client-side Abilities » et plusieurs exemples de code.

Modifications de l’API Interactivité

L’API Interactivité est une API native de WordPress qui permet aux développeurs d’ajouter de l’interactivité à leurs sites web d’une manière standardisée. WordPress 7.0 améliore l’API Interactivité avec une nouvelle fonction watch() qui vous permet d’observer de manière programmatique les changements d’état. Auparavant, il n’était possible d’utiliser que la directive data-wp-watch pour réagir aux changements d’état.

Les autres changements apportés par WordPress 7.0 concernent le magasin core/router.

Pour une description plus détaillée des changements apportés à l’API Interactivité, veuillez vous référer à la note de développement.

Autres changements pour les développeurs

Voici quelques autres changements pour les développeurs qui méritent d’être mentionnés :

• A partir de WordPress 7.0, les attributs de blocs supportant les Block Bindings supportent également les Pattern Overrides. Cela signifie que vous pouvez utiliser des substitutions de compositions avec n’importe quel bloc, y compris les blocs personnalisés.
• Les modèles non synchronisés et les parties de modèles sont désormais définis par défaut sur contentOnly. Les utilisateurs verront les contrôles pour l’édition du texte et des médias en premier, sans risquer de casser accidentellement la structure du bloc. Si vous avez créé des blocs personnalisés et que vous souhaitez qu’ils restent modifiables, veillez à définir le "rôle" : "contentOnly" dans le fichier block.json. Les développeurs peuvent désactiver cette fonctionnalité via PHP en utilisant le filtre block_editor_settings_all, ou via JavaScript en définissant disableContentOnlyForUnsyncedPatterns à true.
• WordPress 7.0 abandonne le support de PHP 7.2 et 7.3. La version minimale recommandée de PHP reste 8.3.
• Le système de support des blocs Dimensions a été considérablement amélioré. Vous pouvez utiliser la largeur et la hauteur comme support de bloc standard sous dimensions dans block.json, et les thèmes peuvent définir des préréglages de taille de dimension dans leur theme.json.

L’avenir : 7.0 marque une nouvelle ère pour WordPress

WordPress 7.0 n’est pas une simple mise à jour ; elle représente un tournant pour les utilisateurs et les développeurs. Grâce à l’intégration de l’IA et à l’API Abilities, l’IA peut désormais naviguer dans le tableau de bord, créer de nouveaux contenus et modifier des articles existants. Nous pensons vraiment que nous nous trouvons à un tournant historique, et nous sommes impatients d’explorer ces outils alimentés par l’IA et de commencer à créer nous-mêmes quelque chose d’entièrement nouveau.

Mais WordPress 7.0 ne se limite pas à l’IA. L’expérience d’édition a été complètement repensée, avec une nouvelle architecture de révision au niveau des blocs, de nouveaux blocs principaux et des mises à jour significatives du système de conception.

Au-delà de l’intégration de l’IA, les développeurs bénéficieront d’améliorations qui rationalisent le flux de travail de développement et ouvrent des possibilités inédites. De l’éditeur iframed et du support des pseudo-classes dans theme.json à l’API Client-side Abilities et aux blocs PHP uniquement, WordPress 7.0 fournit une multitude d’outils pour construire des sites et des applications de plus en plus puissants.

Pour exploiter pleinement le potentiel de WordPress 7.0, vous avez besoin d’un service d’hébergement de pointe, optimisé pour la performance et la sécurité. Chez Kinsta, vous trouverez tout ce dont vous avez besoin pour pousser WordPress au maximum de son potentiel. Consultez nos offres et trouvez celle qui correspond le mieux aux besoins de votre site.