Interactivity API de WordPress : présentation complète et guide d’utilisation

L’Interactivity API est une nouvelle API intégrée au bloc éditeur Gutenberg de WordPress, conçue pour ajouter des interactions dynamiques sans avoir à écrire du JavaScript complexe. Elle permet aux développeurs de gérer des interactions côté client, comme des boutons « J’aime », des filtres dynamiques ou des commentaires en temps réel, tout en conservant un code lisible et optimisé.

Dans cet article, nous allons explorer en détail cette API, comprendre ses fonctionnalités, voir comment l’utiliser, et découvrir ses avantages par rapport aux approches classiques avec JavaScript ou jQuery. 🚀

Pourquoi l’Interactivity API a-t-elle été créée ?

L’Interactivity API de WordPress vise à simplifier l’ajout d’interactions dynamiques aux blocs Gutenberg, en évitant le besoin de manipuler directement le DOM ou d’écrire du JavaScript séparé.

Avant cette API, pour créer un bloc interactif, il fallait :

Ajouter du JavaScript personnalisé (souvent en utilisant fetch() pour faire des appels AJAX).
Manipuler le DOM manuellement via jQuery ou du JavaScript natif.
Gérer l’état avec des bibliothèques comme React, ce qui alourdissait le site.

Avec la WP interactivity API, tout est directement dans le HTML sous forme de directives, ce qui simplifie grandement le développement ! 💡

Principes de fonctionnement

L’API interactivité fonctionne à l’aide de directives que l’on ajoute directement dans le HTML des blocs Gutenberg. Ces directives permettent de :

Gérer les événements (click, hover, etc.).
Mettre à jour dynamiquement des valeurs sans recharger la page.
Effectuer des requêtes asynchrones pour récupérer ou envoyer des données.
Créer des états réactifs, comme le ferait Vue.js ou Alpine.js.

Exemple simple : un bouton « J’aime » interactif

Avec l’Interactivity API du CMS WordPress, voici comment ajouter un bouton qui incrémente un compteur lorsqu’on clique dessus :

<div data-wp-context='{"likes": 0}' data-wp-interactive="likesCounter">
    <button data-wp-on--click="actions.incrementLikes">
        ❤️ <span data-wp-text="context.likes"></span> J’aime
    </button>
</div>

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

store('likesCounter', {
    actions: {
        incrementLikes() {
            const ctx = getContext();
            ctx.likes++;
        },
    },
});

Les principales directives de l’API interactivité

L’API utilise plusieurs attributs HTML spécifiques, qui permettent d’ajouter des interactions sans écrire de JavaScript externe.

1. `data-wp-context` : gérer l’état d’un bloc

Cet attribut permet de définir un contexte dans lequel des variables interactives peuvent exister.

<div data-wp-context='{"count": 0}' data-wp-interactive="counter">
    <button data-wp-on--click="actions.incrementCount">
        Augmenter <span data-wp-text="context.count">0</span>
    </button>
</div>

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

store('counter', {
    actions: {
        incrementCount() {
            const ctx = getContext();
            ctx.count++;
        },
    },
});

👉 Ce code permet d’incrémenter une variable count sans avoir à manipuler le DOM manuellement.

2. `data-wp-on--event` : gérer les événements

Cet attribut permet d’exécuter une action lorsqu’un événement a lieu (click, mouseover, change, etc.).

<button data-wp-interactive="alert" data-wp-on--click="actions.showAlert">
    Clique-moi
</button>

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

store('alert', {
    actions: {
        showAlert() {
            alert('Bouton cliqué !');
        },
    },
});

📌 Cet exemple affiche une alerte lorsqu’on clique sur le bouton.

3. `data-wp-text` : mettre à jour dynamiquement du texte

Cet attribut met à jour dynamiquement une portion de texte en fonction d’une variable.

<span data-wp-text="context.count">0</span>

📌 À chaque changement de la variable count, la valeur affichée sera automatiquement mise à jour.

4. `data-wp-class` : modifier dynamiquement des classes CSS

Cet attribut permet d’ajouter ou de retirer des classes CSS dynamiquement.

<div data-wp-context='{"isActive": false}' data-wp-interactive="toggle">
    <button 
        data-wp-on--click="actions.toggleActive"
        data-wp-class--active="context.isActive"
        data-wp-class--inactive="!context.isActive"
    >
        Toggle
    </button>
</div>

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

store('toggle', {
    actions: {
        toggleActive() {
            const ctx = getContext();
            ctx.isActive = !ctx.isActive;
        },
    },
});

📌 Ici, le bouton passe de la classe "inactive" à "active" lorsqu’on clique dessus.

5. `data-wp-bind` : lier un attribut HTML à une variable

Cet attribut permet de modifier dynamiquement n’importe quel attribut HTML.

<div data-wp-context='{"userInput": ""}' data-wp-interactive="input">
    <input 
        type="text" 
        data-wp-bind--value="context.userInput"
        data-wp-on--input="actions.updateInput"
    >
    <p data-wp-text="context.userInput"></p>
</div>

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

store('input', {
    actions: {
        updateInput({ event }) {
            const ctx = getContext();
            ctx.userInput = event.target.value;
        },
    },
});

📌 Ce code met à jour dynamiquement le <p> en fonction de ce qui est écrit dans le <input>.

Exemple avancé : Bouton « J’aime » avec API REST

Voici un exemple où l’on envoie une requête AJAX à l’API REST de WordPress pour enregistrer les likes en base de données :

<div data-wp-context='{"likes": 0}' data-wp-interactive="likes">
    <button data-wp-on--click="actions.handleLike">
        ❤️ <span data-wp-text="context.likes">0</span> J'aime
    </button>
</div>

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

store('likes', {
    actions: {
        async handleLike() {
            const ctx = getContext();
            try {
                const response = await fetch('/wp-json/custom/v1/like/123', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-WP-Nonce': wpApiSettings.nonce // Sécurité WordPress
                    },
                });

                if (!response.ok) {
                    throw new Error('Erreur réseau');
                }

                const data = await response.json();
                ctx.likes = data.likes;
            } catch (error) {
                console.error('Erreur:', error);
                // Gérer l'erreur (par exemple afficher un message à l'utilisateur)
            }
        },
    },
});

📌 Explication :

Lorsqu’on clique sur le bouton, une requête est envoyée à l’API REST.
Une fois la réponse reçue, la valeur de likes est mise à jour avec le nouveau total.

Pourquoi utiliser l’Interactivity API plutôt que jQuery ou JavaScript classique ?

La WP Interactivity API et jQuery permettent tous les deux d’ajouter des interactions dynamiques aux pages, mais ils fonctionnent différemment. Voici les principales différences et avantages de l’Interactivity API par rapport à du JavaScript ou jQuery classique.

Simplicité et lisibilité du code

Avec jQuery (code séparé en JavaScript) :

Si tu voulais ajouter un système de « J’aime » avec jQuery, tu devrais écrire quelque chose comme ceci :

<button id="like-button" data-post-id="123" class="like-button">
    ❤️ <span id="like-count">0</span> J'aime
</button>

jQuery(document).ready(function($) {
    $('#like-button').on('click', function(e) {
        e.preventDefault();
        
        const button = $(this);
        const postId = button.data('post-id');
        const countElement = button.find('#like-count');
        
        // Désactiver le bouton pendant la requête
        button.prop('disabled', true);
        
        $.ajax({
            url: '/wp-json/custom/v1/like/' + postId,
            method: 'POST', // 'type' est déprécié, utiliser 'method'
            headers: {
                'X-WP-Nonce': wpApiSettings.nonce // Sécurité WordPress
            },
            contentType: 'application/json',
            success: function(response) {
                countElement.text(response.likes);
            },
            error: function(xhr, status, error) {
                console.error('Erreur:', error);
                alert('Erreur lors de la mise à jour des likes');
            },
            complete: function() {
                // Réactiver le bouton
                button.prop('disabled', false);
            }
        });
    });
});

🚨 Problèmes :

Le JavaScript est séparé du HTML, ce qui complique parfois la maintenance.
jQuery ajoute du poids au site (même si WordPress le charge par défaut).
Besoin de manipuler manuellement le DOM (#like-count.text(response.likes);).

✅ Avantages :

Pas besoin d’écrire du JS externe, tout est dans le HTML.
Plus clair, plus proche du rendu final.
Moins de manipulations du DOM (l’API met à jour les valeurs automatiquement).

Performances

jQuery : lourd et parfois lent

jQuery doit être chargé dans son intégralité, ce qui peut impacter le Time to Interactive (TTI).
Manipuler le DOM manuellement peut être coûteux en ressources, surtout avec des animations et des requêtes AJAX répétées.

Interactivity API : plus rapide

Pas besoin de charger une bibliothèque JS supplémentaire.
Les interactions sont gérées nativement par WordPress, donc optimisées.
WordPress peut hydrater le HTML côté serveur pour améliorer la rapidité.

Intégration avec le système de blocs de WordPress

jQuery : doit être ajouté manuellement

Si tu veux utiliser jQuery dans un blocs Gutenberg, il faut enregistrer et charger un fichier JS :

function enqueue_like_script() {
    wp_enqueue_script('like-script', get_template_directory_uri() . '/js/like.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_like_script');

⚠️ Problème : Ça ajoute une dépendance et un fichier externe, ce qui peut ralentir le site.

Interactivity API : déjà intégrée dans WordPress

Alle fait partie du cœur de WordPress, donc pas besoin d’enregistrer un script supplémentaire.
Elle fonctionne directement dans les blocs Gutenberg, sans hack.

Maintenabilité et évolutivité

jQuery : du code qui vieillit mal

jQuery a été créé avant les nouvelles APIs modernes (comme Fetch API, ES6).
Son code peut devenir difficile à maintenir, car il mélange souvent manipulation du DOM et logique métier.

Interactivity API : plus moderne et évolutive

Conçue pour être maintenable, avec une structure proche de Vue.js/Alpine.js.
Encapsule la logique directement dans les blocs WordPress, ce qui facilite l’évolution.
Permet une meilleure compatibilité avec les nouvelles versions de WordPress.

👉 Utiliser jQuery si :

Tu travailles sur un ancien projet WordPress qui utilise déjà jQuery.
Tu as besoin de compatibilité avec d’anciens scripts.

👉 Utiliser l’Interactivity API si :

Tu crées un nouveau projet basé sur Gutenberg.
Tu veux des interactions légères et modernes.
Tu veux éviter d’écrire du JS manuel et manipuler le DOM.

Critère	jQuery	Interactivity API
Facilité d’intégration	Moyen (besoin de scripts séparés)	✅ Simple (HTML + directives)
Performance	Lourd (jQuery ajouté)	✅ Léger (natif WordPress)
Compatibilité Gutenberg	❌ Pas optimisé	✅ Conçu pour Gutenberg
Manipulation du DOM	Nécessaire	✅ Automatique
Évolutivité	Vieillit mal	✅ Solution moderne

Alors, pourquoi adopter l’Interactivity API ?

✅ Plus simple et plus rapide : Pas besoin de JS séparé, tout est directement dans le HTML.
✅ Performant : Pas de dépendance à jQuery ou React, tout est natif.
✅ Optimisé pour Gutenberg : S’intègre parfaitement avec les blocs WordPress.
✅ Facile à maintenir : Code plus lisible et modulaire.

L’Interactivity API est l’avenir du développement interactif sur WordPress. Elle permet d’ajouter des fonctionnalités avancées tout en gardant un code propre et optimisé. 🚀

🔥 À toi de l’essayer maintenant !

Renforcez votre site : les alertes de sécurité WordPress

Suivez les mises à jour cruciales sur les dernières vulnérabilités et les correctifs pour protéger efficacement votre site WordPress.

Un site WordPress piraté ?