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.

1. Ajouter le HTML dans un fichier de modèle ou un bloc personnalisé.

<div data-wp-interactivity>
  <button data-wp-on="click: changeText">Changer le texte</button>
  <p data-wp-bind="textContent: message">Texte initial</p>
</div>

2. Enfiler le JavaScript dans votre thème ou plugin WordPress. Assurez-vous que le script est chargé après WordPress et après que le DOM soit prêt.

function enqueue_interactivity_scripts() {
    // Enqueue de la bibliothèque d'interactivité de WordPress
    wp_enqueue_script(
        'wp-interactivity',
        includes_url('js/dist/interactivity.min.js'),
        array('wp-hooks'),
        wp_get_theme()->get('Version'),
        true
    );

    // Enqueue de votre script personnalisé
    wp_enqueue_script(
        'simple-interactivity',
        get_template_directory_uri() . '/js/simple-interactivity.js', // Assurez-vous que le chemin est correct
        array('wp-interactivity'), // Dépend de l'API Interactivity
        wp_get_theme()->get('Version'),
        true
    );
}
add_action('wp_enqueue_scripts', 'enqueue_interactivity_scripts');

3. Ajoutez le JavaScript suivant pour gérer l’interactivité en utilisant des stores pour gérer l’état.

document.addEventListener('DOMContentLoaded', function () {
  // Définir un store pour gérer l'état du message
  wp.interactivity.registerStore('textStore', {
    state: {
      message: 'Texte initial',
    },
    actions: {
      changeText({ state }) {
        state.message = 'Texte modifié !';
      },
    },
  });

  // Connecter le store à l'élément avec data-wp-interactivity
  wp.interactivity.connectStore('textStore', document.querySelector('[data-wp-interactivity]'));
});

L’API fournit :

• Des directives pour gérer les événements, le binding de données, etc.
• Un système de store pour gérer l’état, les effets secondaires et les actions
• Une intégration avec les hooks WordPress et l’internationalisation

Pour l’utiliser, on ajoute l’attribut data-wp-interactivity à l’élément parent, puis on utilise diverses directives comme data-wp-on pour les événements ou data-wp-bind pour le binding de données.

Elle est conçue pour être utilisée avec le rendu côté serveur et ne nécessite pas l’apprentissage d’un nouveau langage pour les développeurs WordPress familiers avec HTML et JavaScript.