Interactivity API

Définition

API standard, intégrée au cœur depuis WordPress 6.5, pour rendre les blocs interactifs côté front avec des directives HTML (data-wp-interactive, data-wp-context, data-wp-bind, data-wp-on, data-wp-text, data-wp-each…) et un store JavaScript (state, actions, callbacks). Le script se charge en module ES via viewScriptModule dans block.json.

Analogie

Des post-it sur le HTML qui disent au navigateur quoi faire au clic, sans réécrire la page en React.

Exemple de code

<!-- render.php -->
<div data-wp-interactive="myPlugin"
     data-wp-context='{"isOpen": false}'>
  <button data-wp-on--click="actions.toggle">Afficher</button>
  <p data-wp-bind--hidden="!context.isOpen">Contenu caché</p>
</div>

<script type="module">
// view.js
import { store, getContext } from '@wordpress/interactivity';
store('myPlugin', {
  actions: { toggle() { const c = getContext(); c.isOpen = !c.isOpen; } },
});
</script>

Cas d'usage

Accordéons, filtres, paniers, navigation instantanée entre blocs qui partagent un état, sans jQuery ni framework tiers.

Anti-pattern

Charger React ou un framework complet pour un simple bouton alors que les directives suffisent et que le HTML reste rendu côté serveur.

Définition

Analogie

Exemple de code

Cas d'usage

Anti-pattern

Termes liés

Sources