{"id":81500,"date":"2025-11-06T08:40:07","date_gmt":"2025-11-06T07:40:07","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=81500&#038;preview=true&#038;preview_id=81500"},"modified":"2025-11-10T10:22:57","modified_gmt":"2025-11-10T09:22:57","slug":"api-interactivite-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/","title":{"rendered":"D\u00e9couvrez de nouvelles possibilit\u00e9s gr\u00e2ce \u00e0 l&rsquo;API d&rsquo;interactivit\u00e9 WordPress"},"content":{"rendered":"<p>Dans les pr\u00e9c\u00e9dents articles de ce blog, nous avons explor\u00e9 le d\u00e9veloppement des blocs WordPress sous diff\u00e9rents angles. Nous avons examin\u00e9 le d\u00e9veloppement de blocs <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/\">statiques<\/a> et <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/\">dynamiques<\/a> et <a href=\"https:\/\/kinsta.com\/fr\/blog\/plugin-gutenberg\/\">\u00e9tendu les fonctionnalit\u00e9s des blocs de base<\/a>. Cependant, l&rsquo;approche que nous avons adopt\u00e9e jusqu&rsquo;\u00e0 pr\u00e9sent nous a essentiellement permis de cr\u00e9er des blocs standard qui ne r\u00e9agissaient pas aux interactions de l&rsquo;utilisateur en temps r\u00e9el. En bref, ces blocs \u00e9taient non interactifs.<\/p>\n<p>Dans cet article, nous allons explorer une nouvelle approche du d\u00e9veloppement de blocs, qui nous permettra de cr\u00e9er des blocs interactifs gr\u00e2ce \u00e0 une nouvelle et puissante API de WordPress : l&rsquo;<strong>API d&rsquo;interactivit\u00e9 de WordPress<\/strong>. Introduite dans <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-6-5\/#interactivity-api\">WordPress 6.5<\/a>, cette API vous permet de cr\u00e9er des blocs qui r\u00e9agissent en temps r\u00e9el aux interactions des utilisateurs, ce qui vous permet de cr\u00e9er des exp\u00e9riences utilisateur riches et de rendre vos sites attrayants, dynamiques et captivants.<\/p>\n<p>Il y a beaucoup de choses \u00e0 dire, mais avant de commencer, jetons un coup d&rsquo;\u0153il aux conditions essentielles !<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Ce dont vous avez besoin avant de commencer \u00e0 utiliser l&rsquo;API interactivit\u00e9<\/h2>\n<p>Comme l&rsquo;API interactivit\u00e9 est bas\u00e9e sur <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-react-js\/\">React<\/a>, vous auras besoin d&rsquo;au moins une connaissance de base du <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-node-js\/\">JavaScript c\u00f4t\u00e9 serveur<\/a> et de React, ainsi que des outils de construction tels que <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-npm\/\">npm<\/a> et npx. Vous aurez \u00e9galement besoin d&rsquo;une compr\u00e9hension approfondie du <a href=\"https:\/\/kinsta.com\/fr\/blog\/developpement-wp-scripts\/\">d\u00e9veloppement WordPress<\/a> et de l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-gutenberg\/\">\u00e9diteur de blocs Gutenberg<\/a>.<\/p>\n<p>Une fois que vous aurez acquis les comp\u00e9tences n\u00e9cessaires, vous aurez besoin d&rsquo;un <a href=\"https:\/\/kinsta.com\/fr\/blog\/mamp-alternatives\/\">environnement de d\u00e9veloppement local<\/a> qui vous permette de lancer rapidement et facilement un site WordPress. Nous vous recommandons <a href=\"https:\/\/kinsta.com\/fr\/devkinsta\/\">DevKinsta<\/a>, notre suite de d\u00e9veloppement local con\u00e7ue sp\u00e9cifiquement pour WordPress. Avec DevKinsta, vous pouvez mettre en place un nouveau site WordPress local en quelques clics et le personnaliser en d\u00e9tail.<\/p>\n<p>Lorsque vous cr\u00e9ez un nouveau projet WordPress dans DevKinsta, vous pouvez d\u00e9finir les options suivantes :<\/p>\n<ul>\n<li>Domaine de premier niveau : Par d\u00e9faut .local<\/li>\n<li>Version PHP<\/li>\n<li>Nom de la base de donn\u00e9es<\/li>\n<li>Activer HTTPS<\/li>\n<li>D\u00e9tails de WordPress<\/li>\n<li>Mise \u00e0 jour automatique de WordPress<\/li>\n<li>Multisite<\/li>\n<\/ul>\n<p>En outre, vous pouvez importer un site MyKinsta existant \u00e0 partir d&rsquo;une sauvegarde.<\/p>\n<figure id=\"attachment_199777\" aria-describedby=\"caption-attachment-199777\" style=\"width: 2230px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-199777 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/10\/devkinsta-new-website.png\" alt=\"Configuration d'un site web local dans DevKinsta\" width=\"2230\" height=\"1656\"><figcaption id=\"caption-attachment-199777\" class=\"wp-caption-text\">Configuration d&rsquo;un site web local dans DevKinsta<\/figcaption><\/figure>\n<h2>Qu&rsquo;est-ce que l&rsquo;API d&rsquo;interactivit\u00e9 ?<\/h2>\n<p>L&rsquo;API d&rsquo;interactivit\u00e9 est une API native de WordPress qui permet d&rsquo;ajouter de l&rsquo;interactivit\u00e9 aux blocs Gutenberg et, par cons\u00e9quent, aux articles et aux pages d&rsquo;un site WordPress. Il s&rsquo;agit d&rsquo;une solution l\u00e9g\u00e8re et moderne qui adopte une <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/core-concepts\/the-reactive-and-declarative-mindset\/\" target=\"_blank\" rel=\"noopener noreferrer\">approche d\u00e9clarative<\/a> pour g\u00e9rer les interactions avec les utilisateurs.<\/p>\n<p>La cr\u00e9ation d&rsquo;un bloc interactif \u00e0 partir de z\u00e9ro n\u00e9cessite des comp\u00e9tences avanc\u00e9es en mati\u00e8re de d\u00e9veloppement PHP et <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/core-concepts\/server-side-rendering\/\" target=\"_blank\" rel=\"noopener noreferrer\">JavaScript c\u00f4t\u00e9 serveur<\/a>. Cependant, il n&rsquo;est pas n\u00e9cessaire de r\u00e9inventer la roue \u00e0 chaque nouveau projet, car WordPress fournit un <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block-interactive-template\/\">mod\u00e8le pour la cr\u00e9ation de blocs interactifs<\/a> :<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block --template @wordpress\/create-block-interactive-template<\/code><\/pre>\n<p>Ce mod\u00e8le comprend tout ce dont vous avez besoin pour \u00e9chafauder un bloc interactif, y compris deux exemples de travail que vous pouvez utiliser comme r\u00e9f\u00e9rence pour votre premier projet : un bouton pour basculer le th\u00e8me actuel et un bouton pour d\u00e9velopper\/r\u00e9duire un paragraphe.<\/p>\n<p>Pour commencer, ouvrez votre outil de ligne de commande pr\u00e9f\u00e9r\u00e9, navigue jusqu&rsquo;au r\u00e9pertoire <strong>Plugins<\/strong> de votre installation locale de WordPress, et saisissez ce qui suit :<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block your-interactive-block --template @wordpress\/create-block-interactive-template<\/code><\/pre>\n<p>Laissez quelques instants pour que l&rsquo;installation se termine, puis ouvrez votre dossier de projet \u00e0 l&rsquo;aide de votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/editeurs-html-gratuits\/\">\u00e9diteur de code<\/a> pr\u00e9f\u00e9r\u00e9. Nous vous recommandons d&rsquo;utiliser <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-editeurs-de-texte\/#visual-studio-code\">Visual Studio Code<\/a>, mais vous pouvez utiliser l&rsquo;\u00e9diteur avec lequel vous vous sentez le plus \u00e0 l&rsquo;aise.<\/p>\n<figure id=\"attachment_199519\" aria-describedby=\"caption-attachment-199519\" style=\"width: 2086px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-199519 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/09\/interactive-block.png\" alt=\"Le projet de bloc interactif fourni par le site &lt;code&gt;@wordpress\/create-block-interactive-template&lt;\/code&gt;\" width=\"2086\" height=\"1230\"><figcaption id=\"caption-attachment-199519\" class=\"wp-caption-text\">Le projet de bloc interactif fourni par le site <code>@wordpress\/create-block-interactive-template<\/code><\/figcaption><\/figure>\n<p>\u00c0 partir de la ligne de commande, naviguez jusqu&rsquo;au dossier de la nouvelle extension et <a href=\"https:\/\/developer.wordpress.org\/block-editor\/getting-started\/quick-start-guide\/#basic-usage\" target=\"_blank\" rel=\"noopener noreferrer\">d\u00e9marrez le serveur de d\u00e9veloppement<\/a> \u00e0 l&rsquo;aide de la commande suivante :<\/p>\n<pre><code class=\"language-bash\">npm start<\/code><\/pre>\n<p>\u00c0 partir de maintenant, toutes les modifications que vous apporterez \u00e0 votre bloc seront visibles en temps r\u00e9el dans votre installation WordPress.<\/p>\n<p>Ensuite, dans votre administration WordPress, naviguez vers l&rsquo;\u00e9cran <strong>Extensions<\/strong> et activez l&rsquo;extension <strong>Interactivity API<\/strong> que vous venez de cr\u00e9er. Cr\u00e9ez un nouvel article ou une nouvelle page, puis recherchez <strong>Votre bloc interactif<\/strong> dans l&rsquo;insertion de blocs et ajoutez-la \u00e0 votre contenu. Sauvegardez la publication et pr\u00e9visualisez-la sur l&rsquo;interface publique. Vous verrez un bloc jaune contenant deux boutons. Le premier bouton change la couleur d&rsquo;arri\u00e8re-plan du bloc, et le deuxi\u00e8me bouton affiche ou masque le contenu du paragraphe.<\/p>\n<figure id=\"attachment_199520\" aria-describedby=\"caption-attachment-199520\" style=\"width: 1405px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-199520\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/09\/interactivity-api-example.png\" alt=\"An example interactive block\" width=\"1405\" height=\"696\"><figcaption id=\"caption-attachment-199520\" class=\"wp-caption-text\">Un exemple de bloc interactif fourni par le site <code>@wordpress\/create-block-interactive-template<\/code><\/figcaption><\/figure>\n<p>Maintenant que vous avez une extension \u00e0 laquelle vous r\u00e9f\u00e9rer pour les sujets abord\u00e9s dans cet article, nous pouvons passer \u00e0 autre chose et explorer plus en profondeur les blocs interactifs.<\/p>\n<h2>La structure des blocs interactifs<\/h2>\n<p>La structure des blocs interactifs est la m\u00eame que celle des <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/#a-walkthrough-of-the-starter-block-scaffolding\">blocs traditionnels<\/a>. Vous aurez toujours besoin d&rsquo;un fichier <code>package.json<\/code>, d&rsquo;un fichier <code>block.json<\/code>, d&rsquo;un fichier <code>edit.js<\/code> et d&rsquo;un fichier <code>style.scss<\/code>. En outre, vous aurez besoin d&rsquo;un fichier <code>render.php<\/code> pour le rendu c\u00f4t\u00e9 serveur et d&rsquo;un fichier <code>view.js<\/code> pour g\u00e9rer l&rsquo;interactivit\u00e9 frontale.<\/p>\n<p>Examinons les briques sp\u00e9cifiques d&rsquo;un bloc interactif en d\u00e9composant les fichiers individuels du projet de d\u00e9marrage.<\/p>\n<h3>package.json<\/h3>\n<p>Le fichier <code>package.json<\/code> est <a href=\"https:\/\/docs.npmjs.com\/cli\/v7\/configuring-npm\/package-json\" target=\"_blank\" rel=\"noopener noreferrer\">utilis\u00e9 dans les projets Node<\/a> pour identifier votre projet, g\u00e9rer les scripts et g\u00e9rer et installer les d\u00e9pendances pendant le d\u00e9veloppement.<\/p>\n<p>Ce qui suit est le <code>package.json<\/code> pour le bloc interactif fourni par le <code>create-block-interactive-template<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n\t\"name\": \"your-interactive-block\",\n\t\"version\": \"0.1.0\",\n\t\"description\": \"An interactive block with the Interactivity API.\",\n\t\"author\": \"The WordPress Contributors\",\n\t\"license\": \"GPL-2.0-or-later\",\n\t\"main\": \"build\/index.js\",\n\t\"scripts\": {\n\t\t\"build\": \"wp-scripts build --experimental-modules\",\n\t\t\"format\": \"wp-scripts format\",\n\t\t\"lint:css\": \"wp-scripts lint-style\",\n\t\t\"lint:js\": \"wp-scripts lint-js\",\n\t\t\"packages-update\": \"wp-scripts packages-update\",\n\t\t\"plugin-zip\": \"wp-scripts plugin-zip\",\n\t\t\"start\": \"wp-scripts start --experimental-modules\"\n\t},\n\t\"dependencies\": {\n\t\t\"@wordpress\/interactivity\": \"latest\"\n\t},\n\t\"files\": [\n\t\t\"[^.]*\"\n\t],\n\t\"devDependencies\": {\n\t\t\"@wordpress\/scripts\": \"^30.24.0\"\n\t}\n}<\/code><\/pre>\n<p>Les sections <code>scripts<\/code> et <code>dependencies<\/code> sont particuli\u00e8rement importantes ici.<\/p>\n<ul>\n<li><code>build<\/code>: Compile le code source en JavaScript pour la production. L&rsquo;option <code>--experimental-modules<\/code> permet de prendre en charge les <a href=\"https:\/\/make.wordpress.org\/core\/2024\/03\/04\/script-modules-in-6-5\/\">modules de script<\/a> WordPress.<\/li>\n<li><code>start<\/code>: D\u00e9marre le serveur de d\u00e9veloppement. Notez que l&rsquo;option <code>--experimental-modules<\/code> est \u00e0 nouveau sp\u00e9cifi\u00e9e.<\/li>\n<li><code>dependencies<\/code>: Inclut les d\u00e9pendances d&rsquo;ex\u00e9cution avec le dernier paquetage de l&rsquo;API Interactivit\u00e9.<\/li>\n<\/ul>\n<h3>block.json<\/h3>\n<p>Le fichier <code>block.json<\/code> est le manifeste de votre bloc Gutenberg. Il sp\u00e9cifie les m\u00e9tadonn\u00e9es, les m\u00e9dias, les scripts et les styles \u00e0 charger. Par d\u00e9faut, le <code>create-block-interactive-template<\/code> g\u00e9n\u00e8re le <code>block.json<\/code> suivant :<\/p>\n<pre><code class=\"language-json\">{\n\t\"$schema\": \"https:\/\/schemas.wp.org\/trunk\/block.json\",\n\t\"apiVersion\": 3,\n\t\"name\": \"create-block\/your-interactive-block\",\n\t\"version\": \"0.1.0\",\n\t\"title\": \"Your Interactive Block\",\n\t\"category\": \"widgets\",\n\t\"icon\": \"media-interactive\",\n\t\"description\": \"An interactive block with the Interactivity API.\",\n\t\"example\": {},\n\t\"supports\": {\n\t\t\"interactivity\": true\n\t},\n\t\"textdomain\": \"your-interactive-block\",\n\t\"editorScript\": \"file:.\/index.js\",\n\t\"editorStyle\": \"file:.\/index.css\",\n\t\"style\": \"file:.\/style-index.css\",\n\t\"render\": \"file:.\/render.php\",\n\t\"viewScriptModule\": \"file:.\/view.js\"\n}<\/code><\/pre>\n<p>Les champs suivants sont essentiels pour un bloc interactif :<\/p>\n<ul>\n<li><code>apiVersion<\/code>: <code>3<\/code> est la derni\u00e8re version de l&rsquo;API du bloc et prend en charge les derni\u00e8res fonctionnalit\u00e9s du bloc, telles que les modules de script.<\/li>\n<li><code>supports<\/code>: Sp\u00e9cifie les supports de bloc. <code>\"interactivity\": true<\/code> ajoute la prise en charge de l&rsquo;API d&rsquo;interactivit\u00e9.<\/li>\n<li><code>render<\/code>: Sp\u00e9cifie le fichier PHP responsable du rendu dans l&rsquo;interface publique. C&rsquo;est dans ce fichier que vous ajoutez les directives qui rendent un bloc interactif.<\/li>\n<li><code>viewScriptModule<\/code>: Sp\u00e9cifie le fichier JavaScript qui contient la logique d&rsquo;interactivit\u00e9. Ce fichier n&rsquo;est charg\u00e9 que sur l&rsquo;interface publique et seulement si la page contient le bloc interactif.<\/li>\n<\/ul>\n<h3>render.php<\/h3>\n<p><code>render.php<\/code> est l&rsquo;endroit o\u00f9 vous construisez le balisage d&rsquo;un bloc dynamique. Pour rendre votrre bloc interactif, vous devez ajouter des attributs qui rendent les \u00e9l\u00e9ments DOM de votre bloc interactif.<\/p>\n<p>Le fichier <code>render.php<\/code> du projet de d\u00e9marrage ressemble \u00e0 ce qui suit :<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * PHP file to use when rendering the block type on the server to show on the front end.\n *\n * The following variables are exposed to the file:\n *     $attributes (array): The block attributes.\n *     $content (string): The block default content.\n *     $block (WP_Block): The block instance.\n *\n * @see https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/docs\/reference-guides\/block-api\/block-metadata.md#render\n *\/\n\n\/\/ Generates a unique id for aria-controls.\n$unique_id = wp_unique_id( 'p-' );\n\n\/\/ Adds the global state.\nwp_interactivity_state(\n\t'create-block',\n\tarray(\n\t\t'isDark'    =&gt; false,\n\t\t'darkText'  =&gt; esc_html__( 'Switch to Light', 'your-interactive-block' ),\n\t\t'lightText' =&gt; esc_html__( 'Switch to Dark', 'your-interactive-block' ),\n\t\t'themeText'\t=&gt; esc_html__( 'Switch to Dark', 'your-interactive-block' ),\n\t)\n);\n?&gt;\n\n&lt;div\n\t&lt;?php echo get_block_wrapper_attributes(); ?&gt;\n\tdata-wp-interactive=\"create-block\"\n\t&lt;?php echo wp_interactivity_data_wp_context( array( 'isOpen' =&gt; false ) ); ?&gt;\n\tdata-wp-watch=\"callbacks.logIsOpen\"\n\tdata-wp-class--dark-theme=\"state.isDark\"\n&gt;\n\t&lt;button\n\t\tdata-wp-on--click=\"actions.toggleTheme\"\n\t\tdata-wp-text=\"state.themeText\"\n\t&gt;&lt;\/button&gt;\n\n\t&lt;button\n\t\tdata-wp-on--click=\"actions.toggleOpen\"\n\t\tdata-wp-bind--aria-expanded=\"context.isOpen\"\n\t\taria-controls=\"&lt;?php echo esc_attr( $unique_id ); ?&gt;\"\n\t&gt;\n\t\t&lt;?php esc_html_e( 'Toggle', 'your-interactive-block' ); ?&gt;\n\t&lt;\/button&gt;\n\n\t&lt;p\n\t\tid=\"&lt;?php echo esc_attr( $unique_id ); ?&gt;\"\n\t\tdata-wp-bind--hidden=\"!context.isOpen\"\n\t&gt;\n\t\t&lt;?php\n\t\t\tesc_html_e( 'Your Interactive Block - hello from an interactive block!', 'your-interactive-block' );\n\t\t?&gt;\n\t&lt;\/p&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Voici ce que fait ce code :<\/p>\n<ul>\n<li><code>wp_interactivity_state<\/code>: Obtient et\/ou d\u00e9finit l&rsquo;<a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_interactivity_state\/\" target=\"_blank\" rel=\"noopener noreferrer\">\u00e9tat global initial<\/a> d&rsquo;un magasin Interactivity API.<\/li>\n<li><code>data-wp-interactive<\/code>: <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/#wp-interactive\">Active l&rsquo;API d&rsquo;interactivit\u00e9<\/a> sur l&rsquo;\u00e9l\u00e9ment DOM et ses enfants. Sa valeur doit \u00eatre l&rsquo;espace de noms unique de votre plugin ou de votre bloc.<\/li>\n<li><code>wp_interactivity_data_wp_context()<\/code>: G\u00e9n\u00e8re la directive <code>data-wp-context<\/code>, qui <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_interactivity_data_wp_context\/\" target=\"_blank\" rel=\"noopener noreferrer\">fournit un \u00e9tat local<\/a> \u00e0 un n\u0153ud HTML sp\u00e9cifique et \u00e0 ses enfants.<\/li>\n<li><code>data-wp-watch<\/code>: <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/#wp-watch\">Ex\u00e9cute un rappel<\/a> lorsqu&rsquo;un n\u0153ud est cr\u00e9\u00e9 et \u00e0 chaque fois que l&rsquo;\u00e9tat ou le contexte change.<\/li>\n<li><code>data-wp-class--dark-theme<\/code>: Ajoute ou supprime la classe <code>dark-theme<\/code> \u00e0 l&rsquo;\u00e9l\u00e9ment HTML.<\/li>\n<li><code>data-wp-on--click<\/code>: <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/#wp-on\">Ex\u00e9cute le code de mani\u00e8re synchrone<\/a> sur l&rsquo;\u00e9v\u00e8nement de clic.<\/li>\n<li><code>data-wp-text<\/code>: <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/#wp-text\">D\u00e9finit le texte int\u00e9rieur de<\/a> l&rsquo;\u00e9l\u00e9ment HTML.<\/li>\n<li><code>data-wp-bind--aria-expanded<\/code> et <code>data-wp-bind--hidden<\/code>: <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/#wp-bind\" target=\"_blank\" rel=\"noopener noreferrer\">D\u00e9finit les attributs HTML<\/a> (<code>aria-expanded<\/code> et <code>hidden<\/code>) sur les \u00e9l\u00e9ments correspondants en fonction d&rsquo;une valeur bool\u00e9enne ou d&rsquo;une cha\u00eene de caract\u00e8res.<\/li>\n<\/ul>\n<h3>view.js<\/h3>\n<p>Ce fichier <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/#on-the-client-side\">d\u00e9finit le Store<\/a> qui contient la logique et les donn\u00e9es n\u00e9cessaires au comportement du bloc, y compris l&rsquo;\u00e9tat, les actions et les rappels.<\/p>\n<p>Voici le fichier <code>view.js<\/code> g\u00e9n\u00e9r\u00e9 par le projet de d\u00e9marrage :<\/p>\n<pre><code class=\"language-js\">\/**\n * WordPress dependencies\n *\/\nimport { store, getContext } from '@wordpress\/interactivity';\n\nconst { state } = store( 'create-block', {\n\tstate: {\n\t\tget themeText() {\n\t\t\treturn state.isDark ? state.darkText : state.lightText;\n\t\t},\n\t},\n\tactions: {\n\t\ttoggleOpen() {\n\t\t\tconst context = getContext();\n\t\t\tcontext.isOpen = ! context.isOpen;\n\t\t},\n\t\ttoggleTheme() {\n\t\t\tstate.isDark = ! state.isDark;\n\t\t},\n\t},\n\tcallbacks: {\n\t\tlogIsOpen: () =&gt; {\n\t\t\tconst { isOpen } = getContext();\n\t\t\t\/\/ Log the value of `isOpen` each time it changes.\n\t\t\tconsole.log( `Is open: ${ isOpen }` );\n\t\t},\n\t},\n} );<\/code><\/pre>\n<ul>\n<li><code>store<\/code>: La fonction principale utilis\u00e9e pour cr\u00e9er et enregistrer l&rsquo;\u00e9tat global et la logique du bloc.<\/li>\n<li><code>getContext<\/code>: Une fonction utilis\u00e9e dans les actions et les rappels pour acc\u00e9der \u00e0 l&rsquo;\u00e9tat local (le <code>context<\/code>) de l&rsquo;\u00e9l\u00e9ment DOM qui a d\u00e9clench\u00e9 l&rsquo;\u00e9v\u00e8nement.<\/li>\n<li><code>state<\/code>: D\u00e9finit les donn\u00e9es r\u00e9actives globales du bloc.<\/li>\n<li><code>actions<\/code>: Comprend les fonctions qui d\u00e9finissent la logique et modifient l&rsquo;\u00e9tat.<\/li>\n<li><code>callbacks<\/code>: Comprend les fonctions \u00e0 ex\u00e9cuter en r\u00e9ponse \u00e0 des \u00e9v\u00e8nements sp\u00e9cifiques ou \u00e0 des changements d&rsquo;\u00e9tat de fa\u00e7on automatique.<\/li>\n<\/ul>\n<p>Cela fait beaucoup \u00e0 assimiler, mais ne vous inqui\u00e9tez pas ! Tout deviendra plus clair une fois que vous aurez lu les sections suivantes.<\/p>\n<p>Examinons maintenant les concepts cl\u00e9s de l&rsquo;API d&rsquo;interactivit\u00e9 : directives, magasin, \u00e9tat, actions et rappels.<\/p>\n<h2>Directives de l&rsquo;API Interactivit\u00e9<\/h2>\n<p>Comme d&rsquo;autres biblioth\u00e8ques frontales telles que Alpine.js et <a href=\"https:\/\/kinsta.com\/fr\/sujets\/vue-js\/\">Vue.js<\/a>, l&rsquo;API Interactivit\u00e9 utilise des attributs HTML sp\u00e9ciaux qui te permettent de r\u00e9pondre aux \u00e9v\u00e8nements de la page, de mettre \u00e0 jour l&rsquo;\u00e9tat de l&rsquo;application, de manipuler le DOM, d&rsquo;appliquer des styles CSS, de g\u00e9rer les entr\u00e9es de l&rsquo;utilisateur, et bien d&rsquo;autres choses encore.<\/p>\n<p>Ces attributs sont appel\u00e9s <strong>directives<\/strong> et vous permettent de connecter votre balisage \u00e0 la logique JavaScript sous-jacente.<\/p>\n<p>Vous trouverez ci-dessous une liste des directives que vous utiliserez le plus souvent.<\/p>\n<table>\n<thead>\n<tr>\n<th style=\"width: 22.5%\">Fonction<\/th>\n<th style=\"width: 22.5%\">Directive<\/th>\n<th>Description de la directive<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Activation\/espace de noms<\/td>\n<td><code>data-wp-interactive<\/code><\/td>\n<td>Active l&rsquo;API pour l&rsquo;\u00e9l\u00e9ment et ses enfants. La valeur doit \u00eatre d\u00e9finie sur l&rsquo;identifiant unique de votre extension.<\/td>\n<\/tr>\n<tr>\n<td>\u00c9tat local<\/td>\n<td><code>data-wp-context<\/code><\/td>\n<td>Fournit un \u00e9tat local (\u00ab\u00a0contexte\u00a0\u00bb) pour l&rsquo;\u00e9l\u00e9ment actuel et tous ses enfants. Il accepte un objet JSON. Il est recommand\u00e9 d&rsquo;utiliser <code>wp_interactivity_data_wp_context()<\/code> pour le d\u00e9finir en PHP (typiquement <code>render.php<\/code>).<\/td>\n<\/tr>\n<tr>\n<td>Attribut Binding<\/td>\n<td><code>data-wp-bind--[attribute]<\/code><\/td>\n<td>D\u00e9finit un attribut HTML (par exemple, <code>disabled<\/code>, <code>value<\/code>) en fonction d&rsquo;un \u00e9tat r\u00e9actif ou d&rsquo;une valeur de contexte (une valeur bool\u00e9enne ou une valeur de cha\u00eene).<\/td>\n<\/tr>\n<tr>\n<td>Modification du texte<\/td>\n<td><code>data-wp-text<\/code><\/td>\n<td>D\u00e9finit le contenu textuel interne de l&rsquo;\u00e9l\u00e9ment. Elle n&rsquo;accepte que les cha\u00eenes de caract\u00e8res.<\/td>\n<\/tr>\n<tr>\n<td>Basculement de classe CSS<\/td>\n<td><code>data-wp-class--[classname]<\/code><\/td>\n<td>Ajoute ou supprime une classe CSS en fonction d&rsquo;une valeur bool\u00e9enne.<\/td>\n<\/tr>\n<tr>\n<td>Style en ligne<\/td>\n<td><code>data-wp-style--[css-property]<\/code><\/td>\n<td>Ajoute ou supprime une classe de style en ligne en fonction d&rsquo;une valeur bool\u00e9enne.<\/td>\n<\/tr>\n<tr>\n<td>Gestion des \u00e9v\u00e9nements<\/td>\n<td><code>data-wp-on--[event]<\/code><\/td>\n<td>Ex\u00e9cute le code en r\u00e9ponse aux \u00e9v\u00e8nements DOM standard tels que <code>click<\/code> ou <code>mouseover<\/code>.<\/td>\n<\/tr>\n<tr>\n<td>Ex\u00e9cution initiale<\/td>\n<td><code>data-wp-init<\/code><\/td>\n<td>Ex\u00e9cute une fonction de rappel une seule fois, uniquement lorsque le n\u0153ud est cr\u00e9\u00e9.<\/td>\n<\/tr>\n<tr>\n<td>Surveillance de l&rsquo;\u00e9tat<\/td>\n<td><code>data-wp-watch<\/code><\/td>\n<td>Ex\u00e9cute une fonction de rappel lors de la cr\u00e9ation du n\u0153ud et \u00e0 nouveau lorsque l&rsquo;\u00e9tat ou le contexte change.<\/td>\n<\/tr>\n<tr>\n<td>It\u00e9ration de liste<\/td>\n<td><code>data-wp-each<\/code><\/td>\n<td>Rend une liste d&rsquo;\u00e9l\u00e9ments.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Pour obtenir une liste compl\u00e8te des directives, consultez les <a href=\"https:\/\/make.wordpress.org\/core\/2024\/03\/04\/interactivity-api-dev-note\/\">notes de d\u00e9veloppement de l&rsquo;API Interactivity<\/a> et la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/\">r\u00e9f\u00e9rence de l&rsquo;API<\/a>.<\/p>\n<h2>\u00c9tat global, contexte local et \u00e9tat d\u00e9riv\u00e9<\/h2>\n<p>Avant de commencer \u00e0 utiliser l&rsquo;API Interactivity, il est essentiel que vous vous familiarisiez avec les <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/core-concepts\/undestanding-global-state-local-context-and-derived-state\/\">concepts fondamentaux de la gestion des \u00e9tats<\/a> dans le d\u00e9veloppement frontend. Ceux qui d\u00e9veloppent r\u00e9guli\u00e8rement avec React, Vue ou Angular seront d\u00e9j\u00e0 familiaris\u00e9s avec ces concepts. Pour ceux qui d\u00e9couvrent ces technologies, il peut \u00eatre utile de donner quelques d\u00e9finitions g\u00e9n\u00e9rales.<\/p>\n<h3>\u00c9tat global<\/h3>\n<p>L&rsquo;<strong>\u00e9tat global<\/strong> fait r\u00e9f\u00e9rence \u00e0 l&rsquo;ensemble des donn\u00e9es accessibles depuis presque tous les composants d&rsquo;une application. Dans le cas de l&rsquo;API Interactivit\u00e9, par exemple, l&rsquo;\u00e9tat global affecte tous les blocs interactifs de la page, en les maintenant synchronis\u00e9s. Par exemple, lorsqu&rsquo;un utilisateur ajoute un produit \u00e0 son panier, cela se r\u00e9percute sur le bloc du panier.<\/p>\n<p>Lorsque vous utilisez l&rsquo;API Interactivity, vous devez d\u00e9finir les valeurs initiales de l&rsquo;\u00e9tat global sur le serveur \u00e0 l&rsquo;aide de la fonction <code>wp_interactivity_state()<\/code>. Dans le projet de d\u00e9marrage d\u00e9crit ci-dessus, cette fonction est utilis\u00e9e dans le fichier <code>render.php<\/code> comme ceci :<\/p>\n<pre><code class=\"language-php\">\/\/ Adds the global state.\nwp_interactivity_state(\n\t'create-block',\n\tarray(\n\t\t'isDark'    =&gt; false,\n\t\t'darkText'  =&gt; esc_html__( 'Switch to Light', 'your-interactive-block' ),\n\t\t'lightText' =&gt; esc_html__( 'Switch to Dark', 'your-interactive-block' ),\n\t\t'themeText'\t=&gt; esc_html__( 'Switch to Dark', 'your-interactive-block' ),\n\t)\n);<\/code><\/pre>\n<p><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_interactivity_state\/\" target=\"_blank\" rel=\"noopener noreferrer\">Cette fonction<\/a> accepte deux arguments :<\/p>\n<ul>\n<li>Un identifiant unique pour l&rsquo;espace de noms du magasin. Dans ce cas, <code>create-block<\/code>.<\/li>\n<li>Un tableau de donn\u00e9es qui sera fusionn\u00e9 avec l&rsquo;espace de noms du magasin existant, s&rsquo;il existe.<\/li>\n<\/ul>\n<p>Les valeurs initiales de l&rsquo;\u00e9tat global sont ensuite utilis\u00e9es pour le rendu de la page. Vous pouvez acc\u00e9der directement aux valeurs de l&rsquo;\u00e9tat global en utilisant <code>state<\/code> dans les valeurs des attributs de la directive, comme dans le code suivant :<\/p>\n<pre><code class=\"language-html\">&lt;button\n\tdata-wp-on--click=\"actions.toggleTheme\"\n\tdata-wp-text=\"state.themeText\"\n&gt;&lt;\/button&gt;<\/code><\/pre>\n<p>La fonction <code>store()<\/code> constitue le principal point d&rsquo;acc\u00e8s \u00e0 l&rsquo;\u00e9tat global \u00e0 partir de JavaScript, limit\u00e9 \u00e0 l&rsquo;espace de noms s\u00e9lectionn\u00e9. Pour revenir au code du projet de d\u00e9marrage, la fonction <code>store()<\/code> est utilis\u00e9e dans le fichier <code>view.js<\/code> comme ceci :<\/p>\n<pre><code class=\"language-javascript\">import { store, getContext } from '@wordpress\/interactivity';\n\nconst { state } = store( 'create-block', {\n\tstate: { ... },\n\tactions: { ... },\n\tcallbacks: { ... },\n} );<\/code><\/pre>\n<p>Pour acc\u00e9der \u00e0 l&rsquo;\u00e9tat global, vous pouvez utiliser la propri\u00e9t\u00e9 <code>state<\/code>:<\/p>\n<pre><code class=\"language-javascript\">actions: {\n\ttoggleTheme() {\n\t\tstate.isDark = ! state.isDark;\n\t},\n},<\/code><\/pre>\n<h3>Contexte local<\/h3>\n<p>Le <strong>contexte local<\/strong> est une donn\u00e9e \u00e0 laquelle ne peuvent acc\u00e9der qu&rsquo;un composant sp\u00e9cifique et ses enfants directs. Un bloc interactif WordPress fournit un \u00e9tat ind\u00e9pendant pour le bloc et ses \u00e9l\u00e9ments imbriqu\u00e9s.<\/p>\n<p>Lorsque vous utilisez l&rsquo;API Interactivity, vous pouvez acc\u00e9der au contexte local \u00e0 l&rsquo;aide de la fonction <code>getContext()<\/code>. Si l&rsquo;on se r\u00e9f\u00e8re \u00e0 nouveau au projet de d\u00e9marrage, lorsque l&rsquo;utilisateur clique sur le bouton Toggle, l&rsquo;action <code>toggleOpen()<\/code> est d\u00e9clench\u00e9e, ce qui permet d&rsquo;acc\u00e9der au contexte local du composant :<\/p>\n<pre><code class=\"language-javascript\">actions: {\n\ttoggleOpen() {\n\t\tconst context = getContext();\n\t\tcontext.isOpen = ! context.isOpen;\n\t},\n},<\/code><\/pre>\n<ul>\n<li><code>getContext()<\/code>: R\u00e9cup\u00e8re l&rsquo;objet d&rsquo;\u00e9tat local du bloc. Les propri\u00e9t\u00e9s de cet objet sont d\u00e9finies dans le balisage du composant (<code>render.php<\/code>) \u00e0 l&rsquo;aide de la fonction <code>wp_interactivity_data_wp_context()<\/code>.<\/li>\n<li><code>context.isOpen = ! context.isOpen;<\/code>: Change la valeur de la propri\u00e9t\u00e9 <code>isOpen<\/code> dans le contexte local du composant.<\/li>\n<\/ul>\n<h3>\u00c9tat d\u00e9riv\u00e9<\/h3>\n<p>L&rsquo;<strong>\u00e9tat d\u00e9riv\u00e9<\/strong> fait r\u00e9f\u00e9rence aux donn\u00e9es calcul\u00e9es dynamiquement \u00e0 partir de l&rsquo;\u00e9tat global ou local existant.<\/p>\n<p>Par exemple, jettez un coup d&rsquo;\u0153il au code du fichier <code>view.js<\/code>, en particulier dans cette section :<\/p>\n<pre><code class=\"language-javascript\">const { state } = store( 'create-block', {\n\tstate: {\n\t\tget themeText() {\n\t\t\treturn state.isDark ? state.darkText : state.lightText;\n\t\t},\n\t},\n\t...\n}<\/code><\/pre>\n<p>Ce bloc d\u00e9finit l&rsquo;\u00e9tat d\u00e9riv\u00e9 <code>themeText<\/code> dans l&rsquo;\u00e9tat global d\u00e9fini dans l&rsquo;espace de noms <code>create-block<\/code>.<\/p>\n<ul>\n<li><code>get themeText()<\/code> n&rsquo;est pas une valeur fixe, mais plut\u00f4t une fonction qui est ex\u00e9cut\u00e9e chaque fois que tu essaies de lire la propri\u00e9t\u00e9 <code>themeText<\/code>. Elle ne doit pas \u00eatre invoqu\u00e9e comme une fonction normale car l&rsquo;API Interactivity la traite comme une propri\u00e9t\u00e9 d&rsquo;\u00e9tat et recalcule automatiquement sa valeur chaque fois que les valeurs des autres propri\u00e9t\u00e9s d&rsquo;\u00e9tat changent. Dans le code ci-dessus, la valeur de la propri\u00e9t\u00e9 <code>themeText<\/code> est recalcul\u00e9e chaque fois que la valeur de la propri\u00e9t\u00e9 <code>isDark<\/code> change. Si <code>state.isDark<\/code> est <code>true<\/code>, alors <code>themeText<\/code> prend la valeur de <code>state.darkText<\/code>; sinon, il prend la valeur de <code>state.lightText<\/code>.<\/li>\n<\/ul>\n<p>Pour un aper\u00e7u plus complet des concepts d\u00e9crits dans cette section, voir <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/core-concepts\/undestanding-global-state-local-context-and-derived-state\/\" target=\"_blank\" rel=\"noopener noreferrer\">Comprendre l&rsquo;\u00e9tat global, le contexte local et l&rsquo;\u00e9tat d\u00e9riv\u00e9<\/a>.<\/p>\n<h2>Actions et rappels<\/h2>\n<p>Les actions et les rappels d\u00e9terminent la r\u00e9ponse \u00e0 l&rsquo;interaction de l&rsquo;utilisateur et aux changements d&rsquo;\u00e9tat.<\/p>\n<p>La section <code>actions<\/code> d&rsquo;un bloc interactif contient des fonctions qui sont ex\u00e9cut\u00e9es en r\u00e9ponse aux \u00e9v\u00e8nements g\u00e9n\u00e9r\u00e9s par l&rsquo;utilisateur. Ces fonctions servent principalement \u00e0 modifier l&rsquo;\u00e9tat local ou global du composant. Prenez le code suivant dans le fichier <code>view.js<\/code> :<\/p>\n<pre><code class=\"language-javascript\">actions: {\n\ttoggleOpen() {\n\t\tconst context = getContext();\n\t\tcontext.isOpen = ! context.isOpen;\n\t},\n\t...\n},<\/code><\/pre>\n<ul>\n<li>Dans cette section du code, la fonction <code>toggleOpen()<\/code> utilise <code>getContext()<\/code> pour acc\u00e9der au contexte local du bloc qui a d\u00e9clench\u00e9 l&rsquo;action pour changer la valeur de la propri\u00e9t\u00e9 <code>isOpen<\/code>.<\/li>\n<\/ul>\n<p>De la m\u00eame fa\u00e7on, vous pouvez acc\u00e9der \u00e0 l&rsquo;\u00e9tat global :<\/p>\n<pre><code class=\"language-javascript\">actions: {\n\t...,\n\ttoggleTheme() {\n\t\tstate.isDark = ! state.isDark;\n\t},\n},<\/code><\/pre>\n<ul>\n<li>La fonction <code>toggleTheme()<\/code> acc\u00e8de directement \u00e0 l&rsquo;objet global <code>state<\/code> et modifie la valeur de la propri\u00e9t\u00e9 <code>isDark<\/code>.<\/li>\n<\/ul>\n<p>Les actions sont d\u00e9clench\u00e9es par la directive <code>data-wp-on--[event]<\/code>. Par exemple, dans le fichier <code>render.php<\/code>, vous trouverez le bouton suivant :<\/p>\n<pre><code class=\"language-html\">&lt;button\n\tdata-wp-on--click=\"actions.toggleOpen\"\n\tdata-wp-bind--aria-expanded=\"context.isOpen\"\n\taria-controls=\"&lt;?php echo esc_attr( $unique_id ); ?&gt;\"\n&gt;<\/code><\/pre>\n<ul>\n<li>Dans ce code HTML, l&rsquo;attribut <code>data-wp-on--click<\/code> active l&rsquo;action <code>toggleOpen<\/code> lorsque l&rsquo;utilisateur clique sur le bouton \u00e0 bascule.<\/li>\n<\/ul>\n<p>La section <code>callbacks<\/code> contient des fonctions qui sont ex\u00e9cut\u00e9es automatiquement lorsque les donn\u00e9es dont elles d\u00e9pendent changent. Leur but est de produire des effets secondaires en r\u00e9ponse \u00e0 un changement d&rsquo;\u00e9tat.<\/p>\n<p>Dans le projet de base g\u00e9n\u00e9r\u00e9 par <code>create-block-interactive-template<\/code>, vous trouverez le rappel suivant :<\/p>\n<pre><code class=\"language-javascript\">callbacks: {\n\tlogIsOpen: () =&gt; {\n\t\tconst { isOpen } = getContext();\n\t\t\/\/ Log the value of `isOpen` each time it changes.\n\t\tconsole.log( `Is open: ${ isOpen }` );\n\t},\n},<\/code><\/pre>\n<ul>\n<li>La fonction <code>logIsOpen<\/code> utilise la variable <code>isOpen<\/code>, qui est disponible dans le contexte Local.<\/li>\n<li>Le callback r\u00e9cup\u00e8re la valeur de <code>isOpen<\/code> \u00e0 l&rsquo;aide de <code>getContext()<\/code>.<\/li>\n<li>Chaque fois que la valeur de <code>isOpen<\/code> change, la fonction envoie un message \u00e0 la console du navigateur.<\/li>\n<\/ul>\n<figure id=\"attachment_199639\" aria-describedby=\"caption-attachment-199639\" style=\"width: 1596px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-199639 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/10\/toggle-is-open.png\" alt=\"Un message dans la console informe l'utilisateur de la modification du contexte Local.\" width=\"1596\" height=\"727\"><figcaption id=\"caption-attachment-199639\" class=\"wp-caption-text\">Un message dans la console informe l&rsquo;utilisateur de la modification du contexte Local.<\/figcaption><\/figure>\n<h2>Comment construire un bloc interactif<\/h2>\n<p>Maintenant que nous avons abord\u00e9 la th\u00e9orie, il est temps de commencer \u00e0 s&rsquo;amuser avec le code ! Dans la deuxi\u00e8me partie de ce guide, vous apprendrez \u00e0 cr\u00e9er un bloc interactif qui permet aux utilisateurs d&rsquo;ajouter des produits \u00e0 un panier id\u00e9al, avec des quantit\u00e9s et des totaux qui se mettent \u00e0 jour automatiquement. Il s&rsquo;agit d&rsquo;un exemple de d\u00e9monstration, mais nous esp\u00e9rons qu&rsquo;il vous permettra de bien comprendre comment utiliser l&rsquo;\u00e9tat, les actions et les rappels.<\/p>\n<figure id=\"attachment_199768\" aria-describedby=\"caption-attachment-199768\" style=\"width: 1512px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-199768 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/10\/interactive-counter-editor-view.png\" alt=\"Le bloc interactif dans l'\u00e9diteur\" width=\"1512\" height=\"1204\"><figcaption id=\"caption-attachment-199768\" class=\"wp-caption-text\">Le bloc interactif dans l&rsquo;\u00e9diteur<\/figcaption><\/figure>\n<p>Nous allons cr\u00e9er un bloc appel\u00e9 <strong>Compteur interactif<\/strong> \u00e0 l&rsquo;aide de <code>create-block-interactive-template<\/code>. Pour commencer, ouvrez votre outil de ligne de commande et saisissez ceci :<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block interactive-counter --template @wordpress\/create-block-interactive-template<\/code><\/pre>\n<p>Ensuite, naviguez dans le r\u00e9pertoire de votre nouveau projet et ex\u00e9cutez la premi\u00e8re compilation.<\/p>\n<pre><code class=\"language-bash\">cd interactive-counter && npm run build<\/code><\/pre>\n<p>Ouvrez maintenant le projet dans votre \u00e9diteur de code. Dans le r\u00e9pertoire <code>\/src<\/code>, cherchez le fichier <code>block.json<\/code>. Il devrait ressembler \u00e0 ceci :<\/p>\n<pre><code class=\"language-json\">{\n\t\"$schema\": \"https:\/\/schemas.wp.org\/trunk\/block.json\",\n\t\"apiVersion\": 3,\n\t\"name\": \"create-block\/interactive-counter\",\n\t\"version\": \"0.1.0\",\n\t\"title\": \"Interactive Counter\",\n\t\"category\": \"widgets\",\n\t\"icon\": \"media-interactive\",\n\t\"description\": \"An interactive block with the Interactivity API.\",\n\t\"supports\": {\n\t\t\"interactivity\": true\n\t},\n\t\"textdomain\": \"interactive-counter\",\n\t\"editorScript\": \"file:.\/index.js\",\n\t\"editorStyle\": \"file:.\/index.css\",\n\t\"style\": \"file:.\/style-index.css\",\n\t\"render\": \"file:.\/render.php\",\n\t\"viewScriptModule\": \"file:.\/view.js\"\n}<\/code><\/pre>\n<p>N&rsquo;h\u00e9sitez pas \u00e0 le personnaliser, mais veillez \u00e0 ne pas modifier les champs essentiels d\u00e9crits ci-dessus.<\/p>\n<h3>Le fichier edit.js<\/h3>\n<p>L&rsquo;\u00e9tape suivante consiste \u00e0 cr\u00e9er le bloc qui appara\u00eetra dans l&rsquo;\u00e9diteur. Pour cela, vous devez \u00e9diter le fichier <code>\/src\/edit.js<\/code>. Ouvrez le fichier et modifiez-le comme ceci :<\/p>\n<pre><code class=\"language-javascript\">import { __ } from '@wordpress\/i18n';\nimport { useBlockProps } from '@wordpress\/block-editor';\nimport '.\/editor.scss';\n\nexport default function Edit({ attributes, setAttributes }) {\n\tconst blockProps = useBlockProps();\n\tconst products = [\n\t\t{ id: 'product1', name: __('Product 1', 'interactive-counter'), price: 10.00 },\n\t\t{ id: 'product2', name: __('Product 2', 'interactive-counter'), price: 15.00 },\n\t\t{ id: 'product3', name: __('Product 3', 'interactive-counter'), price: 20.00 },\n\t];\n\n\treturn (\n\t\t&lt;div {...blockProps}&gt;\n\t\t\t&lt;h3&gt;{__('Shopping Cart', 'interactive-counter')}&lt;\/h3&gt;\n\t\t\t&lt;ul&gt;\n\t\t\t\t{products.map((product) =&gt; (\n\t\t\t\t\t&lt;li key={product.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}&gt;\n\t\t\t\t\t\t&lt;span style={{ flex: 1 }}&gt;{product.name} - ${product.price.toFixed(2)}&lt;\/span&gt;\n\t\t\t\t\t\t&lt;div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}&gt;\n\t\t\t\t\t\t\t&lt;button disabled&gt;-&lt;\/button&gt;\n\t\t\t\t\t\t\t&lt;span&gt;0&lt;\/span&gt;\n\t\t\t\t\t\t\t&lt;button disabled&gt;+&lt;\/button&gt;\n\t\t\t\t\t\t&lt;\/div&gt;\n\t\t\t\t\t\t&lt;span style={{ flex: 1, textAlign: 'right' }}&gt;\n\t\t\t\t\t\t\t{__('Subtotal:', 'interactive-counter')} $0.00\n\t\t\t\t\t\t&lt;\/span&gt;\n\t\t\t\t\t&lt;\/li&gt;\n\t\t\t\t))}\n\t\t\t&lt;\/ul&gt;\n\t\t\t&lt;div style={{ borderTop: '1px solid #ccc', paddingTop: '15px' }}&gt;\n\t\t\t\t&lt;p style={{ display: 'flex', justifyContent: 'space-between' }}&gt;\n\t\t\t\t\t&lt;strong&gt;{__('Subtotal:', 'interactive-counter')}&lt;\/strong&gt;\n\t\t\t\t\t&lt;span&gt;$0.00&lt;\/span&gt;\n\t\t\t\t&lt;\/p&gt;\n\t\t\t\t&lt;p style={{ display: 'flex', justifyContent: 'space-between' }}&gt;\n\t\t\t\t\t&lt;strong&gt;{__('Tax (22%):', 'interactive-counter')}&lt;\/strong&gt;\n\t\t\t\t\t&lt;span&gt;$0.00&lt;\/span&gt;\n\t\t\t\t&lt;\/p&gt;\n\t\t\t\t&lt;p style={{ display: 'flex', justifyContent: 'space-between' }}&gt;\n\t\t\t\t\t&lt;strong&gt;{__('Total:', 'interactive-counter')}&lt;\/strong&gt;\n\t\t\t\t\t&lt;span&gt;$0.00&lt;\/span&gt;\n\t\t\t\t&lt;\/p&gt;\n\t\t\t&lt;\/div&gt;\n\t\t\t&lt;p&gt;{__('Quantities and totals will be interactive in the frontend.', 'interactive-counter')}&lt;\/p&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>Ce code g\u00e9n\u00e8re un bloc personnalis\u00e9 dans le backend. Le bloc ne sera interactif que dans le frontend. Pour plus de d\u00e9tails sur le fichier <code>\/src\/edit.js<\/code>, vous pouvez vous r\u00e9f\u00e9rer \u00e0 nos <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-dynamiques-gutenberg\/\">guides<\/a> de <a href=\"https:\/\/kinsta.com\/fr\/blog\/blocs-gutenberg\/\">d\u00e9veloppement des blocs<\/a> Gutenberg.<\/p>\n<h3>Le fichier render.php<\/h3>\n<p>Le prochain fichier \u00e0 modifier est <code>\/src\/render.php<\/code>. Ouvrez le fichier et remplacez le code existant par ce qui suit :<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * Render callback for the interactive-counter block.\n *\/\n\n$products = [\n\t['id' =&gt; 'product1', 'name' =&gt; __('Product 1', 'interactive-counter'), 'price' =&gt; 10.00],\n\t['id' =&gt; 'product2', 'name' =&gt; __('Product 2', 'interactive-counter'), 'price' =&gt; 15.00],\n\t['id' =&gt; 'product3', 'name' =&gt; __('Product 3', 'interactive-counter'), 'price' =&gt; 20.00],\n];\n\n\/\/ Initialize global state\nwp_interactivity_state('interactive-counter', [\n\t'products' =&gt; array_map(function ($product) {\n\t\treturn [\n\t\t\t'id' =&gt; $product['id'],\n\t\t\t'name' =&gt; $product['name'],\n\t\t\t'price' =&gt; $product['price'],\n\t\t\t'quantity' =&gt; 0,\n\t\t\t'subtotal' =&gt; '0.00',\n\t\t];\n\t}, $products),\n\t'vatRate' =&gt; 0.22,\n]);<\/code><\/pre>\n<p>Voici ce que fait ce code :<\/p>\n<ul>\n<li>Tout d&rsquo;abord, il cr\u00e9e un tableau de produits cod\u00e9 en dur. Chaque produit a un identifiant, un nom et un prix.<\/li>\n<li>Ensuite, il initialise l&rsquo;\u00e9tat Global avec <code>wp_interactivity_state<\/code>. Le premier param\u00e8tre est le nom du magasin, qui doit correspondre \u00e0 celui utilis\u00e9 dans <code>view.js<\/code>.<\/li>\n<li>Ensuite, il fait correspondre le tableau de produits pr\u00e9c\u00e9dent \u00e0 un nouveau tableau <code>products<\/code>, en ajoutant la quantit\u00e9 et le sous-total aux propri\u00e9t\u00e9s du tableau d&rsquo;origine. Ce nouveau tableau fournit la structure de donn\u00e9es que vous utiliserez dans <code>view.js<\/code>.<\/li>\n<li><code>vatRate<\/code> d\u00e9finit la valeur par d\u00e9faut pour le calcul de la taxe.<\/li>\n<\/ul>\n<p>Ensuite, ajoutez ce qui suit au code ci-dessus :<\/p>\n<pre><code class=\"language-html\">&lt;div &lt;?php echo get_block_wrapper_attributes(); ?&gt; data-wp-interactive=\"interactive-counter\" data-wp-init=\"callbacks.init\"&gt;\n\t&lt;h3&gt;&lt;?php echo esc_html__('Cart', 'interactive-counter'); ?&gt;&lt;\/h3&gt;\n\t&lt;ul&gt;\n\t\t&lt;?php foreach ($products as $index =&gt; $product) : ?&gt;\n\t\t\t&lt;li data-wp-context='{\n\t\t\t\t\"productId\": \"&lt;?php echo esc_attr($product['id']); ?&gt;\",\n\t\t\t\t\"quantity\": 0,\n\t\t\t\t\"subtotal\": \"0.00\"\n\t\t\t}' \n\t\t\tdata-wp-bind--data-wp-context.quantity=\"state.products[&lt;?php echo $index; ?&gt;].quantity\" \n\t\t\tdata-wp-bind--data-wp-context.subtotal=\"state.products[&lt;?php echo $index; ?&gt;].subtotal\"&gt;\n\t\t\t\t&lt;span class=\"product-name\"&gt;&lt;?php echo esc_html($product['name']); ?&gt; - $&lt;?php echo esc_html(number_format($product['price'], 2)); ?&gt;&lt;\/span&gt;\n\t\t\t\t&lt;div class=\"quantity-controls\"&gt;\n\t\t\t\t\t&lt;button data-wp-on--click=\"actions.decrement\"&gt;-&lt;\/button&gt;\n\t\t\t\t\t&lt;span data-wp-text=\"context.quantity\"&gt;0&lt;\/span&gt;\n\t\t\t\t\t&lt;button data-wp-on--click=\"actions.increment\"&gt;+&lt;\/button&gt;\n\t\t\t\t&lt;\/div&gt;\n\t\t\t\t&lt;span class=\"product-subtotal\"&gt;\n\t\t\t\t\t&lt;?php echo esc_html__('Subtotal:', 'interactive-counter'); ?&gt;\n\t\t\t\t\t$&lt;span data-wp-text=\"context.subtotal\"&gt;0.00&lt;\/span&gt;\n\t\t\t\t&lt;\/span&gt;\n\t\t\t&lt;\/li&gt;\n\t\t&lt;?php endforeach; ?&gt;\n\t&lt;\/ul&gt;\n\t&lt;div class=\"totals\"&gt;\n\t\t&lt;p&gt;\n\t\t\t&lt;strong&gt;&lt;?php echo esc_html__('Subtotal:', 'interactive-counter'); ?&gt;&lt;\/strong&gt;\n\t\t\t$ &lt;span data-wp-text=\"state.subtotal\"&gt;0.00&lt;\/span&gt;\n\t\t&lt;\/p&gt;\n\t\t&lt;p&gt;\n\t\t\t&lt;strong&gt;&lt;?php echo esc_html__('Tax (22%):', 'interactive-counter'); ?&gt;&lt;\/strong&gt;\n\t\t\t$ &lt;span data-wp-text=\"state.vat\"&gt;0.00&lt;\/span&gt;\n\t\t&lt;\/p&gt;\n\t\t&lt;p&gt;\n\t\t\t&lt;strong&gt;&lt;?php echo esc_html__('Total:', 'interactive-counter'); ?&gt;&lt;\/strong&gt;\n\t\t\t$ &lt;span data-wp-text=\"state.total\"&gt;0.00&lt;\/span&gt;\n\t\t&lt;\/p&gt;\n\t&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Voici ce que fait ce code :<\/p>\n<ul>\n<li>La fonction <code>get_block_wrapper_attributes()<\/code> dans le conteneur <code>div<\/code> est une fonction WordPress qui g\u00e9n\u00e8re les attributs standard d&rsquo;un bloc. Dans ce cas, elle g\u00e9n\u00e8re l&rsquo;attribut de classe <code>\"wp-block-create-block-interactive-counter\"<\/code>.<\/li>\n<li>L&rsquo;attribut <code>data-wp-interactive<\/code> rend ce bloc interactif.<\/li>\n<li>L&rsquo;attribut <code>data-wp-init<\/code> d\u00e9clenche le rappel <code>init<\/code> d\u00e9fini dans <code>view.js<\/code>.<\/li>\n<li>La boucle <code>foreach<\/code> g\u00e9n\u00e8re un \u00e9l\u00e9ment de liste pour chaque produit du tableau <code>products<\/code>.<\/li>\n<li><code>data-wp-context<\/code> d\u00e9finit le contexte local du bloc.<\/li>\n<li><code>data-wp-bind<\/code> lie la valeur de <code>data-wp-context.quantity<\/code> \u00e0 la propri\u00e9t\u00e9 globale <code>state.products[$index].quantity<\/code>.<\/li>\n<li>La m\u00eame chose se produit dans la ligne ci-dessous avec le sous-total.<\/li>\n<li>Les deux boutons suivants activent les actions <code>decrement<\/code> et <code>increment<\/code> gr\u00e2ce \u00e0 l&rsquo;attribut <code>data-wp-on--click<\/code>.<\/li>\n<li>L&rsquo;attribut <code>data-wp-text<\/code> dans le <code>span<\/code> met \u00e0 jour le contenu de l&rsquo;\u00e9l\u00e9ment en fonction de la valeur actuelle de <code>context.quantity<\/code>.<\/li>\n<\/ul>\n<p>Le reste du code est explicite, passons donc au fichier suivant.<\/p>\n<h3>Le fichier view.js<\/h3>\n<p>Ce fichier contient la logique de votre bloc interactif.<\/p>\n<pre><code class=\"language-javascript\">import { store, getContext } from '@wordpress\/interactivity';\n\nstore('interactive-counter', {\n\tstate: {\n\t\tget subtotal() {\n\t\t\tconst { products } = store('interactive-counter').state;\n\t\t\treturn products\n\t\t\t\t.reduce((sum, product) =&gt; sum + product.price * (product.quantity || 0), 0)\n\t\t\t\t.toFixed(2);\n\t\t},\n\t\tget vat() {\n\t\t\tconst { subtotal, vatRate } = store('interactive-counter').state;\n\t\t\treturn (subtotal * vatRate).toFixed(2);\n\t\t},\n\t\tget total() {\n\t\t\tconst { subtotal, vat } = store('interactive-counter').state;\n\t\t\treturn (parseFloat(subtotal) + parseFloat(vat)).toFixed(2);\n\t\t},\n\t},\n\tactions: {\n\t\tincrement: () =&gt; {\n\t\t\tconst context = getContext();\n\t\t\tconst { products } = store('interactive-counter').state;\n\t\t\tconst product = products.find(p =&gt; p.id === context.productId);\n\t\t\tif (product) {\n\t\t\t\tproduct.quantity = (product.quantity || 0) + 1;\n\t\t\t\tproduct.subtotal = (product.price * product.quantity).toFixed(2);\n\t\t\t\tcontext.quantity = product.quantity;\n\t\t\t\tcontext.subtotal = product.subtotal;\n\t\t\t\tconsole.log(`Incremented ${context.productId}:`, { quantity: product.quantity, subtotal: product.subtotal, context });\n\t\t\t} else {\n\t\t\t\tconsole.warn('Product not found:', context.productId);\n\t\t\t}\n\t\t},\n\t\tdecrement: () =&gt; {\n\t\t\tconst context = getContext();\n\t\t\tconst { products } = store('interactive-counter').state;\n\t\t\tconst product = products.find(p =&gt; p.id === context.productId);\n\t\t\tif (product && (product.quantity || 0) &gt; 0) {\n\t\t\t\tproduct.quantity -= 1;\n\t\t\t\tproduct.subtotal = (product.price * product.quantity).toFixed(2);\n\t\t\t\tcontext.quantity = product.quantity;\n\t\t\t\tcontext.subtotal = product.subtotal;\n\t\t\t\tconsole.log(`Decremented ${context.productId}:`, { quantity: product.quantity, subtotal: product.subtotal, context });\n\t\t\t} else {\n\t\t\t\tconsole.warn('Cannot decrement:', context.productId, product?.quantity);\n\t\t\t}\n\t\t},\n\t},\n\tcallbacks: {\n\t\tinit: () =&gt; {\n\t\t\tconst { products } = store('interactive-counter').state;\n\t\t\tproducts.forEach((product, index) =&gt; {\n\t\t\t\tproduct.quantity = 0;\n\t\t\t\tproduct.subtotal = '0.00';\n\t\t\t\tconsole.log(`Initialized product ${index}:`, { id: product.id, quantity: product.quantity, subtotal: product.subtotal });\n\t\t\t});\n\t\t},\n\t},\n});<\/code><\/pre>\n<p>Ce fichier d\u00e9finit le magasin de l&rsquo;espace de noms <code>interactive-counter<\/code>. Il g\u00e8re l&rsquo;\u00e9tat, les actions et les rappels :<\/p>\n<pre><code class=\"language-javascript\">store('interactive-counter', {\n\tstate: { ... },\n\tactions: { ... },\n\tcallbacks: { ... },\n});<\/code><\/pre>\n<p>Voyons cela de plus pr\u00e8s.<\/p>\n<ul>\n<li><code>state<\/code>: D\u00e9finit trois propri\u00e9t\u00e9s d&rsquo;\u00e9tat calcul\u00e9es (getters) : <code>subtotal<\/code>, <code>vat<\/code>, et <code>total<\/code>. Ces fonctions r\u00e9cup\u00e8rent les valeurs de l&rsquo;\u00e9tat global et calculent les valeurs \u00e0 renvoyer.<\/li>\n<li><code>actions<\/code>: D\u00e9finit deux fonctions ex\u00e9cut\u00e9es sur des \u00e9v\u00e9nements : <code>increment<\/code> et <code>decrement<\/code>. Ces fonctions r\u00e9cup\u00e8rent le tableau <code>products<\/code> dans l&rsquo;\u00e9tat global, r\u00e9cup\u00e8rent le produit actuel dans le contexte local en fonction de <code>context.productId<\/code>, mettent \u00e0 jour les valeurs des propri\u00e9t\u00e9s du produit actuel (<code>quantity<\/code> et <code>subtotal<\/code>) et synchronisent le contexte local avec les nouvelles valeurs.<\/li>\n<li><code>callbacks<\/code>: D\u00e9finit un rappel <code>init<\/code> pour l&rsquo;initialisation.<\/li>\n<\/ul>\n<p>L&rsquo;image suivante montre le bloc interactif dans le frontend.<\/p>\n<figure id=\"attachment_199769\" aria-describedby=\"caption-attachment-199769\" style=\"width: 1364px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-199769 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/10\/interactive-counter.png\" alt=\"Un compteur interactif construit avec l'API Interactivity\" width=\"1364\" height=\"896\"><figcaption id=\"caption-attachment-199769\" class=\"wp-caption-text\">Un compteur interactif construit avec l&rsquo;API Interactivity<\/figcaption><\/figure>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Dans cet article, nous avons pr\u00e9sent\u00e9 les principales fonctionnalit\u00e9s de l&rsquo;API d&rsquo;interactivit\u00e9 de WordPress. Nous avons approfondi des concepts cl\u00e9s tels que l&rsquo;\u00e9tat global, le contexte local, les directives, les actions et les rappels. Vous avez appris \u00e0 cr\u00e9er un bloc interactif \u00e0 partir de z\u00e9ro \u00e0 l&rsquo;aide de <code>@wordpress\/create-block-interactive-template<\/code>, et nous avons mis cela en pratique en cr\u00e9ant un vrai bloc qui interagit avec les entr\u00e9es de l&rsquo;utilisateur.<\/p>\n<p>Nous esp\u00e9rons vous avoir fourni les outils et les connaissances n\u00e9cessaires pour cr\u00e9er des sites web WordPress fantastiques, dynamiques et interactifs \u00e0 l&rsquo;aide de l&rsquo;API d&rsquo;interactivit\u00e9 de WordPress.<\/p>\n<p>Bon codage !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans les pr\u00e9c\u00e9dents articles de ce blog, nous avons explor\u00e9 le d\u00e9veloppement des blocs WordPress sous diff\u00e9rents angles. Nous avons examin\u00e9 le d\u00e9veloppement de blocs statiques &#8230;<\/p>\n","protected":false},"author":36,"featured_media":81501,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[953,1028],"class_list":["post-81500","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-developpement-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Ouvrir de nouvelles possibilit\u00e9s avec l&#039;API d&#039;interactivit\u00e9 WordPress<\/title>\n<meta name=\"description\" content=\"L&#039;API Interactivit\u00e9 est un outil puissant qui vous permet de cr\u00e9er des sites WordPress de nouvelle g\u00e9n\u00e9ration. Consultez notre guide complet et lancez-vous dans l&#039;utilisation des blocs interactifs !\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"D\u00e9couvrez de nouvelles possibilit\u00e9s gr\u00e2ce \u00e0 l&#039;API d&#039;interactivit\u00e9 WordPress\" \/>\n<meta property=\"og:description\" content=\"L&#039;API Interactivit\u00e9 est un outil puissant qui vous permet de cr\u00e9er des sites WordPress de nouvelle g\u00e9n\u00e9ration. Consultez notre guide complet et lancez-vous dans l&#039;utilisation des blocs interactifs !\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-06T07:40:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-10T09:22:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/11\/how-to-create-interactive-blocks.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"L&#039;API Interactivit\u00e9 est un outil puissant qui vous permet de cr\u00e9er des sites WordPress de nouvelle g\u00e9n\u00e9ration. Consultez notre guide complet et lancez-vous dans l&#039;utilisation des blocs interactifs !\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/11\/how-to-create-interactive-blocks-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"26 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"D\u00e9couvrez de nouvelles possibilit\u00e9s gr\u00e2ce \u00e0 l&rsquo;API d&rsquo;interactivit\u00e9 WordPress\",\"datePublished\":\"2025-11-06T07:40:07+00:00\",\"dateModified\":\"2025-11-10T09:22:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/\"},\"wordCount\":3637,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/11\/how-to-create-interactive-blocks.png\",\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/\",\"name\":\"Ouvrir de nouvelles possibilit\u00e9s avec l'API d'interactivit\u00e9 WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/11\/how-to-create-interactive-blocks.png\",\"datePublished\":\"2025-11-06T07:40:07+00:00\",\"dateModified\":\"2025-11-10T09:22:57+00:00\",\"description\":\"L'API Interactivit\u00e9 est un outil puissant qui vous permet de cr\u00e9er des sites WordPress de nouvelle g\u00e9n\u00e9ration. Consultez notre guide complet et lancez-vous dans l'utilisation des blocs interactifs !\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/11\/how-to-create-interactive-blocks.png\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/11\/how-to-create-interactive-blocks.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"API\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/api\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"D\u00e9couvrez de nouvelles possibilit\u00e9s gr\u00e2ce \u00e0 l&#8217;API d&#8217;interactivit\u00e9 WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ouvrir de nouvelles possibilit\u00e9s avec l'API d'interactivit\u00e9 WordPress","description":"L'API Interactivit\u00e9 est un outil puissant qui vous permet de cr\u00e9er des sites WordPress de nouvelle g\u00e9n\u00e9ration. Consultez notre guide complet et lancez-vous dans l'utilisation des blocs interactifs !","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/","og_locale":"fr_FR","og_type":"article","og_title":"D\u00e9couvrez de nouvelles possibilit\u00e9s gr\u00e2ce \u00e0 l'API d'interactivit\u00e9 WordPress","og_description":"L'API Interactivit\u00e9 est un outil puissant qui vous permet de cr\u00e9er des sites WordPress de nouvelle g\u00e9n\u00e9ration. Consultez notre guide complet et lancez-vous dans l'utilisation des blocs interactifs !","og_url":"https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2025-11-06T07:40:07+00:00","article_modified_time":"2025-11-10T09:22:57+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/11\/how-to-create-interactive-blocks.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"L'API Interactivit\u00e9 est un outil puissant qui vous permet de cr\u00e9er des sites WordPress de nouvelle g\u00e9n\u00e9ration. Consultez notre guide complet et lancez-vous dans l'utilisation des blocs interactifs !","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/11\/how-to-create-interactive-blocks-1024x512.png","twitter_creator":"@carlodaniele","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Carlo Daniele","Dur\u00e9e de lecture estim\u00e9e":"26 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"D\u00e9couvrez de nouvelles possibilit\u00e9s gr\u00e2ce \u00e0 l&rsquo;API d&rsquo;interactivit\u00e9 WordPress","datePublished":"2025-11-06T07:40:07+00:00","dateModified":"2025-11-10T09:22:57+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/"},"wordCount":3637,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/11\/how-to-create-interactive-blocks.png","inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/","url":"https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/","name":"Ouvrir de nouvelles possibilit\u00e9s avec l'API d'interactivit\u00e9 WordPress","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/11\/how-to-create-interactive-blocks.png","datePublished":"2025-11-06T07:40:07+00:00","dateModified":"2025-11-10T09:22:57+00:00","description":"L'API Interactivit\u00e9 est un outil puissant qui vous permet de cr\u00e9er des sites WordPress de nouvelle g\u00e9n\u00e9ration. Consultez notre guide complet et lancez-vous dans l'utilisation des blocs interactifs !","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/11\/how-to-create-interactive-blocks.png","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2025\/11\/how-to-create-interactive-blocks.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/api-interactivite-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"API","item":"https:\/\/kinsta.com\/fr\/sujets\/api\/"},{"@type":"ListItem","position":3,"name":"D\u00e9couvrez de nouvelles possibilit\u00e9s gr\u00e2ce \u00e0 l&#8217;API d&#8217;interactivit\u00e9 WordPress"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/fr\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/81500","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=81500"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/81500\/revisions"}],"predecessor-version":[{"id":81551,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/81500\/revisions\/81551"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/81500\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/81500\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/81500\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/81500\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/81500\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/81500\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/81500\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/81500\/translations\/es"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/81500\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/81501"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=81500"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=81500"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=81500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}