{"id":74509,"date":"2025-11-06T08:29:51","date_gmt":"2025-11-06T07:29:51","guid":{"rendered":"https:\/\/kinqsta.com\/de\/?p=74509&#038;preview=true&#038;preview_id=74509"},"modified":"2025-11-10T10:04:47","modified_gmt":"2025-11-10T09:04:47","slug":"wordpress-interactivity-api","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/","title":{"rendered":"Erschlie\u00dfe neue M\u00f6glichkeiten mit der WordPress Interactivity API"},"content":{"rendered":"<p>In fr\u00fcheren Beitr\u00e4gen in diesem Blog haben wir die Entwicklung von WordPress-Bl\u00f6cken aus verschiedenen Blickwinkeln untersucht. Wir haben die Entwicklung von <a href=\"https:\/\/kinqsta.com\/de\/blog\/gutenberg-blocke\/\">statischen<\/a> und <a href=\"https:\/\/kinqsta.com\/de\/blog\/dynamische-bloecke\/\">dynamischen<\/a> Bl\u00f6cken untersucht und <a href=\"https:\/\/kinqsta.com\/de\/blog\/gutenberg-plugin\/\">die Funktionalit\u00e4t der Kernbl\u00f6cke erweitert<\/a>. Der Ansatz, den wir bisher verfolgt haben, hat es uns im Wesentlichen erm\u00f6glicht, Standardbl\u00f6cke zu erstellen, die nicht in Echtzeit auf Nutzerinteraktionen reagierten. Kurz gesagt, diese Bl\u00f6cke waren nicht interaktiv.<\/p>\n<p>In diesem Artikel werden wir einen neuen Ansatz f\u00fcr die Entwicklung von Bl\u00f6cken erkunden, mit dem wir dank einer neuen, leistungsstarken WordPress-API interaktive Bl\u00f6cke erstellen k\u00f6nnen: die <strong>WordPress Interactivity API<\/strong>. Mit dieser API, die in <a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-6-5\/#interactivity-api\">WordPress 6.5<\/a> eingef\u00fchrt wurde, kannst du Bl\u00f6cke erstellen, die in Echtzeit auf Nutzerinteraktionen reagieren. So kannst du reichhaltige Nutzererlebnisse schaffen und deine Websites attraktiv, dynamisch und ansprechend gestalten.<\/p>\n<p>Es gibt viel zu besprechen, aber bevor wir beginnen, werfen wir einen Blick auf die wichtigsten Voraussetzungen!<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>Was du brauchst, bevor du mit der Interactivity-API anf\u00e4ngst<\/h2>\n<p>Da die Interactivity-API auf <a href=\"https:\/\/kinqsta.com\/de\/blog\/was-ist-react-js\/\">React<\/a> basiert, brauchst du zumindest Grundkenntnisse in <a href=\"https:\/\/kinqsta.com\/de\/blog\/was-ist-node-js\/\">serverseitigem JavaScript<\/a> und React sowie in Build-Tools wie <a href=\"https:\/\/kinqsta.com\/de\/blog\/was-ist-npm\/\">npm<\/a> und npx. Au\u00dferdem brauchst du ein gutes Verst\u00e4ndnis der <a href=\"https:\/\/kinqsta.com\/de\/blog\/wp-scripts-entwicklung\/\">WordPress-Entwicklung<\/a> und des <a href=\"https:\/\/kinqsta.com\/de\/blog\/gutenberg-wordpress-editor\/\">Gutenberg-Blockeditors<\/a>.<\/p>\n<p>Sobald du dir die n\u00f6tigen F\u00e4higkeiten angeeignet hast, brauchst du eine <a href=\"https:\/\/kinqsta.com\/de\/blog\/mamp-alternativen\/\">lokale Entwicklungsumgebung<\/a>, mit der du schnell und einfach eine WordPress-Website starten kannst. Wir empfehlen <a href=\"https:\/\/kinqsta.com\/de\/devkinsta\/\">DevKinsta<\/a>, unsere lokale Entwicklungssuite, die speziell f\u00fcr WordPress entwickelt wurde. Mit DevKinsta kannst du mit wenigen Klicks eine neue lokale WordPress-Website einrichten und sie bis ins Detail anpassen.<\/p>\n<p>Wenn du ein neues WordPress-Projekt in DevKinsta erstellst, kannst du die folgenden Optionen einstellen:<\/p>\n<ul>\n<li>Top Level Domain: Standard .local<\/li>\n<li>PHP-Version<\/li>\n<li>Datenbankname<\/li>\n<li>HTTPS aktivieren<\/li>\n<li>WordPress Details<\/li>\n<li>WordPress automatisch aktualisieren<\/li>\n<li>Multisite<\/li>\n<\/ul>\n<p>Au\u00dferdem kannst du eine bestehende MyKinsta-Website aus einem Backup importieren.<\/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:\/\/kinqsta.com\/wp-content\/uploads\/2025\/10\/devkinsta-new-website.png\" alt=\"Konfigurieren einer lokalen Website in DevKinsta\" width=\"2230\" height=\"1656\"><figcaption id=\"caption-attachment-199777\" class=\"wp-caption-text\">Konfigurieren einer lokalen Website in DevKinsta<\/figcaption><\/figure>\n<h2>Was ist die Interactivity-API?<\/h2>\n<p>Die Interactivity-API ist eine WordPress-eigene API, mit der du Gutenberg-Bl\u00f6cke und damit auch Beitr\u00e4ge und Seiten auf einer WordPress-Website mit Interaktivit\u00e4t versehen kannst. Es handelt sich um eine schlanke, moderne L\u00f6sung, die einen <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/core-concepts\/the-reactive-and-declarative-mindset\/\" target=\"_blank\" rel=\"noopener noreferrer\">deklarativen Ansatz<\/a> f\u00fcr die Verwaltung von Nutzerinteraktionen verfolgt.<\/p>\n<p>Um einen interaktiven Block von Grund auf zu erstellen, sind fortgeschrittene PHP- und <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/core-concepts\/server-side-rendering\/\" target=\"_blank\" rel=\"noopener noreferrer\">serverseitige JavaScript-Entwicklungskenntnisse<\/a> erforderlich. Es ist jedoch nicht n\u00f6tig, das Rad bei jedem neuen Projekt neu zu erfinden, da WordPress eine <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block-interactive-template\/\">Vorlage f\u00fcr die Erstellung interaktiver Bl\u00f6cke<\/a> bereitstellt:<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block --template @wordpress\/create-block-interactive-template<\/code><\/pre>\n<p>Diese Vorlage enth\u00e4lt alles, was du brauchst, um einen interaktiven Block zu erstellen, einschlie\u00dflich zweier funktionierender Beispiele, die du als Referenz f\u00fcr dein erstes Projekt verwenden kannst: eine Schaltfl\u00e4che zum Umschalten des aktuellen Themes und eine Schaltfl\u00e4che zum Erweitern\/Klappen eines Absatzes.<\/p>\n<p>Um loszulegen, \u00f6ffne dein bevorzugtes Kommandozeilentool, navigiere zum <strong>Plugins-Verzeichnis<\/strong> deiner lokalen WordPress-Installation und gib Folgendes ein:<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block your-interactive-block --template @wordpress\/create-block-interactive-template<\/code><\/pre>\n<p>Warte ein paar Augenblicke, bis die Installation abgeschlossen ist, und \u00f6ffne dann den Projektordner mit deinem bevorzugten <a href=\"https:\/\/kinqsta.com\/de\/blog\/kostenlose-html-editoren\/\">Code-Editor<\/a>. Wir empfehlen <a href=\"https:\/\/kinqsta.com\/de\/blog\/besten-texteditoren\/#visual-studio-code\">Visual Studio Code<\/a>, aber du kannst auch den Editor verwenden, mit dem du dich am wohlsten f\u00fchlst.<\/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:\/\/kinqsta.com\/wp-content\/uploads\/2025\/09\/interactive-block.png\" alt=\"Ein interaktiver Block in Visual Studio Code\" width=\"2086\" height=\"1230\"><figcaption id=\"caption-attachment-199519\" class=\"wp-caption-text\">Das interaktive Blockprojekt von <code>@wordpress\/create-block-interactive-template<\/code><\/figcaption><\/figure>\n<p>Navigiere von der Kommandozeile aus zum Ordner des neuen Plugins und <a href=\"https:\/\/developer.wordpress.org\/block-editor\/getting-started\/quick-start-guide\/#basic-usage\" target=\"_blank\" rel=\"noopener noreferrer\">starte den Entwicklungsserver<\/a> mit dem folgenden Befehl:<\/p>\n<pre><code class=\"language-bash\">npm start<\/code><\/pre>\n<p>Von nun an werden alle \u00c4nderungen, die du an deinem Block vornimmst, in Echtzeit in deiner WordPress-Installation sichtbar sein.<\/p>\n<p>Als N\u00e4chstes navigierst du in deinem WordPress-Admin zum Bildschirm <strong>Plugins<\/strong> und aktivierst das soeben erstellte <strong>Interactivity-API-Plugin<\/strong>. Erstelle einen neuen Beitrag oder eine neue Seite, suche dann im Block-Inserter nach <strong>deinem interaktiven Block<\/strong> und f\u00fcge ihn zu deinem Inhalt hinzu. Speichere den Beitrag und zeige ihn in der Vorschau im Frontend an. Du wirst einen gelben Block mit zwei Schaltfl\u00e4chen sehen. Die erste Schaltfl\u00e4che \u00e4ndert die Hintergrundfarbe des Blocks und die zweite Schaltfl\u00e4che zeigt oder verbirgt den Inhalt des Absatzes.<\/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:\/\/kinqsta.com\/wp-content\/uploads\/2025\/09\/interactivity-api-example.png\" alt=\"Ein Beispiel f\u00fcr einen interaktiven Block\" width=\"1405\" height=\"696\"><figcaption id=\"caption-attachment-199520\" class=\"wp-caption-text\">Ein Beispiel f\u00fcr einen interaktiven Block, der von <code>@wordpress\/create-block-interactive-template<\/code> bereitgestellt wird<\/figcaption><\/figure>\n<p>Jetzt, wo du ein Plugin hast, auf das du dich f\u00fcr die in diesem Artikel behandelten Themen beziehen kannst, k\u00f6nnen wir weitergehen und interaktive Bl\u00f6cke genauer untersuchen.<\/p>\n<h2>Die Struktur von interaktiven Bl\u00f6cken<\/h2>\n<p>Der Aufbau von interaktiven Bl\u00f6cken ist derselbe wie der von <a href=\"https:\/\/kinqsta.com\/de\/blog\/gutenberg-blocke\/#a-walkthrough-of-the-starter-block-scaffolding\">traditionellen Bl\u00f6cken<\/a>. Du brauchst immer noch eine <code>package.json<\/code>, eine <code>block.json<\/code>, eine <code>edit.js<\/code> und eine <code>style.scss<\/code> Datei. Zus\u00e4tzlich brauchst du eine <code>render.php<\/code> Datei f\u00fcr das serverseitige Rendering und eine <code>view.js<\/code> Datei f\u00fcr die Interaktivit\u00e4t im Frontend.<\/p>\n<p>Schauen wir uns die einzelnen Bausteine eines interaktiven Blocks an, indem wir die einzelnen Dateien des Starterprojekts aufschl\u00fcsseln.<\/p>\n<h3>package.json<\/h3>\n<p>Die Datei <code>package.json<\/code> wird <a href=\"https:\/\/docs.npmjs.com\/cli\/v7\/configuring-npm\/package-json\" target=\"_blank\" rel=\"noopener noreferrer\">in Node-Projekten verwendet<\/a>, um dein Projekt zu identifizieren, Skripte zu verwalten und Abh\u00e4ngigkeiten w\u00e4hrend der Entwicklung zu verwalten und zu installieren.<\/p>\n<p>Im Folgenden findest du die <code>package.json<\/code> f\u00fcr den interaktiven Block, die von der <code>create-block-interactive-template<\/code> bereitgestellt wird:<\/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>Die Abschnitte <code>scripts<\/code> und <code>dependencies<\/code> sind hier besonders wichtig.<\/p>\n<ul>\n<li><code>build<\/code>: Kompiliert den Quellcode in JavaScript f\u00fcr die Produktion. Die Option <code>--experimental-modules<\/code> aktiviert die Unterst\u00fctzung f\u00fcr <a href=\"https:\/\/make.wordpress.org\/core\/2024\/03\/04\/script-modules-in-6-5\/\">WordPress-Skriptmodule<\/a>.<\/li>\n<li><code>start<\/code>: Startet den Entwicklungsserver. Beachte, dass die Option <code>--experimental-modules<\/code> erneut angegeben wird.<\/li>\n<li><code>dependencies<\/code>: Schlie\u00dft Laufzeitabh\u00e4ngigkeiten mit dem neuesten Paket der Interactivity-API ein.<\/li>\n<\/ul>\n<h3>block.json<\/h3>\n<p>Die Datei <code>block.json<\/code> ist das Manifest f\u00fcr deinen Gutenberg-Block. Sie legt die zu ladenden Metadaten, Medien, Skripte und Stile fest. Standardm\u00e4\u00dfig generiert die <code>create-block-interactive-template<\/code> die folgende <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>Die folgenden Felder sind f\u00fcr einen interaktiven Block unerl\u00e4sslich:<\/p>\n<ul>\n<li><code>apiVersion<\/code>: <code>3<\/code> ist die neueste Version der Block-API und unterst\u00fctzt die neuesten Blockfunktionen, wie z. B. Skriptmodule.<\/li>\n<li><code>supports<\/code>: Gibt an, dass der Block unterst\u00fctzt wird. <code>\"interactivity\": true<\/code> f\u00fcgt Unterst\u00fctzung f\u00fcr die Interactivity-API hinzu.<\/li>\n<li><code>render<\/code>: Gibt die PHP-Datei an, die f\u00fcr das Rendering im Frontend verantwortlich ist. In diese Datei f\u00fcgst du die Direktiven ein, die einen Block interaktiv machen.<\/li>\n<li><code>viewScriptModule<\/code>: Legt die JavaScript-Datei fest, die die Interaktivit\u00e4tslogik enth\u00e4lt. Diese Datei wird nur im Frontend geladen und nur, wenn die Seite den interaktiven Block enth\u00e4lt.<\/li>\n<\/ul>\n<h3>render.php<\/h3>\n<p>Auf <code>render.php<\/code> baust du das Markup f\u00fcr einen dynamischen Block auf. Um deinen Block interaktiv zu machen, musst du Attribute hinzuf\u00fcgen, die die DOM-Elemente deines Blocks interaktiv machen.<\/p>\n<p>Die Datei <code>render.php<\/code> im Starterprojekt sieht wie folgt aus:<\/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>Das macht dieser Code:<\/p>\n<ul>\n<li><code>wp_interactivity_state<\/code>: Ruft den <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_interactivity_state\/\" target=\"_blank\" rel=\"noopener noreferrer\">globalen Ausgangszustand<\/a> eines Interaktivit\u00e4ts-API-Speicher ab und\/oder setzt ihn.<\/li>\n<li><code>data-wp-interactive<\/code>: <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/#wp-interactive\">Aktiviert die Interactivity-API<\/a> f\u00fcr das DOM-Element und seine Kinder. Sein Wert muss der eindeutige Namespace deines Plugins oder Blocks sein.<\/li>\n<li><code>wp_interactivity_data_wp_context()<\/code>: Erzeugt die Direktive <code>data-wp-context<\/code>, die einem bestimmten HTML-Knoten und seinen Kindern <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_interactivity_data_wp_context\/\" target=\"_blank\" rel=\"noopener noreferrer\">einen lokalen Status zuweist<\/a>.<\/li>\n<li><code>data-wp-watch<\/code>: <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/#wp-watch\">F\u00fchrt einen Callback aus<\/a>, wenn ein Knoten erstellt wird und jedes Mal, wenn sich der Status oder der Kontext \u00e4ndert.<\/li>\n<li><code>data-wp-class--dark-theme<\/code>: F\u00fcgt dem HTML-Element die Klasse <code>dark-theme<\/code> hinzu oder entfernt sie.<\/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\">F\u00fchrt den Code synchron<\/a> zum Klick-Ereignis aus.<\/li>\n<li><code>data-wp-text<\/code>: <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/#wp-text\">Setzt den inneren Text<\/a> des HTML-Elements.<\/li>\n<li><code>data-wp-bind--aria-expanded<\/code> und <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\">Setzt HTML-Attribute<\/a> (<code>aria-expanded<\/code> und <code>hidden<\/code>) auf den entsprechenden Elementen basierend auf einem booleschen oder String-Wert.<\/li>\n<\/ul>\n<h3>view.js<\/h3>\n<p>Diese Datei <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/#on-the-client-side\">definiert den Store<\/a>, der die Logik und die Daten enth\u00e4lt, die f\u00fcr das Verhalten des Blocks ben\u00f6tigt werden, einschlie\u00dflich Status, Aktionen und R\u00fcckrufe.<\/p>\n<p>Im Folgenden findest du die Datei <code>view.js<\/code>, die vom Starterprojekt erstellt wurde:<\/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>: Die Hauptfunktion zum Erstellen und Registrieren des globalen Zustands und der Logik des Blocks.<\/li>\n<li><code>getContext<\/code>: Eine Funktion, die in Aktionen und Callbacks verwendet wird, um auf den lokalen Status (<code>context<\/code>) des DOM-Elements zuzugreifen, das das Ereignis ausgel\u00f6st hat.<\/li>\n<li><code>state<\/code>: Definiert die globalen reaktiven Daten des Blocks.<\/li>\n<li><code>actions<\/code>: Beinhaltet die Funktionen, die die Logik definieren und den Zustand \u00e4ndern.<\/li>\n<li><code>callbacks<\/code>: Beinhaltet die Funktionen, die als Reaktion auf bestimmte Ereignisse oder Zustands\u00e4nderungen automatisch ausgef\u00fchrt werden.<\/li>\n<\/ul>\n<p>Das ist eine ganze Menge, aber keine Sorge! Alles wird klarer, wenn du die folgenden Abschnitte gelesen hast.<\/p>\n<p>Schauen wir uns nun die wichtigsten Konzepte der Interactivity-API an: Direktiven, Speicher, Status, Aktionen und R\u00fcckrufe.<\/p>\n<h2>Interactivity-API-Direktiven<\/h2>\n<p>Wie andere Frontend-Bibliotheken, z. B. Alpine.js und <a href=\"https:\/\/kinqsta.com\/de\/thema\/vue-js\/\">Vue.js<\/a>, verwendet die Interactivity API spezielle HTML-Attribute, mit denen du auf Ereignisse auf der Seite reagieren, den Zustand der Anwendung aktualisieren, das DOM manipulieren, CSS-Stile anwenden, Benutzereingaben verarbeiten und vieles mehr.<\/p>\n<p>Diese Attribute werden <strong>Direktiven<\/strong> genannt und erm\u00f6glichen es dir, dein Markup mit der zugrunde liegenden JavaScript-Logik zu verbinden.<\/p>\n<p>Im Folgenden findest du eine Liste der Direktiven, die du am h\u00e4ufigsten verwenden wirst.<\/p>\n<table>\n<thead>\n<tr>\n<th style=\"width: 22.5%\">Funktion<\/th>\n<th style=\"width: 22.5%\">Richtlinie<\/th>\n<th>Beschreibung<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Aktivierung\/Namensraum<\/td>\n<td><code>data-wp-interactive<\/code><\/td>\n<td>Aktiviert die API f\u00fcr das Element und seine Kinder. Der Wert muss auf den eindeutigen Bezeichner deines Plugins gesetzt werden.<\/td>\n<\/tr>\n<tr>\n<td>Lokaler Zustand<\/td>\n<td><code>data-wp-context<\/code><\/td>\n<td>Liefert einen lokalen Status (&#8222;Kontext&#8220;) f\u00fcr das aktuelle Element und alle seine Kinder. Er akzeptiert ein JSON-Objekt. Es wird empfohlen, <code>wp_interactivity_data_wp_context()<\/code> zu verwenden, um ihn in PHP zu setzen (typischerweise <code>render.php<\/code>).<\/td>\n<\/tr>\n<tr>\n<td>Attribut-Bindung<\/td>\n<td><code>data-wp-bind--[attribute]<\/code><\/td>\n<td>Setzt ein HTML-Attribut (z. B. <code>disabled<\/code>, <code>value<\/code>) auf der Grundlage eines reaktiven Zustands- oder Kontextwerts (ein boolescher oder String-Wert).<\/td>\n<\/tr>\n<tr>\n<td>Textmodifikation<\/td>\n<td><code>data-wp-text<\/code><\/td>\n<td>Setzt den inneren Textinhalt des Elements. Es werden nur Strings akzeptiert.<\/td>\n<\/tr>\n<tr>\n<td>CSS-Klasse umschalten<\/td>\n<td><code>data-wp-class--[classname]<\/code><\/td>\n<td>F\u00fcgt in Abh\u00e4ngigkeit von einem booleschen Wert eine CSS-Klasse hinzu oder entfernt sie.<\/td>\n<\/tr>\n<tr>\n<td>Inline-Styling<\/td>\n<td><code>data-wp-style--[css-property]<\/code><\/td>\n<td>F\u00fcgt eine Inline-Stilklasse in Abh\u00e4ngigkeit von einem booleschen Wert hinzu oder entfernt sie.<\/td>\n<\/tr>\n<tr>\n<td>Ereignisbehandlung<\/td>\n<td><code>data-wp-on--[event]<\/code><\/td>\n<td>F\u00fchrt Code als Reaktion auf Standard-DOM-Ereignisse wie <code>click<\/code> oder <code>mouseover<\/code> aus.<\/td>\n<\/tr>\n<tr>\n<td>Initiale Ausf\u00fchrung<\/td>\n<td><code>data-wp-init<\/code><\/td>\n<td>F\u00fchrt eine Callback-Funktion nur einmal aus, wenn der Knoten erstellt wird.<\/td>\n<\/tr>\n<tr>\n<td>Zustandsbeobachtung<\/td>\n<td><code>data-wp-watch<\/code><\/td>\n<td>F\u00fchrt einen Callback aus, wenn der Knoten erstellt wird und erneut, wenn sich der Zustand oder der Kontext \u00e4ndert.<\/td>\n<\/tr>\n<tr>\n<td>Liste Iteration<\/td>\n<td><code>data-wp-each<\/code><\/td>\n<td>Rendert eine Liste von Elementen.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Eine vollst\u00e4ndige Liste der Direktiven findest du in den <a href=\"https:\/\/make.wordpress.org\/core\/2024\/03\/04\/interactivity-api-dev-note\/\">Entwicklungshinweisen zur Interactivity-API<\/a> und in der <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/api-reference\/\">API-Referenz<\/a>.<\/p>\n<h2>Globaler Zustand, lokaler Kontext und abgeleiteter Zustand<\/h2>\n<p>Bevor du mit der Interactivity API beginnst, solltest du dich unbedingt mit den <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/interactivity-api\/core-concepts\/undestanding-global-state-local-context-and-derived-state\/\">grundlegenden Konzepten der Zustandsverwaltung<\/a> in der Frontend-Entwicklung vertraut machen. Diejenigen, die regelm\u00e4\u00dfig mit React, Vue oder Angular entwickeln, sind mit diesen Konzepten bereits vertraut. F\u00fcr diejenigen, die mit diesen Technologien noch nicht vertraut sind, k\u00f6nnen einige allgemeine Definitionen hilfreich sein.<\/p>\n<h3>Globaler Zustand<\/h3>\n<p>Der <strong>globale Zustand<\/strong> ist die Menge an Daten, auf die fast alle Komponenten einer Anwendung zugreifen k\u00f6nnen. Im Fall der Interactivity-API wirkt sich der globale Status beispielsweise auf alle interaktiven Bl\u00f6cke auf der Seite aus und h\u00e4lt sie synchronisiert. Wenn ein Nutzer z. B. ein Produkt in den Warenkorb legt, wird dies im Einkaufswagenblock angezeigt.<\/p>\n<p>Wenn du die Interactivity-API verwendest, solltest du die Anfangswerte des globalen Zustands auf dem Server mit der Funktion <code>wp_interactivity_state()<\/code> festlegen. In dem oben beschriebenen Starterprojekt wird diese Funktion in der Datei <code>render.php<\/code> wie folgt verwendet:<\/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\">Diese Funktion<\/a> nimmt zwei Argumente entgegen:<\/p>\n<ul>\n<li>Einen eindeutigen Bezeichner f\u00fcr den Namespace der Filiale. In diesem Fall: <code>create-block<\/code>.<\/li>\n<li>Ein Array mit Daten, die mit dem bestehenden Laden-Namensraum zusammengef\u00fchrt werden, falls dieser existiert.<\/li>\n<\/ul>\n<p>Die anf\u00e4nglichen globalen Statuswerte werden dann zum Rendern der Seite verwendet. Du kannst direkt auf die globalen Statuswerte zugreifen, indem du <code>state<\/code> in den Werten der Direktivenattribute verwendest, wie im folgenden 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>Die Funktion <code>store()<\/code> bietet den Hauptzugriffspunkt auf den globalen Status von JavaScript, der auf den ausgew\u00e4hlten Namespace beschr\u00e4nkt ist. Zur\u00fcck zum Code des Startprojekts: Die Funktion <code>store()<\/code> wird in der Datei <code>view.js<\/code> wie folgt verwendet:<\/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>Um auf den globalen Status zuzugreifen, kannst du die Eigenschaft <code>state<\/code> verwenden:<\/p>\n<pre><code class=\"language-javascript\">actions: {\n\ttoggleTheme() {\n\t\tstate.isDark = ! state.isDark;\n\t},\n},<\/code><\/pre>\n<h3>Lokaler Kontext<\/h3>\n<p><strong>Lokaler Kontext<\/strong> sind Daten, auf die nur eine bestimmte Komponente und ihre direkten Kinder zugreifen k\u00f6nnen. Ein interaktiver WordPress-Block bietet einen unabh\u00e4ngigen Status f\u00fcr den Block und seine verschachtelten Elemente.<\/p>\n<p>Wenn du die Interactivity-API verwendest, kannst du mit der Funktion <code>getContext()<\/code> auf den lokalen Kontext zugreifen. Wenn der Nutzer auf die Schaltfl\u00e4che &#8222;Umschalten&#8220; klickt, wird die Aktion <code>toggleOpen()<\/code> ausgel\u00f6st, die auf den lokalen Kontext der Komponente zugreift (siehe Starterprojekt):<\/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>: Ruft das lokale Zustandsobjekt des Blocks ab. Die Eigenschaften dieses Objekts werden in der Komponentenbeschreibung (<code>render.php<\/code>) mit Hilfe der Funktion <code>wp_interactivity_data_wp_context()<\/code> definiert.<\/li>\n<li><code>context.isOpen = ! context.isOpen;<\/code>: \u00c4ndert den Wert der Eigenschaft <code>isOpen<\/code> im lokalen Kontext des Bausteins.<\/li>\n<\/ul>\n<h3>Abgeleiteter Zustand<\/h3>\n<p><strong>Abgeleitete Zust\u00e4nde<\/strong> beziehen sich auf Daten, die dynamisch aus bestehenden globalen oder lokalen Zust\u00e4nden berechnet werden.<\/p>\n<p>Sieh dir zum Beispiel den Code in der Datei <code>view.js<\/code> an, und zwar in diesem Abschnitt:<\/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>Dieser Block definiert den <code>themeText<\/code> abgeleiteten Zustand innerhalb des globalen Zustands, der im <code>create-block<\/code> Namespace definiert ist.<\/p>\n<ul>\n<li><code>get themeText()<\/code> ist kein fester Wert, sondern eine Funktion, die jedes Mal ausgef\u00fchrt wird, wenn du versuchst, die Eigenschaft <code>themeText<\/code> zu lesen. Sie sollte nicht wie eine normale Funktion aufgerufen werden, da die Interactivity-API sie als Statuseigenschaft behandelt und ihren Wert automatisch neu berechnet, wenn sich die Werte anderer Statuseigenschaften \u00e4ndern. Im obigen Code wird der Wert der Eigenschaft <code>themeText<\/code> jedes Mal neu berechnet, wenn sich der Wert der Eigenschaft <code>isDark<\/code> \u00e4ndert. Wenn <code>state.isDark<\/code> gleich <code>true<\/code> ist, nimmt <code>themeText<\/code> den Wert von <code>state.darkText<\/code> an; andernfalls nimmt es den Wert von <code>state.lightText<\/code> an.<\/li>\n<\/ul>\n<p>Einen umfassenderen \u00dcberblick \u00fcber die in diesem Abschnitt beschriebenen Konzepte findest du unter <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\">Globalen Zustand, lokalen Kontext und abgeleiteten Zustand verstehen<\/a>.<\/p>\n<h2>Aktionen und R\u00fcckrufe<\/h2>\n<p>Aktionen und R\u00fcckrufe bestimmen die Reaktion auf Benutzerinteraktionen und Zustands\u00e4nderungen.<\/p>\n<p>Der Abschnitt <code>actions<\/code> eines interaktiven Blocks enth\u00e4lt Funktionen, die als Reaktion auf benutzergenerierte Ereignisse ausgef\u00fchrt werden. Diese Funktionen dienen vor allem dazu, den lokalen oder globalen Zustand der Komponente zu \u00e4ndern. Nimm den folgenden Code aus der Datei <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 diesem Codeabschnitt verwendet die Funktion <code>toggleOpen()<\/code> <code>getContext()<\/code> , um auf den lokalen Kontext des Blocks zuzugreifen, der die Aktion ausgel\u00f6st hat, um den Wert der Eigenschaft <code>isOpen<\/code> zu \u00e4ndern.<\/li>\n<\/ul>\n<p>Auf \u00e4hnliche Weise kannst du auch auf den globalen Zustand zugreifen:<\/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>Die Funktion <code>toggleTheme()<\/code> greift direkt auf das globale Objekt <code>state<\/code> zu und \u00e4ndert den Wert der Eigenschaft <code>isDark<\/code>.<\/li>\n<\/ul>\n<p>Aktionen werden \u00fcber die Direktive <code>data-wp-on--[event]<\/code> ausgel\u00f6st. In der Datei <code>render.php<\/code> findest du zum Beispiel die folgende Schaltfl\u00e4che:<\/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 diesem HTML-Code aktiviert das Attribut <code>data-wp-on--click<\/code> die Aktion <code>toggleOpen<\/code>, wenn der\/die Nutzer\/in auf die Umschalttaste klickt.<\/li>\n<\/ul>\n<p>Der Abschnitt <code>callbacks<\/code> enth\u00e4lt Funktionen, die automatisch ausgef\u00fchrt werden, wenn sich die Daten, von denen sie abh\u00e4ngen, \u00e4ndern. Ihr Zweck ist es, als Reaktion auf eine Zustands\u00e4nderung Seiteneffekte zu erzeugen.<\/p>\n<p>In dem von <code>create-block-interactive-template<\/code> generierten Basisprojekt findest du den folgenden 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>Die Funktion <code>logIsOpen<\/code> verwendet die Variable <code>isOpen<\/code>, die im lokalen Kontext verf\u00fcgbar ist.<\/li>\n<li>Der Callback ruft den Wert von <code>isOpen<\/code> \u00fcber <code>getContext()<\/code> ab.<\/li>\n<li>Jedes Mal, wenn sich der Wert von <code>isOpen<\/code> \u00e4ndert, gibt die Funktion eine Meldung an die Browserkonsole aus.<\/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:\/\/kinqsta.com\/wp-content\/uploads\/2025\/10\/toggle-is-open.png\" alt=\"Eine Meldung in der Konsole sagt dir, dass sich der lokale Kontext ge\u00e4ndert hat.\" width=\"1596\" height=\"727\"><figcaption id=\"caption-attachment-199639\" class=\"wp-caption-text\">Eine Meldung in der Konsole informiert den Benutzer \u00fcber die \u00c4nderung im lokalen Kontext<\/figcaption><\/figure>\n<h2>Wie man einen interaktiven Block baut<\/h2>\n<p>Jetzt, wo wir uns mit der Theorie besch\u00e4ftigt haben, ist es an der Zeit, etwas Spa\u00df mit dem Code zu haben! Im zweiten Teil dieses Leitfadens lernst du, wie du einen interaktiven Block erstellst, mit dem du Produkte zu einem idealen Warenkorb hinzuf\u00fcgen kannst, wobei sich die Mengen und Summen automatisch aktualisieren. Dies ist ein Demonstrationsbeispiel, aber wir hoffen, dass es dir ein klares Verst\u00e4ndnis daf\u00fcr vermittelt, wie du Zust\u00e4nde, Aktionen und R\u00fcckrufe nutzen kannst.<\/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:\/\/kinqsta.com\/wp-content\/uploads\/2025\/10\/interactive-counter-editor-view.png\" alt=\"Der interaktive Block im Editor\" width=\"1512\" height=\"1204\"><figcaption id=\"caption-attachment-199768\" class=\"wp-caption-text\">Der interaktive Block im Editor<\/figcaption><\/figure>\n<p>Wir werden einen Block namens <strong>Interaktiver Z\u00e4hler<\/strong> mit Hilfe des <code>create-block-interactive-template<\/code> erstellen. Um loszulegen, \u00f6ffne dein Kommandozeilentool und gib Folgendes ein:<\/p>\n<pre><code class=\"language-bash\">npx @wordpress\/create-block interactive-counter --template @wordpress\/create-block-interactive-template<\/code><\/pre>\n<p>Als N\u00e4chstes navigierst du zu deinem neuen Projektverzeichnis und f\u00fchrst den ersten Build aus.<\/p>\n<pre><code class=\"language-bash\">cd interactive-counter && npm run build<\/code><\/pre>\n<p>\u00d6ffne das Projekt jetzt in deinem Code-Editor. Im Verzeichnis <code>\/src<\/code> suchst du nach der Datei <code>block.json<\/code>. Sie sollte in etwa so aussehen:<\/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>Du kannst sie gerne anpassen, aber achte darauf, dass du die oben beschriebenen wichtigen Felder nicht ver\u00e4nderst.<\/p>\n<h3>Die Datei edit.js<\/h3>\n<p>Der n\u00e4chste Schritt ist die Erstellung des Blocks, der im Editor erscheinen wird. Hierf\u00fcr musst du die Datei <code>\/src\/edit.js<\/code> bearbeiten. \u00d6ffne die Datei und \u00e4ndere sie wie folgt:<\/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>Dieser Code erzeugt einen eigenen Block im Backend. Der Block wird nur im Frontend interaktiv sein. Weitere Details zur Datei <code>\/src\/edit.js<\/code> findest du in unseren <a href=\"https:\/\/kinqsta.com\/de\/blog\/dynamische-bloecke\/\">Gutenberg-Blockentwicklungsanleitungen<\/a>.<\/p>\n<h3>Die Datei render.php<\/h3>\n<p>Die n\u00e4chste Datei, die du bearbeiten musst, ist <code>\/src\/render.php<\/code>. \u00d6ffne die Datei und ersetze den bestehenden Code durch den folgenden:<\/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>Dieser Code macht Folgendes:<\/p>\n<ul>\n<li>Zuerst wird ein fest kodiertes Array mit Produkten erstellt. Jedes Produkt hat eine ID, einen Namen und einen Preis.<\/li>\n<li>Dann wird der globale Status mit <code>wp_interactivity_state<\/code> initialisiert. Der erste Parameter ist der Name des Ladens, der mit dem in <code>view.js<\/code> verwendeten Namen \u00fcbereinstimmen muss.<\/li>\n<li>Dann wird das vorherige Array mit den Produkten auf ein neues Array <code>products<\/code> abgebildet, wobei Menge und Zwischensumme zu den Eigenschaften des urspr\u00fcnglichen Arrays hinzugef\u00fcgt werden. Dieses neue Array bildet die Datenstruktur, die du in <code>view.js<\/code> verwenden wirst.<\/li>\n<li><code>vatRate<\/code> legt den Standardwert f\u00fcr die Steuerberechnung fest.<\/li>\n<\/ul>\n<p>Als N\u00e4chstes f\u00fcgst du dem obigen Code Folgendes hinzu:<\/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>Das macht dieser Code:<\/p>\n<ul>\n<li>Die Funktion <code>get_block_wrapper_attributes()<\/code> im Container <code>div<\/code> ist eine WordPress-Funktion, die die Standardattribute eines Blocks erzeugt. In diesem Fall erzeugt sie das Klassenattribut <code>\"wp-block-create-block-interactive-counter\"<\/code>.<\/li>\n<li>Das Attribut <code>data-wp-interactive<\/code> macht diesen Block interaktiv.<\/li>\n<li>Das <code>data-wp-init<\/code> Attribut l\u00f6st den <code>init<\/code> Callback aus, der in <code>view.js<\/code> definiert ist.<\/li>\n<li>Die <code>foreach<\/code> Schleife erzeugt ein Listenelement f\u00fcr jedes Produkt im <code>products<\/code> Array.<\/li>\n<li><code>data-wp-context<\/code> definiert den lokalen Kontext f\u00fcr den Block.<\/li>\n<li><code>data-wp-bind<\/code> bindet den Wert von <code>data-wp-context.quantity<\/code> an die globale Eigenschaft <code>state.products[$index].quantity<\/code>.<\/li>\n<li>Das Gleiche geschieht in der Zeile darunter mit der Zwischensumme.<\/li>\n<li>Die folgenden beiden Schaltfl\u00e4chen aktivieren die Aktionen <code>decrement<\/code> und <code>increment<\/code> dank des Attributs <code>data-wp-on--click<\/code>.<\/li>\n<li>Das Attribut <code>data-wp-text<\/code> im <code>span<\/code> aktualisiert den Inhalt des Elements auf der Grundlage des aktuellen Werts von <code>context.quantity<\/code>.<\/li>\n<\/ul>\n<p>Der Rest des Codes ist selbsterkl\u00e4rend, also lass uns mit der n\u00e4chsten Datei weitermachen.<\/p>\n<h3>Die Datei view.js<\/h3>\n<p>Diese Datei enth\u00e4lt die Logik f\u00fcr deinen interaktiven Block.<\/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>Diese Datei definiert den Speicher f\u00fcr den Namespace <code>interactive-counter<\/code>. Sie verwaltet Status, Aktionen und R\u00fcckrufe:<\/p>\n<pre><code class=\"language-javascript\">store('interactive-counter', {\n\tstate: { ... },\n\tactions: { ... },\n\tcallbacks: { ... },\n});<\/code><\/pre>\n<p>Schauen wir uns das mal genauer an.<\/p>\n<ul>\n<li><code>state<\/code>: Definiert drei berechnete Statuseigenschaften (Getter): <code>subtotal<\/code>, <code>vat<\/code>, und <code>total<\/code>. Diese Funktionen rufen Werte aus dem globalen Zustand ab und berechnen die Werte, die zur\u00fcckgegeben werden sollen.<\/li>\n<li><code>actions<\/code>: Definiert zwei Funktionen, die bei Ereignissen ausgef\u00fchrt werden: <code>increment<\/code> und <code>decrement<\/code>. Diese Funktionen rufen das Array <code>products<\/code> aus dem globalen Zustand ab, rufen das aktuelle Produkt aus dem lokalen Kontext auf der Grundlage von <code>context.productId<\/code> ab, aktualisieren die Eigenschaftswerte des aktuellen Produkts (<code>quantity<\/code> und <code>subtotal<\/code>) und synchronisieren den lokalen Kontext mit den neuen Werten.<\/li>\n<li><code>callbacks<\/code>: Definiert einen <code>init<\/code> Callback f\u00fcr die Initialisierung.<\/li>\n<\/ul>\n<p>Die folgende Abbildung zeigt den interaktiven Block im 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:\/\/kinqsta.com\/wp-content\/uploads\/2025\/10\/interactive-counter.png\" alt=\"Ein interaktiver Z\u00e4hler, der mit der Interactivity API erstellt wurde\" width=\"1364\" height=\"896\"><figcaption id=\"caption-attachment-199769\" class=\"wp-caption-text\">Ein interaktiver Z\u00e4hler, der mit der Interactivity API erstellt wurde<\/figcaption><\/figure>\n<h2>Zusammenfassung<\/h2>\n<p>In diesem Artikel haben wir die wichtigsten Funktionen der WordPress Interactivity API vorgestellt. Wir haben uns mit Schl\u00fcsselkonzepten wie dem globalen Zustand, dem lokalen Kontext, Direktiven, Aktionen und Callbacks besch\u00e4ftigt. Du hast gelernt, wie du mit <code>@wordpress\/create-block-interactive-template<\/code> einen interaktiven Block von Grund auf erstellst, und wir haben dies in die Praxis umgesetzt, indem wir einen echten Block erstellt haben, der mit Benutzereingaben interagiert.<\/p>\n<p>Wir hoffen, dass wir dir die n\u00f6tigen Werkzeuge und das Wissen vermittelt haben, um mit der WordPress Interactivity API fantastische, dynamische und interaktive WordPress-Websites zu erstellen.<\/p>\n<p>Viel Spa\u00df beim Programmieren!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In fr\u00fcheren Beitr\u00e4gen in diesem Blog haben wir die Entwicklung von WordPress-Bl\u00f6cken aus verschiedenen Blickwinkeln untersucht. Wir haben die Entwicklung von statischen und dynamischen Bl\u00f6cken untersucht &#8230;<\/p>\n","protected":false},"author":36,"featured_media":74510,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[925,999],"class_list":["post-74509","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-wordpress-entwicklung"],"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>Neue M\u00f6glichkeiten mit der WordPress Interactivity API<\/title>\n<meta name=\"description\" content=\"Die Interactivity API ist ein echt starkes Tool, mit dem du WordPress-Websites der n\u00e4chsten Generation erstellen kannst. Schau dir unseren umfassenden Leitfaden an und leg los mit interaktiven Bl\u00f6cken!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Erschlie\u00dfe neue M\u00f6glichkeiten mit der WordPress Interactivity API\" \/>\n<meta property=\"og:description\" content=\"Die Interactivity API ist ein echt starkes Tool, mit dem du WordPress-Websites der n\u00e4chsten Generation erstellen kannst. Schau dir unseren umfassenden Leitfaden an und leg los mit interaktiven Bl\u00f6cken!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-06T07:29:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-10T09:04:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/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=\"Die Interactivity API ist ein echt starkes Tool, mit dem du WordPress-Websites der n\u00e4chsten Generation erstellen kannst. Schau dir unseren umfassenden Leitfaden an und leg los mit interaktiven Bl\u00f6cken!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/11\/how-to-create-interactive-blocks-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"24\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Erschlie\u00dfe neue M\u00f6glichkeiten mit der WordPress Interactivity API\",\"datePublished\":\"2025-11-06T07:29:51+00:00\",\"dateModified\":\"2025-11-10T09:04:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/\"},\"wordCount\":3037,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/11\/how-to-create-interactive-blocks.png\",\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/\",\"url\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/\",\"name\":\"Neue M\u00f6glichkeiten mit der WordPress Interactivity API\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/11\/how-to-create-interactive-blocks.png\",\"datePublished\":\"2025-11-06T07:29:51+00:00\",\"dateModified\":\"2025-11-10T09:04:47+00:00\",\"description\":\"Die Interactivity API ist ein echt starkes Tool, mit dem du WordPress-Websites der n\u00e4chsten Generation erstellen kannst. Schau dir unseren umfassenden Leitfaden an und leg los mit interaktiven Bl\u00f6cken!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/11\/how-to-create-interactive-blocks.png\",\"contentUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/11\/how-to-create-interactive-blocks.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"API\",\"item\":\"https:\/\/kinqsta.com\/de\/thema\/api\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Erschlie\u00dfe neue M\u00f6glichkeiten mit der WordPress Interactivity API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/de\/#website\",\"url\":\"https:\/\/kinqsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"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:\/\/kinqsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinqsta.com\/de\/#\/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:\/\/kinqsta.com\/de\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Neue M\u00f6glichkeiten mit der WordPress Interactivity API","description":"Die Interactivity API ist ein echt starkes Tool, mit dem du WordPress-Websites der n\u00e4chsten Generation erstellen kannst. Schau dir unseren umfassenden Leitfaden an und leg los mit interaktiven Bl\u00f6cken!","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:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/","og_locale":"de_DE","og_type":"article","og_title":"Erschlie\u00dfe neue M\u00f6glichkeiten mit der WordPress Interactivity API","og_description":"Die Interactivity API ist ein echt starkes Tool, mit dem du WordPress-Websites der n\u00e4chsten Generation erstellen kannst. Schau dir unseren umfassenden Leitfaden an und leg los mit interaktiven Bl\u00f6cken!","og_url":"https:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2025-11-06T07:29:51+00:00","article_modified_time":"2025-11-10T09:04:47+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/11\/how-to-create-interactive-blocks.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Die Interactivity API ist ein echt starkes Tool, mit dem du WordPress-Websites der n\u00e4chsten Generation erstellen kannst. Schau dir unseren umfassenden Leitfaden an und leg los mit interaktiven Bl\u00f6cken!","twitter_image":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/11\/how-to-create-interactive-blocks-1024x512.png","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Carlo Daniele","Gesch\u00e4tzte Lesezeit":"24\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinqsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Erschlie\u00dfe neue M\u00f6glichkeiten mit der WordPress Interactivity API","datePublished":"2025-11-06T07:29:51+00:00","dateModified":"2025-11-10T09:04:47+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/"},"wordCount":3037,"publisher":{"@id":"https:\/\/kinqsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/11\/how-to-create-interactive-blocks.png","inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/","url":"https:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/","name":"Neue M\u00f6glichkeiten mit der WordPress Interactivity API","isPartOf":{"@id":"https:\/\/kinqsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/11\/how-to-create-interactive-blocks.png","datePublished":"2025-11-06T07:29:51+00:00","dateModified":"2025-11-10T09:04:47+00:00","description":"Die Interactivity API ist ein echt starkes Tool, mit dem du WordPress-Websites der n\u00e4chsten Generation erstellen kannst. Schau dir unseren umfassenden Leitfaden an und leg los mit interaktiven Bl\u00f6cken!","breadcrumb":{"@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/#primaryimage","url":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/11\/how-to-create-interactive-blocks.png","contentUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2025\/11\/how-to-create-interactive-blocks.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/de\/blog\/wordpress-interactivity-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"API","item":"https:\/\/kinqsta.com\/de\/thema\/api\/"},{"@type":"ListItem","position":3,"name":"Erschlie\u00dfe neue M\u00f6glichkeiten mit der WordPress Interactivity API"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/de\/#website","url":"https:\/\/kinqsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinqsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinqsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","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:\/\/kinqsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinqsta.com\/de\/#\/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:\/\/kinqsta.com\/de\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts\/74509","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/comments?post=74509"}],"version-history":[{"count":6,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts\/74509\/revisions"}],"predecessor-version":[{"id":74547,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts\/74509\/revisions\/74547"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/74509\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/74509\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/74509\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/74509\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/74509\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/74509\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/74509\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/74509\/translations\/es"},{"href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/74509\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/media\/74510"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/media?parent=74509"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/tags?post=74509"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/topic?post=74509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}