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 in WordPress 6.5 eingeführt und ermöglichte es WordPress-Nutzern, benutzerdefinierte Feldwerte in Beiträgen und Seiten anzuzeigen.
Die Block Bindings API dient als Grundlage für andere robuste WordPress-Funktionen. Beispiele dafür sind die Überschreibungen des Synced Pattern und die Blockvariation Post Date, die in WordPress 6.9 eingeführt wurde.
Was genau ist also die Block Bindings API? Und wofür wird sie verwendet? Wir geben eine einfache Einführung und zeigen anhand eines praktischen Beispiels, wie man Bindungen zwischen Gutenberg-Blöcken und externen Datenquellen erstellt.
Los geht’s.
Die Block Bindings API: Grundlegende Konzepte
Wie wir bereits erwähnt haben, kannst du mit der Block Bindings API Bindungen zwischen einer Datenquelle und den Attributen eines Blocks erstellen.
Wenn du mit den Blockattributen nicht vertraut bist, navigiere zum Verzeichnis src der Blockbibliothek des Gutenberg-Projekts auf GitHub, suche den Block Paragraph und öffne die Datei block.json. Die Eigenschaft attributes enthält eine Liste mit den Attributen des Blocks Paragraph.
"attributes": {
"content": {
"type": "rich-text",
"source": "rich-text",
"selector": "p",
"role": "content"
},
"dropCap": {
"type": "boolean",
"default": false
},
"placeholder": {
"type": "string"
},
"direction": {
"type": "string",
"enum": [ "ltr", "rtl" ]
}
},Die folgenden Blöcke unterstützen ab WordPress 6.9 die Block Bindings API und können daher mit deinen benutzerdefinierten Feldern verknüpft werden:
| Unterstützte Blöcke | Attribute |
|---|---|
| Absatz | inhalt |
| Titel | inhalt |
| Bild | id, url, alt, Titel, Beschriftung |
| Schaltfläche | text, url, linkTarget, rel |
Um deine benutzerdefinierten Felder mit Gutenberg-Blöcken zu verbinden, musst du sie zunächst registrieren. Der folgende Code registriert ein benutzerdefiniertes Feld über ein WordPress-Plugin oder die Datei functions.php deines Themes:
add_action( 'init', function() {
register_post_meta( 'your-post-type', 'myplugin_meta_key', [
'show_in_rest' => true,
'single' => true,
'type' => 'string',
'description' => __( 'City name', 'textdomain' ),
'auth_callback' => 'is_user_logged_in',
] );
} );register_post_meta der Code akzeptiert eine Reihe von Attributen, die die Eigenschaften von benutzerdefinierten Feldern definieren; die Dokumentation enthält eine vollständige Liste dieser Attribute. Um ein benutzerdefiniertes Feld für die Block Bindings API verfügbar zu machen, musst du show_in_rest auf true setzen. Ab WordPress 6.9 wird nur noch der Typ string unterstützt.
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.
<?php
/**
* Plugin Name: Block Bindings example
* Description: Example plugin that uses the Block Bindings API.
* Version: 1.0.0
* Author: Your Name
* License: GPL2 or later
* Text Domain: block-bindings-example
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
add_action( 'init', function() {
register_post_meta( '', 'block_bindings_image_url', [
'show_in_rest' => true,
'single' => true,
'type' => 'string',
'description' => __( 'City name', 'block-bindings-example' ),
'auth_callback' => 'is_user_logged_in',
] );
} );Aktiviere das Plugin in deinem WordPress-Dashboard. Navigiere dann zum Bildschirm Beiträge und erstelle einen neuen Beitrag. Wenn du einen unterstützten Block auswählst, zeigt das Attribute-Panel in der Seitenleiste der Blockeinstellungen die Liste der Attribute an, die an ein registriertes benutzerdefiniertes Feld gebunden werden können.
Öffne das Menü Optionen in der oberen rechten Ecke und wähle Einstellungen. Auf der Registerkarte Allgemein suchst du den Abschnitt Erweitert und aktivierst die benutzerdefinierten Felder. Speichere deine Änderungen, warte, bis die Website neu geladen ist, und kehre dann zum Editor zurück.
Der nächste Schritt ist das Einfügen eines Bildblocks. Klicke bei ausgewähltem Block auf das + Symbol im Attribute-Panel und wähle das Attribut url aus. Das Attribute-Panel zeigt dann eine Liste der verfügbaren Meta-Felder an. Wähle erneut url. Jetzt siehst du die Liste der Meta-Felder, die für den aktuellen Beitragstyp verfügbar sind.
Wähle dein Metafeld aus und speichere den Beitrag. Jetzt solltest du dein Bild sowohl im Editor als auch im Frontend sehen.
Ab Version 6.7 von WordPress kannst du das Label-Attribut verwenden, um Text in der Editoroberfläche anzuzeigen. Der folgende Codeblock zeigt ein Beispiel:
add_action( 'init', function() {
register_post_meta( '', 'block_bindings_image_url', [
'show_in_rest' => true,
'single' => true,
'type' => 'string',
'description' => __( 'City image', 'block-bindings-example' ),
'label' => __('Image URL'),
'auth_callback' => 'is_user_logged_in',
] );
} );
Wenn du den Code-Editor öffnest, kannst du ein JSON-Objekt innerhalb des Bildblockbegrenzers sehen. Die Eigenschaft metadata.bindings.url zeigt, dass die url des Bildblocks mit einem Metadatenfeld verknüpft ist.
<!-- wp:image {
"metadata":{
"bindings":{
"url":{
"source":"core/post-meta",
"args":{
"key":"block_bindings_image_url"
}
}
}
}
} -->
<figure class="wp-block-image"><img alt="/></figure>
<!-- /wp:image -->Die Eigenschaft source gibt die Datenquelle für die Blockbindungen an. Die Eigenschaft args.key stellt einen Verweis auf dein Metafeld her.
Der interessanteste Aspekt der Block Bindings API ist die Möglichkeit, benutzerdefinierte Datenquellen zu registrieren, was den Entwicklern einige spannende neue Möglichkeiten eröffnet. Als Nächstes werden wir uns ansehen, wie du mit der Block Bindings API Daten von Drittanbietern nutzen kannst.
Wie man benutzerdefinierte Block Bindings Datenquellen registriert: Ein Beispiel aus der Praxis
Da du nun mit den grundlegenden Konzepten der Block Bindings API vertraut bist, können wir zu den fortgeschrittenen und für Entwickler/innen interessanten Aspekten übergehen.
Wie bereits erwähnt, 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ützliche Informationen zu generieren, die automatisch in deinen Inhalt eingefügt werden können.
In diesem Abschnitt erfährst du anhand eines praktischen Beispiels, wie du das Potenzial von Block Bindings optimal nutzen kannst, um deine eigenen benutzerdefinierten Anwendungen zu entwickeln.
Angenommen, du möchtest Daten aus einer externen Quelle abrufen und sie in deinen Beiträgen, Seiten oder benutzerdefinierten Beitragstypen anzeigen. Du könntest z. B. eine Wetterdienst-API abfragen, indem du eine Anfrage mit dem Breiten- und Längengrad einer Stadt sendest, um Echtzeit-Wetterdaten zu erhalten, die du dann auf deiner Website anzeigen kannst.
Dank der Block Bindings API kannst du die aktuelle Temperatur anzeigen oder deinen Lesern die Wettervorhersage für die nächsten Tage übermitteln. Du kannst auch programmatisch das url Attribut eines oder mehrerer Bilder auf der Seite abhängig von den Wetterbedingungen ändern.
Um diese Funktion zu deiner WordPress-Website hinzuzufügen, musst du ein Plugin erstellen. Befolge diese Schritte:
Schritt 1: Ein einfaches Plugin erstellen
Der erste Schritt besteht darin, die Plugin-Dateien zu erstellen. Navigiere zum Verzeichnis wp-content/plugins deiner WordPress-Installation und erstelle einen neuen Ordner namens block-bindings-example. In diesem Ordner fügst du die folgenden Dateien hinzu:
/wp-content/plugins/
└── /block-bindings-example/
├── block-bindings-example.php
└── /includes/
├── binding-sources.php
├── meta-fields.php
└── weather-api.phpÖffne die Datei block-bindings-example.php in deinem bevorzugten Code-Editor und füge den folgenden Code hinzu:
<?php
/**
* Plugin Name: Block Bindings Example
* 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.
* Version: 1.0.0
* Author: Your Name
* License: GPL2 or later
* Text Domain: block-bindings-example
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
/**
* Cache duration for weather data: 30 minutes
* This reduces API calls and improves performance
*/
define( 'BB_WEATHER_CACHE_TIME', HOUR_IN_SECONDS / 2 );
require_once plugin_dir_path( __FILE__ ) . 'includes/meta-fields.php';
require_once plugin_dir_path( __FILE__ ) . 'includes/binding-sources.php';
require_once plugin_dir_path( __FILE__ ) . 'includes/weather-api.php';
/**
* Setup function
*/
function bb_init_setup() {
bb_register_post_meta();
bb_register_binding_sources();
}
add_action( 'init', 'bb_init_setup' );Das macht dieser Code:
- Die Konstante
BB_WEATHER_CACHE_TIMEbestimmt, wie lange die Wetterdaten zwischengespeichert werden. Dadurch werden API-Aufrufe reduziert, die Seitenleistung verbessert und die Servicekosten gesenkt. - Die
require_onceAusdrücke enthalten die notwendigen Skripte, um Metafelder zu registrieren, die Bindungsquelle zu registrieren und Daten von der API abzurufen. - Die Setup-Funktion ruft zwei Funktionen auf, die die Post-Meta-Felder und die benutzerdefinierten Bindungsquellen registrieren.
Schritt 2: Post-Meta-Felder registrieren
Im nächsten Schritt registrierst du die Metafelder, die du für deinen Anwendungsfall brauchst. Öffne die Datei meta-fields.php im Ordner includes und füge den folgenden Code hinzu:
<?php
/**
* Registers custom post meta fields so they appear in the REST API and Block Bindings editor panel
*/
function bb_register_post_meta() {
if ( ! function_exists( 'register_post_meta' ) ) {
return;
}
register_post_meta( 'post', 'block_bindings_city_name', [
'show_in_rest' => true,
'single' => true,
'type' => 'string',
'description' => __( 'Add city name', 'block-bindings-example' ),
'label' => __( 'City name', 'block-bindings-example' ),
'auth_callback' => 'is_user_logged_in',
] );
register_post_meta( 'post', 'block_bindings_image_url', [
'show_in_rest' => true,
'single' => true,
'type' => 'string',
'description' => __( 'Add city image URL', 'block-bindings-example' ),
'label' => __( 'City image URL', 'block-bindings-example' ),
'auth_callback' => 'is_user_logged_in',
] );
register_post_meta( 'post', 'block_bindings_city_lat', [
'show_in_rest' => true,
'single' => true,
'type' => 'string',
'description' => __( 'Add city latitude', 'block-bindings-example' ),
'label' => __( 'Latitude', 'block-bindings-example' ),
'auth_callback' => 'is_user_logged_in',
] );
register_post_meta( 'post', 'block_bindings_city_lng', [
'show_in_rest' => true,
'single' => true,
'type' => 'string',
'description' => __( 'Add city longitude', 'block-bindings-example' ),
'label' => __( 'Longitude', 'block-bindings-example' ),
'auth_callback' => 'is_user_logged_in',
] );
}Die Funktion register_post_meta registriert einen Metaschlüssel zur Verwendung in Beiträgen. Beachte, dass du show_in_rest auf true und type auf string setzen musst, um auf diese Weise registrierte Metafelder mit der Block Bindings API zu verwenden. Weitere Informationen findest du in der Dokumentation.
Schritt 3: Block Bindings-Quelle registrieren
Jetzt ist es an der Zeit, deine Bindungsquelle zu registrieren. Öffne die Datei binding-sources.php und füge den folgenden Code ein:
<?php
/**
* Registers a custom Block Bindings source: bb/weather-condition
*/
function bb_register_binding_sources() {
if ( ! function_exists( 'register_block_bindings_source' ) ) {
return;
}
register_block_bindings_source(
'bb/weather-condition',
[
'label' => __( 'Weather Condition', 'block-bindings-example' ),
'get_value_callback' => 'bb_get_weather_condition_value',
'uses_context' => [ 'postId' ], // We need postId to get meta values
]
);
}Die Funktion register_block_bindings_source() benötigt den Namen der Quelle und eine Callback-Funktion, die Daten von einer Quelle abruft und den manipulierten Wert zurückgibt.
Definiere dann in der gleichen binding-sources.php Datei die Callback-Funktion.
function bb_get_weather_condition_value( array $source_args, WP_Block $block_instance ) {
$key = $source_args['key'] ?? null;
if ( ! $key ) {
return null;
}
// Get current post ID from block context (always available in post content)
$post_id = $block_instance->context['postId'] ?? null;
// Fallback: use global loop if context is missing
if ( ! $post_id && in_the_loop() ) {
$post_id = get_the_ID();
}
if ( ! $post_id || $post_id <= 0 ) {
error_log( 'BB DEBUG: Could not determine post ID for weather binding' );
return null;
}
$weather_data = bb_fetch_and_cache_weather_data( $post_id );
if ( ! is_array( $weather_data ) || ! isset( $weather_data[ $key ] ) ) {
return null;
}
$value = $weather_data[ $key ];
// Append °C symbol for temperature
if ( $key === 'temperature' ) {
return $value . '°C';
}
return $value;
}Lasst uns diese Funktion aufschlüsseln:
$source_args['key']identifiziert die Daten, die an das Blockattribut gebunden sind.- In der nächsten Zeile wird die ID des aktuellen Beitrags von
contextabgerufen. Wenncontextfehlt, wie es bei Vorschauen der Fall sein kann, wird die ID des aktuellen Beitrags mitget_the_ID()abgerufen. - Dann wird die Funktion
bb_fetch_and_cache_weather_dataaufgerufen, die die Daten von der API abruft. Wir werden diese Funktion im nächsten Schritt definieren. $weather_data[$key]enthält die von der API bereitgestellten Daten, wie z. B. die Temperatur und den Wetterzustand.- Wenn der Schlüssel
temperatureist, fügt sie°Can den angegebenen Wert an. - Die Funktion gibt dann den endgültigen Wert zurück.
Schritt 4: Abrufen von Daten aus einer externen Quelle
Wie bereits erwähnt, rufen wir Daten vom Open-Meteo-Dienst ab (kostenlos für nicht-kommerzielle Zwecke).
Um die aktuelle Temperatur und die Wetterbedingungen abzurufen, musst du eine Anfrage an die API senden, die den Breiten- und Längengrad eines bestimmten Ortes und die Abfrage var current=weather_code,temperature_2m enthält. Nachfolgend findest du ein Beispiel für eine Anfrage:
https://api.open-meteo.com/v1/forecast?latitude=-33.8717&longitude=151.2299¤t=weather_code,temperature_2mDie API liefert eine Antwort ähnlich der folgenden:
{
"latitude": -33.8717,
"longitude": 151.2299,
"generationtime_ms": 0.030875205993652344,
"utc_offset_seconds": 0,
"timezone": "GMT",
"timezone_abbreviation": "GMT",
"elevation": 13.0,
"current_units": {
"time": "iso8601",
"interval": "seconds",
"weather_code": "wmo code",
"temperature_2m":"°C"
},
"current": {
"time": "2025-12-01T16:00",
"interval": 900,
"weather_code": 3,
"temperature_2m":7.3
}
}
Da du nun weißt, wie du die benötigten Daten erhältst, öffne die Datei weather-api.php und füge den folgenden Code hinzu:
function bb_fetch_and_cache_weather_data( $post_id ) {
$lat = get_post_meta( $post_id, 'block_bindings_city_lat', true );
$lng = get_post_meta( $post_id, 'block_bindings_city_lng', true );
$lat = str_replace( ',', '.', trim( $lat ) );
$lng = str_replace( ',', '.', trim( $lng ) );
if ( ! is_numeric( $lat ) || ! is_numeric( $lng ) ) {
error_log( 'BB DEBUG: Invalid latitude/longitude values after normalization' );
return false;
}
$transient_key = 'bb_weather_data_' . $post_id;
$cached_data = get_transient( $transient_key );
if ( $cached_data !== false ) {
error_log( "BB DEBUG: Cache hit for post ID {$post_id}" );
return $cached_data;
}
// Build Open-Meteo API URL
$api_url = sprintf(
'https://api.open-meteo.com/v1/forecast?latitude=%s&longitude=%s¤t=weather_code,temperature_2m',
rawurlencode( $lat ),
rawurlencode( $lng )
);
error_log( "BB DEBUG: Fetching weather data from: {$api_url}" );
$response = wp_remote_get( $api_url, [ 'timeout' => 10 ] );
if ( is_wp_error( $response ) ) {
error_log( 'BB DEBUG: API request failed – ' . $response->get_error_message() );
return false;
}
if ( wp_remote_retrieve_response_code( $response ) !== 200 ) {
error_log( 'BB DEBUG: API returned non-200 status code' );
return false;
}
$body = wp_remote_retrieve_body( $response );
$data = json_decode( $body, true );
if ( ! $data || ! isset( $data['current'] ) ) {
error_log( 'BB DEBUG: Invalid or empty API response' );
return false;
}
$temperature = $data['current']['temperature_2m'] ?? null;
$weather_code = $data['current']['weather_code'] ?? 0;
$mapped_data = [
'temperature' => round( (float) $temperature ),
'weather_state' => bb_map_wmo_code_to_state( (int) $weather_code ),
];
// Cache for 30 minutes
set_transient( $transient_key, $mapped_data, BB_WEATHER_CACHE_TIME );
error_log( 'BB DEBUG: Weather data fetched and cached successfully' );
return $mapped_data;
}Diese Funktion ruft aktuelle Wetterdaten von der Open-Meteo-API ab und speichert sie mithilfe von Transienten im Cache. Schauen wir uns das mal genauer an.
- Zwei Aufrufe an
get_post_metarufen den Breitengrad und den Längengrad deines Standorts ab. - Die folgenden zwei Zeilen normalisieren das Dezimaltrennzeichen für den Fall, dass der Nutzer ein Komma statt eines Punktes eingibt.
- Der bedingte Block prüft mit
is_numeric(), ob die Werte im numerischen Format vorliegen. - Als nächstes wird geprüft, ob die Daten im Cache sind. Wenn ja, gibt er die Daten aus dem Cache zurück und beendet die Funktion, ohne eine Anfrage an die API zu senden.
- Wenn keine Daten im Cache gefunden werden, wird die Anfrage erstellt und die Antwort gespeichert.
- Die folgenden Zeilen enthalten
temperatureundweather_code. weather_codewird dank der Funktionbb_map_wmo_code_to_state, die weiter unten definiert wird, aufweather_stateabgebildet.- Die Daten werden mit
set_transientgespeichert. - Zum Schluss gibt die Funktion die zugeordneten Daten zurück.
Zuletzt definierst du die Funktion, die weather_code in eine für den Menschen lesbare Zeichenkette umwandelt:
function bb_map_wmo_code_to_state( $code ) {
if ( $code >= 0 && $code <= 3 ) {
return 'clear';
} elseif ( $code >= 51 && $code <= 67 ) {
return 'rainy';
} elseif ( $code >= 71 && $code <= 77 ) {
return 'snowy';
} elseif ( $code >= 95 ) {
return 'thunderstorm';
}
return 'cloudy';
}Der Code ist fertig und dein Plugin ist bereit zum Testen.
Wie man die Block Bindings API verwendet
Es ist an der Zeit zu lernen, wie du die neuen Funktionen der Block Bindings API auf deiner Website nutzen kannst!
Navigiere in deinem WordPress-Dashboard zum Bildschirm Plugins und aktiviere das Plugin Block Bindings Example, das du gerade erstellt hast.
Erstelle danach einen neuen Beitrag oder eine neue Seite. Füge einen Bildblock, einen Titel und vier Zeilenblöcke mit jeweils zwei Absätzen hinzu, wie in der Abbildung unten gezeigt. Speichere dann den Beitrag.
Anschließend fügst du deine benutzerdefinierten Felder hinzu und speicherst den Beitrag erneut.
Wähle den Bildblock aus und suche das Feld Attribute in der Seitenleiste der Blockeinstellungen. Klicke auf die Schaltfläche +, um das Dropdown-Menü zu öffnen, in dem die Liste der Bildblockattribute angezeigt wird, die Blockbindungen unterstützen. Wähle das Element url aus.
Nachdem du das Blockattribut ausgewählt hast, wird auf der Registerkarte Erweitert ein neues URL-Element mit der Beschreibung „Nicht verbunden“ angezeigt Klicke erneut auf das url-Element, um die Liste der verfügbaren Bindungsquellen anzuzeigen. Post Meta zeigt die vier benutzerdefinierten Felder an, die für den Beitragstyp registriert sind, zusammen mit ihren jeweiligen Werten. Wähle Stadtbild-URL.
Du hast das Meta-Feld Stadtbild-URL dem Attribut url des Bild-Blocks zugewiesen. Du solltest jetzt ein Foto der von dir gewählten Stadt sehen.
Gehe bei den anderen Metafeldern genauso vor. Weise das Feld Stadtname dem Attribut content des Überschriftenblocks und die Felder Breitengrad und Längengrad den entsprechenden Absatzblöcken zu.
Verbinde nun die letzten beiden Blöcke mit deiner benutzerdefinierten Bindungsquelle. Wie du in den vorherigen Screenshots gesehen hast, ist diese Option leider nicht in der Benutzeroberfläche des Editors verfügbar.
Zurzeit musst du zum Code-Editor wechseln und das Markup für die beiden Blöcke, die mit deiner Bindungsquelle verbunden sind, manuell schreiben. Nachfolgend findest du den Code für die Anzeige der Temperatur, die vom Open-Meteo-Dienst bereitgestellt wird:
<!-- wp:paragraph {
"metadata":{
"bindings":{
"content":{
"source":"bb/weather-condition",
"args":{
"key":"temperature"
}
}
}
}
} -->
<p>Placeholder</p>
<!-- /wp:paragraph -->Bei dieser Methode wird der Name deiner Binding-Quelle im Editor als Weather Condition angezeigt, aber die tatsächlichen Daten sind nur im Frontend sichtbar.
Es ist klar, dass das manuelle Hinzufügen eines JSON-Objekts zum Block-Markup kein benutzerfreundlicher Prozess ist. Glücklicherweise wurden mit WordPress 6.9 erhebliche Verbesserungen an der Block Bindings API eingeführt, die es ermöglichen, ein UI für benutzerdefinierte Datenquellen zu erstellen. Lass uns versuchen, unser Plugin mit einer benutzerdefinierten Benutzeroberfläche zu verbessern.
Wie du eine Benutzeroberfläche für deine benutzerdefinierten Block Bindings-Quellen erstellst
Um eine Benutzeroberfläche für deine benutzerdefinierte Bindungsquelle zu erstellen, musst du etwas JavaScript-Code schreiben. Erstelle zunächst einen Unterordner js unter /includes und erstelle darin eine Datei block-bindings-ui.js. Die Struktur des Plugins sieht nun wie folgt aus:
/wp-content/plugins/
└── /block-bindings-example/
├── block-bindings-example.php
└── /includes/
├── binding-sources.php
├── meta-fields.php
└── weather-api.php
└── /js/
└── block-bindings-ui.jsAls ersten Schritt fügst du das JS-Skript in die Hauptdatei deines Plugins ein:
function bb_enqueue_weather_bindings_ui() {
if ( ! function_exists( 'register_block_bindings_source' ) ) {
return;
}
$js_file_path = plugin_dir_path( __FILE__ ) . 'includes/js/block-bindings-ui.js';
if ( ! file_exists( $js_file_path ) ) {
return;
}
// Enqueue the script only in the editor
wp_enqueue_script(
'bb-weather-bindings-ui',
plugin_dir_url( __FILE__ ) . 'includes/js/block-bindings-ui.js',
[ 'wp-blocks', 'wp-element', 'wp-dom-ready', 'wp-block-bindings' ],
filemtime( $js_file_path ),
true
);
}
add_action( 'enqueue_block_editor_assets', 'bb_enqueue_weather_bindings_ui' );Diese Funktion funktioniert folgendermaßen:
- Zuerst prüft sie, ob die Funktion
register_block_bindings_source()existiert. - Dann prüft sie, ob die Datei
block-bindings-ui.jsim Ordner/includes/jsdes Plugins vorhanden ist. - Die Funktion
wp_enqueue_script()stellt das Skript in die Warteschlange für die Verwendung im Editor. Eine detaillierte Beschreibung der Funktion findest du in der Dokumentation. - Sie verwendet den
enqueue_block_editor_assets-Hook, um Skripte für die Bearbeitungsoberfläche in die Warteschlange zu stellen.
Öffne nun die Datei block-bindings-ui.js und schreibe den folgenden Code:
wp.blocks.registerBlockBindingsSource({
name: 'bb/weather-condition',
label: 'Weather Condition',
useContext: [ 'postId', 'postType' ],
getValues: ( { bindings } ) => {
if ( bindings.content?.args?.key === 'temperature' ) {
return {
content: 'Current temperature provided by Open-Meteo.',
};
}
if ( bindings.content?.args?.key === 'weather_state' ) {
return {
content: 'Current conditions.',
};
}
return {
content: bindings.content,
};
},
getFieldsList() {
return [
{ label: 'Temperature (°C)', type: 'string', args: { key: 'temperature' } },
{ label: 'Weather Conditions', type: 'string', args: { key: 'weather_state' } }
];
}
});- Die Funktion
registerBlockBindingsSource()registriert eine Bindungsquelle im Blockeditor. nameist ein eindeutiger Bezeichner für deine Bindungsquelle. Er muss genau dem Namen entsprechen, der in PHP mitregister_block_bindings_source()verwendet wird.labelist ein von Menschen lesbarer Name, der in der Dropdown-Liste Quelle im Attribute-Panel angezeigt wird.useContextlegt die Kontextwerte fest, die diese Quelle vom Block benötigt.postIdist erforderlich, damit die Quelle weiß, welche Meta-/Wetterdaten des Beitrags gelesen werden sollen.getValuesbietet eine Vorschau des gebundenen Wertes im Blockeditor. Sie gibt die Optionen zurück, die in der Auswahlliste erscheinen, nachdem der Nutzer die Bindungsquelle ausgewählt hat („Weather Condition“ in unserem Beispiel). Diese Methode ist seit WordPress 6.9 verfügbar.getFieldsListgibt die Optionen zurück, die in der Auswahlliste erscheinen, nachdem der Nutzer die Bindungsquelle („Weather Condition“ in unserem Beispiel) ausgewählt hat.
Speichere die Datei und kehre zum Editor zurück. Die Quelle Weather Condition ist jetzt in der Editoroberfläche neben dem Post Meta verfügbar. Lade die Seite neu und verbinde dann einen Absatz- oder Kopfzeilenblock mit deiner Bindungsquelle. Das folgende Bild zeigt das Ergebnis.
Das letzte Bild zeigt das Ergebnis auf dem Frontend der Website.
Was kannst du noch mit der Block Bindings API machen?
Dieser Artikel kratzt nur an der Oberfläche 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änzungen rechnen können.
Wenn du die Block Bindings API mit anderen leistungsstarken WordPress-APIs wie der Interaktivitäts-API integrierst, kannst du dynamische, interaktive Anwendungen erstellen, die weit über die traditionellen Blogging-Funktionen hinausgehen, die WordPress in seinen Anfangsjahren so beliebt gemacht haben.
WordPress ist nicht mehr nur eine Blogging-Plattform oder ein Website-Builder. Es ist jetzt auf dem besten Weg, eine vielseitige Entwicklungsplattform für alle Arten von Webanwendungen zu werden.
Je leistungsfähiger 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 G2-Nutzern als branchenführend anerkannt wird.
Die leistungsstärksten Webanwendungen erfordern die beste Hosting-Infrastruktur. Schau dir die Kinsta-Tarife an, um das Angebot zu finden, das am besten zu den Anforderungen deiner Website passt.
Carlo ist ein leidenschaftlicher Liebhaber von Webdesign und Frontend-Entwicklung. Er beschäftigt sich seit über 10 Jahren mit WordPress, auch in Zusammenarbeit mit italienischen und europäischen Universitäten und Bildungseinrichtungen. Er hat Dutzende von Artikeln und Leitfäden über WordPress geschrieben, die sowohl auf italienischen und internationalen Websites als auch in gedruckten Magazinen veröffentlicht wurden. Du kannst Carlo auf X und LinkedIn finden.
