{"id":82397,"date":"2025-11-06T08:44:15","date_gmt":"2025-11-06T07:44:15","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=82397&#038;preview=true&#038;preview_id=82397"},"modified":"2025-11-06T14:38:02","modified_gmt":"2025-11-06T13:38:02","slug":"interactivity-api-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/interactivity-api-wordpress\/","title":{"rendered":"Scopri nuove possibilit\u00e0 con l&#8217;Interactivity API di WordPress"},"content":{"rendered":"<p>Nei post precedenti di questo blog, abbiamo analizzato lo sviluppo dei blocchi di WordPress da diversi punti di vista. Abbiamo esaminato lo sviluppo di blocchi <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/\">statici<\/a> e <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/\">dinamici<\/a> e abbiamo <a href=\"https:\/\/kinsta.com\/it\/blog\/plugin-gutenberg\/\">esteso le funzionalit\u00e0 dei blocchi principali<\/a>. Tuttavia, l&#8217;approccio adottato finora ci ha permesso di creare blocchi standard che non reagivano alle interazioni degli utenti in tempo reale. Per dirla in parole povere, questi blocchi non erano interattivi.<\/p>\n<p>In questo articolo vedremo insieme un nuovo approccio allo sviluppo dei blocchi, che ci permetter\u00e0 di creare blocchi interattivi grazie a una nuova e potente API di WordPress: la <strong>WordPress Interactivity API<\/strong>. Introdotta in <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-6-5\/#interactivity-api\">WordPress 6.5<\/a>, questa API permette di creare blocchi che reagiscono in tempo reale alle interazioni degli utenti, consentendo di creare esperienze utente ricche e di rendere i siti attraenti, dinamici e coinvolgenti.<\/p>\n<p>C&#8217;\u00e8 molto di cui parlare, ma prima di iniziare diamo un&#8217;occhiata ai requisiti essenziali!<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>Cosa serve per usare l&#8217;Interactivity API<\/h2>\n<p>Poich\u00e9 l&#8217;Interactivity API \u00e8 basata su <a href=\"https:\/\/kinsta.com\/it\/blog\/react-js\/\">React<\/a>, sar\u00e0 necessario avere almeno una conoscenza di base di <a href=\"https:\/\/kinsta.com\/it\/blog\/node-js\/\">JavaScript lato server<\/a> e React, nonch\u00e9 di strumenti di compilazione come <a href=\"https:\/\/kinsta.com\/it\/blog\/cos-e-npm\/\">npm<\/a> e npx. Servir\u00e0 anche una conoscenza approfondita dello <a href=\"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/\">sviluppo di WordPress<\/a> e dell&#8217;<a href=\"https:\/\/kinsta.com\/it\/blog\/gutenberg-editor-wordpress\/\">editor di blocchi Gutenberg<\/a>.<\/p>\n<p>Una volta acquisite le competenze necessarie, servir\u00e0 un <a href=\"https:\/\/kinsta.com\/it\/blog\/mamp-alternative\/\">ambiente di sviluppo locale<\/a> che permetta di lanciare rapidamente e facilmente un sito WordPress. Noi consigliamo di usare <a href=\"https:\/\/kinsta.com\/it\/devkinsta\/\">DevKinsta<\/a>, la nostra suite di sviluppo locale progettata appositamente per WordPress. Con DevKinsta, si pu\u00f2 creare un nuovo sito WordPress locale in pochi clic e personalizzarlo nei minimi dettagli.<\/p>\n<p>Quando si crea un nuovo progetto WordPress in DevKinsta, \u00e8 possibile impostare le seguenti opzioni:<\/p>\n<ul>\n<li>Dominio di primo livello: Default .local<\/li>\n<li>Versione PHP<\/li>\n<li>Nome del database<\/li>\n<li>Abilitazione HTTPS<\/li>\n<li>Dettagli di WordPress<\/li>\n<li>Aggiornamento automatico di WordPress<\/li>\n<li>Multisito<\/li>\n<\/ul>\n<p>Inoltre, \u00e8 possibile importare un sito MyKinsta esistente da un backup.<\/p>\n<figure id=\"attachment_199777\" aria-describedby=\"caption-attachment-199777\" style=\"width: 2230px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-199777\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/10\/devkinsta-new-website.png\" alt=\"Configurazione di un sito web locale in DevKinsta\" width=\"2230\" height=\"1656\"><figcaption id=\"caption-attachment-199777\" class=\"wp-caption-text\">Configurazione di un sito web locale in DevKinsta<\/figcaption><\/figure>\n<h2>Cos&#8217;\u00e8 l&#8217;Interactivity API?<\/h2>\n<p>L&#8217;Interactivity API \u00e8 un&#8217;API nativa di WordPress che permette di aggiungere interattivit\u00e0 ai blocchi di Gutenberg e, di conseguenza, ai post e alle pagine di un sito WordPress. \u00c8 una soluzione leggera e moderna che adotta un <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/core-concepts\/the-reactive-and-declarative-mindset\/\" target=\"_blank\" rel=\"noopener noreferrer\">approccio dichiarativo<\/a> alla gestione delle interazioni con gli utenti.<\/p>\n<p>La creazione di un blocco interattivo da zero richiede competenze avanzate di sviluppo PHP e <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/core-concepts\/server-side-rendering\/\" target=\"_blank\" rel=\"noopener noreferrer\">JavaScript lato server<\/a>. Tuttavia, non \u00e8 necessario reinventare la ruota per ogni nuovo progetto, poich\u00e9 WordPress fornisce un <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block-interactive-template\/\">template per la creazione di blocchi interattivi<\/a>:<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block --template @wordpress\/create-block-interactive-template<\/code><\/pre>\n<p>Questo template include tutto ci\u00f2 che serve per creare un blocco interattivo, compresi due esempi funzionanti che potremo usare come riferimento per il nostro primo progetto: un pulsante per attivare il tema corrente e un pulsante per espandere\/collassare un paragrafo.<\/p>\n<p>Per iniziare, apriamo il nostro strumento a riga di comando preferito, navighiamo nella directory <strong>Plugins<\/strong> della nostra installazione locale di WordPress e digitiamo quanto segue:<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block your-interactive-block --template @wordpress\/create-block-interactive-template<\/code><\/pre>\n<p>Attendiamo qualche istante per il completamento dell&#8217;installazione, quindi apriamo la cartella del progetto utilizzando un <a href=\"https:\/\/kinsta.com\/it\/blog\/editor-html-gratuiti\/\">editor di codice<\/a>. Noi consigliamo di utilizzare <a href=\"https:\/\/kinsta.com\/it\/blog\/migliori-editor-di-testo\/#visual-studio-code\">Visual Studio Code<\/a>, ma va benissimo usare l&#8217;editor con cui ci si sente pi\u00f9 a proprio agio.<\/p>\n<figure id=\"attachment_199519\" aria-describedby=\"caption-attachment-199519\" style=\"width: 2086px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-199519\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/09\/interactive-block.png\" alt=\"Un blocco interattivo in Visual Studio Code\" width=\"2086\" height=\"1230\"><figcaption id=\"caption-attachment-199519\" class=\"wp-caption-text\">Il progetto a blocchi interattivi fornito da <code>@wordpress\/create-block-interactive-template<\/code><\/figcaption><\/figure>\n<p>Dalla riga di comando, navighiamo nella cartella del nuovo plugin e <a href=\"https:\/\/developer.wordpress.org\/block-editor\/getting-started\/quick-start-guide\/#basic-usage\" target=\"_blank\" rel=\"noopener noreferrer\">avviamo il server di sviluppo<\/a> con il seguente comando:<\/p>\n<pre><code class=\"language-bash\">npm start<\/code><\/pre>\n<p>Da questo momento in poi, tutte le modifiche apportate al blocco saranno visibili in tempo reale nella nostra installazione di WordPress.<\/p>\n<p>Successivamente, nella bacheca di WordPress, andiamo nella schermata dei <strong>plugin<\/strong> e attiviamo il plugin <strong>Interactivity API<\/strong> appena creato. Creiamo un nuovo post o una nuova pagina, quindi cerchiamo il <strong>blocco interattivo<\/strong> nel block inserter e aggiungiamolo al contenuto. Salviamo il post e visualizziamo l&#8217;anteprima nel frontend. Vedremo un blocco giallo contenente due pulsanti. Il primo pulsante cambia il colore di sfondo del blocco, mentre il secondo pulsante mostra o nasconde il contenuto del paragrafo.<\/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=\"Un esempio di blocco interattivo\" width=\"1405\" height=\"696\"><figcaption id=\"caption-attachment-199520\" class=\"wp-caption-text\">Un esempio di blocco interattivo fornito da <code>@wordpress\/create-block-interactive-template<\/code><\/figcaption><\/figure>\n<p>Ora che abbiamo un plugin a cui fare riferimento per gli argomenti trattati in questo articolo, possiamo andare avanti ed esplorare pi\u00f9 a fondo i blocchi interattivi.<\/p>\n<h2>La struttura dei blocchi interattivi<\/h2>\n<p>La struttura dei blocchi interattivi \u00e8 la stessa dei <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/#a-walkthrough-of-the-starter-block-scaffolding\">blocchi tradizionali<\/a>. Avremo sempre bisogno di un file <code>package.json<\/code>, un file <code>block.json<\/code>, un file <code>edit.js<\/code> e un file <code>style.scss<\/code>. Inoltre, ci servir\u00e0 un file <code>render.php<\/code> per il rendering lato server e di un file <code>view.js<\/code> per gestire l&#8217;interattivit\u00e0 del frontend.<\/p>\n<p>Diamo un&#8217;occhiata ai componenti specifici di un blocco interattivo suddividendo i singoli file del progetto iniziale.<\/p>\n<h3>package.json<\/h3>\n<p>Il file <code>package.json<\/code> viene <a href=\"https:\/\/docs.npmjs.com\/cli\/v7\/configuring-npm\/package-json\" target=\"_blank\" rel=\"noopener noreferrer\">utilizzato nei progetti Node<\/a> per identificare il progetto, gestire gli script e gestire e installare le dipendenze durante lo sviluppo.<\/p>\n<p>Di seguito \u00e8 riportato il file <code>package.json<\/code> per il blocco interattivo fornito da <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>Le sezioni <code>scripts<\/code> e <code>dependencies<\/code> sono particolarmente importanti.<\/p>\n<ul>\n<li><code>build<\/code>: compila il codice sorgente in JavaScript per la produzione. L&#8217;opzione <code>--experimental-modules<\/code> abilita il supporto per i <a href=\"https:\/\/make.wordpress.org\/core\/2024\/03\/04\/script-modules-in-6-5\/\">moduli di script<\/a> di WordPress.<\/li>\n<li><code>start<\/code>: avvia il server di sviluppo. L&#8217;opzione <code>--experimental-modules<\/code> \u00e8 nuovamente specificata.<\/li>\n<li><code>dependencies<\/code>: include le dipendenze runtime con l&#8217;ultimo pacchetto dell&#8217;Interactivity API.<\/li>\n<\/ul>\n<h3>block.json<\/h3>\n<p>Il file <code>block.json<\/code> \u00e8 il manifesto del blocco Gutenberg. Specifica i metadati, i media, gli script e gli stili da caricare. Per impostazione predefinita, <code>create-block-interactive-template<\/code> genera il seguente <code>block.json<\/code>:<\/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>I seguenti campi sono essenziali per un blocco interattivo:<\/p>\n<ul>\n<li><code>apiVersion<\/code>. La <code>3<\/code> \u00e8 l&#8217;ultima versione della Block API e supporta le ultime funzionalit\u00e0 del blocco, come i moduli di script.<\/li>\n<li><code>supports<\/code>. Specifica il supporto del blocco. <code>\"interactivity\": true<\/code> aggiunge il supporto per l&#8217;Interactivity API.<\/li>\n<li><code>render<\/code>. Specifica il file PHP responsabile del rendering nel frontend. In questo file vengono aggiunte le direttive che rendono interattivo un blocco.<\/li>\n<li><code>viewScriptModule<\/code>. Specifica il file JavaScript che contiene la logica dell&#8217;interattivit\u00e0. Questo file viene caricato solo nel frontend e solo se la pagina contiene il blocco interattivo.<\/li>\n<\/ul>\n<h3>render.php<\/h3>\n<p>Il sito <code>render.php<\/code> \u00e8 il luogo in cui si costruisce il markup di un blocco dinamico. Per rendere il blocco interattivo, \u00e8 necessario aggiungere degli attributi che rendano interattivi gli elementi DOM del blocco.<\/p>\n<p>Il file <code>render.php<\/code> nel progetto iniziale ha il seguente aspetto:<\/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>Ecco cosa fa questo codice:<\/p>\n<ul>\n<li><code>wp_interactivity_state<\/code>. Ottiene e\/o imposta lo <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_interactivity_state\/\" target=\"_blank\" rel=\"noopener noreferrer\">stato globale iniziale<\/a> di uno store 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\">Abilita le Interactivity API<\/a> sull&#8217;elemento DOM e sui suoi child. Il suo valore deve essere lo spazio dei nomi unico del plugin o blocco.<\/li>\n<li><code>wp_interactivity_data_wp_context()<\/code>. Genera la direttiva <code>data-wp-context<\/code>, che <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_interactivity_data_wp_context\/\" target=\"_blank\" rel=\"noopener noreferrer\">fornisce uno stato locale<\/a> a un nodo HTML specifico e ai suoi child.<\/li>\n<li><code>data-wp-watch<\/code>. <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/#wp-watch\">Esegue un callback<\/a> quando viene creato un nodo e ogni volta che lo stato o il contesto cambia.<\/li>\n<li><code>data-wp-class--dark-theme<\/code>. Aggiunge o rimuove la classe <code>dark-theme<\/code> all&#8217;elemento 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\">Esegue il codice in modo sincrono<\/a> sull&#8217;evento 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\">Imposta il testo interno<\/a> dell&#8217;elemento HTML.<\/li>\n<li><code>data-wp-bind--aria-expanded<\/code> e <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\">Imposta gli attributi HTML<\/a> (<code>aria-expanded<\/code> e <code>hidden<\/code>) sugli elementi corrispondenti in base a un valore booleano o stringa.<\/li>\n<\/ul>\n<h3>view.js<\/h3>\n<p>Questo file <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/#on-the-client-side\">definisce lo Store<\/a> che contiene la logica e i dati necessari per il comportamento del blocco, compresi lo stato, le azioni e i callback.<\/p>\n<p>Di seguito \u00e8 riportato il file <code>view.js<\/code> generato dal progetto iniziale:<\/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 funzione principale utilizzata per creare e registrare lo stato globale e la logica del blocco.<\/li>\n<li><code>getContext<\/code>: una funzione utilizzata all&#8217;interno di azioni e callback per accedere allo stato locale ( <code>context<\/code>) dell&#8217;elemento DOM che ha scatenato l&#8217;evento.<\/li>\n<li><code>state<\/code>: definisce i dati reattivi globali del blocco.<\/li>\n<li><code>actions<\/code>: include le funzioni che definiscono la logica e modificano lo stato.<\/li>\n<li><code>callbacks<\/code>: include le funzioni da eseguire in risposta a eventi specifici o a cambiamenti di stato automatici.<\/li>\n<\/ul>\n<p>\u00c8 un sacco di roba, ma niente panico! Tutto diventer\u00e0 pi\u00f9 chiaro dopo aver letto le sezioni seguenti.<\/p>\n<p>Ora esaminiamo i concetti chiave dell&#8217;Interactivity API: direttive, store, stato, azioni e callback.<\/p>\n<h2>Direttive dell&#8217;Interactivity API<\/h2>\n<p>Come altre librerie frontend come Alpine.js e <a href=\"https:\/\/kinsta.com\/it\/argomenti\/vue-js\/\">Vue.js<\/a>, l&#8217;Interactivity API utilizza speciali attributi HTML che permettono di rispondere agli eventi della pagina, aggiornare lo stato dell&#8217;applicazione, manipolare il DOM, applicare stili CSS, gestire gli input dell&#8217;utente e molto altro ancora.<\/p>\n<p>Questi attributi sono chiamati <strong>direttive<\/strong> e permettono di collegare il markup alla logica JavaScript sottostante.<\/p>\n<p>Ecco qui di seguito un elenco delle direttive pi\u00f9 utilizzate.<\/p>\n<table>\n<thead>\n<tr>\n<th style=\"width: 22.5%\">Funzione<\/th>\n<th style=\"width: 22.5%\">Direttiva<\/th>\n<th>Descrizione<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Attivazione\/Spazio dei nomi<\/td>\n<td><code>data-wp-interactive<\/code><\/td>\n<td>Attiva l&#8217;API per l&#8217;elemento e i suoi child. Il valore deve essere impostato sull&#8217;identificatore unico del plugin.<\/td>\n<\/tr>\n<tr>\n<td>Stato locale<\/td>\n<td><code>data-wp-context<\/code><\/td>\n<td>Fornisce uno stato locale (&#8220;contesto&#8221;) per l&#8217;elemento corrente e tutti i suoi child. Accetta un oggetto JSON. Consigliamo di utilizzare <code>wp_interactivity_data_wp_context()<\/code> per impostarlo in PHP (in genere <code>render.php<\/code>).<\/td>\n<\/tr>\n<tr>\n<td>Vincolo dell&#8217;attributo<\/td>\n<td><code>data-wp-bind--[attribute]<\/code><\/td>\n<td>Imposta un attributo HTML (ad esempio, <code>disabled<\/code>, <code>value<\/code>) in base a uno stato reattivo o a un valore di contesto (un valore booleano o una stringa).<\/td>\n<\/tr>\n<tr>\n<td>Modifica del testo<\/td>\n<td><code>data-wp-text<\/code><\/td>\n<td>Imposta il contenuto del testo interno dell&#8217;elemento. Accetta solo stringhe.<\/td>\n<\/tr>\n<tr>\n<td>Alternanza di classi CSS<\/td>\n<td><code>data-wp-class--[classname]<\/code><\/td>\n<td>Aggiunge o rimuove una classe CSS in base a un valore booleano.<\/td>\n<\/tr>\n<tr>\n<td>Stile in linea<\/td>\n<td><code>data-wp-style--[css-property]<\/code><\/td>\n<td>Aggiunge o rimuove una classe di stile in linea in base a un valore booleano.<\/td>\n<\/tr>\n<tr>\n<td>Gestione degli eventi<\/td>\n<td><code>data-wp-on--[event]<\/code><\/td>\n<td>Esegue codice in risposta a eventi DOM standard come <code>click<\/code> o <code>mouseover<\/code>.<\/td>\n<\/tr>\n<tr>\n<td>Esecuzione iniziale<\/td>\n<td><code>data-wp-init<\/code><\/td>\n<td>Esegue una funzione di callback una sola volta, solo quando il nodo viene creato.<\/td>\n<\/tr>\n<tr>\n<td>Osservazione dello stato<\/td>\n<td><code>data-wp-watch<\/code><\/td>\n<td>Esegue una callback quando il nodo viene creato e di nuovo ogni volta che lo stato o il contesto cambia.<\/td>\n<\/tr>\n<tr>\n<td>Iterazione dell&#8217;elenco<\/td>\n<td><code>data-wp-each<\/code><\/td>\n<td>Esegue il rendering di un elenco di elementi.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Per un elenco completo delle direttive, dai un&#8217;occhiata alle <a href=\"https:\/\/make.wordpress.org\/core\/2024\/03\/04\/interactivity-api-dev-note\/\">note di sviluppo dell&#8217;Interactivity API<\/a> e il <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/\">riferimento dell&#8217;API<\/a>.<\/p>\n<h2>Stato globale, contesto locale e stato derivato<\/h2>\n<p>Prima di iniziare a usare l&#8217;Interactivity API, \u00e8 essenziale familiarizzare con i <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/core-concepts\/undestanding-global-state-local-context-and-derived-state\/\">concetti fondamentali della gestione dello stato<\/a> nello sviluppo frontend. Chi sviluppa regolarmente con React, Vue o Angular avr\u00e0 gi\u00e0 familiarit\u00e0 con questi concetti. Per coloro che sono nuovi a queste tecnologie, pu\u00f2 essere utile fornire alcune definizioni generali.<\/p>\n<h3>Stato globale<\/h3>\n<p>Lo <strong>stato globale<\/strong> si riferisce all&#8217;insieme di dati accessibili da quasi tutti i componenti di un&#8217;applicazione. Nel caso dell&#8217;Interactivity API, ad esempio, lo stato globale influisce su tutti i blocchi interattivi della pagina, mantenendoli sincronizzati. Ad esempio, quando un utente aggiunge un prodotto al suo carrello, questo si riflette nel blocco del carrello.<\/p>\n<p>Quando si utilizza l&#8217;Interactivity API, \u00e8 necessario impostare i valori iniziali dello stato globale sul server utilizzando la funzione <code>wp_interactivity_state()<\/code>. Nel progetto iniziale descritto sopra, questa funzione \u00e8 utilizzata nel file <code>render.php<\/code> come segue:<\/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\">Questa funzione<\/a> accetta due argomenti:<\/p>\n<ul>\n<li>Un identificatore unico per lo spazio dei nomi del negozio. In questo caso, <code>create-block<\/code>.<\/li>\n<li>Un array di dati che verr\u00e0 unito allo spazio dei nomi del negozio esistente, se questo esiste.<\/li>\n<\/ul>\n<p>I valori iniziali dello stato globale vengono poi utilizzati per il rendering della pagina. \u00c8 possibile accedere ai valori dello stato globale direttamente utilizzando <code>state<\/code> nei valori degli attributi delle direttive, come nel codice seguente:<\/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 funzione <code>store()<\/code> fornisce il principale punto di accesso allo stato globale da JavaScript, limitatamente allo spazio dei nomi selezionato. Tornando al codice del progetto iniziale, la funzione <code>store()<\/code> viene utilizzata nel file <code>view.js<\/code> come segue:<\/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>Per accedere allo stato globale, si pu\u00f2 utilizzare la propriet\u00e0 <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>Contesto locale<\/h3>\n<p>Il <strong>contesto locale<\/strong> \u00e8 un dato a cui pu\u00f2 accedere solo un componente specifico e i suoi child diretti. Un blocco interattivo di WordPress fornisce uno stato indipendente per il blocco e i suoi elementi annidati.<\/p>\n<p>Quando utilizziamo l&#8217;Interactivity API, possiamo accedere al contesto locale utilizzando la funzione <code>getContext()<\/code>. Facendo riferimento al progetto iniziale, quando l&#8217;utente clicca sul pulsante Toggle, viene attivata l&#8217;azione <code>toggleOpen()<\/code> che accede al contesto locale del componente:<\/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>: recupera l&#8217;oggetto Stato locale del blocco. Le propriet\u00e0 di questo oggetto sono definite nel markup del componente (<code>render.php<\/code>) utilizzando la funzione <code>wp_interactivity_data_wp_context()<\/code>.<\/li>\n<li><code>context.isOpen = ! context.isOpen;<\/code>: cambia il valore della propriet\u00e0 <code>isOpen<\/code> nel contesto locale del componente.<\/li>\n<\/ul>\n<h3>Stato derivato<\/h3>\n<p>Lo <strong>stato derivato<\/strong> si riferisce ai dati calcolati dinamicamente dallo stato globale o locale esistente.<\/p>\n<p>Ad esempio, diamo un&#8217;occhiata al codice del file <code>view.js<\/code>, in particolare in questa sezione:<\/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>Questo blocco definisce lo stato derivato <code>themeText<\/code> all&#8217;interno dello stato globale definito nello spazio dei nomi <code>create-block<\/code>.<\/p>\n<ul>\n<li><code>get themeText()<\/code> non \u00e8 un valore fisso, ma piuttosto una funzione che viene eseguita ogni volta che si tenta di leggere la propriet\u00e0 <code>themeText<\/code>. Non deve essere invocata come una normale funzione perch\u00e9 l&#8217;Interactivity API la tratta come una propriet\u00e0 di stato e ricalcola automaticamente il suo valore ogni volta che i valori delle altre propriet\u00e0 di stato cambiano. Nel codice precedente, il valore della propriet\u00e0 <code>themeText<\/code> viene ricalcolato ogni volta che il valore della propriet\u00e0 <code>isDark<\/code> cambia. Se <code>state.isDark<\/code> \u00e8 <code>true<\/code>, allora <code>themeText<\/code> assume il valore di <code>state.darkText<\/code>; altrimenti, assume il valore di <code>state.lightText<\/code>.<\/li>\n<\/ul>\n<p>Per una panoramica pi\u00f9 completa dei concetti descritti in questa sezione, puoi consultare <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\">Comprendere lo stato globale, il contesto locale e lo stato derivato<\/a>.<\/p>\n<h2>Azioni e callback<\/h2>\n<p>Le azioni e i callback determinano la risposta all&#8217;interazione dell&#8217;utente e ai cambiamenti di stato.<\/p>\n<p>La sezione <code>actions<\/code> di un blocco interattivo contiene funzioni che vengono eseguite in risposta agli eventi generati dall&#8217;utente. Queste funzioni servono principalmente a modificare lo stato locale o globale del componente. Prendiamo il seguente codice dal file <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>In questa sezione di codice, la funzione <code>toggleOpen()<\/code> utilizza <code>getContext()<\/code> per accedere al contesto Locale del blocco che ha attivato l&#8217;azione per modificare il valore della propriet\u00e0 <code>isOpen<\/code>.<\/li>\n<\/ul>\n<p>Allo stesso modo, possiamo accedere allo stato Globale:<\/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 funzione <code>toggleTheme()<\/code> accede direttamente all&#8217;oggetto globale <code>state<\/code> e modifica il valore della propriet\u00e0 <code>isDark<\/code>.<\/li>\n<\/ul>\n<p>Le azioni vengono attivate tramite la direttiva <code>data-wp-on--[event]<\/code>. Ad esempio, nel file <code>render.php<\/code> troveremo il seguente pulsante:<\/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>In questo codice HTML, l&#8217;attributo <code>data-wp-on--click<\/code> attiva l&#8217;azione <code>toggleOpen<\/code> quando l&#8217;utente clicca sul pulsante.<\/li>\n<\/ul>\n<p>La sezione <code>callbacks<\/code> contiene funzioni che vengono eseguite automaticamente quando i dati da cui dipendono cambiano. Il loro scopo \u00e8 quello di produrre effetti collaterali in risposta a un cambiamento di stato.<\/p>\n<p>Nel progetto di base generato da <code>create-block-interactive-template<\/code>, troveremo il seguente callback:<\/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 funzione <code>logIsOpen<\/code> utilizza la variabile <code>isOpen<\/code>, disponibile nel contesto Locale.<\/li>\n<li>Il callback recupera il valore di <code>isOpen<\/code> utilizzando <code>getContext()<\/code>.<\/li>\n<li>Ogni volta che il valore di <code>isOpen<\/code> cambia, la funzione lancia un messaggio alla console del browser.<\/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=\"size-full wp-image-199639\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/10\/toggle-is-open.png\" alt=\"Un messaggio nella console informa l'utente della modifica nel contesto locale.\" width=\"1596\" height=\"727\"><figcaption id=\"caption-attachment-199639\" class=\"wp-caption-text\">Un messaggio nella console informa l&#8217;utente della modifica del contesto locale.<\/figcaption><\/figure>\n<h2>Come costruire un blocco interattivo<\/h2>\n<p>Ora che abbiamo affrontato la teoria, \u00e8 il momento di iniziare a divertirsi con il codice! Nella seconda parte di questa guida, impareremo a creare un blocco interattivo che permetta agli utenti di aggiungere prodotti a un carrello ideale, con quantit\u00e0 e totali che si aggiornano automaticamente. Si tratta di un esempio dimostrativo, ma speriamo possa fornire una chiara comprensione di come utilizzare lo stato, le azioni e i callback.<\/p>\n<figure id=\"attachment_199768\" aria-describedby=\"caption-attachment-199768\" style=\"width: 1512px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-199768\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/10\/interactive-counter-editor-view.png\" alt=\"Il blocco interattivo nell'editor\" width=\"1512\" height=\"1204\"><figcaption id=\"caption-attachment-199768\" class=\"wp-caption-text\">Il blocco interattivo nell&#8217;editor<\/figcaption><\/figure>\n<p>Creeremo un blocco chiamato <strong>Interactive Counter<\/strong> utilizzando <code>create-block-interactive-template<\/code>. Per iniziare, apriamo lo uo strumento a riga di comando e digitiamo quanto segue:<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block interactive-counter --template @wordpress\/create-block-interactive-template<\/code><\/pre>\n<p>Successivamente, navighiamo nella directory del nuovo progetto ed eseguiamo la prima compilazione.<\/p>\n<pre><code class=\"language-bash\">cd interactive-counter && npm run build<\/code><\/pre>\n<p>Apriamo ora il progetto nell&#8217;editor di codice. Nella cartella <code>\/src<\/code>, cerchiamo il file <code>block.json<\/code>. Dovrebbe avere un aspetto simile a questo:<\/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>Personalizzalo come vuoi, ma assicurati di non modificare i campi essenziali descritti sopra.<\/p>\n<h3>Il file edit.js<\/h3>\n<p>Il passo successivo consiste nel creare il blocco che apparir\u00e0 nell&#8217;editor. Per farlo, dovremo modificare il file <code>\/src\/edit.js<\/code>. Apriamo il file e modifichiamolo come segue:<\/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>Questo codice genera un blocco personalizzato nel back-end. Il blocco sar\u00e0 interattivo solo nel front-end. Per maggiori dettagli sul file <code>\/src\/edit.js<\/code>, consulta le nostre <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/\">guide<\/a> <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/\">allo sviluppo dei blocchi<\/a> Gutenberg.<\/p>\n<h3>Il file render.php<\/h3>\n<p>Il prossimo file da modificare \u00e8 <code>\/src\/render.php<\/code>. Apriamo il file e sostituiamo il codice esistente con il seguente:<\/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>Ecco cosa fa questo codice:<\/p>\n<ul>\n<li>Innanzitutto, crea un array di prodotti codificati. Ogni prodotto ha un ID, un nome e un prezzo.<\/li>\n<li>Poi inizializza lo stato globale con <code>wp_interactivity_state<\/code>. Il primo parametro \u00e8 il nome del negozio, che deve corrispondere a quello utilizzato in <code>view.js<\/code>.<\/li>\n<li>Quindi, mappa il precedente array di prodotti in un nuovo array <code>products<\/code>, aggiungendo quantit\u00e0 e subtotale alle propriet\u00e0 dell&#8217;array originale. Questo nuovo array fornisce la struttura di dati che verr\u00e0 utilizzata in <code>view.js<\/code>.<\/li>\n<li><code>vatRate<\/code> imposta il valore predefinito per il calcolo delle tasse.<\/li>\n<\/ul>\n<p>Quindi, aggiungiamo quanto segue al codice precedente:<\/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>Ecco cosa fa questo codice:<\/p>\n<ul>\n<li>La funzione <code>get_block_wrapper_attributes()<\/code> nel contenitore <code>div<\/code> \u00e8 una funzione di WordPress che genera gli attributi standard di un blocco. In questo caso, genera l&#8217;attributo di classe <code>\"wp-block-create-block-interactive-counter\"<\/code>.<\/li>\n<li>L&#8217;attributo <code>data-wp-interactive<\/code> rende questo blocco interattivo.<\/li>\n<li>L&#8217;attributo <code>data-wp-init<\/code> attiva il callback <code>init<\/code> definito in <code>view.js<\/code>.<\/li>\n<li>Il ciclo <code>foreach<\/code> genera un elemento dell&#8217;elenco per ogni prodotto presente nell&#8217;array <code>products<\/code>.<\/li>\n<li><code>data-wp-context<\/code> definisce il contesto locale del blocco.<\/li>\n<li><code>data-wp-bind<\/code> lega il valore di <code>data-wp-context.quantity<\/code> alla propriet\u00e0 globale <code>state.products[$index].quantity<\/code>.<\/li>\n<li>Lo stesso accade nella riga sottostante con il subtotale.<\/li>\n<li>I due pulsanti seguenti attivano le azioni <code>decrement<\/code> e <code>increment<\/code> grazie all&#8217;attributo <code>data-wp-on--click<\/code>.<\/li>\n<li>L&#8217;attributo <code>data-wp-text<\/code> di <code>span<\/code> aggiorna il contenuto dell&#8217;elemento in base al valore corrente di <code>context.quantity<\/code>.<\/li>\n<\/ul>\n<p>Il resto del codice si spiega da solo, quindi passiamo al file successivo.<\/p>\n<h3>Il file view.js<\/h3>\n<p>Questo file contiene la logica del blocco interattivo.<\/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>Questo file definisce l&#8217;archivio dello spazio dei nomi <code>interactive-counter<\/code>. Gestisce lo stato, le azioni e i callback:<\/p>\n<pre><code class=\"language-javascript\">store('interactive-counter', {\n\tstate: { ... },\n\tactions: { ... },\n\tcallbacks: { ... },\n});<\/code><\/pre>\n<p>Diamo un&#8217;occhiata pi\u00f9 da vicino.<\/p>\n<ul>\n<li><code>state<\/code>: definisce tre propriet\u00e0 di stato calcolate (getter): <code>subtotal<\/code>, <code>vat<\/code>, e <code>total<\/code>. Queste funzioni recuperano i valori dallo stato globale e calcolano i valori da restituire.<\/li>\n<li><code>actions<\/code>: definisce due funzioni eseguite sugli eventi: <code>increment<\/code> e <code>decrement<\/code>. Queste funzioni recuperano l&#8217;array <code>products<\/code> dallo stato globale, recuperano il prodotto corrente dal contesto locale in base a <code>context.productId<\/code>, aggiornano i valori delle propriet\u00e0 del prodotto corrente (<code>quantity<\/code> e <code>subtotal<\/code>) e sincronizzano il contesto locale con i nuovi valori.<\/li>\n<li><code>callbacks<\/code>: definisce un callback <code>init<\/code> per l&#8217;inizializzazione.<\/li>\n<\/ul>\n<p>L&#8217;immagine seguente mostra il blocco interattivo nel 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=\"size-full wp-image-199769\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/10\/interactive-counter.png\" alt=\"An interactive counter built with the Interactivity API\" width=\"1364\" height=\"896\"><figcaption id=\"caption-attachment-199769\" class=\"wp-caption-text\">Un contatore interattivo costruito con l&#8217;Interactivity API<\/figcaption><\/figure>\n<h2>Riepilogo<\/h2>\n<p>In questo articolo abbiamo introdotto le caratteristiche principali dell&#8217;Interactivity API di WordPress. Abbiamo approfondito concetti chiave come Stato globale, contesto locale, direttive, azioni e callback. Abbiamo imparato a creare un blocco interattivo da zero utilizzando <code>@wordpress\/create-block-interactive-template<\/code> e abbiamo messo in pratica tutto questo creando un blocco reale che interagisce con gli input dell&#8217;utente.<\/p>\n<p>Speriamo di averti fornito gli strumenti e le conoscenze necessarie per creare siti web WordPress fantastici, dinamici e interattivi utilizzando l&#8217;Interactivity API di WordPress.<\/p>\n<p>Buona codifica!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nei post precedenti di questo blog, abbiamo analizzato lo sviluppo dei blocchi di WordPress da diversi punti di vista. Abbiamo esaminato lo sviluppo di blocchi statici &#8230;<\/p>\n","protected":false},"author":36,"featured_media":82398,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[26232,25873],"class_list":["post-82397","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-sviluppo-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>Scopri nuove possibilit\u00e0 con l&#039;Interactivity API di WordPress<\/title>\n<meta name=\"description\" content=\"L&#039;Interactivity API consente di creare siti WordPress di nuova generazione. Inizia a creare blocchi interattivi con la nostra guida completa!\" \/>\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\/it\/blog\/interactivity-api-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Scopri nuove possibilit\u00e0 con l&#039;Interactivity API di WordPress\" \/>\n<meta property=\"og:description\" content=\"L&#039;Interactivity API consente di creare siti WordPress di nuova generazione. Inizia a creare blocchi interattivi con la nostra guida completa!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/interactivity-api-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-06T07:44:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-06T13:38:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/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;Interactivity API consente di creare siti WordPress di nuova generazione. Inizia a creare blocchi interattivi con la nostra guida completa!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/11\/how-to-create-interactive-blocks.png\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/interactivity-api-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/interactivity-api-wordpress\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Scopri nuove possibilit\u00e0 con l&#8217;Interactivity API di WordPress\",\"datePublished\":\"2025-11-06T07:44:15+00:00\",\"dateModified\":\"2025-11-06T13:38:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/interactivity-api-wordpress\/\"},\"wordCount\":2934,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/interactivity-api-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/11\/how-to-create-interactive-blocks.png\",\"inLanguage\":\"it-IT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/interactivity-api-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/interactivity-api-wordpress\/\",\"name\":\"Scopri nuove possibilit\u00e0 con l'Interactivity API di WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/interactivity-api-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/interactivity-api-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/11\/how-to-create-interactive-blocks.png\",\"datePublished\":\"2025-11-06T07:44:15+00:00\",\"dateModified\":\"2025-11-06T13:38:02+00:00\",\"description\":\"L'Interactivity API consente di creare siti WordPress di nuova generazione. Inizia a creare blocchi interattivi con la nostra guida completa!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/interactivity-api-wordpress\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/interactivity-api-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/interactivity-api-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/11\/how-to-create-interactive-blocks.png\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/11\/how-to-create-interactive-blocks.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/interactivity-api-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"API\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/api\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Scopri nuove possibilit\u00e0 con l&#8217;Interactivity API di WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"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\/it\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/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\/it\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Scopri nuove possibilit\u00e0 con l'Interactivity API di WordPress","description":"L'Interactivity API consente di creare siti WordPress di nuova generazione. Inizia a creare blocchi interattivi con la nostra guida completa!","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\/it\/blog\/interactivity-api-wordpress\/","og_locale":"it_IT","og_type":"article","og_title":"Scopri nuove possibilit\u00e0 con l'Interactivity API di WordPress","og_description":"L'Interactivity API consente di creare siti WordPress di nuova generazione. Inizia a creare blocchi interattivi con la nostra guida completa!","og_url":"https:\/\/kinsta.com\/it\/blog\/interactivity-api-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2025-11-06T07:44:15+00:00","article_modified_time":"2025-11-06T13:38:02+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/11\/how-to-create-interactive-blocks.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"L'Interactivity API consente di creare siti WordPress di nuova generazione. Inizia a creare blocchi interattivi con la nostra guida completa!","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/11\/how-to-create-interactive-blocks.png","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Carlo Daniele","Tempo di lettura stimato":"17 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/interactivity-api-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/interactivity-api-wordpress\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Scopri nuove possibilit\u00e0 con l&#8217;Interactivity API di WordPress","datePublished":"2025-11-06T07:44:15+00:00","dateModified":"2025-11-06T13:38:02+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/interactivity-api-wordpress\/"},"wordCount":2934,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/interactivity-api-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/11\/how-to-create-interactive-blocks.png","inLanguage":"it-IT"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/interactivity-api-wordpress\/","url":"https:\/\/kinsta.com\/it\/blog\/interactivity-api-wordpress\/","name":"Scopri nuove possibilit\u00e0 con l'Interactivity API di WordPress","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/interactivity-api-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/interactivity-api-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/11\/how-to-create-interactive-blocks.png","datePublished":"2025-11-06T07:44:15+00:00","dateModified":"2025-11-06T13:38:02+00:00","description":"L'Interactivity API consente di creare siti WordPress di nuova generazione. Inizia a creare blocchi interattivi con la nostra guida completa!","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/interactivity-api-wordpress\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/interactivity-api-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/interactivity-api-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/11\/how-to-create-interactive-blocks.png","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2025\/11\/how-to-create-interactive-blocks.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/interactivity-api-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"API","item":"https:\/\/kinsta.com\/it\/argomenti\/api\/"},{"@type":"ListItem","position":3,"name":"Scopri nuove possibilit\u00e0 con l&#8217;Interactivity API di WordPress"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","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\/it\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/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\/it\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/82397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=82397"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/82397\/revisions"}],"predecessor-version":[{"id":82404,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/82397\/revisions\/82404"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/82397\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/82397\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/82397\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/82397\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/82397\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/82397\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/82397\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/82397\/translations\/es"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/82397\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/82398"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=82397"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=82397"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=82397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}