{"id":73451,"date":"2025-11-06T04:55:02","date_gmt":"2025-11-06T07:55:02","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=73451&#038;preview=true&#038;preview_id=73451"},"modified":"2025-11-11T05:58:35","modified_gmt":"2025-11-11T08:58:35","slug":"api-de-interatividade-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/api-de-interatividade-wordpress\/","title":{"rendered":"Desbloqueando novas possibilidades com a API de interatividade do WordPress"},"content":{"rendered":"<p>1Em artigos anteriores deste blog, exploramos o desenvolvimento de blocos do WordPress de v\u00e1rios \u00e2ngulos. Examinamos o desenvolvimento de blocos <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/\">est\u00e1ticos<\/a> e <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/\">din\u00e2micos<\/a> e <a href=\"https:\/\/kinsta.com\/pt\/blog\/plugin-gutenberg\/\">ampliamos a funcionalidade dos blocos principais<\/a>. No entanto, a abordagem que adotamos at\u00e9 agora nos permitiu essencialmente criar blocos padr\u00e3o, que n\u00e3o reagiam \u00e0s intera\u00e7\u00f5es do usu\u00e1rio em tempo real. Em resumo, esses blocos eram n\u00e3o interativos.<\/p>\n<p>Neste artigo, exploraremos uma nova abordagem para o desenvolvimento de blocos, que nos permitir\u00e1 criar blocos interativos gra\u00e7as a uma nova e poderosa API do WordPress: a <strong>API de interatividade do WordPress<\/strong>. Introduzida no <a href=\"https:\/\/kinsta.com\/pt\/blog\/wordpress-6-5\/#interactivity-api\">WordPress 6.5<\/a>, essa API permite que voc\u00ea crie blocos que reagem em tempo real \u00e0s intera\u00e7\u00f5es do usu\u00e1rio, possibilitando a cria\u00e7\u00e3o de experi\u00eancias ricas para o usu\u00e1rio e tornando seus sites atraentes, din\u00e2micos e envolventes.<\/p>\n<p>H\u00e1 muito o que abordar, mas antes de come\u00e7armos, vejamos os requisitos essenciais!<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>O que voc\u00ea precisa antes de come\u00e7ar a usar a API de interatividade<\/h2>\n<p>Como a API Interactivi \u00e9 baseada em <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-react-js\/\">React<\/a>, voc\u00ea precisar\u00e1 de pelo menos um conhecimento b\u00e1sico de <a href=\"https:\/\/kinsta.com\/pt\/blog\/o-que-e-node-js\/\">JavaScript do lado do servidor<\/a> e React, al\u00e9m de ferramentas de build como <a href=\"https:\/\/kinsta.com\/pt\/blog\/npm-gerenciador-pacotes-node\/\">npm<\/a> e npx. Tamb\u00e9m \u00e9 necess\u00e1rio compreender bem o <a href=\"https:\/\/kinsta.com\/pt\/blog\/desenvolvimento-wp-scripts\/\">desenvolvimento em WordPress<\/a> e do <a href=\"https:\/\/kinsta.com\/pt\/blog\/editor-gutenberg-wordpress\/\">editor de blocos Gutenberg<\/a>.<\/p>\n<p>Depois de adquirir as habilidades necess\u00e1rias, voc\u00ea precisar\u00e1 de um <a href=\"https:\/\/kinsta.com\/pt\/blog\/alternativas-mamp\/\">ambiente de desenvolvimento local<\/a> que permita o lan\u00e7amento r\u00e1pido e f\u00e1cil de um site WordPress. Recomendamos o <a href=\"https:\/\/kinsta.com\/pt\/devkinsta\/\">DevKinsta<\/a>, nossa su\u00edte de desenvolvimento local criada especificamente para o WordPress. Com o DevKinsta, voc\u00ea pode configurar um novo site local do WordPress com apenas alguns cliques e personaliz\u00e1-lo em detalhes.<\/p>\n<p>Ao criar um novo projeto WordPress no DevKinsta, voc\u00ea pode definir as seguintes op\u00e7\u00f5es:<\/p>\n<ul>\n<li>Dom\u00ednio de n\u00edvel superior: Padr\u00e3o .local<\/li>\n<li>Vers\u00e3o do PHP<\/li>\n<li>Nome do banco de dados<\/li>\n<li>Habilitar HTTPS<\/li>\n<li>Detalhes do WordPress<\/li>\n<li>Atualiza\u00e7\u00e3o autom\u00e1tica do WordPress<\/li>\n<li>Multisite<\/li>\n<\/ul>\n<p>Al\u00e9m disso, voc\u00ea pode importar um site MyKinsta existente a partir de um 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=\"wp-image-199777 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/10\/devkinsta-new-website.png\" alt=\"Configura\u00e7\u00e3o de um site local no DevKinsta\" width=\"2230\" height=\"1656\"><figcaption id=\"caption-attachment-199777\" class=\"wp-caption-text\">Configura\u00e7\u00e3o de um site local no DevKinsta.<\/figcaption><\/figure>\n<h2>O que \u00e9 a API de interatividade?<\/h2>\n<p>A API de Interatividade \u00e9 uma API nativa do WordPress que permite que voc\u00ea adicione interatividade aos blocos do Gutenberg e, consequentemente, aos artigos e p\u00e1ginas de um site WordPress. \u00c9 uma solu\u00e7\u00e3o leve e moderna que adota uma <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/core-concepts\/the-reactive-and-declarative-mindset\/\">abordagem declarativa<\/a> para gerenciar intera\u00e7\u00f5es do usu\u00e1rio.<\/p>\n<p>Para criar um bloco interativo do zero, voc\u00ea precisa de habilidades avan\u00e7adas de desenvolvimento em 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 no lado do servidor<\/a>. Entretanto, voc\u00ea n\u00e3o precisa reinventar a roda a cada novo projeto, pois o WordPress fornece um <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block-interactive-template\/\">modelo para a cria\u00e7\u00e3o de blocos interativos<\/a>:<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block --template @wordpress\/create-block-interactive-template<\/code><\/pre>\n<p>Esse modelo inclui tudo o que voc\u00ea precisa para criar um bloco interativo, inclusive dois exemplos funcionais que podem ser usados como refer\u00eancia para o seu primeiro projeto: um bot\u00e3o para alternar o tema atual e um bot\u00e3o para expandir\/recolher um par\u00e1grafo.<\/p>\n<p>Para come\u00e7ar, abra sua ferramenta de linha de comando favorita, navegue at\u00e9 o diret\u00f3rio <strong>Plugins<\/strong> de sua instala\u00e7\u00e3o local do WordPress e digite o seguinte:<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block your-interactive-block --template @wordpress\/create-block-interactive-template<\/code><\/pre>\n<p>Aguarde alguns instantes para que a instala\u00e7\u00e3o seja conclu\u00edda e, em seguida, abra a pasta do projeto usando seu <a href=\"https:\/\/kinsta.com\/pt\/blog\/editores-html-gratuitos\/\">editor de c\u00f3digo<\/a> preferido. Recomendamos o uso do <a href=\"https:\/\/kinsta.com\/pt\/blog\/melhores-editores-texto\/#visual-studio-code\">Visual Studio Code<\/a>, mas voc\u00ea pode usar o editor com o qual se sentir mais confort\u00e1vel.<\/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=\"Um bloco interativo no Visual Studio Code\" width=\"2086\" height=\"1230\"><figcaption id=\"caption-attachment-199519\" class=\"wp-caption-text\">O projeto de bloco interativo fornecido pelo <code>@wordpress\/create-block-interactive-template<\/code><\/figcaption><\/figure>\n<p>Na linha de comando, navegue at\u00e9 a pasta do novo plugin e <a href=\"https:\/\/developer.wordpress.org\/block-editor\/getting-started\/quick-start-guide\/#basic-usage\" target=\"_blank\" rel=\"noopener noreferrer\">inicie o servidor de desenvolvimento<\/a> usando o seguinte comando:<\/p>\n<pre><code class=\"language-bash\">npm start<\/code><\/pre>\n<p>A partir de agora, todas as altera\u00e7\u00f5es que voc\u00ea fizer no seu bloco ficar\u00e3o vis\u00edveis em tempo real na sua instala\u00e7\u00e3o do WordPress.<\/p>\n<p>Em seguida, no administrador do WordPress, navegue at\u00e9 a tela <strong>Plugins<\/strong> e ative o plugin <strong>Interactivity API<\/strong> que voc\u00ea acabou de criar. Crie um novo artigo ou p\u00e1gina, procure o bloco <strong>Your interactive block<\/strong> no inseridor de blocos e adicione-o ao conte\u00fado. Salve o artigo e visualize no frontend.\u00a0Voc\u00ea ver\u00e1 um bloco amarelo com dois bot\u00f5es. O primeiro bot\u00e3o altera a cor de fundo do bloco e o segundo bot\u00e3o mostra ou oculta o conte\u00fado do par\u00e1grafo.<\/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=\"Exemplo de bloco interativo\" width=\"1405\" height=\"696\"><figcaption id=\"caption-attachment-199520\" class=\"wp-caption-text\">Exemplo de bloco interativo \u2014 fornecido pelo template <code>@wordpress\/create-block-interactive-template<\/code>.<\/figcaption><\/figure>\n<p>Agora que voc\u00ea tem um plugin de refer\u00eancia para os t\u00f3picos abordados neste artigo, podemos prosseguir e explorar os blocos interativos em maior profundidade.<\/p>\n<h2>A estrutura dos blocos interativos<\/h2>\n<p>A estrutura dos blocos interativos \u00e9 a mesma dos <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/#a-walkthrough-of-the-starter-block-scaffolding\">blocos tradicionais<\/a>. Voc\u00ea ainda precisar\u00e1 dos seguintes arquivos: <code>package.json<\/code>, <code>block.json<\/code>, <code>edit.js<\/code> e <code>style.scss<\/code>. Al\u00e9m disso, voc\u00ea precisar\u00e1 de um arquivo <code>render.php<\/code> para renderiza\u00e7\u00e3o no lado do servidor e um arquivo <code>view.js<\/code> para lidar com a interatividade do frontend.<\/p>\n<p>Vamos analisar as partes principais de um bloco interativo, detalhando os arquivos do projeto inicial.<\/p>\n<h3>package.json<\/h3>\n<p>O arquivo <code>package.json<\/code> \u00e9 <a href=\"https:\/\/docs.npmjs.com\/cli\/v7\/configuring-npm\/package-json\" target=\"_blank\" rel=\"noopener noreferrer\">usado em projetos Node<\/a> para identificar seu projeto, gerenciar scripts e gerenciar e instalar depend\u00eancias durante o desenvolvimento.<\/p>\n<p>A seguir, voc\u00ea encontra o <code>package.json<\/code> para o bloco interativo fornecido pelo <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>As se\u00e7\u00f5es <code>scripts<\/code> e <code>dependencies<\/code> s\u00e3o particularmente importantes aqui.<\/p>\n<ul>\n<li><code>build<\/code>: compila o c\u00f3digo-fonte em JavaScript para produ\u00e7\u00e3o. A op\u00e7\u00e3o <code>--experimental-modules<\/code> habilita o suporte para <a href=\"https:\/\/make.wordpress.org\/core\/2024\/03\/04\/script-modules-in-6-5\/\">m\u00f3dulos de script<\/a> do WordPress.<\/li>\n<li><code>start<\/code>: inicia o servidor de desenvolvimento. Observe que a op\u00e7\u00e3o <code>--experimental-modules<\/code> \u00e9 especificada novamente.<\/li>\n<li><code>dependencies<\/code>: inclui depend\u00eancias de tempo de execu\u00e7\u00e3o com o pacote mais recente da API de interatividade.<\/li>\n<\/ul>\n<h3>block.json<\/h3>\n<p>O arquivo <code>block.json<\/code> \u00e9 o manifesto para o seu bloco do Gutenberg. Ele especifica os metadados, a m\u00eddia, os scripts e os estilos a serem carregados. Por padr\u00e3o, o <code>create-block-interactive-template<\/code> gera o seguinte <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>Os seguintes campos s\u00e3o essenciais para um bloco interativo:<\/p>\n<ul>\n<li><code>apiVersion<\/code>: <code>3<\/code> \u00e9 a vers\u00e3o mais recente da API de blocos e oferece suporte aos recursos de blocos mais recentes, como Script Modules.<\/li>\n<li><code>supports<\/code>: especifica os recursos compat\u00edveis do bloco. <code>\"interactivity\": true<\/code> adiciona suporte \u00e0 API de interatividade.<\/li>\n<li><code>render<\/code>: especifica o arquivo PHP respons\u00e1vel pela renderiza\u00e7\u00e3o no frontend. \u00c9 nesse arquivo que voc\u00ea adiciona as diretivas que tornam o bloco interativo.<\/li>\n<li><code>viewScriptModule<\/code>: especifica o arquivo JavaScript que cont\u00e9m a l\u00f3gica de interatividade. Esse arquivo \u00e9 carregado apenas no frontend e somente se a p\u00e1gina contiver o bloco interativo.<\/li>\n<\/ul>\n<h3>render.php<\/h3>\n<p>O arquivo <code>render.php<\/code> \u00e9 onde voc\u00ea constr\u00f3i o markup de um bloco din\u00e2mico. Para tornar seu bloco interativo, voc\u00ea precisa adicionar atributos que tornem interativos os elementos DOM do seu bloco.<\/p>\n<p>O arquivo <code>render.php<\/code> no projeto inicial \u00e9 semelhante ao seguinte:<\/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>Veja o que esse c\u00f3digo faz:<\/p>\n<ul>\n<li><code>wp_interactivity_state<\/code>: obt\u00e9m e\/ou define o <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_interactivity_state\/\" target=\"_blank\" rel=\"noopener noreferrer\">estado global inicial<\/a> de um armazenamento da API de interatividade.<\/li>\n<li><code>data-wp-interactive<\/code>: <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/#wp-interactive\">habilita a API de interatividade<\/a> no elemento DOM e em seus elementos internos. Seu valor deve ser o namespace exclusivo do seu plugin ou bloco.<\/li>\n<li><code>wp_interactivity_data_wp_context()<\/code>: gera a diretiva <code>data-wp-context<\/code>, que <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_interactivity_data_wp_context\/\" target=\"_blank\" rel=\"noopener noreferrer\">fornece um estado local<\/a> para um node HTML espec\u00edfico e seus elementos internos.<\/li>\n<li><code>data-wp-watch<\/code>: <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/#wp-watch\">executa uma chamada de retorno<\/a> quando um node \u00e9 criado e sempre que o estado ou o contexto \u00e9 alterado.<\/li>\n<li><code>data-wp-class--dark-theme<\/code>: adiciona ou remove a classe <code>dark-theme<\/code> ao 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\">executa c\u00f3digo de forma s\u00edncrona<\/a> no evento de clique.<\/li>\n<li><code>data-wp-text<\/code>: <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/#wp-text\">define o texto interno<\/a> do 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\">Define atributos HTML<\/a> (<code>aria-expanded<\/code> e <code>hidden<\/code>) nos elementos correspondentes com base em um valor booleano ou de string.<\/li>\n<\/ul>\n<h3>view.js<\/h3>\n<p>Esse arquivo <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/#on-the-client-side\">define o Store<\/a> que cont\u00e9m a l\u00f3gica e os dados necess\u00e1rios para o comportamento do bloco, incluindo estado, a\u00e7\u00f5es e callbacks.<\/p>\n<p>A seguir, voc\u00ea encontra o arquivo <code>view.js<\/code> gerado pelo projeto inicial:<\/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>: a fun\u00e7\u00e3o principal usada para criar e registrar o estado global e a l\u00f3gica do bloco.<\/li>\n<li><code>getContext<\/code>: fun\u00e7\u00e3o utilizada dentro de a\u00e7\u00f5es e callbacks para acessar o estado local (<code>context<\/code>) do elemento DOM que acionou o evento.<\/li>\n<li><code>state<\/code>: define os dados reativos globais do bloco.<\/li>\n<li><code>actions<\/code>: inclui as fun\u00e7\u00f5es que definem a l\u00f3gica e modificam o estado.<\/li>\n<li><code>callbacks<\/code>: cont\u00e9m as fun\u00e7\u00f5es que s\u00e3o executadas automaticamente em resposta a eventos espec\u00edficos ou altera\u00e7\u00f5es de estado.<\/li>\n<\/ul>\n<p>\u00c9 bastante informa\u00e7\u00e3o, mas n\u00e3o se preocupe, tudo ficar\u00e1 mais claro conforme voc\u00ea avan\u00e7ar pelas pr\u00f3ximas se\u00e7\u00f5es.<\/p>\n<p>Agora, vamos examinar os principais conceitos da API de interatividade: diretivas, armazenamento, estado, a\u00e7\u00f5es e callbacks.<\/p>\n<h2>Diretivas da API de interatividade<\/h2>\n<p>Como outras bibliotecas de frontend, como Alpine.js e <a href=\"https:\/\/kinsta.com\/pt\/topicos\/vue-js\/\">Vue.js<\/a>, a API de interatividade usa atributos HTML especiais que permitem responder a eventos na p\u00e1gina, atualizar o estado do aplicativo, manipular o DOM, aplicar estilos CSS, manipular a entrada do usu\u00e1rio e muito mais.<\/p>\n<p>Esses atributos s\u00e3o chamados de <strong>diretivas<\/strong> e permitem que voc\u00ea conecte seu markup \u00e0 l\u00f3gica JavaScript subjacente.<\/p>\n<p>Abaixo est\u00e1 uma lista das diretivas que voc\u00ea mais usar\u00e1.<\/p>\n<table>\n<thead>\n<tr>\n<th style=\"width: 22.5%\">Fun\u00e7\u00e3o<\/th>\n<th style=\"width: 22.5%\">Diretiva<\/th>\n<th>Descri\u00e7\u00e3o<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Ativa\u00e7\u00e3o\/Namespace<\/td>\n<td><code>data-wp-interactive<\/code><\/td>\n<td>Ativa a API para o elemento e seus elementos internos. O valor deve ser o identificador exclusivo do seu plugin.<\/td>\n<\/tr>\n<tr>\n<td>Estado local<\/td>\n<td><code>data-wp-context<\/code><\/td>\n<td>Fornece um estado local (&#8220;contexto&#8221;) para o elemento atual e todos os elementos internos. Ele aceita um objeto JSON. Observe que \u00e9 recomend\u00e1vel que voc\u00ea use <code>wp_interactivity_data_wp_context()<\/code> para defini-lo no PHP (normalmente <code>render.php<\/code>).<\/td>\n<\/tr>\n<tr>\n<td>Vincula\u00e7\u00e3o de atributo<\/td>\n<td><code>data-wp-bind--[attribute]<\/code><\/td>\n<td>Define um atributo HTML (por exemplo, <code>disabled<\/code>, <code>value<\/code>) com base em um estado reativo ou valor de contexto (um valor booleano ou ou string).<\/td>\n<\/tr>\n<tr>\n<td>Modifica\u00e7\u00e3o de texto<\/td>\n<td><code>data-wp-text<\/code><\/td>\n<td>Define o conte\u00fado de texto interno do elemento. Aceita apenas strings.<\/td>\n<\/tr>\n<tr>\n<td>Altern\u00e2ncia de classe CSS<\/td>\n<td><code>data-wp-class--[classname]<\/code><\/td>\n<td>Adiciona ou remove uma propriedade CSS inline com base em um valor booleano.<\/td>\n<\/tr>\n<tr>\n<td>Estilo inline<\/td>\n<td><code>data-wp-style--[css-property]<\/code><\/td>\n<td>Adiciona ou remove uma classe de estilo em linha, dependendo de um valor booleano.<\/td>\n<\/tr>\n<tr>\n<td>Manipula\u00e7\u00e3o de eventos<\/td>\n<td><code>data-wp-on--[event]<\/code><\/td>\n<td>Executa c\u00f3digo em resposta a eventos DOM padr\u00e3o, como <code>click<\/code> ou <code>mouseover<\/code>.<\/td>\n<\/tr>\n<tr>\n<td>Execu\u00e7\u00e3o inicial<\/td>\n<td><code>data-wp-init<\/code><\/td>\n<td>Executa uma fun\u00e7\u00e3o de callback apenas uma vez, quando o node \u00e9 criado.<\/td>\n<\/tr>\n<tr>\n<td>Observa\u00e7\u00e3o de estado<\/td>\n<td><code>data-wp-watch<\/code><\/td>\n<td>Executa um callback quando o node \u00e9 criado e novamente sempre que o estado ou contexto muda.<\/td>\n<\/tr>\n<tr>\n<td>Itera\u00e7\u00e3o de lista<\/td>\n<td><code>data-wp-each<\/code><\/td>\n<td>Renderiza uma lista de elementos.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Para obter uma lista completa de diretivas, consulte as <a href=\"https:\/\/make.wordpress.org\/core\/2024\/03\/04\/interactivity-api-dev-note\/\">notas de desenvolvimento da API de interatividade<\/a> e a <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/\">refer\u00eancia da API<\/a>.<\/p>\n<h2>Estado global, contexto local e estado derivado<\/h2>\n<p>Antes de come\u00e7ar a usar a API de interatividade, \u00e9 essencial que voc\u00ea se familiarize com os <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/core-concepts\/undestanding-global-state-local-context-and-derived-state\/\">conceitos fundamentais de gerenciamento de estado<\/a> no desenvolvimento de frontend. Aqueles que desenvolvem regularmente com React, Vue ou Angular j\u00e1 estar\u00e3o familiarizados com esses conceitos. Para aqueles que s\u00e3o novos nessas tecnologias, pode ser \u00fatil fornecer algumas defini\u00e7\u00f5es gerais.<\/p>\n<h3>Estado global<\/h3>\n<p>O <strong>estado global<\/strong> refere-se ao conjunto de dados acess\u00edveis a partir de quase todos os componentes de um aplicativo. No caso da API de interatividade, por exemplo, o estado global afeta todos os blocos interativos da p\u00e1gina, mantendo-os sincronizados. Por exemplo, quando um usu\u00e1rio adiciona um produto \u00e0 sua cesta, isso \u00e9 refletido no bloco do carrinho de compras.<\/p>\n<p>Ao usar a API de interatividade, voc\u00ea deve definir os valores iniciais do estado global no servidor usando a fun\u00e7\u00e3o <code>wp_interactivity_state()<\/code>. No projeto inicial descrito anteriormente, essa fun\u00e7\u00e3o \u00e9 usada no arquivo <code>render.php<\/code> da seguinte forma:<\/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\">Essa fun\u00e7\u00e3o<\/a> aceita dois argumentos:<\/p>\n<ul>\n<li>Um identificador exclusivo para o namespace da loja. Nesse caso, <code>create-block<\/code>.<\/li>\n<li>Uma array de dados que ser\u00e1 mesclada com o namespace da loja existente, se existir.<\/li>\n<\/ul>\n<p>Os valores iniciais do estado global s\u00e3o usados para renderizar a p\u00e1gina. Voc\u00ea pode acessar os valores do estado global diretamente usando <code>state<\/code> nos valores das diretivas, como neste exemplo:<\/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>A fun\u00e7\u00e3o <code>store()<\/code> fornece o principal ponto de acesso ao estado global do JavaScript, limitado ao namespace selecionado. Voltando ao c\u00f3digo do projeto inicial, a fun\u00e7\u00e3o <code>store()<\/code> \u00e9 usada no arquivo <code>view.js<\/code> da seguinte forma:<\/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 acessar o estado global, voc\u00ea pode usar a propriedade <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>O <strong>contexto local<\/strong> s\u00e3o dados que s\u00f3 podem ser acessados por um componente espec\u00edfico e seus elementos internos diretos. Um bloco interativo do WordPress fornece um estado independente para o bloco e seus elementos aninhados.<\/p>\n<p>Ao usar a API de interatividade, voc\u00ea pode acessar o contexto local usando a fun\u00e7\u00e3o <code>getContext()<\/code>. Referindo-se novamente ao projeto inicial, quando o usu\u00e1rio clica no bot\u00e3o Toggle, a a\u00e7\u00e3o <code>toggleOpen()<\/code> \u00e9 acionada, acessando o contexto Local do 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 o objeto de estado local do bloco. As propriedades desse objeto s\u00e3o definidas no markup do componente (<code>render.php<\/code>) usando a fun\u00e7\u00e3o <code>wp_interactivity_data_wp_context()<\/code>.<\/li>\n<li><code>context.isOpen = ! context.isOpen;<\/code>: alterna o valor da propriedade <code>isOpen<\/code> no contexto local do componente.<\/li>\n<\/ul>\n<h3>Estado derivado<\/h3>\n<p>O <strong>estado derivado<\/strong> refere-se a dados calculados dinamicamente a partir do estado global ou local existente.<\/p>\n<p>Por exemplo, d\u00ea uma olhada no c\u00f3digo do arquivo <code>view.js<\/code>, especificamente nesta se\u00e7\u00e3o:<\/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>Esse bloco define o estado derivado <code>themeText<\/code> dentro do estado global definido no namespace <code>create-block<\/code>.<\/p>\n<ul>\n<li><code>get themeText()<\/code> n\u00e3o \u00e9 um valor fixo, mas sim uma fun\u00e7\u00e3o que \u00e9 executada sempre que voc\u00ea tenta ler a propriedade <code>themeText<\/code>. Ela n\u00e3o deve ser chamada como uma fun\u00e7\u00e3o normal porque a API de interatividade a trata como uma propriedade de estado e recalcula automaticamente seu valor sempre que os valores de outras propriedades de estado s\u00e3o alterados. No c\u00f3digo acima, o valor da propriedade <code>themeText<\/code> \u00e9 recalculado sempre que o valor da propriedade <code>isDark<\/code> \u00e9 alterado. Se <code>state.isDark<\/code> for <code>true<\/code>, ent\u00e3o <code>themeText<\/code> assumir\u00e1 o valor de <code>state.darkText<\/code>; caso contr\u00e1rio, assumir\u00e1 o valor de <code>state.lightText<\/code>.<\/li>\n<\/ul>\n<p>Para uma explica\u00e7\u00e3o mais completa desses conceitos, consulte <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\">Entendendo o estado global, o contexto local e o estado derivado<\/a>.<\/p>\n<h2>A\u00e7\u00f5es e callbacks<\/h2>\n<p>As a\u00e7\u00f5es e callbacks determinam a resposta \u00e0 intera\u00e7\u00e3o do usu\u00e1rio e \u00e0s altera\u00e7\u00f5es de estado.<\/p>\n<p>A se\u00e7\u00e3o <code>actions<\/code> de um bloco interativo cont\u00e9m fun\u00e7\u00f5es que s\u00e3o executadas em resposta a eventos gerados pelo usu\u00e1rio. Essas fun\u00e7\u00f5es servem principalmente para modificar o estado local ou global do componente. Veja o exemplo a seguir retirado do arquivo <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>Nessa se\u00e7\u00e3o do c\u00f3digo, a fun\u00e7\u00e3o <code>toggleOpen()<\/code> usa <code>getContext()<\/code> para acessar o contexto Local do bloco que acionou a a\u00e7\u00e3o para mudar o valor da propriedade <code>isOpen<\/code>.<\/li>\n<\/ul>\n<p>Da mesma forma, voc\u00ea pode acessar o 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>A fun\u00e7\u00e3o <code>toggleTheme()<\/code> acessa diretamente o objeto global <code>state<\/code> e altera o valor da propriedade <code>isDark<\/code>.<\/li>\n<\/ul>\n<p>As a\u00e7\u00f5es s\u00e3o acionadas por meio da diretiva <code>data-wp-on--[event]<\/code>. Por exemplo, no arquivo <code>render.php<\/code>, voc\u00ea encontrar\u00e1 o seguinte bot\u00e3o:<\/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>Nesse c\u00f3digo HTML, o atributo <code>data-wp-on--click<\/code> ativa a a\u00e7\u00e3o <code>toggleOpen<\/code> quando o usu\u00e1rio clica no bot\u00e3o de altern\u00e2ncia.<\/li>\n<\/ul>\n<p>A se\u00e7\u00e3o <code>callbacks<\/code> cont\u00e9m fun\u00e7\u00f5es que s\u00e3o executadas automaticamente quando os dados dos quais elas dependem s\u00e3o alterados. Seu objetivo \u00e9 produzir efeitos colaterais em resposta a uma altera\u00e7\u00e3o de estado.<\/p>\n<p>No projeto b\u00e1sico gerado por <code>create-block-interactive-template<\/code>, voc\u00ea encontrar\u00e1 o seguinte 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>A fun\u00e7\u00e3o <code>logIsOpen<\/code> usa a vari\u00e1vel <code>isOpen<\/code>, que est\u00e1 dispon\u00edvel no contexto Local.<\/li>\n<li>O callback recupera o valor de <code>isOpen<\/code> usando <code>getContext()<\/code>.<\/li>\n<li>Sempre que o valor de <code>isOpen<\/code> \u00e9 alterado, a fun\u00e7\u00e3o lan\u00e7a uma mensagem no console do 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=\"Uma mensagem no console informa o usu\u00e1rio sobre a altera\u00e7\u00e3o no contexto Local.\" width=\"1596\" height=\"727\"><figcaption id=\"caption-attachment-199639\" class=\"wp-caption-text\">Uma mensagem no console informa o usu\u00e1rio sobre a altera\u00e7\u00e3o no contexto Local.<\/figcaption><\/figure>\n<h2>Como criar um bloco interativo<\/h2>\n<p>Agora que abordamos a teoria, \u00e9 hora de colocar o c\u00f3digo em pr\u00e1tica. Na segunda parte deste guia, voc\u00ea aprender\u00e1 a criar um bloco interativo que permite aos usu\u00e1rios adicionar produtos a uma cesta de compras ideal, com quantidades e totais atualizados automaticamente. Este \u00e9 um exemplo demonstrativo, mas deve ajudar a compreender claramente como usar state, actions e 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=\"O bloco interativo no editor.\" width=\"1512\" height=\"1204\"><figcaption id=\"caption-attachment-199768\" class=\"wp-caption-text\">O bloco interativo no editor.<\/figcaption><\/figure>\n<p>Criaremos um bloco chamado <strong>Interactive Counter<\/strong>\u00a0usando o <code>create-block-interactive-template<\/code>. Para come\u00e7ar, abra a ferramenta de linha de comando e digite o seguinte:<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block interactive-counter --template @wordpress\/create-block-interactive-template<\/code><\/pre>\n<p>Em seguida, navegue at\u00e9 o diret\u00f3rio do novo projeto e execute o primeiro build:<\/p>\n<pre><code class=\"language-bash\">cd interactive-counter && npm run build<\/code><\/pre>\n<p>Abra o projeto em seu editor de c\u00f3digo agora. No diret\u00f3rio <code>\/src<\/code>, procure o arquivo <code>block.json<\/code>. Ele deve se parecer com o exemplo abaixo:<\/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>Voc\u00ea pode personalizar o arquivo \u00e0 vontade, mas certifique-se de n\u00e3o modificar os campos essenciais descritos acima, pois eles s\u00e3o necess\u00e1rios para o funcionamento do bloco interativo.<\/p>\n<h3>O arquivo edit.js<\/h3>\n<p>A pr\u00f3xima etapa \u00e9 criar o bloco que ser\u00e1 exibido no editor. Para fazer isso, voc\u00ea precisar\u00e1 editar o arquivo <code>\/src\/edit.js<\/code>. Abra o arquivo e modifique-o da seguinte forma:<\/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>Esse c\u00f3digo gera um bloco personalizado no backend. O bloco ser\u00e1 interativo somente no frontend. Para obter mais detalhes sobre o arquivo <code>\/src\/edit.js<\/code>, consulte nossos <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-dinamicos-gutenberg\/\">guias<\/a> <a href=\"https:\/\/kinsta.com\/pt\/blog\/blocos-personalizados-gutenberg\/\">de desenvolvimento de blocos<\/a> do Gutenberg.<\/p>\n<h3>O arquivo render.php<\/h3>\n<p>O pr\u00f3ximo arquivo a ser editado \u00e9 <code>\/src\/render.php<\/code>. Abra o arquivo e substitua o c\u00f3digo existente pelo seguinte:<\/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>Veja o que esse c\u00f3digo faz:<\/p>\n<ul>\n<li>Primeiro, cria um array fixo (<em>hard-coded<\/em>) de produtos. Cada produto tem um ID, um nome e um pre\u00e7o.<\/li>\n<li>Em seguida, inicializa o estado Global com <code>wp_interactivity_state<\/code>. O primeiro par\u00e2metro \u00e9 o nome do <em>store<\/em>, que deve corresponder ao usado em <code>view.js<\/code>.<\/li>\n<li>Depois, mapeia o array anterior de produtos para um novo array <code>products<\/code>, adicionando quantity e subtotal \u00e0s propriedades do array original. Esse novo array fornece a estrutura de dados que voc\u00ea usar\u00e1 em <code>view.js<\/code>.<\/li>\n<li><code>vatRate<\/code> define o valor padr\u00e3o para o c\u00e1lculo de impostos.<\/li>\n<\/ul>\n<p>Em seguida, adicione o seguinte ao c\u00f3digo acima:<\/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>Veja o que esse c\u00f3digo faz:<\/p>\n<ul>\n<li>A fun\u00e7\u00e3o <code>get_block_wrapper_attributes()<\/code> na <code>div<\/code> cont\u00eainer \u00e9 uma fun\u00e7\u00e3o do WordPress que gera os atributos padr\u00e3o de um bloco. Neste caso, ela gera o atributo class <code>\"wp-block-create-block-interactive-counter\"<\/code>.<\/li>\n<li>O atributo <code>data-wp-interactive<\/code> torna este bloco interativo.<\/li>\n<li>O atributo <code>data-wp-init<\/code> aciona o <em>callback<\/em> <code>init<\/code> definido em <code>view.js<\/code>.<\/li>\n<li>O <code>foreach<\/code> gera um item de lista para cada produto no array <code>products<\/code>.<\/li>\n<li><code>data-wp-context<\/code> define o contexto Local do bloco.<\/li>\n<li><code>data-wp-bind<\/code> vincula o valor de <code>data-wp-context.quantity<\/code> \u00e0 propriedade <code>state.products[$index].quantity<\/code> do estado global.<\/li>\n<li>O mesmo ocorre na linha abaixo com o subtotal.<\/li>\n<li>Os dois bot\u00f5es seguintes ativam as a\u00e7\u00f5es <code>decrement<\/code> e <code>increment<\/code> gra\u00e7as ao atributo <code>data-wp-on--click<\/code>.<\/li>\n<li>O atributo <code>data-wp-text<\/code> no <code>span<\/code> atualiza o conte\u00fado do elemento com base no valor atual de <code>context.quantity<\/code><\/li>\n<\/ul>\n<p>O restante do c\u00f3digo \u00e9 autoexplicativo; vamos avan\u00e7ar para o pr\u00f3ximo arquivo.<\/p>\n<h3>O arquivo view.js<\/h3>\n<p>Esse arquivo cont\u00e9m a l\u00f3gica do seu bloco interativo.<\/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>Esse arquivo define o armazenamento para o namespace <code>interactive-counter<\/code>. Ele gerencia o estado, as a\u00e7\u00f5es e callbacks:<\/p>\n<pre><code class=\"language-javascript\">store('interactive-counter', {\n\tstate: { ... },\n\tactions: { ... },\n\tcallbacks: { ... },\n});<\/code><\/pre>\n<p>Vamos dar uma olhada mais de perto.<\/p>\n<ul>\n<li><code>state<\/code>: define tr\u00eas propriedades de estado computadas (<em>getters<\/em>): <code>subtotal<\/code>, <code>vat<\/code> e <code>total<\/code>. Essas fun\u00e7\u00f5es recuperam valores do estado Global e calculam os valores a serem retornados.<\/li>\n<li><code>actions<\/code>: define duas fun\u00e7\u00f5es executadas em eventos: <code>increment<\/code> e <code>decrement<\/code>. Essas fun\u00e7\u00f5es obt\u00eam o array <code>products<\/code> do estado Global, recuperam o produto atual do contexto Local com base em <code>context.productId<\/code>, atualizam os valores das propriedades do produto atual (<code>quantity<\/code> e <code>subtotal<\/code>) e sincronizam o contexto Local com os novos valores.<\/li>\n<li><code>callbacks<\/code>: define um <em>callback<\/em> <code>init<\/code> para inicializa\u00e7\u00e3o.<\/li>\n<\/ul>\n<p>A imagem a seguir mostra o bloco interativo no 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=\"Um contador interativo criado com a API de interatividade.\" width=\"1364\" height=\"896\"><figcaption id=\"caption-attachment-199769\" class=\"wp-caption-text\">Um contador interativo criado com a API de interatividade.<\/figcaption><\/figure>\n<h2>Resumo<\/h2>\n<p>Neste artigo, apresentamos os principais recursos da API de interatividade do WordPress. Exploramos conceitos fundamentais como estado global, contexto local, diretivas, a\u00e7\u00f5es e callbacks. Voc\u00ea aprendeu a criar um bloco interativo do zero usando o <code>@wordpress\/create-block-interactive-template<\/code> e colocamos isso em pr\u00e1tica criando um bloco real que interage com as a\u00e7\u00f5es do usu\u00e1rio.<\/p>\n<p>Esperamos ter fornecido as ferramentas e o conhecimento necess\u00e1rios para que voc\u00ea crie sites WordPress fant\u00e1sticos, din\u00e2micos e interativos usando a Interactivity API.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>1Em artigos anteriores deste blog, exploramos o desenvolvimento de blocos do WordPress de v\u00e1rios \u00e2ngulos. Examinamos o desenvolvimento de blocos est\u00e1ticos e din\u00e2micos e ampliamos a &#8230;<\/p>\n","protected":false},"author":36,"featured_media":73452,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[951,1026],"class_list":["post-73451","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-desenvolvimento-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>Desbloqueando novas possibilidades com a API de interatividade do WordPress<\/title>\n<meta name=\"description\" content=\"A API de interatividade do WordPress \u00e9 uma ferramenta poderosa que permite criar sites WordPress de nova gera\u00e7\u00e3o. Explore nosso guia completo e comece a desenvolver blocos interativos!\" \/>\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\/pt\/blog\/api-de-interatividade-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Desbloqueando novas possibilidades com a API de interatividade do WordPress\" \/>\n<meta property=\"og:description\" content=\"A API de interatividade do WordPress \u00e9 uma ferramenta poderosa que permite criar sites WordPress de nova gera\u00e7\u00e3o. Explore nosso guia completo e comece a desenvolver blocos interativos!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/pt\/blog\/api-de-interatividade-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstapt\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-06T07:55:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-11T08:58:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/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=\"A API de interatividade do WordPress \u00e9 uma ferramenta poderosa que permite criar sites WordPress de nova gera\u00e7\u00e3o. Explore nosso guia completo e comece a desenvolver blocos interativos!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/11\/how-to-create-interactive-blocks.png\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_pt\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"24 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/api-de-interatividade-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/api-de-interatividade-wordpress\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Desbloqueando novas possibilidades com a API de interatividade do WordPress\",\"datePublished\":\"2025-11-06T07:55:02+00:00\",\"dateModified\":\"2025-11-11T08:58:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/api-de-interatividade-wordpress\/\"},\"wordCount\":3196,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/api-de-interatividade-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/11\/how-to-create-interactive-blocks.png\",\"inLanguage\":\"pt-PT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/api-de-interatividade-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/pt\/blog\/api-de-interatividade-wordpress\/\",\"name\":\"Desbloqueando novas possibilidades com a API de interatividade do WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/api-de-interatividade-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/api-de-interatividade-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/11\/how-to-create-interactive-blocks.png\",\"datePublished\":\"2025-11-06T07:55:02+00:00\",\"dateModified\":\"2025-11-11T08:58:35+00:00\",\"description\":\"A API de interatividade do WordPress \u00e9 uma ferramenta poderosa que permite criar sites WordPress de nova gera\u00e7\u00e3o. Explore nosso guia completo e comece a desenvolver blocos interativos!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/api-de-interatividade-wordpress\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/pt\/blog\/api-de-interatividade-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/api-de-interatividade-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/11\/how-to-create-interactive-blocks.png\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/11\/how-to-create-interactive-blocks.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/pt\/blog\/api-de-interatividade-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"API\",\"item\":\"https:\/\/kinsta.com\/pt\/topicos\/api\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Desbloqueando novas possibilidades com a API de interatividade do WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/pt\/#website\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/pt\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstapt\/\",\"https:\/\/x.com\/kinsta_pt\",\"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\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Desbloqueando novas possibilidades com a API de interatividade do WordPress","description":"A API de interatividade do WordPress \u00e9 uma ferramenta poderosa que permite criar sites WordPress de nova gera\u00e7\u00e3o. Explore nosso guia completo e comece a desenvolver blocos interativos!","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\/pt\/blog\/api-de-interatividade-wordpress\/","og_locale":"pt_PT","og_type":"article","og_title":"Desbloqueando novas possibilidades com a API de interatividade do WordPress","og_description":"A API de interatividade do WordPress \u00e9 uma ferramenta poderosa que permite criar sites WordPress de nova gera\u00e7\u00e3o. Explore nosso guia completo e comece a desenvolver blocos interativos!","og_url":"https:\/\/kinsta.com\/pt\/blog\/api-de-interatividade-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstapt\/","article_published_time":"2025-11-06T07:55:02+00:00","article_modified_time":"2025-11-11T08:58:35+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/11\/how-to-create-interactive-blocks.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"A API de interatividade do WordPress \u00e9 uma ferramenta poderosa que permite criar sites WordPress de nova gera\u00e7\u00e3o. Explore nosso guia completo e comece a desenvolver blocos interativos!","twitter_image":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/11\/how-to-create-interactive-blocks.png","twitter_creator":"@carlodaniele","twitter_site":"@kinsta_pt","twitter_misc":{"Escrito por":"Carlo Daniele","Tempo estimado de leitura":"24 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/pt\/blog\/api-de-interatividade-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/blog\/api-de-interatividade-wordpress\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Desbloqueando novas possibilidades com a API de interatividade do WordPress","datePublished":"2025-11-06T07:55:02+00:00","dateModified":"2025-11-11T08:58:35+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/api-de-interatividade-wordpress\/"},"wordCount":3196,"publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/api-de-interatividade-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/11\/how-to-create-interactive-blocks.png","inLanguage":"pt-PT"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/pt\/blog\/api-de-interatividade-wordpress\/","url":"https:\/\/kinsta.com\/pt\/blog\/api-de-interatividade-wordpress\/","name":"Desbloqueando novas possibilidades com a API de interatividade do WordPress","isPartOf":{"@id":"https:\/\/kinsta.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/pt\/blog\/api-de-interatividade-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/pt\/blog\/api-de-interatividade-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/11\/how-to-create-interactive-blocks.png","datePublished":"2025-11-06T07:55:02+00:00","dateModified":"2025-11-11T08:58:35+00:00","description":"A API de interatividade do WordPress \u00e9 uma ferramenta poderosa que permite criar sites WordPress de nova gera\u00e7\u00e3o. Explore nosso guia completo e comece a desenvolver blocos interativos!","breadcrumb":{"@id":"https:\/\/kinsta.com\/pt\/blog\/api-de-interatividade-wordpress\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/pt\/blog\/api-de-interatividade-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/blog\/api-de-interatividade-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/11\/how-to-create-interactive-blocks.png","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2025\/11\/how-to-create-interactive-blocks.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/pt\/blog\/api-de-interatividade-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/pt\/"},{"@type":"ListItem","position":2,"name":"API","item":"https:\/\/kinsta.com\/pt\/topicos\/api\/"},{"@type":"ListItem","position":3,"name":"Desbloqueando novas possibilidades com a API de interatividade do WordPress"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/pt\/#website","url":"https:\/\/kinsta.com\/pt\/","name":"Kinsta\u00ae","description":"Solu\u00e7\u00f5es de hospedagem Premium, r\u00e1pida e segura","publisher":{"@id":"https:\/\/kinsta.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/pt\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/pt\/wp-content\/uploads\/sites\/3\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/pt\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstapt\/","https:\/\/x.com\/kinsta_pt","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\/pt\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/kinsta.com\/pt\/#\/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\/pt\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/73451","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/comments?post=73451"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/73451\/revisions"}],"predecessor-version":[{"id":73509,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/posts\/73451\/revisions\/73509"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/73451\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/73451\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/73451\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/73451\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/73451\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/73451\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/73451\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/73451\/translations\/es"},{"href":"https:\/\/kinsta.com\/pt\/wp-json\/kinsta\/v1\/posts\/73451\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media\/73452"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/media?parent=73451"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/tags?post=73451"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/pt\/wp-json\/wp\/v2\/topic?post=73451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}