API Interactivity

L’API Interactivity a été introduite dans WordPress 6.5 pour permettre aux développeurs de créer facilement des éléments interactifs côté frontend sans avoir recours à des bibliothèques JavaScript tierces.

L’Interactivity API est un framework standardisé permettant de créer des interfaces interactives côté client (frontend).

• Objectif : Remplacer les bibliothèques tierces (jQuery, etc.) par un système natif léger.
• Méthode : Utilise un système « déclaratif » via des directives HTML (data-wp-*) et un store JavaScript.
• Avantage : Permet une interaction instantanée (clic, recherche, panier) sans recharger la page, tout en étant compatible avec le SEO.

Exemple fonctionnel : le compteur dynamique

1. Le HTML (PHP ou Bloc)

L’attribut data-wp-interactivity définit le « nom du store » qui fait le pont avec le JavaScript.

HTML

<div data-wp-interactivity="monCompteur" class="compteur-box">
    <button data-wp-on--click="actions.decrementer">-</button>
    
    <span data-wp-text="state.valeur">0</span>
    
    <button data-wp-on--click="actions.incrementer">+</button>
</div>

2. Le PHP (L’enregistrement)

On utilise wp_enqueue_script_module pour activer le support des modules ES6 et charger automatiquement l’API.

WordPress privilégie désormais les Script Modules. C’est beaucoup plus simple car WordPress gère les dépendances automatiquement.

function mon_plugin_charger_interactivite() {
    wp_enqueue_script_module(
        'mon-compteur-js',
        get_template_directory_uri() . '/js/view.js', // Chemin vers votre fichier JS
        array( '@wordpress/interactivity' ),        // Dépendance indispensable
        '1.0.0'
    );
}
add_action('wp_enqueue_scripts', 'mon_plugin_charger_interactivite');

3. Le JavaScript

Voici une synthèse complète, corrigée et structurée de l’Interactivity API de WordPress, avec un exemple prêt à l’emploi.

---

📘 Définition : L’Interactivity API

Introduite avec WordPress 6.5, l’Interactivity API est un framework standardisé permettant de créer des interfaces interactives côté client (frontend) de manière fluide et performante.

• Objectif : Remplacer les bibliothèques tierces (jQuery, etc.) par un système natif léger.
• Méthode : Utilise un système « déclaratif » via des directives HTML (data-wp-*) et un store JavaScript.
• Avantage : Permet une interaction instantanée (clic, recherche, panier) sans recharger la page, tout en étant compatible avec le SEO.

---

🛠️ Exemple fonctionnel : Le Compteur Dynamique

Voici comment créer un exemple concret (un compteur) en 3 fichiers.

1. Le HTML (PHP ou Bloc)

L’attribut data-wp-interactivity définit le « nom du store » qui fait le pont avec le JavaScript.

HTML

<div data-wp-interactivity="monCompteur" class="compteur-box">
    <button data-wp-on--click="actions.decrementer">-</button>
    
    <span data-wp-text="state.valeur">0</span>
    
    <button data-wp-on--click="actions.incrementer">+</button>
</div>

2. Le PHP (L’enregistrement)

On utilise wp_enqueue_script_module pour activer le support des modules ES6 et charger automatiquement l’API.

PHP

function mon_plugin_charger_interactivite() {
    wp_enqueue_script_module(
        'mon-compteur-js',
        get_template_directory_uri() . '/js/view.js', // Chemin vers votre fichier JS
        array( '@wordpress/interactivity' ),        // Dépendance indispensable
        '1.0.0'
    );
}
add_action('wp_enqueue_scripts', 'mon_plugin_charger_interactivite');

3. Le JavaScript (view.js)

On importe store depuis le module natif de WordPress. Le nom du store doit être identique à celui du HTML.

import { store } from '@wordpress/interactivity';

store('monCompteur', {
    state: {
        valeur: 0, // La donnée initiale
    },
    actions: {
        incrementer: ({ state }) => {
            state.valeur++;
        },
        decrementer: ({ state }) => {
            if (state.valeur > 0) {
                state.valeur--;
            }
        },
    },
});

La liaison entre le PHP et le JavaScript

Elle ne se fait plus de manière « manuelle » comme on le faisait avec wp_localize_script.

Elle se fait de manière automatique par WordPress grâce à deux éléments clés :

Le « Slug » (identifiant)

Dans votre PHP, vous définissez un identifiant pour votre module : 'my-app-interactivity'.

PHP

wp_enqueue_script_module( 'my-app-interactivity', ... );

WordPress enregistre ce module dans sa liste interne. Quand vous mettez @wordpress/interactivity en dépendance, WordPress sait qu’il doit charger le moteur de l’API Interactivity avant votre script.

Le mécanisme de « Hydratation » (le vrai lien)

Le lien réel entre votre code PHP (qui génère le HTML) et votre fichier JS se fait via le DOM (le navigateur) grâce à l’attribut data-wp-interactivity :

1. Côté PHP / HTML : Vous envoyez au navigateur une div avec data-wp-interactivity="myApp".
2. Côté JavaScript : Votre fichier view.js contient store( 'monCompteur', { ... } ).
3. La magie WordPress : Au chargement de la page, le moteur de l’API Interactivity parcourt tout le HTML. Quand il tombe sur data-wp-interactivity="monCompteur", il cherche automatiquement dans sa mémoire s’il existe un store nommé « monCompteur« . S’il le trouve, il « branche » les actions et les données sur ce bloc de HTML.