De Block Bindings API is een krachtige tool in de block editor waarmee je elke databron kunt koppelen aan de attributen van een block.
Deze API werd voor het eerst geïntroduceerd in WordPress 6.5 en stelde WordPress gebruikers in staat om custom veldwaarden weer te geven in berichten en pagina’s.
De Block Bindings API vormt de basis voor andere robuuste WordPress features. Voorbeelden hiervan zijn Synced pattern overrides en de Post Date blokvariatie die werd geïntroduceerd in WordPress 6.9.
Dus, wat is de Block Bindings API precies? En waar wordt het voor gebruikt? We geven een eenvoudige introductie en een praktijkvoorbeeld om te laten zien hoe je bindingen kunt maken tussen Gutenberg blokken en externe databronnen.
Laten we aan de slag gaan.
De Block Bindings API: Basisconcepten
Zoals we hierboven al zeiden, kun je met de Block Bindings API bindingen maken tussen een databron en de attributen van een blok.
Als je niet bekend bent met blok-attributen, navigeer dan naar de src directory van de blokkenbibliotheek van het Gutenberg project op GitHub, zoek het Paragraph blok en open het block.json bestand. De property attributes geeft een lijst van de attributen van het Paragraph blok.
"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" ]
}
},De volgende blokken ondersteunen de Block Bindings API vanaf WordPress 6.9 en kunnen daarom worden gekoppeld aan je custom velden:
| Ondersteunde blokken | Attributen |
|---|---|
| Paragraph | content |
| Title | content |
| Image | id, url, alt, titel, onderschrift |
| Button | text, url, linkTarget, rel |
Om je customvelden te verbinden met Gutenberg blokken, moet je ze eerst registreren. De volgende code registreert een custom veld via een WordPress plugin of het functions.php bestand van je thema:
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 accepteert een array met attributen die de kenmerken van custom velden definiëren, en de documentatie bevat een volledige lijst hiervan. Om een custom veld beschikbaar te maken voor de Block Bindings API, moet je show_in_rest op true zetten. Vanaf WordPress 6.9 is string het enige ondersteunde type.
Om de Block Bindings API in actie te zien met custom velden, maak je een nieuwe WordPress plugin en registreer je een metaveld met de bovenstaande 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',
] );
} );Activeer de plugin in je WordPress dashboard. Navigeer vervolgens naar de Posts pagina en maak een nieuw bericht aan. Wanneer je een ondersteund blok selecteert, toont het paneel Attributes in de zijbalk Block settings de lijst met attributen die kunnen worden gebonden aan een geregistreerd custom veld.
Open het Options menu in de rechterbovenhoek en selecteer Preferences. Ga op het tabblad General naar de sectie Advanced en schakel custom velden in. Sla je wijzigingen op, wacht tot de pagina opnieuw is geladen en ga dan terug naar de editor.
De volgende stap is het invoegen van een Image blok. Met het blok geselecteerd klik je op het + pictogram in het Attributes paneel en selecteer je het url attribuut. Het Attributes panel toont dan een lijst met beschikbare metavelden. Selecteer opnieuw url. Nu zie je de lijst met metavelden die beschikbaar zijn voor het huidige berichttype.
Selecteer je metaveld en sla het bericht op. Je zou je afbeelding nu zowel in de editor als op de voorkant moeten zien.
Vanaf versie 6.7 van WordPress kun je het Label attribuut gebruiken om tekst weer te geven in de interface van de editor interface. Het volgende codeblok toont een voorbeeld:
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',
] );
} );
Als je de code-editor opent, zie je een JSON object binnen de delimiter van het Image blok. De property metadata.bindings.url laat zien dat de url van het afbeeldingsblok is gekoppeld aan een metagegevensveld.
<!-- 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 -->De property source specificeert de databron voor de blokbindingen. De eigenschap args.key verwijst naar je metaveld.
Het meest interessante aspect van de Block Bindings API is de mogelijkheid om eigen databronnen te registreren, wat interessante nieuwe mogelijkheden biedt voor ontwikkelaars. Hierna gaan we kijken hoe je gegevens van services van derden kunt gebruiken met de Block Bindings API.
Hoe je eigen Block Bindings databronnen kunt registreren: Een levensecht voorbeeld
Als je eenmaal bekend bent met de basisconcepten van de Block Bindings API, kunnen we verder gaan met de meer geavanceerde en interessante aspecten voor ontwikkelaars.
Zoals eerder vermeld, kun je met de Block Bindings API custom databronnen registreren. Hiermee kun je gegevens ophalen uit een externe bron en/of ruwe gegevens bewerken om bruikbare informatie te maken die automatisch in je content kan worden ingevoegd.
In dit gedeelte leer je hoe je het potentieel van Block Bindings kunt maximaliseren aan de hand van een praktisch voorbeeld dat je kunt gebruiken als basis voor het ontwikkelen van je eigen custom toepassingen.
Stel dat je gegevens wilt ophalen uit een externe bron en deze wilt weergeven in je berichten, pagina’s of custom berichttypen. Je zou bijvoorbeeld een API van een weerdienst kunnen bevragen door een verzoek te sturen met de lengte- en breedtegraad van een stad om realtime weergegevens op te halen, die je vervolgens op je site kunt weergeven.
Dankzij de Block Bindings API kun je de huidige temperatuur tonen of je lezers de weersverwachting voor de komende dagen geven. Je kunt ook programmatisch het kenmerk url van een of meer afbeeldingen op de pagina wijzigen, afhankelijk van de weersomstandigheden.
Om deze functie aan je WordPress website toe te voegen, moet je een plugin maken. Volg deze stappen:
Stap 1: Maak een basis plugin
De eerste stap is het maken van de plugin bestanden. Navigeer naar de wp-content/plugins map van je WordPress installatie en maak een nieuwe map aan met de naam block-bindings-example. Voeg in deze map de volgende bestanden toe:
/wp-content/plugins/
└── /block-bindings-example/
├── block-bindings-example.php
└── /includes/
├── binding-sources.php
├── meta-fields.php
└── weather-api.phpOpen het block-bindings-example.php bestand in je favoriete code editor en voeg de volgende code toe:
<?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' );Dit is wat deze code doet:
- De constante
BB_WEATHER_CACHE_TIMEbepaalt hoe lang weergegevens in de cache worden opgeslagen. Dit vermindert API-calls, verbetert de paginaprestaties en verlaagt de servicekosten. - De
require_onceexpressies bevatten de benodigde scripts om metavelden te registreren, de bindingsbron te registreren en gegevens op te halen uit de API. - De setup-functie roept twee functies aan die de post metavelden en de custom bindingsbronnen registreren.
Stap 2: Registreer de post metavelden
De volgende stap is het registreren van de metavelden die je nodig hebt voor je use case. Open het bestand meta-fields.php in de map includes en voeg de volgende code toe:
<?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',
] );
}De functie register_post_meta registreert een metasleutel voor gebruik in posts. Let erop dat je, om metavelden die op deze manier zijn geregistreerd te gebruiken met de Block Bindings API, show_in_rest moet instellen op true en type op string. Zie de documentatie voor meer informatie.
Stap 3: Registreer de Block Bindings bron
Het is tijd om je bindingsbron te registreren. Open het bestand binding-sources.php en voeg de volgende code toe:
<?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
]
);
}De functie register_block_bindings_source() vereist de bronnaam en een callbackfunctie die gegevens ophaalt van een bron en de bewerkte waarde retourneert.
Definieer vervolgens in hetzelfde binding-sources.php bestand de callbackfunctie.
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;
}Laten we deze functie opsplitsen:
$source_args['key']identificeert de gegevens die gebonden zijn aan het blokattribuut.- De volgende regel haalt het ID van het huidige bericht op uit
context. Alscontextontbreekt, zoals het geval kan zijn bij previews, wordt het ID van het huidige bericht opgehaald metget_the_ID(). - Vervolgens wordt de functie
bb_fetch_and_cache_weather_datagecallt, die de gegevens van de API ophaalt. We definiëren deze functie in de volgende stap. $weather_data[$key]bevat de gegevens die door de API worden geleverd, zoals de temperatuur en de weerstoestand.- Als de sleutel
temperatureis, wordt°Ctoegevoegd aan de geleverde waarde. - De functie retourneert vervolgens de uiteindelijke waarde.
Stap 4: Haal de data op uit een externe bron
Zoals hierboven vermeld, halen we gegevens op van de Open-Meteo service (gratis voor niet-commercieel gebruik).
Om de huidige temperatuur en weersomstandigheden op te halen, moet je een verzoek naar de API sturen met de lengte- en breedtegraad van een bepaalde locatie en de query var current=weather_code,temperature_2m. Hieronder zie je een voorbeeldverzoek:
https://api.open-meteo.com/v1/forecast?latitude=-33.8717&longitude=151.2299¤t=weather_code,temperature_2mDe API geeft een antwoord dat lijkt op het volgende:
{
"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
}
}
Nu je weet hoe je de gegevens krijgt die je nodig hebt, open je het bestand weather-api.php en voeg je de volgende code toe:
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;
}Deze functie haalt actuele weergegevens op van de Open-Meteo API en slaat deze op in de cache met behulp van transients. Laten we het eens van dichterbij bekijken.
- Twee calls naar
get_post_metahalen de breedtegraad en lengtegraad van je locatie op. - De volgende twee regels normaliseren het decimale scheidingsteken voor het geval de gebruiker een komma invoert in plaats van een punt.
- Het voorwaardelijke blok controleert of de waarden numeriek zijn met
is_numeric(). - Vervolgens wordt gecontroleerd of de gegevens in de cache zitten. Zo ja, dan worden de gegevens uit de cache geretourneerd en stopt de functie zonder een verzoek naar de API te sturen.
- Als er geen gegevens in de cache zijn gevonden, wordt het verzoek gemaakt en het antwoord opgeslagen.
- De volgende regels halen
temperatureenweather_codeop. weather_codewordt gekoppeld aanweather_statevia de functiebb_map_wmo_code_to_state, die hieronder wordt gedefinieerd.- De gegevens worden opgeslagen met
set_transient. - Tot slot geeft de functie de gemapte gegevens terug.
Definieer als laatste de functie die weather_code vertaalt naar een menselijk leesbare string:
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';
}De code is compleet en je plugin is klaar om getest te worden.
De Block Bindings API gebruiken
Het is tijd om te leren hoe je de nieuwe functies kunt gebruiken die aan je site zijn toegevoegd met de Block Bindings API!
Navigeer in je WordPress dashboard naar het Plugins scherm en activeer de Block Bindings Example plugin die je zojuist hebt gemaakt.
Maak daarna een nieuw bericht of pagina. Voeg een Image blok toe, een titel en vier blokken Rows met elk twee alinea’s, zoals in de afbeelding hieronder. Sla het bericht vervolgens op.
Voeg vervolgens je custom velden toe en sla het bericht opnieuw op.
Selecteer het blok Afbeelding en zoek het paneel Attributes in de zijbalk van de blokinstellingen. Klik op de knop + om het vervolgkeuzemenu te openen dat de lijst met attributen van het Image blok weergeeft die blokbindingen ondersteunen. Selecteer het item url.
Nadat je het blokattribuut hebt geselecteerd, verschijnt op het tabblad Advanced een nieuw URL-element met de beschrijving “Not connected” Klik nogmaals op het url-item om de lijst met beschikbare bindingsbronnen te bekijken. Post Meta toont de vier custom velden die zijn geregistreerd voor het posttype, samen met hun respectievelijke waarden. Selecteer City image URL.
Je hebt het City Image URL meta veld toegewezen aan het url attribuut van het Image blok. Je zou nu een foto moeten zien van de stad die je hebt gekozen.
Volg hetzelfde proces voor de andere metavelden. Wijs het City Name veld toe aan het content attribuut van het Heading blok en de Latitude en Longitude velden aan de corresponderende Paragraph blokken.
Verbind nu de laatste twee blokken met je custom bindingsbron. Helaas is deze optie, zoals je in de vorige screenshots hebt gezien, niet beschikbaar in de editor UI.
Daarom moet je nu overschakelen naar de code-editor en handmatig de opmaak schrijven voor de twee blokken die zijn gekoppeld aan je bindingsbron. Hieronder staat de code om de temperatuur weer te geven die wordt geleverd door de Open-Meteo service:
<!-- wp:paragraph {
"metadata":{
"bindings":{
"content":{
"source":"bb/weather-condition",
"args":{
"key":"temperature"
}
}
}
}
} -->
<p>Placeholder</p>
<!-- /wp:paragraph -->Met deze methode verschijnt de naam van je bindingsbron in de editor als Weather condition, maar de echte gegevens zijn alleen zichtbaar in de frontend.
Het is duidelijk dat het handmatig toevoegen van een JSON object aan de blokopmaak niet gebruiksvriendelijk is. Gelukkig heeft WordPress 6.9 flinke verbeteringen aangebracht in de Block Bindings API, waardoor het mogelijk is om een UI te maken voor custom databronnen. Laten we proberen onze plugin te verbeteren met een custom UI.
Hoe maak je een gebruikersinterface voor je eigen Block Bindings bronnen?
Om een UI te maken voor je custom bindingsbron, moet je JavaScript code schrijven. Maak eerst een js submap onder /includes en maak daarbinnen een block-bindings-ui.js bestand. De structuur van de plugin ziet er nu als volgt uit:
/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 eerste stap voeg je het JS script toe aan het hoofdbestand van je plugin:
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' );Dit is wat deze functie doet:
- Eerst controleert het of de
register_block_bindings_source()functie bestaat. - Vervolgens wordt gecontroleerd of het bestand
block-bindings-ui.jsbestaat in de map/includes/jsvan de plugin. - De
wp_enqueue_script()functie laadt het script in voor gebruik in de editor. Raadpleeg de documentatie voor een gedetailleerde beschrijving van de functie. - Het gebruikt de
enqueue_block_editor_assetshook om scripts te queuen voor de bewerkingsinterface.
Open nu het bestand block-bindings-ui.js en schrijf de volgende 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' } }
];
}
});- De functie
registerBlockBindingsSource()registreert een bindingsbron in de block editor. nameis een unieke identificatie voor je bindingsbron. Het moet precies overeenkomen met de naam die in PHP wordt gebruikt metregister_block_bindings_source().labelis een menselijk leesbare naam die wordt weergegeven in de Source dropdown van het Attributes panel.useContextstelt de contextwaarden in die deze bron nodig heeft van het blok.postIdis nodig zodat de bron weet welke meta/weergegevens van de post hij moet lezen.getValuesgeeft een voorbeeld van de gebonden waarde in de block editor. Het geeft de opties terug die verschijnen in de dropdown nadat de gebruiker de bindingsbron heeft geselecteerd (“Weerconditie” in ons voorbeeld). Deze methode is beschikbaar sinds WordPress 6.9.getFieldsListgeeft de opties terug die in de vervolgkeuzelijst verschijnen nadat de gebruiker de bindingsbron heeft geselecteerd (“Weersomstandigheden” in ons voorbeeld).
Sla het bestand op en ga terug naar de editor. Je bron voor de Weather Condition is nu beschikbaar in de editor UI, naast Post Meta. Herlaad de pagina en koppel een Paragraph of Heading blok aan je bindingsbron. De afbeelding hieronder toont het resultaat.
De laatste afbeelding toont het resultaat op de frontend van de website.
Wat kun je nog meer doen met de Block Bindings API?
Dit artikel is slechts een tipje van de sluier van wat je kunt bouwen met de Block Bindings API. Het mooie is dat de ontwikkeling van deze krachtige WordPress feature nog lang niet klaar is en dat we in de toekomst nieuwe implementaties en toevoegingen kunnen verwachten.
Door de Block Bindings API te integreren met andere krachtige WordPress API’s, zoals de Interactivity API, kun je dynamische, interactieve toepassingen bouwen die veel verder gaan dan de traditionele blogfuncties waarmee WordPress in de beginjaren populair werd.
WordPress is niet langer alleen een blogplatform of een websitebouwer. Het is nu klaar om een multifunctioneel ontwikkelplatform te worden voor allerlei soorten webapplicaties.
Hoe krachtiger je applicaties zijn, hoe belangrijker je hostingservice wordt. Kinsta biedt Premium managed hosting met hoge prestaties, robuuste beveiliging, uitgebreide automatisering en eersteklas ondersteuning die door G2-gebruikers wordt erkend als toonaangevend in de sector.
De krachtigste webapplicaties vragen om de beste hostinginfrastructuur. Neem een kijkje bij de pakketten van Kinsta om het pakket te vinden dat het beste past bij de behoeften van je site.
Carlo is een gepassioneerd liefhebber van webdesign en front-end development. Hij werkt al meer dan 10 jaar met WordPress, ook in samenwerking met Italiaanse en Europese universiteiten en onderwijsinstellingen. Hij heeft tientallen artikelen en gidsen over WordPress geschreven, gepubliceerd op zowel Italiaanse als internationale websites en in gedrukte tijdschriften. Je kunt Carlo vinden op X en LinkedIn.
