{"id":63739,"date":"2025-11-06T08:48:44","date_gmt":"2025-11-06T07:48:44","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=63739&#038;preview=true&#038;preview_id=63739"},"modified":"2025-11-10T10:42:31","modified_gmt":"2025-11-10T09:42:31","slug":"wordpress-interactivity-api","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/wordpress-interactivity-api\/","title":{"rendered":"Nieuwe mogelijkheden met de WordPress Interactivity API"},"content":{"rendered":"<p>In eerdere artikelen op dit blog hebben we de ontwikkeling van WordPress blokken vanuit verschillende invalshoeken bekeken. We hebben de ontwikkeling van zowel <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/\">statische<\/a> als <a href=\"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/\">dynamische<\/a> blokken onderzocht en <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-plugin\/\">de functionaliteit van core-blokken uitgebreid<\/a>. Maar de aanpak die we tot nu toe hebben gevolgd, stelde ons eigenlijk alleen in staat om standaardblokken te maken die niet in realtime reageerden op gebruikersinteracties. Met andere woorden, deze blokken waren niet-interactief.<\/p>\n<p>In dit artikel zullen we een nieuwe benadering van blokontwikkeling verkennen, waarmee we interactieve blokken kunnen maken dankzij een nieuwe, krachtige WordPress API: de <strong>WordPress Interactivity API<\/strong>. Deze API is ge\u00efntroduceerd in <a href=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-6-5\/#interactivity-api\">WordPress 6.5<\/a> en stelt je in staat om blokken te maken die in realtime reageren op gebruikersinteracties, waardoor je rijke gebruikerservaringen kunt cre\u00ebren en je sites dynamisch, responsief en visueel aantrekkelijk kunt maken.<\/p>\n<p>Er is veel om over te praten, maar laten we voordat we beginnen eerst eens kijken naar de essenti\u00eble vereisten!<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>Wat je nodig hebt voordat je begint met de Interactivity API<\/h2>\n<p>Omdat de Interactivity API is gebaseerd op <a href=\"https:\/\/kinsta.com\/blog\/what-is-react-js\/\">React<\/a>, heb je op zijn minst basiskennis nodig van <a href=\"https:\/\/kinsta.com\/nl\/blog\/wat-is-node-js\/\">server-side JavaScript<\/a> en React, evenals bouwgereedschappen zoals <a href=\"https:\/\/kinsta.com\/blog\/what-is-npm\/\">npm<\/a> en npx. Je hebt ook een grondige kennis nodig van <a href=\"https:\/\/kinsta.com\/nl\/blog\/wp-scripts-ontwikkeling\/\">de ontwikkeling van WordPress<\/a> en de <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-wordpress-editor\/\">Gutenberg block editor<\/a>.<\/p>\n<p>Zodra je de nodige vaardigheden hebt verworven, heb je een <a href=\"https:\/\/kinsta.com\/blog\/mamp-alternative\/\">lokale ontwikkelomgeving<\/a> nodig waarmee je snel en gemakkelijk een WordPress site kunt starten. Wij raden <a href=\"https:\/\/kinsta.com\/nl\/devkinsta\/\">DevKinsta<\/a> aan, onze lokale ontwikkelsuite die speciaal is ontworpen voor WordPress. Met DevKinsta kun je in een paar klikken een nieuwe lokale WordPress site opzetten en deze tot in detail aanpassen.<\/p>\n<p>Wanneer je een nieuw WordPress project aanmaakt in DevKinsta, kun je de volgende opties instellen:<\/p>\n<ul>\n<li>Top Level domein: Standaard .local<\/li>\n<li>PHP versie<\/li>\n<li>Naam database<\/li>\n<li>HTTPS inschakelen<\/li>\n<li>WordPress details<\/li>\n<li>WordPress automatisch bijwerken<\/li>\n<li>Multisite<\/li>\n<\/ul>\n<p>Daarnaast kun je een bestaande MyKinsta website importeren vanuit een 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=\"Een lokale website configureren in DevKinsta\" width=\"2230\" height=\"1656\"><figcaption id=\"caption-attachment-199777\" class=\"wp-caption-text\">Een lokale website configureren in DevKinsta<\/figcaption><\/figure>\n<h2>Wat is de Interactivity API?<\/h2>\n<p>De Interactivity API is een WordPress-native API waarmee je interactiviteit kunt toevoegen aan Gutenberg blokken en dus aan berichten en pagina&#8217;s op een WordPress site. Het is een lichtgewicht, moderne oplossing met een <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/core-concepts\/the-reactive-and-declarative-mindset\/\" target=\"_blank\" rel=\"noopener noreferrer\">declaratieve benadering<\/a> voor het beheren van gebruikersinteracties.<\/p>\n<p>Het maken van een interactief blok vanaf nul vereist geavanceerde PHP en <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/core-concepts\/server-side-rendering\/\" target=\"_blank\" rel=\"noopener noreferrer\">server-side JavaScript<\/a> ontwikkelvaardigheden. Het is echter niet nodig om bij elk nieuw project het wiel opnieuw uit te vinden, want WordPress biedt een <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block-interactive-template\/\">template voor het maken van interactieve blokken<\/a>:<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block --template @wordpress\/create-block-interactive-template<\/code><\/pre>\n<p>Dit template bevat alles wat je nodig hebt om een interactief blok te maken, inclusief twee werkende voorbeelden die je kunt gebruiken als referentie voor je eerste project: een knop om het huidige thema om te schakelen en een knop om een paragraaf uit te vouwen\/inklappen.<\/p>\n<p>Om te beginnen open je je favoriete opdrachtprompt, navigeer je naar de map <strong>Plugins<\/strong> van je lokale WordPress-installatie en typ je het volgende:<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block your-interactive-block --template @wordpress\/create-block-interactive-template<\/code><\/pre>\n<p>Wacht even tot de installatie is voltooid en open dan je projectmap met de <a href=\"https:\/\/kinsta.com\/nl\/blog\/gratis-html-editors\/\">code-editor<\/a> van je voorkeur. Wij raden aan om <a href=\"https:\/\/kinsta.com\/nl\/blog\/beste-teksteditors\/#visual-studio-code\">Visual Studio Code<\/a> te gebruiken, maar je kunt elke editor gebruiken waar jij je het prettigst bij voelt.<\/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=\"Het interactieve blok in Visual Studio Code\" width=\"2086\" height=\"1230\"><figcaption id=\"caption-attachment-199519\" class=\"wp-caption-text\">Het interactieve blokproject dat wordt geleverd door de <code>@wordpress\/create-block-interactive-template<\/code><\/figcaption><\/figure>\n<p>Navigeer vanaf de commandoregel naar de map van de nieuwe plugin en <a href=\"https:\/\/developer.wordpress.org\/block-editor\/getting-started\/quick-start-guide\/#basic-usage\" target=\"_blank\" rel=\"noopener noreferrer\">start de ontwikkelserver<\/a> met het volgende commando:<\/p>\n<pre><code class=\"language-bash\">npm start<\/code><\/pre>\n<p>Vanaf nu zullen alle wijzigingen die je aanbrengt in je blok in realtime zichtbaar zijn in je WordPress installatie.<\/p>\n<p>Navigeer vervolgens in je WordPress admin naar het <strong>Plugins<\/strong> scherm en activeer de <strong>Interactivity API<\/strong> plugin die je zojuist hebt gemaakt. Maak een nieuw bericht of pagina aan, zoek dan naar <strong>Your Interactive Block <\/strong>in de block inserter en voeg het toe aan je inhoud. Sla het bericht op en bekijk het voorbeeld op de voorkant. Je ziet een geel blok met twee knoppen. De eerste knop verandert de achtergrondkleur van het blok en de tweede knop toont of verbergt de inhoud van de alinea.<\/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=\"Een voorbeeld van een interactief blok \" width=\"1405\" height=\"696\"><figcaption id=\"caption-attachment-199520\" class=\"wp-caption-text\">Een voorbeeld van een interactief blok dat door de <code>@wordpress\/create-block-interactive-template<\/code><\/figcaption><\/figure>\n<p>Nu je een plugin hebt om naar te verwijzen voor de onderwerpen die in dit artikel zijn behandeld, kunnen we verder gaan en interactieve blokken verder uitdiepen.<\/p>\n<h2>De structuur van interactieve blokken<\/h2>\n<p>De structuur van interactieve blokken is hetzelfde als die van <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/#a-walkthrough-of-the-starter-block-scaffolding\">traditionele blokken<\/a>. Je hebt nog steeds een <code>package.json<\/code>, een <code>block.json<\/code>, een <code>edit.js<\/code> bestand en een <code>style.scss<\/code> bestand nodig. Daarnaast heb je een <code>render.php<\/code> bestand nodig voor rendering aan de serverkant en een <code>view.js<\/code> bestand voor interactiviteit aan de frond-end.<\/p>\n<p>Laten we eens kijken naar de specifieke bouwstenen van een interactief blok door de individuele bestanden van het startproject te behandelen.<\/p>\n<h3>package.json<\/h3>\n<p>Het <code>package.json<\/code> bestand wordt <a href=\"https:\/\/docs.npmjs.com\/cli\/v7\/configuring-npm\/package-json\" target=\"_blank\" rel=\"noopener noreferrer\">gebruikt in Node projecten<\/a> om je project te identificeren, scripts te beheren en dependencies te beheren en te installeren tijdens de ontwikkeling.<\/p>\n<p>Het volgende is de <code>package.json<\/code> voor het interactieve blok dat wordt geleverd door de <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>Vooral de secties <code>scripts<\/code> en <code>dependencies<\/code> zijn hier belangrijk.<\/p>\n<ul>\n<li><code>build<\/code>: Compileert de broncode naar JavaScript voor productie. De optie <code>--experimental-modules<\/code> maakt ondersteuning voor WordPress <a href=\"https:\/\/make.wordpress.org\/core\/2024\/03\/04\/script-modules-in-6-5\/\">scriptmodules<\/a> mogelijk.<\/li>\n<li><code>start<\/code>: Start de ontwikkelserver. Merk op dat de optie <code>--experimental-modules<\/code> opnieuw wordt opgegeven.<\/li>\n<li><code>dependencies<\/code>: Inclusief runtime dependencies met het nieuwste pakket van de Interactivity API.<\/li>\n<\/ul>\n<h3>block.json<\/h3>\n<p>Het bestand <code>block.json<\/code> is het manifest voor je Gutenberg blok. Het specificeert metadata, media, scripts en stijlen om te laden. Standaard genereert de <code>create-block-interactive-template<\/code> het volgende <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>De volgende velden zijn essentieel voor een interactief blok:<\/p>\n<ul>\n<li><code>apiVersion<\/code>: <code>3<\/code> is de nieuwste versie van de Block API en ondersteunt de nieuwste blokfuncties, zoals Script Modules.<\/li>\n<li><code>supports<\/code>: Specificeert blokondersteuning. <code>\"interactivity\": true<\/code> voegt ondersteuning voor de Interactivity API toe.<\/li>\n<li><code>render<\/code>: Specificeert het PHP-bestand dat verantwoordelijk is voor de rendering in de frontend. In dit bestand voeg je de directives toe die een blok interactief maken.<\/li>\n<li><code>viewScriptModule<\/code>: Geeft het JavaScript-bestand op dat de interactiviteitslogica bevat. Dit bestand wordt alleen geladen op de front-end en alleen als de pagina het interactieve blok bevat.<\/li>\n<\/ul>\n<h3>render.php<\/h3>\n<p>Op <code>render.php<\/code> bouw je de opmaak van een dynamisch blok. Om je blok interactief te maken, moet je attributen toevoegen die de DOM-elementen van je blok interactief maken.<\/p>\n<p>Het bestand <code>render.php<\/code> in het startproject ziet er als volgt uit:<\/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>Dit is wat deze code doet:<\/p>\n<ul>\n<li><code>wp_interactivity_state<\/code>: Verkrijgt en\/of stelt de <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_interactivity_state\/\" target=\"_blank\" rel=\"noopener noreferrer\">initi\u00eble globale status<\/a> in van een Interactivity API store.<\/li>\n<li><code>data-wp-interactive<\/code>: <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/#wp-interactive\">Schakelt de Interactivity API in<\/a> op het DOM element en zijn children. De waarde moet de unieke namespace van je plugin of blok zijn.<\/li>\n<li><code>wp_interactivity_data_wp_context()<\/code>: Genereert de <code>data-wp-context<\/code> directive, die <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_interactivity_data_wp_context\/\" target=\"_blank\" rel=\"noopener noreferrer\">een lokale status geeft<\/a> aan een specifiek HTML knooppunt en zijn kinderen.<\/li>\n<li><code>data-wp-watch<\/code>: <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/#wp-watch\">Voert een callback uit<\/a> wanneer een node wordt gemaakt en elke keer als de status of context verandert.<\/li>\n<li><code>data-wp-class--dark-theme<\/code>: Voegt de <code>dark-theme<\/code> klasse toe aan het HTML element of verwijdert deze.<\/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\">Voert code synchroon uit<\/a> bij een klikgebeurtenis.<\/li>\n<li><code>data-wp-text<\/code>: <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/#wp-text\">Stelt de binnentekst<\/a> van het HTML-element in.<\/li>\n<li><code>data-wp-bind--aria-expanded<\/code> en <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\">Zet HTML-attributen<\/a> (<code>aria-expanded<\/code> en <code>hidden<\/code>) op de overeenkomstige elementen op basis van een booleaanse of tekenreekswaarde.<\/li>\n<\/ul>\n<h3>view.js<\/h3>\n<p>Dit bestand <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/#on-the-client-side\">definieert de Store<\/a> die de logica en gegevens bevat die nodig zijn voor het gedrag van het blok, inclusief status, acties en callbacks.<\/p>\n<p>Het volgende is het bestand <code>view.js<\/code> dat is gegenereerd door het startproject:<\/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>: De hoofdfunctie die wordt gebruikt om de globale toestand en logica van het blok aan te maken en te registreren.<\/li>\n<li><code>getContext<\/code>: Een functie die binnen acties en callbacks wordt gebruikt om toegang te krijgen tot de lokale status (de <code>context<\/code>) van het DOM-element dat de gebeurtenis heeft getriggerd.<\/li>\n<li><code>state<\/code>: Definieert de globale reactieve gegevens van het blok.<\/li>\n<li><code>actions<\/code>: Bevat de functies die de logica defini\u00ebren en de toestand wijzigen.<\/li>\n<li><code>callbacks<\/code>: Bevat de functies die automatisch worden uitgevoerd als reactie op specifieke gebeurtenissen of toestandsveranderingen.<\/li>\n<\/ul>\n<p>Het is veel om te verwerken, maar maak je geen zorgen! Alles zal duidelijker worden als je de volgende secties hebt gelezen.<\/p>\n<p>Laten we nu de belangrijkste concepten van de Interactivity API bekijken: directives, store, state, actions en callbacks.<\/p>\n<h2>Interactivity API directives<\/h2>\n<p>Net als andere frontend bibliotheken zoals Alpine.js en <a href=\"https:\/\/kinsta.com\/nl\/onderwerpen\/vue-js\/\">Vue.js<\/a>, gebruikt de Interactivity API speciale HTML attributen waarmee je kunt reageren op gebeurtenissen op de pagina, de staat van de applicatie kunt bijwerken, de DOM kunt manipuleren, CSS stijlen kunt toepassen, gebruikersinvoer kunt verwerken en nog veel meer.<\/p>\n<p>Deze attributen worden <strong>directives<\/strong> genoemd en stellen je in staat om je opmaak te verbinden met de onderliggende JavaScript-logica.<\/p>\n<p>Hieronder staat een lijst van de directives die je het meest zult gebruiken.<\/p>\n<table>\n<thead>\n<tr>\n<th style=\"width: 22.5%\">Functie<\/th>\n<th style=\"width: 22.5%\">Richtlijn<\/th>\n<th>Beschrijving<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Activation\/Namespace<\/td>\n<td><code>data-wp-interactive<\/code><\/td>\n<td>Activeert de API voor het element en zijn children. De waarde moet worden ingesteld op de unieke identifier van je plugin.<\/td>\n<\/tr>\n<tr>\n<td>Local state<\/td>\n<td><code>data-wp-context<\/code><\/td>\n<td>Geeft een lokale status (&#8220;context&#8221;) voor het huidige element en al zijn kinderen. Het accepteert een JSON object. Merk op dat het aanbevolen wordt om <code>wp_interactivity_data_wp_context()<\/code> te gebruiken om het in te stellen in PHP (meestal <code>render.php<\/code>).<\/td>\n<\/tr>\n<tr>\n<td>Attribute Binding<\/td>\n<td><code>data-wp-bind--[attribute]<\/code><\/td>\n<td>Stelt een HTML-attribuut in (bijvoorbeeld <code>disabled<\/code>, <code>value<\/code>) op basis van een reactieve status of contextwaarde (een booleaanse of tekenreekswaarde).<\/td>\n<\/tr>\n<tr>\n<td>Text Modification<\/td>\n<td><code>data-wp-text<\/code><\/td>\n<td>Stelt de interne tekstinhoud van het element in. Dit accepteert alleen tekenreeksen.<\/td>\n<\/tr>\n<tr>\n<td>CSS Class Toggling<\/td>\n<td><code>data-wp-class--[classname]<\/code><\/td>\n<td>Voegt een CSS klasse toe of verwijdert deze, afhankelijk van een booleaanse waarde.<\/td>\n<\/tr>\n<tr>\n<td>Inline styling<\/td>\n<td><code>data-wp-style--[css-property]<\/code><\/td>\n<td>Voegt een inline stijlklasse toe of verwijdert deze afhankelijk van een booleaanse waarde.<\/td>\n<\/tr>\n<tr>\n<td>Event Handling<\/td>\n<td><code>data-wp-on--[event]<\/code><\/td>\n<td>Voert code uit als reactie op standaard DOM-gebeurtenissen zoals <code>click<\/code> of <code>mouseover<\/code>.<\/td>\n<\/tr>\n<tr>\n<td>Initial Execution<\/td>\n<td><code>data-wp-init<\/code><\/td>\n<td>Voert eenmalig een callback-functie uit, alleen wanneer de node wordt gemaakt.<\/td>\n<\/tr>\n<tr>\n<td>State Watching<\/td>\n<td><code>data-wp-watch<\/code><\/td>\n<td>Voert een callback uit wanneer de node wordt gemaakt en opnieuw wanneer de state of context verandert.<\/td>\n<\/tr>\n<tr>\n<td>List Iteration<\/td>\n<td><code>data-wp-each<\/code><\/td>\n<td>Rendert een lijst met elementen.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Kijk voor een volledige lijst met directives in de <a href=\"https:\/\/make.wordpress.org\/core\/2024\/03\/04\/interactivity-api-dev-note\/\">Interactivity API dev notes<\/a> en <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/\">API referentie<\/a>.<\/p>\n<h2>Globale state, lokale context en afgeleide state<\/h2>\n<p>Voordat je de Interactivity API gaat gebruiken, is het essentieel dat je vertrouwd raakt met de <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/core-concepts\/undestanding-global-state-local-context-and-derived-state\/\">fundamentele concepten van statebeheer<\/a> in frontend ontwikkeling. Degenen die regelmatig ontwikkelen met React, Vue of Angular zullen al bekend zijn met deze concepten. Voor degenen die nieuw zijn met deze technologie\u00ebn, kan het nuttig zijn om wat algemene definities te geven.<\/p>\n<h3>Globale state<\/h3>\n<p><strong>Global state<\/strong> verwijst naar de verzameling gegevens die toegankelijk zijn vanuit bijna alle componenten van een applicatie. In het geval van de Interactivity API, bijvoorbeeld, be\u00efnvloedt de globale state alle interactieve blokken op de pagina, waardoor ze synchroon blijven. Als een gebruiker bijvoorbeeld een product aan zijn mandje toevoegt, wordt dit gereflecteerd in het winkelwagenblok.<\/p>\n<p>Als je de Interactivity API gebruikt, moet je de beginwaarden van de globale state op de server instellen met de functie <code>wp_interactivity_state()<\/code>. In het hierboven beschreven startproject wordt deze functie als volgt gebruikt in het bestand <code>render.php<\/code>:<\/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\">Deze functie<\/a> accepteert twee argumenten:<\/p>\n<ul>\n<li>Een unieke identifier voor de namespace van de winkel. In dit geval <code>create-block<\/code>.<\/li>\n<li>Een array met gegevens die worden samengevoegd met de bestaande store namespace, als die bestaat.<\/li>\n<\/ul>\n<p>De initi\u00eble globale statewaarden worden dan gebruikt om de pagina te renderen. Je hebt direct toegang tot de globale statewaarden door <code>state<\/code> te gebruiken in de attribuutwaarden van de directive, zoals in de volgende code:<\/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>De functie <code>store()<\/code> biedt het belangrijkste toegangspunt tot de globale status vanuit JavaScript, beperkt tot de geselecteerde namespace. Als we teruggaan naar de code van het startproject, wordt de functie <code>store()<\/code> als volgt gebruikt in het bestand <code>view.js<\/code>:<\/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>Om toegang te krijgen tot de globale state kun je de property <code>state<\/code> gebruiken:<\/p>\n<pre><code class=\"language-javascript\">actions: {\n\ttoggleTheme() {\n\t\tstate.isDark = ! state.isDark;\n\t},\n},<\/code><\/pre>\n<h3>Lokale context<\/h3>\n<p><strong>Lokale context<\/strong> is data die alleen toegankelijk is voor een specifiek component en zijn directe children. Een WordPress interactief blok biedt een onafhankelijke state voor het blok en zijn geneste elementen.<\/p>\n<p>Wanneer je de Interactivity API gebruikt, kun je de Lokale context benaderen met de <code>getContext()<\/code> functie. Wanneer de gebruiker op de knop Toggle klikt, wordt de actie <code>toggleOpen()<\/code> geactiveerd en wordt er toegang verkregen tot de Lokale context van het component:<\/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>: Haalt het lokale state-object van het blok op. De properties van dit object worden gedefinieerd in de component markup (<code>render.php<\/code>) met de functie <code>wp_interactivity_data_wp_context()<\/code>.<\/li>\n<li><code>context.isOpen = ! context.isOpen;<\/code>: Verandert de waarde van de property <code>isOpen<\/code> in de lokale context van de component.<\/li>\n<\/ul>\n<h3>Afgeleide staat<\/h3>\n<p><strong>Afgeleide toestand<\/strong> verwijst naar gegevens die dynamisch worden berekend uit bestaande globale of lokale states.<\/p>\n<p>Kijk bijvoorbeeld eens naar de code in het bestand <code>view.js<\/code>, specifiek in deze sectie:<\/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>Dit blok definieert de <code>themeText<\/code> Afgeleide state binnen de Globale toestand gedefinieerd in de <code>create-block<\/code> namespace.<\/p>\n<ul>\n<li><code>get themeText()<\/code> is geen vaste waarde, maar eerder een functie die wordt uitgevoerd elke keer dat je de property <code>themeText<\/code> probeert te lezen. Het moet niet worden aangeroepen als een normale functie omdat de Interactivity API het behandelt als een state property en automatisch de waarde ervan herberekent wanneer de waarden van andere state properties veranderen. In de bovenstaande code wordt de waarde van de property <code>themeText<\/code> telkens herberekend als de waarde van de property\u00a0 <code>isDark<\/code> verandert. Als <code>state.isDark<\/code> <code>true<\/code> is, dan neemt <code>themeText<\/code> de waarde van <code>state.darkText<\/code> aan; anders neemt het de waarde van <code>state.lightText<\/code> aan.<\/li>\n<\/ul>\n<p>Voor een uitgebreider overzicht van de concepten die in deze sectie worden beschreven, zie <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\">Begrip van globale state, lokale context en afgeleide state<\/a>.<\/p>\n<h2>Actions en callbacks<\/h2>\n<p>Actions en callbacks bepalen de reactie op gebruikersinteractie en stateveranderingen.<\/p>\n<p>De sectie <code>actions<\/code> van een interactief blok bevat functies die worden uitgevoerd als reactie op door de gebruiker gegenereerde gebeurtenissen. Deze functies dienen voornamelijk om de lokale of globale state van de component te wijzigen. Neem de volgende code uit het bestand <code>view.js<\/code>:<\/p>\n<pre><code class=\"language-javascript\">actions: {\n\ttoggleOpen() {\n\t\tconst context = getContext();\n\t\tcontext.isOpen = ! context.isOpen;\n\t},\n\t...\n},<\/code><\/pre>\n<ul>\n<li>In dit deel van de code gebruikt de functie <code>toggleOpen()<\/code> <code>getContext()<\/code> om toegang te krijgen tot de Lokale context van het blok dat de actie heeft geactiveerd om de waarde van de property <code>isOpen<\/code> te wijzigen.<\/li>\n<\/ul>\n<p>Op dezelfde manier kun je toegang krijgen tot de Globale state:<\/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>De functie <code>toggleTheme()<\/code> heeft direct toegang tot het globale object <code>state<\/code> en verandert de waarde van de property <code>isDark<\/code>.<\/li>\n<\/ul>\n<p>Acties worden geactiveerd via de directive <code>data-wp-on--[event]<\/code>. In het bestand <code>render.php<\/code> staat bijvoorbeeld de volgende knop:<\/p>\n<pre><code class=\"language-html\">&lt;button\n\tdata-wp-on--click=\"actions.toggleOpen\"\n\tdata-wp-bind--aria-expanded=\"context.isOpen\"\n\taria-controls=\"&lt;?php echo esc_attr( $unique_id ); ?&gt;\"\n&gt;<\/code><\/pre>\n<ul>\n<li>In deze HTML-code activeert het <code>data-wp-on--click<\/code> attribuut de <code>toggleOpen<\/code> actie wanneer de gebruiker op de omschakelknop klikt.<\/li>\n<\/ul>\n<p>De sectie <code>callbacks<\/code> bevat functies die automatisch worden uitgevoerd als de gegevens waarvan ze afhankelijk zijn veranderen. Hun doel is om neveneffecten te produceren als reactie op een stateverandering.<\/p>\n<p>In het basisproject dat is gegenereerd door <code>create-block-interactive-template<\/code> vind je de volgende 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>De <code>logIsOpen<\/code> functie gebruikt de <code>isOpen<\/code> variabele, die beschikbaar is in de Lokale context.<\/li>\n<li>De callback haalt de waarde van <code>isOpen<\/code> op met <code>getContext()<\/code>.<\/li>\n<li>Elke keer als de waarde van <code>isOpen<\/code> verandert, gooit de functie een bericht naar de browserconsole.<\/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=\"Een bericht in de console informeert de gebruiker over de verandering in de Lokale context.\" width=\"1596\" height=\"727\"><figcaption id=\"caption-attachment-199639\" class=\"wp-caption-text\">Een bericht in de console informeert de gebruiker over de verandering in de Lokale context.<\/figcaption><\/figure>\n<h2>Zo bouw je een interactief blok<\/h2>\n<p>Nu we de theorie hebben behandeld, is het tijd om de handen uit de mouwen te steken met code! In het tweede deel van deze handleiding leer je hoe je een interactief blok kunt maken waarmee gebruikers producten kunnen toevoegen aan een winkelmandje, met hoeveelheden en totalen die automatisch worden bijgewerkt. Dit is een voorbeeld ter demonstratie, maar we hopen dat het een duidelijk inzicht geeft in het gebruik van status, acties en 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=\"Het interactieve blok in de editor\" width=\"1512\" height=\"1204\"><figcaption id=\"caption-attachment-199768\" class=\"wp-caption-text\">Het interactieve blok in de editor<\/figcaption><\/figure>\n<p>We maken een blok met de naam <strong>Interactive counter <\/strong>met behulp van de <code>create-block-interactive-template<\/code>. Om te beginnen open je je opdrachtprompt en typ je het volgende:<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block interactive-counter --template @wordpress\/create-block-interactive-template<\/code><\/pre>\n<p>Navigeer vervolgens naar je nieuwe projectmap en voer de eerste build uit.<\/p>\n<pre><code class=\"language-bash\">cd interactive-counter && npm run build<\/code><\/pre>\n<p>Open het project nu in je code editor. Zoek in de map <code>\/src<\/code> naar het bestand <code>block.json<\/code>. Het zou er ongeveer zo uit moeten zien:<\/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>Pas het gerust aan, maar zorg ervoor dat je de essenti\u00eble velden zoals hierboven beschreven niet wijzigt.<\/p>\n<h3>Het bestand edit.js<\/h3>\n<p>De volgende stap is het maken van het blok dat in de editor zal verschijnen. Hiervoor moet je het bestand <code>\/src\/edit.js<\/code> bewerken. Open het bestand en wijzig het als volgt:<\/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>Deze code genereert een custom blok in de backend. Het blok zal alleen interactief zijn in het front-end. Meer details over het bestand <code>\/src\/edit.js<\/code> vind je in onze Gutenberg <a href=\"https:\/\/kinsta.com\/nl\/blog\/gutenberg-blokken\/\">blok<\/a> <a href=\"https:\/\/kinsta.com\/nl\/blog\/dynamische-blokken\/\">ontwikkelingsgidsen<\/a>.<\/p>\n<h3>Het render.php bestand<\/h3>\n<p>Het volgende bestand dat je moet bewerken is <code>\/src\/render.php<\/code>. Open het bestand en vervang de bestaande code door het volgende:<\/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>Dit is wat deze code doet:<\/p>\n<ul>\n<li>Ten eerste maakt het een array van producten met een vaste codering. Elk product heeft een ID, een naam en een prijs.<\/li>\n<li>Vervolgens wordt de Global state ge\u00efnitialiseerd met <code>wp_interactivity_state<\/code>. De eerste parameter is de winkelnaam, die moet overeenkomen met die in <code>view.js<\/code>.<\/li>\n<li>Daarna wordt de vorige matrix van producten gekoppeld aan een nieuwe matrix <code>products<\/code>, waarbij hoeveelheid en subtotaal worden toegevoegd aan de eigenschappen van de oorspronkelijke matrix. Deze nieuwe matrix biedt de gegevensstructuur die je zult gebruiken in <code>view.js<\/code>.<\/li>\n<li><code>vatRate<\/code> stelt de standaardwaarde voor de belastingberekening in.<\/li>\n<\/ul>\n<p>Voeg vervolgens het volgende toe aan de bovenstaande code:<\/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>Dit is wat deze code doet:<\/p>\n<ul>\n<li>De <code>get_block_wrapper_attributes()<\/code> functie in de <code>div<\/code> container is een WordPress functie die de standaard attributen van een blok genereert. In dit geval genereert het het klasse attribuut <code>\"wp-block-create-block-interactive-counter\"<\/code>.<\/li>\n<li>Het <code>data-wp-interactive<\/code> attribuut maakt dit blok interactief.<\/li>\n<li>Het <code>data-wp-init<\/code> attribuut activeert de <code>init<\/code> callback gedefinieerd in <code>view.js<\/code>.<\/li>\n<li>De <code>foreach<\/code> loop genereert een lijstitem voor elk product in de <code>products<\/code> array.<\/li>\n<li><code>data-wp-context<\/code> definieert de Lokale context voor het blok.<\/li>\n<li><code>data-wp-bind<\/code> bindt de waarde van <code>data-wp-context.quantity<\/code> aan de globale property <code>state.products[$index].quantity<\/code>.<\/li>\n<li>Hetzelfde gebeurt in de regel hieronder met het subtotaal.<\/li>\n<li>De volgende twee knoppen activeren de acties <code>decrement<\/code> en <code>increment<\/code> dankzij het attribuut <code>data-wp-on--click<\/code>.<\/li>\n<li>Het <code>data-wp-text<\/code> attribuut in de <code>span<\/code> werkt de inhoud van het element bij op basis van de huidige waarde van <code>context.quantity<\/code>.<\/li>\n<\/ul>\n<p>De rest van de code spreekt voor zich, dus laten we doorgaan naar het volgende bestand.<\/p>\n<h3>Het bestand view.js<\/h3>\n<p>Dit bestand bevat de logica voor je interactieve blok.<\/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>Dit bestand definieert de opslagruimte voor de <code>interactive-counter<\/code> namespace. Het beheert status, acties en callbacks:<\/p>\n<pre><code class=\"language-javascript\">store('interactive-counter', {\n\tstate: { ... },\n\tactions: { ... },\n\tcallbacks: { ... },\n});<\/code><\/pre>\n<p>Laten we het eens van dichterbij bekijken.<\/p>\n<ul>\n<li><code>state<\/code>: Definieert drie berekende state properties (getters): <code>subtotal<\/code>, <code>vat<\/code>, en <code>total<\/code>. Deze functies halen waarden op uit de globale state en berekenen de terug te geven waarden.<\/li>\n<li><code>actions<\/code>: Definieert twee functies die worden uitgevoerd op gebeurtenissen: <code>increment<\/code> en <code>decrement<\/code>. Deze functies halen de array <code>products<\/code> op uit de globale state, halen het huidige product op uit de lokale context op basis van <code>context.productId<\/code>, werken de waarden van de properties van het huidige product bij (<code>quantity<\/code> en <code>subtotal<\/code>) en synchroniseren de lokale context met de nieuwe waarden.<\/li>\n<li><code>callbacks<\/code>: Definieert een <code>init<\/code> callback voor initialisatie.<\/li>\n<\/ul>\n<p>De volgende afbeelding toont het interactieve blok in de 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=\"Een interactieve teller gebouwd met de Interactivity API\" width=\"1364\" height=\"896\"><figcaption id=\"caption-attachment-199769\" class=\"wp-caption-text\">Een interactieve teller gebouwd met de Interactivity API<\/figcaption><\/figure>\n<h2>Samenvatting<\/h2>\n<p>In dit artikel hebben we de belangrijkste functies van de WordPress Interactivity API ge\u00efntroduceerd. We hebben ons verdiept in belangrijke concepten zoals Global state, Local context, directives, acties en callbacks. Je hebt geleerd hoe je een interactief blok vanaf nul kunt maken met behulp van de <code>@wordpress\/create-block-interactive-template<\/code> en we hebben dit in de praktijk gebracht door een echt blok te maken dat reageert op invoer van de gebruiker.<\/p>\n<p>We hopen dat we je de nodige hulpmiddelen en kennis hebben gegeven om fantastische, dynamische en interactieve WordPress websites te maken met behulp van de WordPress Interactivity API.<\/p>\n<p>Veel plezier met coderen!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In eerdere artikelen op dit blog hebben we de ontwikkeling van WordPress blokken vanuit verschillende invalshoeken bekeken. We hebben de ontwikkeling van zowel statische als dynamische &#8230;<\/p>\n","protected":false},"author":36,"featured_media":63740,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[911,892],"class_list":["post-63739","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-wordpress-ontwikkeling"],"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>Nieuwe mogelijkheden met de WordPress Interactivity API<\/title>\n<meta name=\"description\" content=\"De Interactivity API is een krachtige tool waarmee je WordPress-websites kunt bouwen. Bekijk onze handleiding en ga aan de slag met interactieve blokken!\" \/>\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\/nl\/blog\/wordpress-interactivity-api\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Nieuwe mogelijkheden met de WordPress Interactivity API\" \/>\n<meta property=\"og:description\" content=\"De Interactivity API is een krachtige tool waarmee je WordPress-websites kunt bouwen. Bekijk onze handleiding en ga aan de slag met interactieve blokken!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/nl\/blog\/wordpress-interactivity-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-06T07:48:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-10T09:42:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/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=\"De Interactivity API is een krachtige tool waarmee je WordPress-websites kunt bouwen. Bekijk onze handleiding en ga aan de slag met interactieve blokken!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/11\/how-to-create-interactive-blocks-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_NL\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"24 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-interactivity-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-interactivity-api\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Nieuwe mogelijkheden met de WordPress Interactivity API\",\"datePublished\":\"2025-11-06T07:48:44+00:00\",\"dateModified\":\"2025-11-10T09:42:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-interactivity-api\/\"},\"wordCount\":3061,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-interactivity-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/11\/how-to-create-interactive-blocks.png\",\"inLanguage\":\"nl-NL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-interactivity-api\/\",\"url\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-interactivity-api\/\",\"name\":\"Nieuwe mogelijkheden met de WordPress Interactivity API\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-interactivity-api\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-interactivity-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/11\/how-to-create-interactive-blocks.png\",\"datePublished\":\"2025-11-06T07:48:44+00:00\",\"dateModified\":\"2025-11-10T09:42:31+00:00\",\"description\":\"De Interactivity API is een krachtige tool waarmee je WordPress-websites kunt bouwen. Bekijk onze handleiding en ga aan de slag met interactieve blokken!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-interactivity-api\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/nl\/blog\/wordpress-interactivity-api\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-interactivity-api\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/11\/how-to-create-interactive-blocks.png\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/11\/how-to-create-interactive-blocks.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/nl\/blog\/wordpress-interactivity-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"API\",\"item\":\"https:\/\/kinsta.com\/nl\/onderwerpen\/api\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Nieuwe mogelijkheden met de WordPress Interactivity API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/nl\/#website\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Snelle, veilige, premium hostingoplossingen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/nl\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/\",\"https:\/\/x.com\/Kinsta_NL\",\"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\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/kinsta.com\/nl\/#\/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\/nl\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Nieuwe mogelijkheden met de WordPress Interactivity API","description":"De Interactivity API is een krachtige tool waarmee je WordPress-websites kunt bouwen. Bekijk onze handleiding en ga aan de slag met interactieve blokken!","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\/nl\/blog\/wordpress-interactivity-api\/","og_locale":"nl_NL","og_type":"article","og_title":"Nieuwe mogelijkheden met de WordPress Interactivity API","og_description":"De Interactivity API is een krachtige tool waarmee je WordPress-websites kunt bouwen. Bekijk onze handleiding en ga aan de slag met interactieve blokken!","og_url":"https:\/\/kinsta.com\/nl\/blog\/wordpress-interactivity-api\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","article_published_time":"2025-11-06T07:48:44+00:00","article_modified_time":"2025-11-10T09:42:31+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/11\/how-to-create-interactive-blocks.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"De Interactivity API is een krachtige tool waarmee je WordPress-websites kunt bouwen. Bekijk onze handleiding en ga aan de slag met interactieve blokken!","twitter_image":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/11\/how-to-create-interactive-blocks-1024x512.png","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_NL","twitter_misc":{"Geschreven door":"Carlo Daniele","Geschatte leestijd":"24 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-interactivity-api\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-interactivity-api\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Nieuwe mogelijkheden met de WordPress Interactivity API","datePublished":"2025-11-06T07:48:44+00:00","dateModified":"2025-11-10T09:42:31+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-interactivity-api\/"},"wordCount":3061,"publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-interactivity-api\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/11\/how-to-create-interactive-blocks.png","inLanguage":"nl-NL"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-interactivity-api\/","url":"https:\/\/kinsta.com\/nl\/blog\/wordpress-interactivity-api\/","name":"Nieuwe mogelijkheden met de WordPress Interactivity API","isPartOf":{"@id":"https:\/\/kinsta.com\/nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-interactivity-api\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-interactivity-api\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/11\/how-to-create-interactive-blocks.png","datePublished":"2025-11-06T07:48:44+00:00","dateModified":"2025-11-10T09:42:31+00:00","description":"De Interactivity API is een krachtige tool waarmee je WordPress-websites kunt bouwen. Bekijk onze handleiding en ga aan de slag met interactieve blokken!","breadcrumb":{"@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-interactivity-api\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/nl\/blog\/wordpress-interactivity-api\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-interactivity-api\/#primaryimage","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/11\/how-to-create-interactive-blocks.png","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2025\/11\/how-to-create-interactive-blocks.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/nl\/blog\/wordpress-interactivity-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/nl\/"},{"@type":"ListItem","position":2,"name":"API","item":"https:\/\/kinsta.com\/nl\/onderwerpen\/api\/"},{"@type":"ListItem","position":3,"name":"Nieuwe mogelijkheden met de WordPress Interactivity API"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/nl\/#website","url":"https:\/\/kinsta.com\/nl\/","name":"Kinsta\u00ae","description":"Snelle, veilige, premium hostingoplossingen","publisher":{"@id":"https:\/\/kinsta.com\/nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/nl\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/nl\/wp-content\/uploads\/sites\/7\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Nederland-476213452787823\/","https:\/\/x.com\/Kinsta_NL","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\/nl\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/kinsta.com\/nl\/#\/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\/nl\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/63739","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/comments?post=63739"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/63739\/revisions"}],"predecessor-version":[{"id":63783,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/posts\/63739\/revisions\/63783"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/63739\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/63739\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/63739\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/63739\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/63739\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/63739\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/63739\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/63739\/translations\/es"},{"href":"https:\/\/kinsta.com\/nl\/wp-json\/kinsta\/v1\/posts\/63739\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media\/63740"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/media?parent=63739"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/tags?post=63739"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/nl\/wp-json\/wp\/v2\/topic?post=63739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}