{"id":75072,"date":"2026-01-09T09:34:37","date_gmt":"2026-01-09T08:34:37","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=75072&#038;preview=true&#038;preview_id=75072"},"modified":"2026-01-14T09:33:29","modified_gmt":"2026-01-14T08:33:29","slug":"wordpress-block-bindings-api","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/wordpress-block-bindings-api\/","title":{"rendered":"Die WordPress Block Bindings API: Was sie ist und wie man sie zum Aufbau dynamischer Websites nutzt"},"content":{"rendered":"<p>Die Block Bindings API ist ein leistungsstarkes Werkzeug im Block-Editor, mit dem du jede Datenquelle mit den Attributen eines Blocks verbinden kannst.<\/p>\n<p>Diese API wurde erstmals <span style=\"margin: 0px;padding: 0px\">in <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-6-5\/#block-bindings-api\" target=\"_blank\" rel=\"noopener noreferrer\">WordPress 6.5<\/a><\/span> eingef\u00fchrt <span style=\"margin: 0px;padding: 0px\">und<\/span> erm\u00f6glichte es WordPress-Nutzern, benutzerdefinierte Feldwerte in Beitr\u00e4gen und Seiten anzuzeigen.<\/p>\n<p>Die Block Bindings API dient als Grundlage f\u00fcr andere robuste WordPress-Funktionen. Beispiele daf\u00fcr sind die <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-6-6\/#synced-pattern-overrides\">\u00dcberschreibungen des Synced Pattern<\/a> und die Blockvariation <strong>Post Date<\/strong>, die in <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-6-9\/#block-bindings-api-improvements\">WordPress 6.9<\/a> eingef\u00fchrt wurde.<\/p>\n<p>Was genau ist also die Block Bindings API? Und wof\u00fcr wird sie verwendet? Wir geben eine einfache Einf\u00fchrung und zeigen anhand eines praktischen Beispiels, wie man Bindungen zwischen Gutenberg-Bl\u00f6cken und externen Datenquellen erstellt.<\/p>\n<p>Los geht&#8217;s.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Die Block Bindings API: Grundlegende Konzepte<\/h2>\n<p>Wie wir bereits erw\u00e4hnt haben, kannst du mit der Block Bindings API Bindungen zwischen einer Datenquelle und den Attributen eines Blocks erstellen.<\/p>\n<p>Wenn du mit den Blockattributen nicht vertraut bist, navigiere zum Verzeichnis <code>src<\/code> der Blockbibliothek des Gutenberg-Projekts auf GitHub, suche den Block Paragraph und \u00f6ffne die <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/blob\/trunk\/packages\/block-library\/src\/paragraph\/block.json\" target=\"_blank\" rel=\"noopener noreferrer\">Datei <code>block.json<\/code><\/a>. Die Eigenschaft <code>attributes<\/code> enth\u00e4lt eine Liste mit den Attributen des Blocks Paragraph.<\/p>\n<pre><code class=\"language-json\">\"attributes\": {\n\t\"content\": {\n\t\t\"type\": \"rich-text\",\n\t\t\"source\": \"rich-text\",\n\t\t\"selector\": \"p\",\n\t\t\"role\": \"content\"\n\t},\n\t\"dropCap\": {\n\t\t\"type\": \"boolean\",\n\t\t\"default\": false\n\t},\n\t\"placeholder\": {\n\t\t\"type\": \"string\"\n\t},\n\t\"direction\": {\n\t\t\"type\": \"string\",\n\t\t\"enum\": [ \"ltr\", \"rtl\" ]\n\t}\n},<\/code><\/pre>\n<p>Die folgenden Bl\u00f6cke unterst\u00fctzen ab WordPress 6.9 die Block Bindings API und k\u00f6nnen daher mit deinen benutzerdefinierten Feldern verkn\u00fcpft werden:<\/p>\n<table>\n<thead>\n<tr>\n<th>Unterst\u00fctzte Bl\u00f6cke<\/th>\n<th>Attribute<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Absatz<\/td>\n<td>inhalt<\/td>\n<\/tr>\n<tr>\n<td>Titel<\/td>\n<td>inhalt<\/td>\n<\/tr>\n<tr>\n<td>Bild<\/td>\n<td>id, url, alt, Titel, Beschriftung<\/td>\n<\/tr>\n<tr>\n<td>Schaltfl\u00e4che<\/td>\n<td>text, url, linkTarget, rel<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Um deine benutzerdefinierten Felder mit Gutenberg-Bl\u00f6cken zu verbinden, musst du sie zun\u00e4chst <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_post_meta\/\" target=\"_blank\" rel=\"noopener noreferrer\">registrieren<\/a>. Der folgende Code registriert ein benutzerdefiniertes Feld \u00fcber ein WordPress-Plugin oder die <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-functions-php\/\">Datei <code>functions.php<\/code><\/a> deines Themes:<\/p>\n<pre><code class=\"language-php\">add_action( 'init', function() {\n\tregister_post_meta( 'your-post-type', 'myplugin_meta_key', [\n\t\t'show_in_rest'  =&gt; true,\n\t\t'single'        =&gt; true,\n\t\t'type'          =&gt; 'string',\n\t\t'description'   =&gt; __( 'City name', 'textdomain' ),\n\t\t'auth_callback' =&gt; 'is_user_logged_in',\n\t] );\n} );<\/code><\/pre>\n<p><code>register_post_meta<\/code> der Code akzeptiert eine Reihe von Attributen, die die Eigenschaften von benutzerdefinierten Feldern definieren; die Dokumentation enth\u00e4lt eine <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_meta\/\">vollst\u00e4ndige Liste<\/a> dieser Attribute. Um ein benutzerdefiniertes Feld f\u00fcr die Block Bindings API verf\u00fcgbar zu machen, musst du <code>show_in_rest<\/code> auf true setzen. Ab WordPress 6.9 wird nur noch der Typ <code>string<\/code> unterst\u00fctzt.<\/p>\n<p>Um die Block Bindings API in Aktion mit benutzerdefinierten Feldern zu sehen, erstelle ein neues WordPress-Plugin und registriere ein Metafeld mit dem oben gezeigten Code.<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * Plugin Name: Block Bindings example\n * Description: Example plugin that uses the Block Bindings API.\n * Version: 1.0.0\n * Author: Your Name\n * License: GPL2 or later\n * Text Domain: block-bindings-example\n *\/\n\nif ( ! defined( 'ABSPATH' ) ) {\n\texit;\n}\n\nadd_action( 'init', function() {\n\tregister_post_meta( '', 'block_bindings_image_url', [\n\t\t'show_in_rest'  =&gt; true,\n\t\t'single'\t    =&gt; true,\n\t\t'type'\t\t    =&gt; 'string',\n\t\t'description'   =&gt; __( 'City name', 'block-bindings-example' ),\n\t\t'auth_callback' =&gt; 'is_user_logged_in',\n\t] );\n} );<\/code><\/pre>\n<p>Aktiviere das Plugin in deinem WordPress-Dashboard. Navigiere dann zum Bildschirm Beitr\u00e4ge und erstelle einen neuen Beitrag. Wenn du einen unterst\u00fctzten Block ausw\u00e4hlst, zeigt das <strong>Attribute-Panel<\/strong> in der Seitenleiste der Blockeinstellungen die Liste der Attribute an, die an ein registriertes benutzerdefiniertes Feld gebunden werden k\u00f6nnen.<\/p>\n<figure id=\"attachment_202443\" aria-describedby=\"caption-attachment-202443\" style=\"width: 2094px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-202443 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/12\/image-block-attributes-block-bindings-ui.png\" alt=\"Ein Screenshot, der die Attribute des Bildblocks zeigt, die Blockbindungen unterst\u00fctzen.\" width=\"2094\" height=\"1016\"><figcaption id=\"caption-attachment-202443\" class=\"wp-caption-text\">Bildblockattribute, die Block Bindings unterst\u00fctzen<\/figcaption><\/figure>\n<p>\u00d6ffne das Men\u00fc <strong>Optionen<\/strong> in der oberen rechten Ecke und w\u00e4hle <strong>Einstellungen<\/strong>. Auf der Registerkarte <strong>Allgemein<\/strong> suchst du den Abschnitt <strong>Erweitert<\/strong> und aktivierst die benutzerdefinierten Felder. Speichere deine \u00c4nderungen, warte, bis die Website neu geladen ist, und kehre dann zum Editor zur\u00fcck.<\/p>\n<figure id=\"attachment_202434\" aria-describedby=\"caption-attachment-202434\" style=\"width: 1490px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-202434 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/12\/enable-custom-fields.png\" alt=\"Ein Screenshot der Einstellungen vom Block-Editor.\" width=\"1490\" height=\"1006\"><figcaption id=\"caption-attachment-202434\" class=\"wp-caption-text\">Aktiviere die benutzerdefinierten Felder in den Voreinstellungen des Editors<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Wir gehen davon aus, dass wir benutzerdefinierte Felder manuell hinzuf\u00fcgen wollen. Eine <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-6-7\/#meta-boxes-in-the-post-editor\">Schnittstelle<\/a> zu erstellen, die das Einf\u00fcgen von benutzerdefinierten Feldern vereinfacht, w\u00fcrde den Rahmen dieses Artikels sprengen.<\/p>\n<\/aside>\n\n<p>Der n\u00e4chste Schritt ist das Einf\u00fcgen eines Bildblocks. Klicke bei ausgew\u00e4hltem Block auf das <strong>+<\/strong> Symbol im <strong>Attribute-Panel<\/strong> und w\u00e4hle das Attribut <strong>url<\/strong> aus. Das Attribute-Panel zeigt dann eine Liste der verf\u00fcgbaren Meta-Felder an. W\u00e4hle erneut url. Jetzt siehst du die Liste der Meta-Felder, die f\u00fcr den aktuellen Beitragstyp verf\u00fcgbar sind.<\/p>\n<figure id=\"attachment_202436\" aria-describedby=\"caption-attachment-202436\" style=\"width: 2162px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-202436 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/12\/attributes-panel-image-block.png\" alt=\"Ein Screenshot, der ein benutzerdefiniertes Feld und die Benutzeroberfl\u00e4che \u201eBlock Bindings\u201c zeigt.\" width=\"2162\" height=\"930\"><figcaption id=\"caption-attachment-202436\" class=\"wp-caption-text\">Binden eines benutzerdefinierten Feldes an das url-Attribut eines Bildblocks in der Block Bindings UI<\/figcaption><\/figure>\n<p>W\u00e4hle dein Metafeld aus und speichere den Beitrag. Jetzt solltest du dein Bild sowohl im Editor als auch im Frontend sehen.<\/p>\n<figure id=\"attachment_202439\" aria-describedby=\"caption-attachment-202439\" style=\"width: 2162px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-202439 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/12\/block-bindings-image-url.jpg\" alt=\"Ein Screenshot vom Block-Editor mit einem Bildblock, bei dem das URL-Attribut mit einem benutzerdefinierten Feldwert verkn\u00fcpft ist.\" width=\"2162\" height=\"1074\"><figcaption id=\"caption-attachment-202439\" class=\"wp-caption-text\">Ein Bild-Block mit dem url-Attribut, das an einen benutzerdefinierten Feldwert gebunden ist<\/figcaption><\/figure>\n<p>Ab <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-6-7\/\">Version 6.7 von WordPress<\/a> kannst du das Label-Attribut verwenden, um Text in der Editoroberfl\u00e4che anzuzeigen. Der folgende Codeblock zeigt ein Beispiel:<\/p>\n<pre><code class=\"language-php\">add_action( 'init', function() {\n\tregister_post_meta( '', 'block_bindings_image_url', [\n\t\t'show_in_rest'  =&gt; true,\n\t\t'single'        =&gt; true,\n\t\t'type'          =&gt; 'string',\n\t\t'description'   =&gt; __( 'City image', 'block-bindings-example' ),\n\t\t'label'         =&gt; __('Image URL'),\n\t\t'auth_callback' =&gt; 'is_user_logged_in',\n\t] );\n} );<\/code><\/pre>\n<figure id=\"attachment_202441\" aria-describedby=\"caption-attachment-202441\" style=\"width: 2148px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-202441 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/12\/custom-field-label-in-block-bindings-ui.png\" alt=\"Ein Screenshot, der benutzerdefinierte Feldbezeichnungen in der Benutzeroberfl\u00e4che von Block Bindings zeigt\" width=\"2148\" height=\"1134\"><figcaption id=\"caption-attachment-202441\" class=\"wp-caption-text\">Benutzerdefinierte Feldbeschriftungen in der Block Bindings UI<\/figcaption><\/figure>\n<p>Wenn du den Code-Editor \u00f6ffnest, kannst du ein JSON-Objekt innerhalb des Bildblockbegrenzers sehen. Die Eigenschaft <code>metadata.bindings.url<\/code> zeigt, dass die <code>url<\/code> des Bildblocks mit einem Metadatenfeld verkn\u00fcpft ist.<\/p>\n<pre><code class=\"language-html\">&lt;!-- wp:image {\n\t\"metadata\":{\n\t\t\"bindings\":{\n\t\t\t\"url\":{\n\t\t\t\t\"source\":\"core\/post-meta\",\n\t\t\t\t\"args\":{\n\t\t\t\t\t\"key\":\"block_bindings_image_url\"\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n} --&gt;\n&lt;figure class=\"wp-block-image\"&gt;&lt;img alt=\"\/&gt;&lt;\/figure&gt;\n&lt;!-- \/wp:image --&gt;<\/code><\/pre>\n<p>Die Eigenschaft <code>source<\/code> gibt die Datenquelle f\u00fcr die Blockbindungen an. Die Eigenschaft <code>args.key<\/code> stellt einen Verweis auf dein Metafeld her.<\/p>\n<p>Der interessanteste Aspekt der Block Bindings API ist die M\u00f6glichkeit, benutzerdefinierte Datenquellen zu registrieren, was den Entwicklern einige spannende neue M\u00f6glichkeiten er\u00f6ffnet. Als N\u00e4chstes werden wir uns ansehen, wie du mit der Block Bindings API Daten von Drittanbietern nutzen kannst.<\/p>\n<h2>Wie man benutzerdefinierte Block Bindings Datenquellen registriert: Ein Beispiel aus der Praxis<\/h2>\n<p>Da du nun mit den grundlegenden Konzepten der Block Bindings API vertraut bist, k\u00f6nnen wir zu den fortgeschrittenen und f\u00fcr Entwickler\/innen interessanten Aspekten \u00fcbergehen.<\/p>\n<p>Wie bereits erw\u00e4hnt, kannst du mit der Block Bindings API benutzerdefinierte Datenquellen registrieren. Damit kannst du Daten aus einer entfernten Quelle abrufen und\/oder Rohdaten bearbeiten, um n\u00fctzliche Informationen zu generieren, die automatisch in deinen Inhalt eingef\u00fcgt werden k\u00f6nnen.<\/p>\n<p>In diesem Abschnitt erf\u00e4hrst du anhand eines praktischen Beispiels, wie du das Potenzial von Block Bindings optimal nutzen kannst, um deine eigenen benutzerdefinierten Anwendungen zu entwickeln.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Bitte beachte, dass der Code im folgenden Beispiel nur zu Demonstrationszwecken dient und nicht in der Produktion verwendet werden sollte.<\/p>\n<\/aside>\n\n<p>Angenommen, du m\u00f6chtest Daten aus einer externen Quelle abrufen und sie in deinen Beitr\u00e4gen, Seiten oder <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-benutzerdefinierte-beitragstypen\/\">benutzerdefinierten Beitragstypen<\/a> anzeigen. Du k\u00f6nntest z. B. eine Wetterdienst-API abfragen, indem du eine Anfrage mit dem Breiten- und L\u00e4ngengrad einer Stadt sendest, um Echtzeit-Wetterdaten zu erhalten, die du dann auf deiner Website anzeigen kannst.<\/p>\n<p>Dank der Block Bindings API kannst du die aktuelle Temperatur anzeigen oder deinen Lesern die Wettervorhersage f\u00fcr die n\u00e4chsten Tage \u00fcbermitteln. Du kannst auch programmatisch das <code>url<\/code> Attribut eines oder mehrerer Bilder auf der Seite abh\u00e4ngig von den Wetterbedingungen \u00e4ndern.<\/p>\n<p>Um diese Funktion zu deiner WordPress-Website hinzuzuf\u00fcgen, musst du ein Plugin erstellen. Befolge diese Schritte:<\/p>\n<h3>Schritt 1: Ein einfaches Plugin erstellen<\/h3>\n<p>Der erste Schritt besteht darin, die Plugin-Dateien zu erstellen. Navigiere zum Verzeichnis <code>wp-content\/plugins<\/code> deiner WordPress-Installation und erstelle einen neuen Ordner namens <code>block-bindings-example<\/code>. In diesem Ordner f\u00fcgst du die folgenden Dateien hinzu:<\/p>\n<pre><code>\/wp-content\/plugins\/\n\u2514\u2500\u2500 \/block-bindings-example\/\n\t\u251c\u2500\u2500 block-bindings-example.php\n\t\u2514\u2500\u2500 \/includes\/\n\t\t\u251c\u2500\u2500 binding-sources.php\n\t\t\u251c\u2500\u2500 meta-fields.php\n\t\t\u2514\u2500\u2500 weather-api.php<\/code><\/pre>\n<p>\u00d6ffne die Datei <code>block-bindings-example.php<\/code> in deinem bevorzugten <a href=\"https:\/\/kinsta.com\/de\/blog\/kostenlose-html-editoren\/\">Code-Editor<\/a> und f\u00fcge den folgenden Code hinzu:<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * Plugin Name: Block Bindings Example\n * Description: Use WordPress Block Bindings API (6.5+) to dynamically bind weather data from Open-Meteo API to Gutenberg blocks using custom post meta and a custom binding source.\n * Version: 1.0.0\n * Author: Your Name\n * License: GPL2 or later\n * Text Domain: block-bindings-example\n *\/\n\nif ( ! defined( 'ABSPATH' ) ) {\n\texit; \/\/ Exit if accessed directly\n}\n\n\/**\n * Cache duration for weather data: 30 minutes\n * This reduces API calls and improves performance\n *\/\ndefine( 'BB_WEATHER_CACHE_TIME', HOUR_IN_SECONDS \/ 2 );\n\nrequire_once plugin_dir_path( __FILE__ ) . 'includes\/meta-fields.php';\nrequire_once plugin_dir_path( __FILE__ ) . 'includes\/binding-sources.php';\nrequire_once plugin_dir_path( __FILE__ ) . 'includes\/weather-api.php';\n\n\/**\n * Setup function\n *\/\nfunction bb_init_setup() {\n\tbb_register_post_meta();\n\tbb_register_binding_sources();\n}\nadd_action( 'init', 'bb_init_setup' );<\/code><\/pre>\n<p>Das macht dieser Code:<\/p>\n<ul>\n<li>Die Konstante <code>BB_WEATHER_CACHE_TIME<\/code> bestimmt, wie lange die Wetterdaten zwischengespeichert werden. Dadurch werden API-Aufrufe reduziert, die Seitenleistung verbessert und die Servicekosten gesenkt.<\/li>\n<li>Die <code>require_once<\/code> Ausdr\u00fccke enthalten die notwendigen Skripte, um Metafelder zu registrieren, die Bindungsquelle zu registrieren und Daten von der API abzurufen.<\/li>\n<li>Die Setup-Funktion ruft zwei Funktionen auf, die die Post-Meta-Felder und die benutzerdefinierten Bindungsquellen registrieren.<\/li>\n<\/ul>\n<h3>Schritt 2: Post-Meta-Felder registrieren<\/h3>\n<p>Im n\u00e4chsten Schritt registrierst du die Metafelder, die du f\u00fcr deinen Anwendungsfall brauchst. \u00d6ffne die Datei <code>meta-fields.php<\/code> im Ordner <code>includes<\/code> und f\u00fcge den folgenden Code hinzu:<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * Registers custom post meta fields so they appear in the REST API and Block Bindings editor panel\n *\/\nfunction bb_register_post_meta() {\n\n\tif ( ! function_exists( 'register_post_meta' ) ) {\n\t\treturn;\n\t}\n\n\tregister_post_meta( 'post', 'block_bindings_city_name', [\n\t\t'show_in_rest'  =&gt; true,\n\t\t'single'        =&gt; true,\n\t\t'type'          =&gt; 'string',\n\t\t'description'   =&gt; __( 'Add city name', 'block-bindings-example' ),\n\t\t'label'         =&gt; __( 'City name', 'block-bindings-example' ),\n\t\t'auth_callback' =&gt; 'is_user_logged_in',\n\t] );\n\n\tregister_post_meta( 'post', 'block_bindings_image_url', [\n\t\t'show_in_rest'  =&gt; true,\n\t\t'single'        =&gt; true,\n\t\t'type'          =&gt; 'string',\n\t\t'description'   =&gt; __( 'Add city image URL', 'block-bindings-example' ),\n\t\t'label'         =&gt; __( 'City image URL', 'block-bindings-example' ),\n\t\t'auth_callback' =&gt; 'is_user_logged_in',\n\t] );\n\n\tregister_post_meta( 'post', 'block_bindings_city_lat', [\n\t\t'show_in_rest'  =&gt; true,\n\t\t'single'        =&gt; true,\n\t\t'type'          =&gt; 'string',\n\t\t'description'   =&gt; __( 'Add city latitude', 'block-bindings-example' ),\n\t\t'label'         =&gt; __( 'Latitude', 'block-bindings-example' ),\n\t\t'auth_callback' =&gt; 'is_user_logged_in',\n\t] );\n\n\tregister_post_meta( 'post', 'block_bindings_city_lng', [\n\t\t'show_in_rest'  =&gt; true,\n\t\t'single'        =&gt; true,\n\t\t'type'          =&gt; 'string',\n\t\t'description'   =&gt; __( 'Add city longitude', 'block-bindings-example' ),\n\t\t'label'         =&gt; __( 'Longitude', 'block-bindings-example' ),\n\t\t'auth_callback' =&gt; 'is_user_logged_in',\n\t] );\n}<\/code><\/pre>\n<p>Die Funktion <code>register_post_meta<\/code> registriert einen Metaschl\u00fcssel zur Verwendung in Beitr\u00e4gen. Beachte, dass du <code>show_in_rest<\/code> auf <code>true<\/code> und <code>type<\/code> auf <code>string<\/code> setzen musst, um auf diese Weise registrierte Metafelder mit der Block Bindings API zu verwenden. Weitere Informationen findest du in der <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_post_meta\/\" target=\"_blank\" rel=\"noopener noreferrer\">Dokumentation<\/a>.<\/p>\n<h3>Schritt 3: Block Bindings-Quelle registrieren<\/h3>\n<p>Jetzt ist es an der Zeit, deine Bindungsquelle zu registrieren. \u00d6ffne die Datei <code>binding-sources.php<\/code> und f\u00fcge den folgenden Code ein:<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * Registers a custom Block Bindings source: bb\/weather-condition\n *\/\nfunction bb_register_binding_sources() {\n\n\tif ( ! function_exists( 'register_block_bindings_source' ) ) {\n\t\treturn;\n\t}\n\t\n\tregister_block_bindings_source(\n\t\t'bb\/weather-condition',\n\t\t[\n\t\t\t'label'              =&gt; __( 'Weather Condition', 'block-bindings-example' ),\n\t\t\t'get_value_callback' =&gt; 'bb_get_weather_condition_value',\n\t\t\t'uses_context'       =&gt; [ 'postId' ], \/\/ We need postId to get meta values\n\t\t]\n\t);\n}<\/code><\/pre>\n<p>Die Funktion <code>register_block_bindings_source()<\/code> ben\u00f6tigt den Namen der Quelle und eine Callback-Funktion, die Daten von einer Quelle abruft und den manipulierten Wert zur\u00fcckgibt.<\/p>\n<p>Definiere dann in der gleichen <code>binding-sources.php<\/code> Datei die Callback-Funktion.<\/p>\n<pre><code class=\"language-php\">function bb_get_weather_condition_value( array $source_args, WP_Block $block_instance ) {\n\n\t$key = $source_args['key'] ?? null;\n\tif ( ! $key ) {\n\t\treturn null;\n\t}\n\n\t\/\/ Get current post ID from block context (always available in post content)\n\t$post_id = $block_instance-&gt;context['postId'] ?? null;\n\n\t\/\/ Fallback: use global loop if context is missing\n\tif ( ! $post_id && in_the_loop() ) {\n\t\t$post_id = get_the_ID();\n\t}\n\n\tif ( ! $post_id || $post_id &lt;= 0 ) {\n\t\terror_log( 'BB DEBUG: Could not determine post ID for weather binding' );\n\t\treturn null;\n\t}\n\n\t$weather_data = bb_fetch_and_cache_weather_data( $post_id );\n\n\tif ( ! is_array( $weather_data ) || ! isset( $weather_data[ $key ] ) ) {\n\t\treturn null;\n\t}\n\n\t$value = $weather_data[ $key ];\n\n\t\/\/ Append \u00b0C symbol for temperature\n\tif ( $key === 'temperature' ) {\n\t\treturn $value . '\u00b0C';\n\t}\n\n\treturn $value;\n}<\/code><\/pre>\n<p>Lasst uns diese Funktion aufschl\u00fcsseln:<\/p>\n<ul>\n<li><code>$source_args['key']<\/code> identifiziert die Daten, die an das Blockattribut gebunden sind.<\/li>\n<li>In der n\u00e4chsten Zeile wird die ID des aktuellen Beitrags von <code>context<\/code> abgerufen. Wenn <code>context<\/code> fehlt, wie es bei Vorschauen der Fall sein kann, wird die ID des aktuellen Beitrags mit <code>get_the_ID()<\/code> abgerufen.<\/li>\n<li>Dann wird die Funktion <code>bb_fetch_and_cache_weather_data<\/code> aufgerufen, die die Daten von der API abruft. Wir werden diese Funktion im n\u00e4chsten Schritt definieren.<\/li>\n<li><code>$weather_data[$key]<\/code> enth\u00e4lt die von der API bereitgestellten Daten, wie z. B. die Temperatur und den Wetterzustand.<\/li>\n<li>Wenn der Schl\u00fcssel <code>temperature<\/code> ist, f\u00fcgt sie <code>\u00b0C<\/code> an den angegebenen Wert an.<\/li>\n<li>Die Funktion gibt dann den endg\u00fcltigen Wert zur\u00fcck.<\/li>\n<\/ul>\n<h3>Schritt 4: Abrufen von Daten aus einer externen Quelle<\/h3>\n<p>Wie bereits erw\u00e4hnt, rufen wir Daten vom <a href=\"https:\/\/open-meteo.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Open-Meteo-Dienst<\/a> ab (kostenlos f\u00fcr nicht-kommerzielle Zwecke).<\/p>\n<p>Um die aktuelle Temperatur und die Wetterbedingungen abzurufen, musst du eine Anfrage an die API senden, die den Breiten- und L\u00e4ngengrad eines bestimmten Ortes und die Abfrage var <code>current=weather_code,temperature_2m<\/code> enth\u00e4lt. Nachfolgend findest du ein Beispiel f\u00fcr eine Anfrage:<\/p>\n<pre><code>https:\/\/api.open-meteo.com\/v1\/forecast?latitude=-33.8717&longitude=151.2299&current=weather_code,temperature_2m<\/code><\/pre>\n<p>Die API liefert eine Antwort \u00e4hnlich der folgenden:<\/p>\n<pre><code class=\"language-json\">{\n\t\"latitude\": -33.8717,\n\t\"longitude\": 151.2299,\n\t\"generationtime_ms\": 0.030875205993652344,\n\t\"utc_offset_seconds\": 0,\n\t\"timezone\": \"GMT\",\n\t\"timezone_abbreviation\": \"GMT\",\n\t\"elevation\": 13.0,\n\t\"current_units\": {\n\t\t\"time\": \"iso8601\",\n\t\t\"interval\": \"seconds\",\n\t\t\"weather_code\": \"wmo code\",\n\t\t\"temperature_2m\":\"\u00b0C\"\n\t},\n\t\"current\": {\n\t\t\"time\": \"2025-12-01T16:00\",\n\t\t\"interval\": 900,\n\t\t\"weather_code\": 3,\n\t\t\"temperature_2m\":7.3\n\t}\n}<\/code><\/pre>\n<figure id=\"attachment_202460\" aria-describedby=\"caption-attachment-202460\" style=\"width: 2336px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-202460 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/12\/postman-for-vsc.png\" alt=\"Open-Meteo-Antwort in Postman f\u00fcr Visual Studio Code\" width=\"2336\" height=\"1642\"><figcaption id=\"caption-attachment-202460\" class=\"wp-caption-text\">Open-Meteo-Antwort in Postman f\u00fcr Visual Studio Code<\/figcaption><\/figure>\n<p>Da du nun wei\u00dft, wie du die ben\u00f6tigten Daten erh\u00e4ltst, \u00f6ffne die Datei <code>weather-api.php<\/code> und f\u00fcge den folgenden Code hinzu:<\/p>\n<pre><code class=\"language-php\">function bb_fetch_and_cache_weather_data( $post_id ) {\n\t$lat = get_post_meta( $post_id, 'block_bindings_city_lat', true );\n\t$lng = get_post_meta( $post_id, 'block_bindings_city_lng', true );\n\n\t$lat = str_replace( ',', '.', trim( $lat ) );\n\t$lng = str_replace( ',', '.', trim( $lng ) );\n\n\tif ( ! is_numeric( $lat ) || ! is_numeric( $lng ) ) {\n\t\terror_log( 'BB DEBUG: Invalid latitude\/longitude values after normalization' );\n\t\treturn false;\n\t}\n\n\t$transient_key = 'bb_weather_data_' . $post_id;\n\t$cached_data   = get_transient( $transient_key );\n\n\tif ( $cached_data !== false ) {\n\t\terror_log( \"BB DEBUG: Cache hit for post ID {$post_id}\" );\n\t\treturn $cached_data;\n\t}\n\n\t\/\/ Build Open-Meteo API URL\n\t$api_url = sprintf(\n\t\t'https:\/\/api.open-meteo.com\/v1\/forecast?latitude=%s&longitude=%s&current=weather_code,temperature_2m',\n\t\trawurlencode( $lat ),\n\t\trawurlencode( $lng )\n\t);\n\n\terror_log( \"BB DEBUG: Fetching weather data from: {$api_url}\" );\n\n\t$response = wp_remote_get( $api_url, [ 'timeout' =&gt; 10 ] );\n\n\tif ( is_wp_error( $response ) ) {\n\t\terror_log( 'BB DEBUG: API request failed \u2013 ' . $response-&gt;get_error_message() );\n\t\treturn false;\n\t}\n\n\tif ( wp_remote_retrieve_response_code( $response ) !== 200 ) {\n\t\terror_log( 'BB DEBUG: API returned non-200 status code' );\n\t\treturn false;\n\t}\n\n\t$body = wp_remote_retrieve_body( $response );\n\t$data = json_decode( $body, true );\n\n\tif ( ! $data || ! isset( $data['current'] ) ) {\n\t\terror_log( 'BB DEBUG: Invalid or empty API response' );\n\t\treturn false;\n\t}\n\n\t$temperature  = $data['current']['temperature_2m'] ?? null;\n\t$weather_code = $data['current']['weather_code'] ?? 0;\n\n\t$mapped_data = [\n\t\t'temperature'    =&gt; round( (float) $temperature ),\n\t\t'weather_state'  =&gt; bb_map_wmo_code_to_state( (int) $weather_code ),\n\t];\n\n\t\/\/ Cache for 30 minutes\n\tset_transient( $transient_key, $mapped_data, BB_WEATHER_CACHE_TIME );\n\n\terror_log( 'BB DEBUG: Weather data fetched and cached successfully' );\n\n\treturn $mapped_data;\n}<\/code><\/pre>\n<p>Diese Funktion ruft aktuelle Wetterdaten von der Open-Meteo-API ab und speichert sie mithilfe von <a href=\"https:\/\/kinsta.com\/de\/blog\/wp-options-automatisch-geladene-daten\/#clean-up-transients\">Transienten<\/a> im Cache. Schauen wir uns das mal genauer an.<\/p>\n<ul>\n<li>Zwei Aufrufe an <code>get_post_meta<\/code> rufen den Breitengrad und den L\u00e4ngengrad deines Standorts ab.<\/li>\n<li>Die folgenden zwei Zeilen normalisieren das Dezimaltrennzeichen f\u00fcr den Fall, dass der Nutzer ein Komma statt eines Punktes eingibt.<\/li>\n<li>Der bedingte Block pr\u00fcft mit <code>is_numeric()<\/code>, ob die Werte im numerischen Format vorliegen.<\/li>\n<li>Als n\u00e4chstes wird gepr\u00fcft, ob die Daten im Cache sind. Wenn ja, gibt er die Daten aus dem Cache zur\u00fcck und beendet die Funktion, ohne eine Anfrage an die API zu senden.<\/li>\n<li>Wenn keine Daten im Cache gefunden werden, wird die Anfrage erstellt und die Antwort gespeichert.<\/li>\n<li>Die folgenden Zeilen enthalten <code>temperature<\/code> und <code>weather_code<\/code>.<\/li>\n<li><code>weather_code<\/code> wird dank der Funktion <code>bb_map_wmo_code_to_state<\/code>, die weiter unten definiert wird, auf <code>weather_state<\/code> abgebildet.<\/li>\n<li>Die Daten werden mit <code>set_transient<\/code> gespeichert.<\/li>\n<li>Zum Schluss gibt die Funktion die zugeordneten Daten zur\u00fcck.<\/li>\n<\/ul>\n<p>Zuletzt definierst du die Funktion, die <code>weather_code<\/code> in eine f\u00fcr den Menschen lesbare Zeichenkette umwandelt:<\/p>\n<pre><code class=\"language-php\">function bb_map_wmo_code_to_state( $code ) {\n\tif ( $code &gt;= 0 && $code &lt;= 3 ) {\n\t\treturn 'clear';\n\t} elseif ( $code &gt;= 51 && $code &lt;= 67 ) {\n\t\treturn 'rainy';\n\t} elseif ( $code &gt;= 71 && $code &lt;= 77 ) {\n\t\treturn 'snowy';\n\t} elseif ( $code &gt;= 95 ) {\n\t\treturn 'thunderstorm';\n\t}\n\treturn 'cloudy';\n}<\/code><\/pre>\n<p>Der Code ist fertig und dein Plugin ist bereit zum Testen.<\/p>\n<h2>Wie man die Block Bindings API verwendet<\/h2>\n<p>Es ist an der Zeit zu lernen, wie du die neuen Funktionen der Block Bindings API auf deiner Website nutzen kannst!<\/p>\n<p>Navigiere in deinem WordPress-Dashboard zum Bildschirm Plugins und aktiviere das Plugin <strong>Block Bindings Example<\/strong>, das du gerade erstellt hast.<\/p>\n<figure id=\"attachment_202462\" aria-describedby=\"caption-attachment-202462\" style=\"width: 2300px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-202462 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/12\/plugins-screen.png\" alt=\"Plugins Bildschirm\" width=\"2300\" height=\"1246\"><figcaption id=\"caption-attachment-202462\" class=\"wp-caption-text\">Aktiviere das Plugin in deinem WordPress Dashboard<\/figcaption><\/figure>\n<p>Erstelle danach einen neuen Beitrag oder eine neue Seite. F\u00fcge einen Bildblock, einen Titel und vier Zeilenbl\u00f6cke mit jeweils zwei Abs\u00e4tzen hinzu, wie in der Abbildung unten gezeigt. Speichere dann den Beitrag.<\/p>\n<figure id=\"attachment_202463\" aria-describedby=\"caption-attachment-202463\" style=\"width: 1432px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-202463 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/12\/adding-blocks.png\" alt=\"Ein Screenshot der Block-Editor-Arbeitsfl\u00e4che mit Bl\u00f6cken.\" width=\"1432\" height=\"1084\"><figcaption id=\"caption-attachment-202463\" class=\"wp-caption-text\">F\u00fcge Bl\u00f6cke zum Editor-Canvas hinzu<\/figcaption><\/figure>\n<p>Anschlie\u00dfend f\u00fcgst du deine benutzerdefinierten Felder hinzu und speicherst den Beitrag erneut.<\/p>\n<figure id=\"attachment_202464\" aria-describedby=\"caption-attachment-202464\" style=\"width: 1728px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-202464 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/12\/add-custom-fields.png\" alt=\"F\u00fcge benutzerdefinierte Felder zu dem Beitrag hinzu\" width=\"1728\" height=\"850\"><figcaption id=\"caption-attachment-202464\" class=\"wp-caption-text\">F\u00fcge benutzerdefinierte Felder zu dem Beitrag hinzu<\/figcaption><\/figure>\n<p>W\u00e4hle den Bildblock aus und suche das Feld <strong>Attribute<\/strong> in der Seitenleiste der Blockeinstellungen. Klicke auf die Schaltfl\u00e4che <strong>+<\/strong>, um das Dropdown-Men\u00fc zu \u00f6ffnen, in dem die Liste der Bildblockattribute angezeigt wird, die Blockbindungen unterst\u00fctzen. W\u00e4hle das Element <strong>url<\/strong> aus.<\/p>\n<figure id=\"attachment_202443\" aria-describedby=\"caption-attachment-202443\" style=\"width: 2094px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-202443 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/12\/image-block-attributes-block-bindings-ui.png\" alt=\"Ein Screenshot, der die Attribute des Bildblocks zeigt, die Blockbindungen unterst\u00fctzen.\" width=\"2094\" height=\"1016\"><figcaption id=\"caption-attachment-202443\" class=\"wp-caption-text\">Bildblockattribute, die Block Bindings unterst\u00fctzen<\/figcaption><\/figure>\n<p>Nachdem du das Blockattribut ausgew\u00e4hlt hast, wird auf der Registerkarte <strong>Erweitert<\/strong> ein neues <strong>URL-Element<\/strong> mit der Beschreibung &#8222;Nicht verbunden&#8220; angezeigt Klicke erneut auf das <strong>url-Element<\/strong>, um die Liste der verf\u00fcgbaren Bindungsquellen anzuzeigen. <strong>Post Meta<\/strong> zeigt die vier benutzerdefinierten Felder an, die f\u00fcr den Beitragstyp registriert sind, zusammen mit ihren jeweiligen Werten. W\u00e4hle <strong>Stadtbild-URL<\/strong>.<\/p>\n<figure id=\"attachment_202467\" aria-describedby=\"caption-attachment-202467\" style=\"width: 2300px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-202467 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/12\/registered-post-meta-fields.png\" alt=\"Ein Screenshot der Benutzeroberfl\u00e4che von Block Bindings\" width=\"2300\" height=\"902\"><figcaption id=\"caption-attachment-202467\" class=\"wp-caption-text\">Verbinde die registrierten Meta-Felder<\/figcaption><\/figure>\n<p>Du hast das Meta-Feld <strong>Stadtbild-URL<\/strong> dem Attribut <strong>url<\/strong> des Bild-Blocks zugewiesen. Du solltest jetzt ein Foto der von dir gew\u00e4hlten Stadt sehen.<\/p>\n<p>Gehe bei den anderen Metafeldern genauso vor. Weise das Feld <strong>Stadtname<\/strong> dem Attribut <code>content<\/code> des \u00dcberschriftenblocks und die Felder <strong>Breitengrad<\/strong> und <strong>L\u00e4ngengrad<\/strong> den entsprechenden Absatzbl\u00f6cken zu.<\/p>\n<p>Verbinde nun die letzten beiden Bl\u00f6cke mit deiner benutzerdefinierten Bindungsquelle. Wie du in den vorherigen Screenshots gesehen hast, ist diese Option leider nicht in der Benutzeroberfl\u00e4che des Editors verf\u00fcgbar.<\/p>\n<p>Zurzeit musst du zum Code-Editor wechseln und das Markup f\u00fcr die beiden Bl\u00f6cke, die mit deiner Bindungsquelle verbunden sind, manuell schreiben. Nachfolgend findest du den Code f\u00fcr die Anzeige der Temperatur, die vom Open-Meteo-Dienst bereitgestellt wird:<\/p>\n<pre><code class=\"language-json\">&lt;!-- wp:paragraph {\n\t\"metadata\":{\n\t\t\"bindings\":{\n\t\t\t\"content\":{\n\t\t\t\t\"source\":\"bb\/weather-condition\",\n\t\t\t\t\"args\":{\n\t\t\t\t\t\"key\":\"temperature\"\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n} --&gt;\n&lt;p&gt;Placeholder&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;<\/code><\/pre>\n<p>Bei dieser Methode wird der Name deiner Binding-Quelle im Editor als <strong>Weather Condition<\/strong> angezeigt, aber die tats\u00e4chlichen Daten sind nur im Frontend sichtbar.<\/p>\n<figure id=\"attachment_202470\" aria-describedby=\"caption-attachment-202470\" style=\"width: 2292px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-202470 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/12\/block-bindings-example.jpg\" alt=\"Ein Beispiel f\u00fcr Blockbindungen mit benutzerdefinierten Datenquellen\" width=\"2292\" height=\"1358\"><figcaption id=\"caption-attachment-202470\" class=\"wp-caption-text\">Ein Beispiel f\u00fcr Blockbindungen mit benutzerdefinierten Datenquellen<\/figcaption><\/figure>\n<p>Es ist klar, dass das manuelle Hinzuf\u00fcgen eines JSON-Objekts zum Block-Markup kein benutzerfreundlicher Prozess ist. Gl\u00fccklicherweise wurden mit <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-6-9\/\">WordPress 6.9<\/a> erhebliche Verbesserungen an der Block Bindings API eingef\u00fchrt, die es erm\u00f6glichen, ein UI f\u00fcr benutzerdefinierte Datenquellen zu erstellen. Lass uns versuchen, unser Plugin mit einer benutzerdefinierten Benutzeroberfl\u00e4che zu verbessern.<\/p>\n<h2>Wie du eine Benutzeroberfl\u00e4che f\u00fcr deine benutzerdefinierten Block Bindings-Quellen erstellst<\/h2>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-important\">\n            <h3>Important<\/h3>\n        <p>Wir haben diesen Teil des Projekts hinten angestellt, weil die notwendigen Funktionen erst in WordPress 6.9 und sp\u00e4teren Versionen verf\u00fcgbar sind. Der folgende Code wird nicht funktionieren, wenn du eine fr\u00fchere Version von WordPress verwendest.<\/p>\n<\/aside>\n\n<p>Um eine Benutzeroberfl\u00e4che f\u00fcr deine benutzerdefinierte Bindungsquelle zu erstellen, musst du etwas JavaScript-Code schreiben. Erstelle zun\u00e4chst einen Unterordner <code>js<\/code> unter <code>\/includes<\/code> und erstelle darin eine Datei <strong>block-bindings-ui.js<\/strong>. Die Struktur des Plugins sieht nun wie folgt aus:<\/p>\n<pre><code>\/wp-content\/plugins\/\n\u2514\u2500\u2500 \/block-bindings-example\/\n\t\u251c\u2500\u2500 block-bindings-example.php\n\t\u2514\u2500\u2500 \/includes\/\n\t\t\u251c\u2500\u2500 binding-sources.php\n\t\t\u251c\u2500\u2500 meta-fields.php\n\t\t\u2514\u2500\u2500 weather-api.php\n\t\t\t\u2514\u2500\u2500 \/js\/\n\t\t\t\t\u2514\u2500\u2500\tblock-bindings-ui.js<\/code><\/pre>\n<p>Als ersten Schritt f\u00fcgst du das JS-Skript in die Hauptdatei deines Plugins ein:<\/p>\n<pre><code class=\"language-php\">function bb_enqueue_weather_bindings_ui() {\n\n\tif ( ! function_exists( 'register_block_bindings_source' ) ) {\n\t\treturn;\n\t}\n\n\t$js_file_path = plugin_dir_path( __FILE__ ) . 'includes\/js\/block-bindings-ui.js';\n\n\tif ( ! file_exists( $js_file_path ) ) {\n\t\treturn;\n\t}\n\n\t\/\/ Enqueue the script only in the editor\n\twp_enqueue_script(\n\t\t'bb-weather-bindings-ui',\n\t\tplugin_dir_url( __FILE__ ) . 'includes\/js\/block-bindings-ui.js',\n\t\t[ 'wp-blocks', 'wp-element', 'wp-dom-ready', 'wp-block-bindings' ],\n\t\tfilemtime( $js_file_path ),\n\t\ttrue\n\t);\n}\nadd_action( 'enqueue_block_editor_assets', 'bb_enqueue_weather_bindings_ui' );<\/code><\/pre>\n<p>Diese Funktion funktioniert folgenderma\u00dfen:<\/p>\n<ul>\n<li>Zuerst pr\u00fcft sie, ob die Funktion <code>register_block_bindings_source()<\/code> existiert.<\/li>\n<li>Dann pr\u00fcft sie, ob die Datei <code>block-bindings-ui.js<\/code> im Ordner <code>\/includes\/js<\/code> des Plugins vorhanden ist.<\/li>\n<li>Die Funktion <code>wp_enqueue_script()<\/code> stellt das Skript in die Warteschlange f\u00fcr die Verwendung im Editor. Eine detaillierte Beschreibung der Funktion findest du in der <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_script\/\" target=\"_blank\" rel=\"noopener noreferrer\">Dokumentation<\/a>.<\/li>\n<li>Sie verwendet den <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/enqueue_block_editor_assets\/\" target=\"_blank\" rel=\"noopener noreferrer\"><code>enqueue_block_editor_assets<\/code>-Hook<\/a>, um Skripte f\u00fcr die Bearbeitungsoberfl\u00e4che in die Warteschlange zu stellen.<\/li>\n<\/ul>\n<p>\u00d6ffne nun die Datei <code>block-bindings-ui.js<\/code> und schreibe den folgenden Code:<\/p>\n<pre><code class=\"language-javascript\">wp.blocks.registerBlockBindingsSource({\n\tname: 'bb\/weather-condition',\n\tlabel: 'Weather Condition',\n\tuseContext: [ 'postId', 'postType' ],\n\tgetValues: ( { bindings } ) =&gt; {\n\t\tif ( bindings.content?.args?.key === 'temperature' ) {\n\t\t\treturn {\n\t\t\t\tcontent: 'Current temperature provided by Open-Meteo.',\n\t\t\t};\n\t\t}\n\t\tif ( bindings.content?.args?.key === 'weather_state' ) {\n\t\t\treturn {\n\t\t\t\tcontent: 'Current conditions.',\n\t\t\t};\n\t\t}\n\t\treturn {\n\t\t\tcontent: bindings.content,\n\t\t};\n\t},\n\tgetFieldsList() {\n\t\treturn [\n\t\t\t{ label: 'Temperature (\u00b0C)',   type: 'string', args: { key: 'temperature' } },\n\t\t\t{ label: 'Weather Conditions',  type: 'string', args: { key: 'weather_state' } }\n\t\t];\n\t}\n});<\/code><\/pre>\n<ul>\n<li>Die Funktion <code>registerBlockBindingsSource()<\/code> registriert eine Bindungsquelle im Blockeditor.<\/li>\n<li><code>name<\/code> ist ein eindeutiger Bezeichner f\u00fcr deine Bindungsquelle. Er muss genau dem Namen entsprechen, der in PHP mit <code>register_block_bindings_source()<\/code> verwendet wird.<\/li>\n<li><code>label<\/code> ist ein von Menschen lesbarer Name, der in der Dropdown-Liste <strong>Quelle<\/strong> im <strong>Attribute-Panel<\/strong> angezeigt wird.<\/li>\n<li><code>useContext<\/code> legt die Kontextwerte fest, die diese Quelle vom Block ben\u00f6tigt. <code>postId<\/code> ist erforderlich, damit die Quelle wei\u00df, welche Meta-\/Wetterdaten des Beitrags gelesen werden sollen.<\/li>\n<li><code>getValues<\/code> bietet eine Vorschau des gebundenen Wertes im Blockeditor. Sie gibt die Optionen zur\u00fcck, die in der Auswahlliste erscheinen, nachdem der Nutzer die Bindungsquelle ausgew\u00e4hlt hat (&#8222;Weather Condition&#8220; in unserem Beispiel). Diese Methode ist seit WordPress 6.9 verf\u00fcgbar.<\/li>\n<li><code>getFieldsList<\/code> gibt die Optionen zur\u00fcck, die in der Auswahlliste erscheinen, nachdem der Nutzer die Bindungsquelle (&#8222;Weather Condition&#8220; in unserem Beispiel) ausgew\u00e4hlt hat.<\/li>\n<\/ul>\n<p>Speichere die Datei und kehre zum Editor zur\u00fcck. Die Quelle <strong>Weather Condition<\/strong>\u00a0ist jetzt in der Editoroberfl\u00e4che neben dem <strong>Post Meta<\/strong> verf\u00fcgbar. Lade die Seite neu und verbinde dann einen Absatz- oder Kopfzeilenblock mit deiner Bindungsquelle. Das folgende Bild zeigt das Ergebnis.<\/p>\n<figure id=\"attachment_202472\" aria-describedby=\"caption-attachment-202472\" style=\"width: 2112px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-202472 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/12\/custom-binding-source-ui.png\" alt=\"Benutzerdefinierte Blockbindungsquelle UI\" width=\"2112\" height=\"992\"><figcaption id=\"caption-attachment-202472\" class=\"wp-caption-text\">Benutzerdefinierte Blockbindungsquelle UI<\/figcaption><\/figure>\n<p>Das letzte Bild zeigt das Ergebnis auf dem Frontend der Website.<\/p>\n<figure id=\"attachment_202474\" aria-describedby=\"caption-attachment-202474\" style=\"width: 1374px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-202474 size-full\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2025\/12\/custom-data-with-block-bindings.jpg\" alt=\"Ein Beitrag, der Daten aus einer externen Bindungsquelle anzeigt\" width=\"1374\" height=\"986\"><figcaption id=\"caption-attachment-202474\" class=\"wp-caption-text\">Ein Beitrag, der Daten aus einer externen Bindungsquelle anzeigt<\/figcaption><\/figure>\n<h2>Was kannst du noch mit der Block Bindings API machen?<\/h2>\n<p>Dieser Artikel kratzt nur an der Oberfl\u00e4che dessen, was du mit der Block Bindings API bauen kannst. Das Tolle ist, dass die Entwicklung dieser leistungsstarken WordPress-Funktion noch lange nicht abgeschlossen ist und wir in Zukunft mit neuen Implementierungen und Erg\u00e4nzungen rechnen k\u00f6nnen.<\/p>\n<p>Wenn du die Block Bindings API mit anderen leistungsstarken WordPress-APIs wie der <a href=\"https:\/\/kinsta.com\/de\/blog\/wordpress-interactivity-api\/\">Interaktivit\u00e4ts-API<\/a> integrierst, kannst du dynamische, interaktive Anwendungen erstellen, die weit \u00fcber die traditionellen Blogging-Funktionen hinausgehen, die WordPress in seinen Anfangsjahren so beliebt gemacht haben.<\/p>\n<p>WordPress ist nicht mehr nur eine Blogging-Plattform oder ein Website-Builder. Es ist jetzt auf dem besten Weg, eine vielseitige Entwicklungsplattform f\u00fcr alle Arten von Webanwendungen zu werden.<\/p>\n<p>Je leistungsf\u00e4higer deine Anwendungen sind, desto wichtiger wird dein Hosting-Service. Kinsta bietet Premium Managed Hosting mit hoher Leistung, robuster Sicherheit, umfassender Automatisierung und erstklassigem Support, der von <a href=\"https:\/\/kinsta.com\/de\/blog\/g2-awards\/\">G2-Nutzern<\/a> als branchenf\u00fchrend anerkannt wird.<\/p>\n<p>Die leistungsst\u00e4rksten Webanwendungen erfordern die beste Hosting-Infrastruktur. Schau dir die <a href=\"https:\/\/kinsta.com\/de\/preise\/\">Kinsta-Tarife<\/a> an, um das Angebot zu finden, das am besten zu den Anforderungen deiner Website passt.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Die Block Bindings API ist ein leistungsstarkes Werkzeug im Block-Editor, mit dem du jede Datenquelle mit den Attributen eines Blocks verbinden kannst. Diese API wurde erstmals &#8230;<\/p>\n","protected":false},"author":36,"featured_media":75073,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[999],"class_list":["post-75072","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","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>Die WordPress Block Bindings API: Was sie ist und wie man sie zum Aufbau dynamischer Websites nutzt<\/title>\n<meta name=\"description\" content=\"Alles, was du \u00fcber die WordPress Block Bindings API wissen musst, eine leistungsstarke WordPress-API f\u00fcr Entwickler, um beliebige Datenquellen in ihre Websites zu integrieren.\" \/>\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\/de\/blog\/wordpress-block-bindings-api\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Die WordPress Block Bindings API: Was sie ist und wie man sie zum Aufbau dynamischer Websites nutzt\" \/>\n<meta property=\"og:description\" content=\"Alles, was du \u00fcber die WordPress Block Bindings API wissen musst, eine leistungsstarke WordPress-API f\u00fcr Entwickler, um beliebige Datenquellen in ihre Websites zu integrieren.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/wordpress-block-bindings-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=\"2026-01-09T08:34:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-14T08:33:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/01\/the-wordpress-block-bindings-api-what-it-is-and-how-to-use-it-to-build-dynamic-websites.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=\"Alles, was du \u00fcber die WordPress Block Bindings API wissen musst, eine leistungsstarke WordPress-API f\u00fcr Entwickler, um beliebige Datenquellen in ihre Websites zu integrieren.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/01\/the-wordpress-block-bindings-api-what-it-is-and-how-to-use-it-to-build-dynamic-websites-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=\"20\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-block-bindings-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-block-bindings-api\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Die WordPress Block Bindings API: Was sie ist und wie man sie zum Aufbau dynamischer Websites nutzt\",\"datePublished\":\"2026-01-09T08:34:37+00:00\",\"dateModified\":\"2026-01-14T08:33:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-block-bindings-api\/\"},\"wordCount\":2669,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-block-bindings-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/01\/the-wordpress-block-bindings-api-what-it-is-and-how-to-use-it-to-build-dynamic-websites.png\",\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-block-bindings-api\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-block-bindings-api\/\",\"name\":\"Die WordPress Block Bindings API: Was sie ist und wie man sie zum Aufbau dynamischer Websites nutzt\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-block-bindings-api\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-block-bindings-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/01\/the-wordpress-block-bindings-api-what-it-is-and-how-to-use-it-to-build-dynamic-websites.png\",\"datePublished\":\"2026-01-09T08:34:37+00:00\",\"dateModified\":\"2026-01-14T08:33:29+00:00\",\"description\":\"Alles, was du \u00fcber die WordPress Block Bindings API wissen musst, eine leistungsstarke WordPress-API f\u00fcr Entwickler, um beliebige Datenquellen in ihre Websites zu integrieren.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-block-bindings-api\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/wordpress-block-bindings-api\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-block-bindings-api\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/01\/the-wordpress-block-bindings-api-what-it-is-and-how-to-use-it-to-build-dynamic-websites.png\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/01\/the-wordpress-block-bindings-api-what-it-is-and-how-to-use-it-to-build-dynamic-websites.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/wordpress-block-bindings-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Entwicklung\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/wordpress-entwicklung\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Die WordPress Block Bindings API: Was sie ist und wie man sie zum Aufbau dynamischer Websites nutzt\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.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:\/\/kinsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.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:\/\/kinsta.com\/de\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Die WordPress Block Bindings API: Was sie ist und wie man sie zum Aufbau dynamischer Websites nutzt","description":"Alles, was du \u00fcber die WordPress Block Bindings API wissen musst, eine leistungsstarke WordPress-API f\u00fcr Entwickler, um beliebige Datenquellen in ihre Websites zu integrieren.","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\/de\/blog\/wordpress-block-bindings-api\/","og_locale":"de_DE","og_type":"article","og_title":"Die WordPress Block Bindings API: Was sie ist und wie man sie zum Aufbau dynamischer Websites nutzt","og_description":"Alles, was du \u00fcber die WordPress Block Bindings API wissen musst, eine leistungsstarke WordPress-API f\u00fcr Entwickler, um beliebige Datenquellen in ihre Websites zu integrieren.","og_url":"https:\/\/kinsta.com\/de\/blog\/wordpress-block-bindings-api\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2026-01-09T08:34:37+00:00","article_modified_time":"2026-01-14T08:33:29+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/01\/the-wordpress-block-bindings-api-what-it-is-and-how-to-use-it-to-build-dynamic-websites.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Alles, was du \u00fcber die WordPress Block Bindings API wissen musst, eine leistungsstarke WordPress-API f\u00fcr Entwickler, um beliebige Datenquellen in ihre Websites zu integrieren.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/01\/the-wordpress-block-bindings-api-what-it-is-and-how-to-use-it-to-build-dynamic-websites-1024x512.png","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Carlo Daniele","Gesch\u00e4tzte Lesezeit":"20\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-block-bindings-api\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-block-bindings-api\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Die WordPress Block Bindings API: Was sie ist und wie man sie zum Aufbau dynamischer Websites nutzt","datePublished":"2026-01-09T08:34:37+00:00","dateModified":"2026-01-14T08:33:29+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-block-bindings-api\/"},"wordCount":2669,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-block-bindings-api\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/01\/the-wordpress-block-bindings-api-what-it-is-and-how-to-use-it-to-build-dynamic-websites.png","inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-block-bindings-api\/","url":"https:\/\/kinsta.com\/de\/blog\/wordpress-block-bindings-api\/","name":"Die WordPress Block Bindings API: Was sie ist und wie man sie zum Aufbau dynamischer Websites nutzt","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-block-bindings-api\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-block-bindings-api\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/01\/the-wordpress-block-bindings-api-what-it-is-and-how-to-use-it-to-build-dynamic-websites.png","datePublished":"2026-01-09T08:34:37+00:00","dateModified":"2026-01-14T08:33:29+00:00","description":"Alles, was du \u00fcber die WordPress Block Bindings API wissen musst, eine leistungsstarke WordPress-API f\u00fcr Entwickler, um beliebige Datenquellen in ihre Websites zu integrieren.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-block-bindings-api\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/wordpress-block-bindings-api\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-block-bindings-api\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/01\/the-wordpress-block-bindings-api-what-it-is-and-how-to-use-it-to-build-dynamic-websites.png","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2026\/01\/the-wordpress-block-bindings-api-what-it-is-and-how-to-use-it-to-build-dynamic-websites.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/wordpress-block-bindings-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"WordPress Entwicklung","item":"https:\/\/kinsta.com\/de\/thema\/wordpress-entwicklung\/"},{"@type":"ListItem","position":3,"name":"Die WordPress Block Bindings API: Was sie ist und wie man sie zum Aufbau dynamischer Websites nutzt"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.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:\/\/kinsta.com\/de\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.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:\/\/kinsta.com\/de\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/75072","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=75072"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/75072\/revisions"}],"predecessor-version":[{"id":75122,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/75072\/revisions\/75122"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/75072\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/75072\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/75072\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/75072\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/75072\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/75072\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/75072\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/75072\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/75072\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/75073"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=75072"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=75072"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=75072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}