{"id":80825,"date":"2025-11-06T08:36:07","date_gmt":"2025-11-06T07:36:07","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=80825&#038;preview=true&#038;preview_id=80825"},"modified":"2025-11-10T11:31:45","modified_gmt":"2025-11-10T10:31:45","slug":"api-interactivity-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/api-interactivity-wordpress\/","title":{"rendered":"Descubre nuevas posibilidades con la API Interactivity de WordPress"},"content":{"rendered":"<p>En entradas anteriores de este blog, hemos explorado el desarrollo de bloques de WordPress desde varios \u00e1ngulos. Hemos examinado el desarrollo de bloques <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/\">est\u00e1ticos<\/a> y <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/\">din\u00e1micos<\/a> y hemos <a href=\"https:\/\/kinsta.com\/es\/blog\/plugin-gutenberg\/\">ampliado la funcionalidad de los bloques del n\u00facleo<\/a>. Sin embargo, el enfoque que hemos adoptado hasta ahora nos ha permitido esencialmente crear bloques est\u00e1ndar que no reaccionaban a las interacciones del usuario en tiempo real. En pocas palabras, estos bloques no eran interactivos.<\/p>\n<p>En este art\u00edculo, exploraremos un nuevo enfoque del desarrollo de bloques, que nos permitir\u00e1 crear bloques interactivos gracias a una nueva y potente API de WordPress: <strong>la API Interactivity de WordPress<\/strong>. Introducida en <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-6-5\/#interactivity-api\">WordPress 6.5<\/a>, esta API te permite crear bloques que reaccionan en tiempo real a las interacciones del usuario, permiti\u00e9ndote crear experiencias de usuario enriquecidas y hacer que tus sitios sean atractivos, din\u00e1micos y atractivos.<\/p>\n<p>Hay mucho de lo que hablar, pero antes de empezar, \u00a1echemos un vistazo a los requisitos esenciales!<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>Lo que necesitas antes de empezar con la API Interactivity<\/h2>\n<p>Como la API Interactivity se basa en <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-react-js\/\">React<\/a>, necesitar\u00e1s al menos conocimientos b\u00e1sicos de <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-node-js\/\">JavaScript del lado del servidor<\/a> y de React, as\u00ed como de herramientas de construcci\u00f3n como <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-npm\/\">npm<\/a> y npx. Tambi\u00e9n necesitar\u00e1s un conocimiento profundo sobre el <a href=\"https:\/\/kinsta.com\/es\/blog\/desarrollo-wp-scripts\/\">desarrollo de WordPress<\/a> y del <a href=\"https:\/\/kinsta.com\/es\/blog\/gutenberg-wordpress-editor\/\">editor de bloques Gutenberg<\/a>.<\/p>\n<p>Una vez que hayas adquirido los conocimientos necesarios, necesitar\u00e1s un <a href=\"https:\/\/kinsta.com\/es\/blog\/mamp-alternativas\/\">entorno de desarrollo local<\/a> que te permita poner en marcha un sitio de WordPress de forma r\u00e1pida y sencilla. Te recomendamos <a href=\"https:\/\/kinsta.com\/es\/devkinsta\/\">DevKinsta<\/a>, nuestra suite de desarrollo local dise\u00f1ada espec\u00edficamente para WordPress. Con DevKinsta, puedes crear un nuevo sitio local de WordPress en unos pocos clics y personalizarlo al detalle.<\/p>\n<p>Cuando creas un nuevo proyecto de WordPress en DevKinsta, puedes configurar las siguientes opciones:<\/p>\n<ul>\n<li>Dominio de nivel superior: Por defecto .local<\/li>\n<li>Versi\u00f3n PHP<\/li>\n<li>Nombre de la base de datos<\/li>\n<li>Activar HTTPS<\/li>\n<li>Detalles de WordPress<\/li>\n<li>Actualizaci\u00f3n autom\u00e1tica de WordPress<\/li>\n<li>Multisitio<\/li>\n<\/ul>\n<p>Adem\u00e1s, puedes importar un sitio web MyKinsta existente desde una copia de seguridad.<\/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=\"Configurando un sitio web local en DevKinsta\" width=\"2230\" height=\"1656\"><figcaption id=\"caption-attachment-199777\" class=\"wp-caption-text\">Configurando un sitio web local en DevKinsta<\/figcaption><\/figure>\n<h2>\u00bfQu\u00e9 es la API Interactivity?<\/h2>\n<p>La API Interactivity es una API nativa de WordPress que te permite a\u00f1adir interactividad a los bloques de Gutenberg y, en consecuencia, a las entradas y p\u00e1ginas de un sitio de WordPress. Es una soluci\u00f3n ligera y moderna que adopta 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\">enfoque declarativo<\/a> para gestionar las interacciones de los usuarios.<\/p>\n<p>Crear un bloque interactivo desde cero requiere conocimientos avanzados de desarrollo PHP y <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/core-concepts\/server-side-rendering\/\" target=\"_blank\" rel=\"noopener noreferrer\">JavaScript del lado del servidor<\/a>. Sin embargo, no es necesario reinventar la rueda con cada nuevo proyecto, ya que WordPress proporciona una <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block-interactive-template\/\">plantilla para crear bloques interactivos<\/a>:<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block --template @wordpress\/create-block-interactive-template<\/code><\/pre>\n<p>Esta plantilla incluye todo lo que necesitas para crear un bloque interactivo, incluidos dos ejemplos pr\u00e1cticos que puedes utilizar como referencia para tu primer proyecto: un bot\u00f3n para cambiar el tema actual y un bot\u00f3n para expandir\/contraer un p\u00e1rrafo.<\/p>\n<p>Para empezar, abre tu herramienta de l\u00ednea de comandos favorita, navega hasta el directorio <strong>Plugins<\/strong> de tu instalaci\u00f3n local de WordPress y escribe lo siguiente:<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block your-interactive-block --template @wordpress\/create-block-interactive-template<\/code><\/pre>\n<p>Espera unos instantes a que se complete la instalaci\u00f3n y, a continuaci\u00f3n, abre la carpeta del proyecto con tu <a href=\"https:\/\/kinsta.com\/es\/blog\/editores-html-gratuitos\/\">editor de c\u00f3digo<\/a> preferido. Recomendamos utilizar <a href=\"https:\/\/kinsta.com\/es\/blog\/mejores-editores-texto\/#visual-studio-code\">Visual Studio Code<\/a>, pero puedes utilizar cualquier editor con el que te sientas m\u00e1s c\u00f3modo.<\/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=\"Un bloque interactivo en Visual Studio Code\" width=\"2086\" height=\"1230\"><figcaption id=\"caption-attachment-199519\" class=\"wp-caption-text\">El proyecto de bloque interactivo proporcionado por <code>@wordpress\/create-block-interactive-template<\/code><\/figcaption><\/figure>\n<p>Desde la l\u00ednea de comandos, navega hasta la carpeta del nuevo plugin e <a href=\"https:\/\/developer.wordpress.org\/block-editor\/getting-started\/quick-start-guide\/#basic-usage\" target=\"_blank\" rel=\"noopener noreferrer\">inicia el servidor de desarrollo<\/a> utilizando el siguiente comando:<\/p>\n<pre><code class=\"language-bash\">npm start<\/code><\/pre>\n<p>A partir de ahora, cualquier cambio que realices en tu bloque ser\u00e1 visible en tiempo real en tu instalaci\u00f3n de WordPress.<\/p>\n<p>A continuaci\u00f3n, en tu admin de WordPress, navega a la pantalla <strong>Plugins<\/strong> y activa el plugin <strong>Interactivity API<\/strong> que acabas de crear. Crea una nueva entrada o p\u00e1gina, luego busca <strong>Tu bloque interactivo<\/strong> en el insertador de bloques y a\u00f1\u00e1delo a tu contenido. Guarda la entrada y previsual\u00edzala en el frontend. Ver\u00e1s un bloque amarillo que contiene dos botones. El primer bot\u00f3n cambia el color de fondo del bloque, y el segundo muestra u oculta el contenido del p\u00e1rrafo.<\/p>\n<figure id=\"attachment_199520\" aria-describedby=\"caption-attachment-199520\" style=\"width: 1405px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-199520 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/09\/interactivity-api-example.png\" alt=\"Un ejemplo de bloque interactivo\" width=\"1405\" height=\"696\"><figcaption id=\"caption-attachment-199520\" class=\"wp-caption-text\">Un ejemplo de bloque interactivo proporcionado por <code>@wordpress\/create-block-interactive-template<\/code><\/figcaption><\/figure>\n<p>Ahora que tienes un plugin de referencia para los temas tratados en este art\u00edculo, podemos seguir adelante y explorar los bloques interactivos m\u00e1s a fondo.<\/p>\n<h2>La estructura de los bloques interactivos<\/h2>\n<p>La estructura de los bloques interactivos es la misma que la de los <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-gutenberg\/#a-walkthrough-of-the-starter-block-scaffolding\">bloques tradicionales<\/a>. Seguir\u00e1s necesitando un archivo <code>package.json<\/code>, un archivo <code>block.json<\/code>, un archivo <code>edit.js<\/code> y un archivo <code>style.scss<\/code>. Adem\u00e1s, necesitar\u00e1s un archivo <code>render.php<\/code> para la renderizaci\u00f3n del lado del servidor y un archivo <code>view.js<\/code> para gestionar la interactividad del frontend.<\/p>\n<p>Echemos un vistazo a los componentes espec\u00edficos de un bloque interactivo desglosando los archivos individuales del proyecto inicial.<\/p>\n<h3>package.json<\/h3>\n<p>El archivo <code>package.json<\/code> se <a href=\"https:\/\/docs.npmjs.com\/cli\/v7\/configuring-npm\/package-json\" target=\"_blank\" rel=\"noopener noreferrer\">utiliza en los proyectos Node<\/a> para identificar tu proyecto, gestionar scripts y gestionar e instalar dependencias durante el desarrollo.<\/p>\n<p>A continuaci\u00f3n se muestra el <code>package.json<\/code> para el bloque interactivo proporcionado por el <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>Las secciones <code>scripts<\/code> y <code>dependencies<\/code> son especialmente importantes en este caso.<\/p>\n<ul>\n<li><code>build<\/code>: Compila el c\u00f3digo fuente en JavaScript para producci\u00f3n. La opci\u00f3n <code>--experimental-modules<\/code> habilita la compatibilidad con los <a href=\"https:\/\/make.wordpress.org\/core\/2024\/03\/04\/script-modules-in-6-5\/\">m\u00f3dulos de scripts<\/a> de WordPress.<\/li>\n<li><code>start<\/code>: Inicia el servidor de desarrollo. Observa que se vuelve a especificar la opci\u00f3n <code>--experimental-modules<\/code>.<\/li>\n<li><code>dependencies<\/code>: Incluye las dependencias en tiempo de ejecuci\u00f3n con el \u00faltimo paquete de la API de Interactividad.<\/li>\n<\/ul>\n<h3>block.json<\/h3>\n<p>El archivo <code>block.json<\/code> es el manifiesto de tu bloque Gutenberg. Especifica los metadatos, los medios, los scripts y los estilos a cargar. Por defecto, el <code>create-block-interactive-template<\/code> genera el siguiente <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>Los siguientes campos son esenciales para un bloque interactivo:<\/p>\n<ul>\n<li><code>apiVersion<\/code>: <code>3<\/code> es la \u00faltima versi\u00f3n de la API Block y admite las \u00faltimas funcionalidades de los bloques, como los M\u00f3dulos de Script.<\/li>\n<li><code>supports<\/code>: Especifica la compatibilidad del bloque. <code>\"interactivity\": true<\/code> a\u00f1ade compatibilidad con la API Interactivity.<\/li>\n<li><code>render<\/code>: Especifica el archivo PHP responsable de la renderizaci\u00f3n en el frontend. Este archivo es donde se a\u00f1aden las directivas que hacen que un bloque sea interactivo.<\/li>\n<li><code>viewScriptModule<\/code>: Especifica el archivo JavaScript que contiene la l\u00f3gica de interactividad. Este archivo s\u00f3lo se carga en el frontend y s\u00f3lo si la p\u00e1gina contiene el bloque interactivo.<\/li>\n<\/ul>\n<h3>render.php<\/h3>\n<p>En <code>render.php<\/code> es donde se construye el marcado de un bloque din\u00e1mico. Para que tu bloque sea interactivo, tienes que a\u00f1adir atributos que hagan interactivos los elementos DOM de tu bloque.<\/p>\n<p>El archivo <code>render.php<\/code> del proyecto de inicio tiene el siguiente aspecto:<\/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>Esto es lo que hace este c\u00f3digo<\/p>\n<ul>\n<li><code>wp_interactivity_state<\/code>: Obtiene y\/o establece el <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_interactivity_state\/\" target=\"_blank\" rel=\"noopener noreferrer\">estado global inicial<\/a> de un almac\u00e9n (<em data-start=\"138\" data-end=\"145\">store<\/em>) de la API Interactivity.<\/li>\n<li><code>data-wp-interactive<\/code>: <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/#wp-interactive\">Activa la API Interactivity<\/a> en el elemento DOM y sus elementos hijos. Su valor debe ser el namespace (espacio de nombres) \u00fanico de tu plugin o bloque.<\/li>\n<li><code>wp_interactivity_data_wp_context()<\/code>: Genera la directiva <code>data-wp-context<\/code>, que <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_interactivity_data_wp_context\/\" target=\"_blank\" rel=\"noopener noreferrer\">proporciona un estado local<\/a> a un nodo HTML espec\u00edfico y en sus elementos hijos.<\/li>\n<li><code>data-wp-watch<\/code>: <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/#wp-watch\">Ejecuta un callback<\/a> cuando se crea un nodo y cada vez que cambia el estado o el contexto.<\/li>\n<li><code>data-wp-class--dark-theme<\/code>: A\u00f1ade o elimina la clase <code>dark-theme<\/code> del 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\">Ejecuta c\u00f3digo de forma s\u00edncrona<\/a> al hacer 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\">Establece el texto interior<\/a> del elemento HTML.<\/li>\n<li><code>data-wp-bind--aria-expanded<\/code> y <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\">Establece atributos HTML<\/a> (<code>aria-expanded<\/code> y <code>hidden<\/code>) en los elementos correspondientes en funci\u00f3n de un valor booleano o de cadena.<\/li>\n<\/ul>\n<h3>view.js<\/h3>\n<p>Este archivo <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/#on-the-client-side\">define el Store<\/a> que contiene la l\u00f3gica y los datos necesarios para el comportamiento del bloque, incluyendo el estado, las acciones y callbacks.<\/p>\n<p>A continuaci\u00f3n se muestra el archivo <code>view.js<\/code> generado por el proyecto de inicio:<\/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 funci\u00f3n principal utilizada para crear y registrar el estado Global y la l\u00f3gica del bloque.<\/li>\n<li><code>getContext<\/code>: Funci\u00f3n utilizada dentro de las acciones y callbacks para acceder al estado local (el <code>context<\/code>) del elemento DOM que desencaden\u00f3 el evento.<\/li>\n<li><code>state<\/code>: Define los datos reactivos globales del bloque.<\/li>\n<li><code>actions<\/code>: Incluye las funciones que definen la l\u00f3gica y cambian el estado.<\/li>\n<li><code>callbacks<\/code>: Incluye las funciones que se ejecutar\u00e1n en respuesta a determinados eventos o cambios de estado de forma autom\u00e1tica.<\/li>\n<\/ul>\n<p>Es mucho que asimilar, \u00a1pero no te preocupes! Todo quedar\u00e1 m\u00e1s claro una vez que hayas le\u00eddo los siguientes apartados.<\/p>\n<p>Examinemos ahora los conceptos clave de la API Interactivity: directivas, store, estado, acciones y callbacks.<\/p>\n<h2>Directivas de la API Interactivity<\/h2>\n<p>Al igual que otras bibliotecas frontend como Alpine.js y <a href=\"https:\/\/kinsta.com\/es\/secciones\/vue-js\/\">Vue.js<\/a>, la API Interactivity utiliza atributos HTML especiales que te permiten responder a eventos de la p\u00e1gina, actualizar el estado de la aplicaci\u00f3n, manipular el DOM, aplicar estilos CSS, gestionar la entrada del usuario y mucho m\u00e1s.<\/p>\n<p>Estos atributos se denominan <strong>directivas<\/strong> y te permiten conectar tu marcado a la l\u00f3gica JavaScript subyacente.<\/p>\n<p>A continuaci\u00f3n encontrar\u00e1s una lista de las directivas que m\u00e1s utilizar\u00e1s.<\/p>\n<table>\n<thead>\n<tr>\n<th style=\"width: 22.5%\">Funci\u00f3n<\/th>\n<th style=\"width: 22.5%\">Directiva<\/th>\n<th>Descripci\u00f3n<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Activaci\u00f3n\/Namespace<\/td>\n<td><code>data-wp-interactive<\/code><\/td>\n<td>Activa la API para el elemento y sus hijos. El valor debe ser el identificador \u00fanico de tu plugin.<\/td>\n<\/tr>\n<tr>\n<td>Estado local<\/td>\n<td><code>data-wp-context<\/code><\/td>\n<td>Proporciona un estado local (un \u00abcontexto\u00bb) para el elemento actual y todos sus hijos. Acepta un objeto JSON. Ten en cuenta que se recomienda utilizar <code>wp_interactivity_data_wp_context()<\/code> para establecerlo en PHP (normalmente <code>render.php<\/code>).<\/td>\n<\/tr>\n<tr>\n<td>Vinculaci\u00f3n de atributos<\/td>\n<td><code>data-wp-bind--[attribute]<\/code><\/td>\n<td>Establece un atributo HTML (por ejemplo, <code>disabled<\/code>, <code>value<\/code>) en funci\u00f3n de un estado reactivo o de un valor de contexto (un valor booleano o de cadena).<\/td>\n<\/tr>\n<tr>\n<td>Modificaci\u00f3n de texto<\/td>\n<td><code>data-wp-text<\/code><\/td>\n<td>Establece el contenido de texto interno del elemento. S\u00f3lo acepta cadenas.<\/td>\n<\/tr>\n<tr>\n<td>Conmutaci\u00f3n de clase CSS<\/td>\n<td><code>data-wp-class--[classname]<\/code><\/td>\n<td>A\u00f1ade o elimina una clase CSS en funci\u00f3n de un valor booleano.<\/td>\n<\/tr>\n<tr>\n<td>Estilo Inline<\/td>\n<td><code>data-wp-style--[css-property]<\/code><\/td>\n<td>A\u00f1ade o elimina una clase de estilo inline en funci\u00f3n de un valor booleano.<\/td>\n<\/tr>\n<tr>\n<td>Gesti\u00f3n de eventos<\/td>\n<td><code>data-wp-on--[event]<\/code><\/td>\n<td>Ejecuta c\u00f3digo en respuesta a eventos DOM est\u00e1ndar como <code>click<\/code> o <code>mouseover<\/code>.<\/td>\n<\/tr>\n<tr>\n<td>Ejecuci\u00f3n inicial<\/td>\n<td><code>data-wp-init<\/code><\/td>\n<td>Ejecuta una funci\u00f3n de callback una vez, s\u00f3lo cuando se crea el nodo.<\/td>\n<\/tr>\n<tr>\n<td>Vigilancia del estado<\/td>\n<td><code>data-wp-watch<\/code><\/td>\n<td>Ejecuta un callback cuando se crea el nodo y de nuevo cada vez que cambia el estado o el contexto.<\/td>\n<\/tr>\n<tr>\n<td>Iteraci\u00f3n de lista<\/td>\n<td><code>data-wp-each<\/code><\/td>\n<td>Renderiza una lista de elementos.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Para obtener una lista completa de las directivas, consulta las <a href=\"https:\/\/make.wordpress.org\/core\/2024\/03\/04\/interactivity-api-dev-note\/\">notas de desarrollo de la API Interactivity<\/a> y la <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/\">referencia de la API<\/a>.<\/p>\n<h2>Estado global, contexto local y estado derivado<\/h2>\n<p>Antes de empezar a utilizar la API Interactivity, es esencial que te familiarices con los <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/core-concepts\/undestanding-global-state-local-context-and-derived-state\/\">conceptos fundamentales de la gesti\u00f3n de estados<\/a> en el desarrollo frontend. Quienes desarrollen habitualmente con React, Vue o Angular ya estar\u00e1n familiarizados con estos conceptos. Para quienes sean nuevos en estas tecnolog\u00edas, puede ser \u00fatil proporcionar algunas definiciones generales.<\/p>\n<h3>Estado global<\/h3>\n<p>El <strong>estado global<\/strong> se refiere al conjunto de datos accesibles desde casi todos los componentes de una aplicaci\u00f3n. En el caso de la API Interactivity, por ejemplo, el estado global afecta a todos los bloques interactivos de la p\u00e1gina, manteni\u00e9ndolos sincronizados. Por ejemplo, cuando un usuario a\u00f1ade un producto a su cesta, esto se refleja en el bloque de la cesta de la compra.<\/p>\n<p>Cuando utilices la API Interactivity, debes establecer los valores iniciales del estado Global en el servidor utilizando la funci\u00f3n <code>wp_interactivity_state()<\/code>. En el proyecto de inicio descrito anteriormente, esta funci\u00f3n se utiliza en el archivo <code>render.php<\/code> de la siguiente manera:<\/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\">Esta funci\u00f3n<\/a> acepta dos argumentos:<\/p>\n<ul>\n<li>Un identificador \u00fanico para el namespace (espacio de nombres) de la tienda. En este caso, <code>create-block<\/code>.<\/li>\n<li>Un array de datos que se fusionar\u00e1 con el espacio de nombres de la tienda existente, si existe.<\/li>\n<\/ul>\n<p>Los valores iniciales del estado global se utilizan despu\u00e9s para renderizar la p\u00e1gina. Puedes acceder directamente a los valores de estado global utilizando <code>state<\/code> en los valores de atributo de la directiva, como en el c\u00f3digo siguiente:<\/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 funci\u00f3n <code>store()<\/code> proporciona el principal punto de acceso al estado Global desde JavaScript, limitado al namespace seleccionado. Volviendo al c\u00f3digo del proyecto de inicio, la funci\u00f3n <code>store()<\/code> se utiliza en el archivo <code>view.js<\/code> de la siguiente manera:<\/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>Para acceder al estado global, puedes utilizar la propiedad <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>Contexto local<\/h3>\n<p>El <b>contexto local<\/b> es informaci\u00f3n a la que solo pueden acceder un componente espec\u00edfico y sus elementos hijos directos. Un bloque interactivo de WordPress proporciona un estado independiente para el bloque y sus elementos anidados.<\/p>\n<p>Si utilizas la API Interactivity, puedes acceder al contexto local mediante la funci\u00f3n <code>getContext()<\/code>. Volviendo al proyecto de inicio, cuando el usuario hace clic en el bot\u00f3n Alternar, se desencadena la acci\u00f3n <code>toggleOpen()<\/code>, que accede al contexto Local 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 el objeto de estado local del bloque. Las propiedades de este objeto se definen en el marcado del componente (<code>render.php<\/code>) mediante la funci\u00f3n <code>wp_interactivity_data_wp_context()<\/code>.<\/li>\n<li><code>context.isOpen = ! context.isOpen;<\/code>: Cambia el valor de la propiedad <code>isOpen<\/code> en el contexto Local del componente.<\/li>\n<\/ul>\n<h3>Estado derivado<\/h3>\n<p>El <strong>estado derivado<\/strong> se refiere a los datos calculados din\u00e1micamente a partir del estado Global o Local existente.<\/p>\n<p>Por ejemplo, echa un vistazo al c\u00f3digo del archivo <code>view.js<\/code>, concretamente en esta secci\u00f3n:<\/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>Este bloque define el estado Derivado <code>themeText<\/code> dentro del estado Global definido en el namespace <code>create-block<\/code>.<\/p>\n<ul>\n<li><code>get themeText()<\/code> no es un valor fijo, sino una funci\u00f3n que se ejecuta cada vez que intentas leer la propiedad <code>themeText<\/code>. No debe invocarse como una funci\u00f3n normal porque la API Interactivity la trata como una propiedad de estado y recalcula autom\u00e1ticamente su valor cada vez que cambian los valores de otras propiedades de estado. En el c\u00f3digo anterior, el valor de la propiedad <code>themeText<\/code> se recalcula cada vez que cambia el valor de la propiedad <code>isDark<\/code>. Si <code>state.isDark<\/code> es <code>true<\/code>, entonces <code>themeText<\/code> toma el valor de <code>state.darkText<\/code>; en caso contrario, toma el valor de <code>state.lightText<\/code>.<\/li>\n<\/ul>\n<p>Para una visi\u00f3n m\u00e1s completa de los conceptos descritos en esta secci\u00f3n, consulta <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\">Comprender el estado global, el contexto local y el estado derivado<\/a>.<\/p>\n<h2>Acciones y callbacks<\/h2>\n<p>Las acciones y callbacks determinan la respuesta a la interacci\u00f3n con el usuario y a los cambios de estado.<\/p>\n<p>La secci\u00f3n <code>actions<\/code> de un bloque interactivo contiene funciones que se ejecutan en respuesta a eventos generados por el usuario. Estas funciones sirven principalmente para modificar el estado Local o Global del componente. Toma el siguiente c\u00f3digo del archivo <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>En esta secci\u00f3n de c\u00f3digo, la funci\u00f3n <code>toggleOpen()<\/code> utiliza <code>getContext()<\/code> para acceder al contexto Local del bloque que desencaden\u00f3 la acci\u00f3n para cambiar el valor de la propiedad <code>isOpen<\/code>.<\/li>\n<\/ul>\n<p>Del mismo modo, puedes acceder al estado 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 funci\u00f3n <code>toggleTheme()<\/code> accede directamente al objeto global <code>state<\/code> y cambia el valor de la propiedad <code>isDark<\/code>.<\/li>\n<\/ul>\n<p>Las acciones se activan mediante la directiva <code>data-wp-on--[event]<\/code>. Por ejemplo, en el archivo <code>render.php<\/code>, encontrar\u00e1s el siguiente bot\u00f3n:<\/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>En este c\u00f3digo HTML, el atributo <code>data-wp-on--click<\/code> activa la acci\u00f3n <code>toggleOpen<\/code> cuando el usuario hace clic en el bot\u00f3n de conmutaci\u00f3n.<\/li>\n<\/ul>\n<p>La secci\u00f3n <code>callbacks<\/code> contiene funciones que se ejecutan autom\u00e1ticamente cuando cambian los datos de los que dependen. Su finalidad es generar efectos secundarios en respuesta a un cambio de estado.<\/p>\n<p>En el proyecto b\u00e1sico generado por <code>create-block-interactive-template<\/code>, encontrar\u00e1s el siguiente 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 funci\u00f3n <code>logIsOpen<\/code> utiliza la variable <code>isOpen<\/code>, que est\u00e1 disponible en el contexto Local.<\/li>\n<li>El callback recupera el valor de <code>isOpen<\/code> utilizando <code>getContext()<\/code>.<\/li>\n<li>Cada vez que cambia el valor de <code>isOpen<\/code>, la funci\u00f3n lanza un mensaje a la consola del navegador.<\/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 mensaje en la consola informa al usuario del cambio en el contexto Local.\" width=\"1596\" height=\"727\"><figcaption id=\"caption-attachment-199639\" class=\"wp-caption-text\">Un mensaje en la consola informa al usuario del cambio en el contexto Local.<\/figcaption><\/figure>\n<h2>C\u00f3mo construir un bloque interactivo<\/h2>\n<p>Ahora que ya hemos visto la teor\u00eda, \u00a1es hora de empezar a divertirnos con el c\u00f3digo! En la segunda parte de esta gu\u00eda, aprender\u00e1s a crear un bloque interactivo que permite a los usuarios a\u00f1adir productos a una cesta de la compra ideal, con cantidades y totales que se actualizan autom\u00e1ticamente. Se trata de un ejemplo de demostraci\u00f3n, pero esperamos que te ayude a comprender claramente c\u00f3mo utilizar el estado, las acciones y los callbacks.<\/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=\"El bloque interactivo en el editor\" width=\"1512\" height=\"1204\"><figcaption id=\"caption-attachment-199768\" class=\"wp-caption-text\">El bloque interactivo en el editor<\/figcaption><\/figure>\n<p>Vamos a crear un bloque llamado <strong>Interactive Counter<\/strong>\u00a0utilizando el <code>create-block-interactive-template<\/code>. Para empezar, abre tu herramienta de l\u00ednea de comandos y escribe lo siguiente:<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block interactive-counter --template @wordpress\/create-block-interactive-template<\/code><\/pre>\n<p>A continuaci\u00f3n, navega hasta el directorio de tu nuevo proyecto y ejecuta la primera construcci\u00f3n.<\/p>\n<pre><code class=\"language-bash\">cd interactive-counter && npm run build<\/code><\/pre>\n<p>Abre ahora el proyecto en tu editor de c\u00f3digo. En el directorio <code>\/src<\/code>, busca el archivo <code>block.json<\/code>. Deber\u00eda tener este aspecto:<\/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>Si\u00e9ntete libre de personalizarlo, pero aseg\u00farate de no modificar los campos esenciales descritos anteriormente.<\/p>\n<h3>El archivo edit.js<\/h3>\n<p>El siguiente paso es crear el bloque que aparecer\u00e1 en el editor. Para ello, tendr\u00e1s que editar el archivo <code>\/src\/edit.js<\/code>. Abre el archivo y modif\u00edcalo como se indica a continuaci\u00f3n:<\/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>Este c\u00f3digo genera un bloque personalizado en el back end. El bloque s\u00f3lo ser\u00e1 interactivo en el front-end. Para m\u00e1s detalles sobre el archivo <code>\/src\/edit.js<\/code>, consulta nuestras <a href=\"https:\/\/kinsta.com\/es\/blog\/bloques-dinamicos\/\">gu\u00edas de desarrollo de bloques<\/a> para Gutenberg.<\/p>\n<h3>El archivo render.php<\/h3>\n<p>El siguiente archivo a editar es <code>\/src\/render.php<\/code>. Abre el archivo y sustituye el c\u00f3digo existente por el siguiente:<\/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>Esto es lo que hace este c\u00f3digo<\/p>\n<ul>\n<li>En primer lugar, crea un array de productos codificado. Cada producto tiene un ID, un nombre y un precio.<\/li>\n<li>A continuaci\u00f3n, inicializa el estado Global con <code>wp_interactivity_state<\/code>. El primer par\u00e1metro es el nombre de la tienda, que debe coincidir con el utilizado en <code>view.js<\/code>.<\/li>\n<li>A continuaci\u00f3n, asigna el array anterior de productos a un nuevo array <code>products<\/code>, a\u00f1adiendo cantidad y subtotal a las propiedades del array original. Este nuevo array proporciona la estructura de datos que utilizar\u00e1s en <code>view.js<\/code>.<\/li>\n<li><code>vatRate<\/code> establece el valor por defecto para el c\u00e1lculo de impuestos.<\/li>\n<\/ul>\n<p>A continuaci\u00f3n, a\u00f1ade lo siguiente al c\u00f3digo anterior:<\/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>Esto es lo que hace este c\u00f3digo<\/p>\n<ul>\n<li>La funci\u00f3n <code>get_block_wrapper_attributes()<\/code> del contenedor <code>div<\/code> es una funci\u00f3n de WordPress que genera los atributos est\u00e1ndar de un bloque. En este caso, genera el atributo de clase <code>\"wp-block-create-block-interactive-counter\"<\/code>.<\/li>\n<li>El atributo <code>data-wp-interactive<\/code> hace que este bloque sea interactivo.<\/li>\n<li>El atributo <code>data-wp-init<\/code> activa el callback <code>init<\/code> definido en <code>view.js<\/code>.<\/li>\n<li>El bucle <code>foreach<\/code> genera un elemento de lista para cada producto del array <code>products<\/code>.<\/li>\n<li><code>data-wp-context<\/code> define el contexto local del bloque.<\/li>\n<li><code>data-wp-bind<\/code> vincula el valor de <code>data-wp-context.quantity<\/code> a la propiedad global <code>state.products[$index].quantity<\/code>.<\/li>\n<li>Lo mismo ocurre en la l\u00ednea inferior con el subtotal.<\/li>\n<li>Los dos botones siguientes activan las acciones <code>decrement<\/code> y <code>increment<\/code> gracias al atributo <code>data-wp-on--click<\/code>.<\/li>\n<li>El atributo <code>data-wp-text<\/code> de <code>span<\/code> actualiza el contenido del elemento en funci\u00f3n del valor actual de <code>context.quantity<\/code>.<\/li>\n<\/ul>\n<p>El resto del c\u00f3digo se explica por s\u00ed mismo, as\u00ed que pasemos al siguiente archivo.<\/p>\n<h3>El archivo view.js<\/h3>\n<p>Este archivo contiene la l\u00f3gica de tu bloque interactivo.<\/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>Este archivo define el store para el namespace <code>interactive-counter<\/code>. Gestiona el estado, las acciones y los callbacks:<\/p>\n<pre><code class=\"language-javascript\">store('interactive-counter', {\n\tstate: { ... },\n\tactions: { ... },\n\tcallbacks: { ... },\n});<\/code><\/pre>\n<p>Echemos un vistazo m\u00e1s de cerca.<\/p>\n<ul>\n<li><code>state<\/code>: Define tres propiedades de estado calculadas (getters): <code>subtotal<\/code>, <code>vat<\/code>, y <code>total<\/code>. Estas funciones recuperan valores del estado Global y calculan los valores a devolver.<\/li>\n<li><code>actions<\/code>: Define dos funciones que se ejecutan en los eventos: <code>increment<\/code> y <code>decrement<\/code>. Estas funciones recuperan el array <code>products<\/code> del estado Global, recuperan el producto actual del contexto Local bas\u00e1ndose en <code>context.productId<\/code>, actualizan los valores de las propiedades del producto actual (<code>quantity<\/code> y <code>subtotal<\/code>), y sincronizan el contexto Local con los nuevos valores.<\/li>\n<li><code>callbacks<\/code>: Define un callback <code>init<\/code> para la inicializaci\u00f3n.<\/li>\n<\/ul>\n<p>La siguiente imagen muestra el bloque interactivo en el 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 contador interactivo construido con la API Interactivity\" width=\"1364\" height=\"896\"><figcaption id=\"caption-attachment-199769\" class=\"wp-caption-text\">Un contador interactivo construido con la API Interactivity<\/figcaption><\/figure>\n<h2>Resumen<\/h2>\n<p>En este art\u00edculo, hemos presentado las principales caracter\u00edsticas de la API Interactivity de WordPress. Hemos profundizado en conceptos clave como Estado global, Contexto local, Directivas, Acciones y Callbacks. Aprendiste a crear un bloque interactivo desde cero utilizando el <code>@wordpress\/create-block-interactive-template<\/code>, y lo pusimos en pr\u00e1ctica creando un bloque real que interact\u00faa con la entrada del usuario.<\/p>\n<p>Esperamos haberte proporcionado las herramientas y los conocimientos necesarios para crear sitios web de WordPress atractivos, din\u00e1micos e interactivos utilizando la API Interactivity de WordPress.<\/p>\n<p>\u00a1Feliz programaci\u00f3n!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En entradas anteriores de este blog, hemos explorado el desarrollo de bloques de WordPress desde varios \u00e1ngulos. Hemos examinado el desarrollo de bloques est\u00e1ticos y din\u00e1micos &#8230;<\/p>\n","protected":false},"author":36,"featured_media":80826,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1270,1345],"class_list":["post-80825","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-desarrollo-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>Descubre nuevas posibilidades con la API Interactivity de WordPress<\/title>\n<meta name=\"description\" content=\"La API Interactivity es una potente herramienta que te permite crear sitios web de WordPress de \u00faltima generaci\u00f3n. \u00a1Explora nuestra gu\u00eda completa y empieza a utilizar los bloques interactivos!\" \/>\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\/es\/blog\/api-interactivity-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Descubre nuevas posibilidades con la API Interactivity de WordPress\" \/>\n<meta property=\"og:description\" content=\"La API Interactivity es una potente herramienta que te permite crear sitios web de WordPress de \u00faltima generaci\u00f3n. \u00a1Explora nuestra gu\u00eda completa y empieza a utilizar los bloques interactivos!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/api-interactivity-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-06T07:36:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-10T10:31:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/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=\"La API Interactivity es una potente herramienta que te permite crear sitios web de WordPress de \u00faltima generaci\u00f3n. \u00a1Explora nuestra gu\u00eda completa y empieza a utilizar los bloques interactivos!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/11\/how-to-create-interactive-blocks-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"25 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/api-interactivity-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/api-interactivity-wordpress\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Descubre nuevas posibilidades con la API Interactivity de WordPress\",\"datePublished\":\"2025-11-06T07:36:07+00:00\",\"dateModified\":\"2025-11-10T10:31:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/api-interactivity-wordpress\/\"},\"wordCount\":3310,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/api-interactivity-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/11\/how-to-create-interactive-blocks.png\",\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/api-interactivity-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/api-interactivity-wordpress\/\",\"name\":\"Descubre nuevas posibilidades con la API Interactivity de WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/api-interactivity-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/api-interactivity-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/11\/how-to-create-interactive-blocks.png\",\"datePublished\":\"2025-11-06T07:36:07+00:00\",\"dateModified\":\"2025-11-10T10:31:45+00:00\",\"description\":\"La API Interactivity es una potente herramienta que te permite crear sitios web de WordPress de \u00faltima generaci\u00f3n. \u00a1Explora nuestra gu\u00eda completa y empieza a utilizar los bloques interactivos!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/api-interactivity-wordpress\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/api-interactivity-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/api-interactivity-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/11\/how-to-create-interactive-blocks.png\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/11\/how-to-create-interactive-blocks.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/api-interactivity-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"API\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/api\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Descubre nuevas posibilidades con la API Interactivity de WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"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\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Descubre nuevas posibilidades con la API Interactivity de WordPress","description":"La API Interactivity es una potente herramienta que te permite crear sitios web de WordPress de \u00faltima generaci\u00f3n. \u00a1Explora nuestra gu\u00eda completa y empieza a utilizar los bloques interactivos!","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\/es\/blog\/api-interactivity-wordpress\/","og_locale":"es_ES","og_type":"article","og_title":"Descubre nuevas posibilidades con la API Interactivity de WordPress","og_description":"La API Interactivity es una potente herramienta que te permite crear sitios web de WordPress de \u00faltima generaci\u00f3n. \u00a1Explora nuestra gu\u00eda completa y empieza a utilizar los bloques interactivos!","og_url":"https:\/\/kinsta.com\/es\/blog\/api-interactivity-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2025-11-06T07:36:07+00:00","article_modified_time":"2025-11-10T10:31:45+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/11\/how-to-create-interactive-blocks.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"La API Interactivity es una potente herramienta que te permite crear sitios web de WordPress de \u00faltima generaci\u00f3n. \u00a1Explora nuestra gu\u00eda completa y empieza a utilizar los bloques interactivos!","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/11\/how-to-create-interactive-blocks-1024x512.png","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Carlo Daniele","Tiempo de lectura":"25 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/api-interactivity-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/api-interactivity-wordpress\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Descubre nuevas posibilidades con la API Interactivity de WordPress","datePublished":"2025-11-06T07:36:07+00:00","dateModified":"2025-11-10T10:31:45+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/api-interactivity-wordpress\/"},"wordCount":3310,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/api-interactivity-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/11\/how-to-create-interactive-blocks.png","inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/api-interactivity-wordpress\/","url":"https:\/\/kinsta.com\/es\/blog\/api-interactivity-wordpress\/","name":"Descubre nuevas posibilidades con la API Interactivity de WordPress","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/api-interactivity-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/api-interactivity-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/11\/how-to-create-interactive-blocks.png","datePublished":"2025-11-06T07:36:07+00:00","dateModified":"2025-11-10T10:31:45+00:00","description":"La API Interactivity es una potente herramienta que te permite crear sitios web de WordPress de \u00faltima generaci\u00f3n. \u00a1Explora nuestra gu\u00eda completa y empieza a utilizar los bloques interactivos!","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/api-interactivity-wordpress\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/api-interactivity-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/api-interactivity-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/11\/how-to-create-interactive-blocks.png","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2025\/11\/how-to-create-interactive-blocks.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/api-interactivity-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"API","item":"https:\/\/kinsta.com\/es\/secciones\/api\/"},{"@type":"ListItem","position":3,"name":"Descubre nuevas posibilidades con la API Interactivity de WordPress"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","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\/es\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/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\/es\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/80825","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=80825"}],"version-history":[{"count":10,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/80825\/revisions"}],"predecessor-version":[{"id":80865,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/80825\/revisions\/80865"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/80825\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/80825\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/80825\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/80825\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/80825\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/80825\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/80825\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/80825\/translations\/es"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/80825\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/80826"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=80825"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=80825"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=80825"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}