« Selon la documentation officielle de WordPress, l’Interactivity API « fournit un ensemble standardisé d’API pour ajouter de l’interactivité aux blocs » ». Cette phrase, extraite de la documentation développeur du projet Gutenberg, laisse penser à tort que ce mécanisme, stable depuis WordPress 6.5, serait réservé aux thèmes blocs. En réalité, rien n’empêche techniquement de l’utiliser dans un template PHP tout à fait classique, sans éditeur de site ni theme.json.
Ce tutoriel détaille la mise en place d’un accordéon interactif dans un thème classique, en s’appuyant sur l’Interactivity API plutôt que sur jQuery ou une bibliothèque JavaScript tierce ; il ne traite pas les thèmes blocs ni la création de blocs dynamiques complets, qui restent le terrain d’usage le plus documenté de cette API.
Pourquoi se passer de jQuery a un intérêt concret
De nombreux thèmes classiques embarquent encore jQuery uniquement pour gérer quelques interactions simples : afficher ou masquer un panneau, gérer un jeu d’onglets, animer un menu mobile. Ce chargement, souvent redondant avec la version de jQuery déjà fournie par WordPress lui-même, ajoute un poids JavaScript évitable et une dépendance à une bibliothèque que le cœur de WordPress prévoit, à terme, de rendre optionnelle plutôt que systématique.
Le principe des directives HTML
L’Interactivity API fonctionne par un système de directives, des attributs HTML personnalisés préfixés par data-wp-, qui décrivent le comportement interactif directement dans le balisage, sans écrire de gestionnaire d’événement JavaScript à la main pour chaque élément :
<div data-wp-interactive="mon-theme-accordeon"
data-wp-context='{ "ouvert": false }'>
<button data-wp-on--click="actions.basculer"
data-wp-bind--aria-expanded="context.ouvert">
Quels délais de livraison ?
</button>
<div data-wp-class--est-visible="context.ouvert">
<p>Les commandes sont expédiées sous 48 heures ouvrées.</p>
</div>
</div>Ce balisage se place directement dans un template PHP classique, par exemple template-parts/faq-item.php, sans dépendance à l’éditeur de blocs.
Déclarer la logique côté JavaScript
La logique d’interaction elle-même s’écrit dans un module JavaScript séparé, enregistré via store(), la fonction fournie par le paquet @wordpress/interactivity :
// assets/js/accordeon.js
import { store, getContext } from '@wordpress/interactivity';
store( 'mon-theme-accordeon', {
actions: {
basculer() {
const context = getContext();
context.ouvert = ! context.ouvert;
},
},
} );Ce fichier s’enregistre côté PHP avec wp_enqueue_script_module(), la fonction introduite précisément pour charger ce type de module interactif, en spécifiant la dépendance au module d’interactivité fourni par WordPress lui-même :
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_script_module(
'mon-theme-accordeon',
get_stylesheet_directory_uri() . '/assets/js/accordeon.js',
[ '@wordpress/interactivity' ],
wp_get_theme()->get( 'Version' )
);
} );Ce que ça remplace concrètement
La version équivalente en jQuery, telle qu’on la trouve encore dans de nombreux thèmes, ressemblait généralement à ceci :
jQuery(document).ready(function($) {
$('.accordeon-bouton').on('click', function() {
$(this).next('.accordeon-contenu').slideToggle();
$(this).attr('aria-expanded',
$(this).attr('aria-expanded') === 'true' ? 'false' : 'true'
);
});
});Au-delà de la suppression de la dépendance à jQuery, la version par directives présente un avantage moins visible mais réel : l’état (context.ouvert) est déclaratif et lisible directement dans le HTML généré, ce qui facilite grandement le débogage par rapport à un état géré de façon impérative et dispersée dans des gestionnaires d’événements jQuery.
Limite à connaître pour un thème classique
Le chargement de @wordpress/interactivity repose sur le support des modules JavaScript natifs du navigateur (import/export), ce qui exclut de fait la prise en charge des navigateurs très anciens sans compatibilité descendante spécifique. Sur un projet où cette contrainte est bloquante, jQuery ou une solution de repli reste malheureusement nécessaire pour ce public résiduel.
Adopter l’Interactivity API dans un thème classique n’impose pas de migrer vers un thème bloc : c’est une bibliothèque d’interactivité que WordPress fournit, indépendante de l’architecture de templates choisie.
En résumé
L’Interactivity API, stabilisée avec WordPress 6.5, s’intègre sans difficulté dans un thème classique existant, réduisant la dépendance à jQuery pour des interactions simples comme un accordéon ou un jeu d’onglets. La bascule demande de repenser la logique en termes de directives déclaratives plutôt que de gestionnaires d’événements impératifs, mais le gain en poids JavaScript et en lisibilité de l’état justifie l’effort sur un thème appelé à vivre plusieurs années.
