Nouveautés de WordPress 7.0 : intégration de l’IA, collaboration en temps réel, 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. Désormais, vous pouvez collaborer avec votre équipe en temps réel – comme avec Google Docs – et tirer parti d’une « architecture agentique » prête à interagir avec de grands modèles de langage (LLM).

Mais ce n’est pas tout. Outre la collaboration en temps réel, 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.

Collaboration en temps réel dans l’éditeur de blocs

La collaboration en temps réel (Real-Time Collaboration ou RTC) dans l’éditeur de blocs est l’une des fonctionnalités les plus attendues de la version de base. WordPress 7.0 introduit la possibilité de modifier le même article ou la même page de manière synchronisée avec plusieurs utilisateurs, comme dans un Google Doc.

Par essence, WordPress 7.0 passe d’une plateforme mono-utilisateur à une plateforme multi-utilisateurs. Cela représente un changement fondamental pour les équipes éditoriales qui travaillent avec WordPress.

Ce projet vise plusieurs objectifs :

• Permettre une collaboration en temps réel sur le contenu, y compris les articles, les pages et les modèles.
• Permettre la modification hors ligne et la synchronisation des données.
• Fournir une expérience de développement optimisée afin que les développeurs n’aient pas à se soucier de l’édition collaborative, puisque les données sont collaboratives et synchronisées par défaut.

Cette première implémentation introduit une variété de nouvelles fonctionnalités affectant à la fois les utilisateurs de l’éditeur et les développeurs. Nous allons nous y plonger.

Collaboration en temps réel dans l’éditeur de blocs : Nouveautés pour les utilisateurs

Si vous travaillez en équipe, vous n’avez plus besoin d’attendre que votre collègue quitte l’éditeur pour revoir le contenu ou apporter des modifications, car vous pouvez désormais collaborer en temps réel à la production de contenu.

Pour commencer, assurez-vous que l’option Activer la collaboration en temps réel est cochée dans les réglages d’écriture.

Ensuite, ouvrez l’éditeur d’articles avec d’autres membres de votre équipe, ou ouvrez plusieurs sessions avec différents utilisateurs, et commencez à explorer.

Ce sont les points clés de l’édition collaborative.

Sensibilisation

Lorsque plusieurs utilisateurs collaborent sur le même message ou la même page, les avatars des autres utilisateurs apparaissent dans la barre d’outils supérieure de l’éditeur de blocs.

Les modifications apportées par chaque collaborateur seront visibles par le reste de l’équipe en temps quasi réel. Lorsqu’un utilisateur travaille sur un élément de texte, son avatar apparait également dans la barre d’outils du bloc et se déplace avec le curseur.

En outre, lorsqu’un utilisateur ajoute un nouveau bloc, celui-ci est mis en évidence par une bordure colorée.

Synchronisation avec le backend

Grâce à l’intégration d’Yjs, le système gère les conflits de manière intelligente en utilisant CRDT. Si deux utilisateurs travaillent sur le même bloc ou écrivent le même mot en même temps, le système synchronise les modifications en douceur. Les modifications des propriétés des blocs, telles que les couleurs et les polices, sont également gérées de manière transparente.

Modification hors ligne et synchronisation des données

Le système fonctionne sans problème même lorsque vous êtes hors ligne. Ainsi, si vous travaillez dans des zones où les connexions sont lentes ou si vous êtes hors ligne pendant quelques minutes, vous pouvez toujours écrire. Lorsque le signal sera rétabli, vos modifications seront fusionnées avec celles des autres et il n’y aura pas d’écrasement indésirable.

L’annulation d’une opération (Cmd Z) n’annulera que vos dernières modifications, et non celles effectuées par vos collègues une seconde plus tôt.

Vous n’aurez pas à vous soucier de sauvegarder constamment votre travail pour le partager avec d’autres. La synchronisation s’effectue presque en temps réel. Les autres utilisateurs connectés et travaillant sur le même contenu verront vos modifications presque instantanément.

Collaboration en temps réel dans l’éditeur de blocs : une introduction pour les développeurs

Le nouveau système de collaboration en temps réel de WordPress est fondé sur Yjs, « un CRDT de haute performance pour construire des applications collaboratives qui se synchronisent automatiquement »

Yjs est une bibliothèque JavaScript pour la gestion des données, comme le contenu de WordPress, qui doivent être modifiées simultanément par plusieurs personnes en temps réel. C’est le moteur de synchronisation pour la collaboration en temps réel dans l’éditeur.

En termes techniques, Yjs est une implémentation de CRDT (Conflict-free Replicated Data Types) :

Il expose son modèle CRDT interne sous forme de types de données partagés qui peuvent être manipulés simultanément. Les types partagés sont similaires aux types de données courants tels que Map et Array. Ils peuvent être manipulés, déclencher des évènements en cas de changement et fusionner automatiquement sans conflit de fusion.

Avant WordPress 7.0, les articles étaient stockés sous la forme d’une seule chaine HTML statique. Yjs utilise le format Delta pour décrire le contenu et les modifications apportées par chaque contributeur. Les deltas sont un format de données qui décrit les documents sans la complexité du HTML, y compris les informations de formatage.

Par exemple, considérez le texte « Hello WordPress » L’objet JSON suivant décrit un changement dans le poids de la police :

[
	{ "retain": 6 }, // Skip "Hello " (6 characters)
	{ "retain": 9, "attributes": { "bold": true } } // Apply bold to the next 9 characters
]

Si un utilisateur ajoute « 7.0 » à la fin de la chaine, l’objet JSON résultant est le suivant :

[
	{ "retain" : 15 },
	{ "insert" : " 7.0" }
]

L’utilisation de Yjs et la mise en œuvre du format Delta offrent plusieurs avantages :

• Il prévient tous les types de conflits. Si plusieurs utilisateurs modifient le même paragraphe ou même le même mot, WordPress peut identifier qui a écrit chaque lettre. Cela permet des révisions granulaires et ouvre la voie à des restaurations de révisions au niveau du bloc.
• Cela garantit une précision chirurgicale et une synchronisation instantanée. Si vous modifiez un seul mot dans un article de 20.000 mots, seule cette petite modification est enregistrée. Cela permet une synchronisation instantanée du contenu pour tous les utilisateurs connectés.
• La même approche permet de synchroniser les réglages des blocs (tels que les couleurs ou les options de mise en page) en tant qu’attributs de carte partagés.

Pour une vue d’ensemble approfondie de ce que les développeurs doivent savoir pour permettre la collaboration dans l’éditeur, consultez la note de développement et cette discussion sur l’édition collaborative.

Infrastructure et transport de données : L’importance de votre hébergeur

Le fait que plusieurs utilisateurs travaillent simultanément sur le backend de WordPress peut peser sur les ressources de votre site, il est donc important de comprendre ce qui se passe en coulisses lors de l’édition collaborative.

Comme nous l’avons mentionné précédemment, l’interface de l’éditeur et le moteur Yjs fournissent les bases d’une collaboration en temps réel. Cependant, nous n’avons pas encore expliqué comment les données sont transportées entre les utilisateurs. Ce processus est géré par la couche de transport, qui transmet vos modifications de votre navigateur au serveur, puis aux autres utilisateurs qui éditent le même contenu.

Parmi les nombreuses options de couche de transport disponibles, HTTP Polling, WebSockets et WebRTC ont reçu le plus d’attention. Chaque option a ses avantages et ses inconvénients.

• L’interrogation HTTP est appréciée pour son support universel – elle fonctionne sur tous les serveurs PHP et dans tous les environnements d’hébergement partagé sans configuration supplémentaire – mais elle est moins efficace en raison des frais généraux élevés liés aux requêtes HTTP constantes.
• Les WebSockets excellent en termes d’efficacité des ressources et de faible latence, les changements apparaissant instantanément, mais ils nécessitent un logiciel spécialisé qui n’est pas disponible sur les hôtes de base.
• WebRTC est très efficace pour les petits groupes d’utilisateurs, car les navigateurs s’envoient directement des données sans serveur central pour la synchronisation. Cependant, il est considéré comme peu fiable.

Finalement, la décision a été prise de mettre en œuvre la solution HTTP Polling. Bien que cette solution garantisse la collaboration sur n’importe quel serveur, elle s’accompagne de frais généraux plus élevés et constitue l’option la moins « en temps réel ». WordPress est conçu pour fonctionner sur tous les types de serveurs, de l’hébergement partagé d’entrée de gamme aux infrastructures d’entreprise massives, c’est pourquoi cette solution a été choisie.

Cependant, la couche de transport est conçue pour être remplacée ou étendue. Les hébergeurs ou les extensions spécialisés peuvent remplacer le système de sondage par défaut par un fournisseur WebSocket très performant.

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, modifier des articles existants et collaborer avec les humains en temps réel. 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 et au RTC. L’expérience d’édition a été complètement repensée, avec une collaboration en temps réel, 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.