L’API Block Bindings è un potente strumento dell’editor a blocchi che permette di associare qualsiasi fonte di dati agli attributi di un blocco.

Questa API è stata introdotta per la prima volta in WordPress 6.5 e, nella sua implementazione iniziale, permetteva agli utenti di WordPress di visualizzare i valori dei campi personalizzati all’interno dei post e delle pagine.

L’API Block Bindings funge da base per altre funzioni di WordPress. Ne sono un esempio gli override dei pattern sincronizzati e la variazione del blocco Post Date introdotta in WordPress 6.9.

Quindi, cos’è esattamente l’API Block Bindings? E a cosa serve? Ecco qui una semplice introduzione e un esempio reale che mostra come creare associazioni tra i blocchi di Gutenberg e le fonti di dati esterne.

Mettiamoci al lavoro.

L’API Block Bindings: concetti di base

Come abbiamo detto in precedenza, l’API Block Bindings permette di creare associazioni tra una fonte di dati e gli attributi di un blocco.

Se non hai familiarità con gli attributi dei blocchi, naviga nella directory src della libreria dei blocchi del progetto Gutenberg su GitHub, trova il blocco Paragraph e apri il file block.json. La proprietà attributes fornisce un elenco degli attributi del blocco 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" ]
	}
},

I seguenti blocchi supportano l’API Block Bindings a partire da WordPress 6.9 e possono quindi essere collegati ai campi personalizzati:

Blocchi supportati Attributi
Paragrafo contenuto
Titolo contenuto
Immagine id, url, alt, titolo, didascalia
Pulsante testo, url, linkTarget, rel

Per collegare i campi personalizzati ai blocchi di Gutenberg, bisogna prima registrarli. Il codice seguente registra un campo personalizzato tramite un plugin di WordPress o il file functions.php del tuo tema:

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 accetta un array di attributi che definiscono le caratteristiche dei campi personalizzati; la documentazione ne fornisce un elenco completo. Per rendere un campo personalizzato disponibile all’API Block Bindings, è necessario impostare show_in_rest su true. A partire da WordPress 6.9, string è l’unico tipo supportato.

Per vedere l’API Block Bindings in azione con i campi personalizzati, crea un nuovo plugin WordPress e registra un meta-campo con il codice mostrato sopra.

<?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',
	] );
} );

Nella dashboard di WordPress, attiva il plugin. Poi, vai nella schermata Messaggi e crea un nuovo post. Quando selezioni un blocco supportato, il pannello Attributi nella barra laterale delle impostazioni del blocco visualizzerà l’elenco degli attributi che possono essere associati a un campo personalizzato registrato.

Uno screenshot che mostra gli attributi del blocco Immagine che supportano le associazioni tra blocchi
Attributi del blocco immagine che supportano le associazioni del blocco

Apri il menu Opzioni nell’angolo in alto a destra e seleziona Preferenze. Nella scheda Generale, individua la sezione Avanzate e attiva i campi personalizzati. Salva le modifiche, attendi che la pagina venga ricaricata e torna all’editor.

Uno screenshot delle preferenze dell'editor a blocchi.
Abilita i campi personalizzati nelle Preferenze dell’editor.

Il prossimo passo consiste nell’inserire un blocco Immagine. Con il blocco selezionato, clicca sull’icona + nel pannello Attributi e seleziona l’attributo url. Il pannello Attributi mostrerà un elenco di meta-campi disponibili. Seleziona nuovamente url. Ora vedrai l’elenco dei meta-campi disponibili per il tipo di post corrente.

Uno screenshot che mostra un campo personalizzato e l'interfaccia utente Block Bindings.
Associare un campo personalizzato all’attributo url di un blocco Immagine nell’interfaccia utente Block Bindings.

Seleziona il tuo meta-campo e salva il post. Ora dovresti vedere la tua immagine sia nell’editor che nel frontend.

Uno screenshot dell'editor a blocchi con un blocco Immagine con l'attributo url associato al valore di un campo personalizzato.
Un blocco Immagine con l’attributo url legato al valore di un campo personalizzato.

A partire dalla versione 6.7 di WordPress, puoi utilizzare l’attributo Label per visualizzare del testo nell’interfaccia dell’editor. Il seguente blocco di codice mostra un esempio:

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',
	] );
} );
Uno screenshot che mostra le etichette dei campi personalizzati nell'interfaccia utente di Block Bindings
Etichette di campo personalizzate nell’interfaccia utente di Block Bindings

Quando apri l’editor di codice, puoi vedere un oggetto JSON all’interno del delimitatore del blocco immagine. La proprietà metadata.bindings.url mostra che l’url del blocco immagine è collegato a un campo di metadati.

<!-- 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 -->

La proprietà source specifica l’origine dei dati per le associazioni del blocco. La proprietà args.key stabilisce un riferimento al campo di metadati.

L’aspetto più interessante dell’API Block Bindings è la possibilità di registrare fonti di dati personalizzate, il che apre nuove ed entusiasmanti possibilità per gli sviluppatori. Di seguito vedremo come utilizzare i dati di servizi di terze parti con l’API Block Bindings.

Come registrare fonti di dati Block Bindings personalizzate: un esempio reale

Una volta acquisita familiarità con i concetti di base dell’API Block Bindings, possiamo passare agli aspetti più avanzati e interessanti per gli sviluppatori.

Come abbiamo già detto, l’API Block Bindings permette di registrare fonti di dati personalizzate. Ciò implica la possibilità di recuperare i dati da una fonte remota e/o di manipolare i dati grezzi per generare informazioni utili da inserire automaticamente nei tuoi contenuti.

In questa sezione vedremo come massimizzare il potenziale dei Block Bindings attraverso un esempio pratico che potrai utilizzare come base per lo sviluppo delle tue applicazioni personalizzate.

Supponiamo che tu voglia recuperare dati da una fonte esterna e visualizzarli nei tuoi post, pagine o tipi di post personalizzati. Ad esempio, potresti interrogare l’API di un servizio meteo inviando una richiesta con la latitudine e la longitudine di una città per ottenere dati meteo in tempo reale, che potresti poi visualizzare sul tuo sito.

Grazie all’API Block Bindings, puoi visualizzare la temperatura attuale o fornire ai tuoi lettori le previsioni del tempo per i prossimi giorni. Puoi anche modificare programmaticamente l’attributo url di una o più immagini della pagina in base alle condizioni meteorologiche.

Per aggiungere questa funzione al tuo sito WordPress, devi creare un plugin. Segui questi passaggi:

Passo 1: creare un plugin di base

Il primo passo consiste nel creare i file del plugin. Naviga nella directory wp-content/plugins della tua installazione di WordPress e crea una nuova cartella chiamata block-bindings-example. All’interno di questa cartella, aggiungi i seguenti file:

/wp-content/plugins/
└── /block-bindings-example/
	├── block-bindings-example.php
	└── /includes/
		├── binding-sources.php
		├── meta-fields.php
		└── weather-api.php

Apri il file block-bindings-example.php nel tuo editor di codice preferito e aggiungi il seguente codice:

<?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' );

Ecco cosa fa questo codice:

  • La costante BB_WEATHER_CACHE_TIME determina per quanto tempo i dati meteo vengono memorizzati nella cache. Questo riduce le chiamate all’API, migliora le prestazioni della pagina e riduce i costi del servizio.
  • Le espressioni di require_once includono gli script necessari per registrare i meta-campi, registrare la fonte di binding e recuperare i dati dall’API.
  • La funzione di setup chiama due funzioni che registrano i meta-campi del post e le fonti di binding personalizzate.

Passo 2: registrare i meta-campi del post

Il passo successivo consiste nel registrare i meta-campi necessari per il tuo caso d’uso. Apri il file meta-fields.php nella cartella includes e aggiungi il seguente codice:

<?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',
	] );
}

La funzione register_post_meta registra un meta-campo da utilizzare nei post. Nota che per utilizzare i meta-campi registrati in questo modo con l’API Block Bindings, devi impostare show_in_rest su true e type su string. Per maggiori informazioni, consulta la documentazione.

Passo 3: registrare la source Block Bindings

È il momento di registrare la fonte dell’associazione. Apri il file binding-sources.php e aggiungi il seguente codice:

<?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
		]
	);
}

La funzione register_block_bindings_source() richiede il nome della fonte e una funzione di callback che recuperi i dati da una fonte e restituisca il valore manipolato.

Poi, nello stesso file binding-sources.php, definisci la funzione di callback.

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;
}

Analizziamo questa funzione:

  • $source_args['key'] identifica i dati legati all’attributo del blocco.
  • La riga successiva recupera l’ID del post corrente da context. Se context manca, come nel caso delle anteprime, l’ID del post corrente viene recuperato con get_the_ID().
  • Poi chiama la funzione bb_fetch_and_cache_weather_data, che recupera i dati dall’API. Definiremo questa funzione nel prossimo passo.
  • $weather_data[$key] contiene i dati forniti dall’API, come la temperatura e lo stato meteorologico.
  • Se la chiave è temperature, aggiunge °C al valore fornito.
  • La funzione restituisce quindi il valore finale.

Passo 4: recuperare i dati da una fonte esterna

Come già detto, recuperiamo i dati dal servizio Open-Meteo (gratuito per uso non commerciale).

Per recuperare la temperatura e le condizioni meteo attuali, devi inviare una richiesta all’API che includa la latitudine e la longitudine di una determinata località e la query var current=weather_code,temperature_2m. Di seguito è riportato un esempio di richiesta:

https://api.open-meteo.com/v1/forecast?latitude=-33.8717&longitude=151.2299¤t=weather_code,temperature_2m

L’API fornisce una risposta simile alla seguente:

{
	"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
	}
}
Risposta Open-Meteo in Postman per Visual Studio Code
Risposta di Open-Meteo in Postman per Visual Studio Code

Ora che sai come ottenere i dati di cui hai bisogno, apri il file weather-api.php e aggiungi il seguente codice:

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;
}

Questa funzione recupera i dati meteo attuali dall’API Open-Meteo e li memorizza nella cache utilizzando i transient. Diamo un’occhiata più da vicino.

  • Due chiamate a get_post_meta recuperano la latitudine e la longitudine della tua posizione.
  • Le due righe successive normalizzano il separatore decimale nel caso in cui l’utente inserisca una virgola al posto del punto.
  • Il blocco condizionale controlla se i valori sono in formato numerico utilizzando is_numeric().
  • Successivamente, controlla se i dati sono presenti nella cache. In caso affermativo, restituisce i dati in cache e interrompe la funzione senza inviare alcuna richiesta all’API.
  • Se non ci sono dati nella cache, crea la richiesta e memorizza la risposta.
  • Le righe seguenti forniscono temperature e weather_code.
  • weather_code è mappata su weather_state grazie alla funzione bb_map_wmo_code_to_state, definita di seguito.
  • I dati vengono salvati con set_transient.
  • Infine, la funzione restituisce i dati mappati.

Infine, definiamo la funzione che traduce weather_code in una stringa leggibile:

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';
}

Il codice è completo e il tuo plugin è pronto per essere testato.

Come utilizzare l’API Block Bindings

È arrivato il momento di imparare a utilizzare le nuove funzionalità aggiunte al tuo sito con l’API Block Bindings!

Nella dashboard di WordPress, vai alla schermata dei plugin e attiva il plugin Block Bindings Example che hai appena creato.

Schermata dei plugin
Attivare il plugin nella dashboard di WordPress.

Successivamente, crea un nuovo post o una nuova pagina. Aggiungi un blocco immagine, un titolo e quattro blocchi riga contenenti due paragrafi ciascuno, come mostrato nell’immagine sottostante. Poi, salva il post.

Uno screenshot della tela dell'editor a blocchi con i blocchi.
Aggiungere blocchi all’area di lavoro dell’editor.

In seguito, aggiungi i tuoi campi personalizzati e salva nuovamente il post.

Aggiungere i campi personalizzati al post.
Aggiungere i campi personalizzati al post.

Seleziona il blocco Immagine e trova il pannello Attributi nella barra laterale delle Impostazioni del blocco. Clicca sul pulsante + per aprire il menu a tendina che mostra l’elenco degli attributi del blocco Immagine che supportano il Block Bindings. Seleziona la voce url.

Uno screenshot che mostra gli attributi del blocco Immagine che supportano i Block Bindings
Attributi del blocco immagine che supportano i Block Bindings

Dopo aver selezionato l’attributo di blocco, nella scheda Avanzate verrà visualizzato un nuovo elemento URL con la descrizione “Non connesso”. Clicca nuovamente sull’elemento url per visualizzare l’elenco delle fonti di binding disponibili. Post Meta fornisce i quattro campi personalizzati registrati per il tipo di post, insieme ai rispettivi valori. Seleziona City Image URL.

Uno screenshot della UI di Block Bindings
Associare i meta-campi registrati.

Hai assegnato il meta-campo City Image URL all’attributo url del blocco Immagine. Ora dovresti vedere una foto della città che hai scelto.

Segui la stessa procedura per gli altri meta-campi. Assegna il campo City Name all’attributo content del blocco Intestazione e i campi Latitude e Longitude ai blocchi Paragrafo corrispondenti.

Ora collega gli ultimi due blocchi alla tua fonte di associazione personalizzata. Purtroppo, come hai visto nelle schermate precedenti, questa opzione non è disponibile nell’interfaccia dell’editor.

Al momento, devi passare all’editor di codice e scrivere manualmente il markup per i due blocchi collegati alla fonte di associazione. Di seguito trovi il codice per visualizzare la temperatura fornita dal servizio Open-Meteo:

<!-- wp:paragraph {
	"metadata":{
		"bindings":{
			"content":{
				"source":"bb/weather-condition",
				"args":{
					"key":"temperature"
				}
			}
		}
	}
} -->
<p>Placeholder</p>
<!-- /wp:paragraph -->

Con questo metodo, il nome della tua fonte di associazione apparirà nell’editor come Weather Condition, ma i dati reali saranno visibili solo nel front-end.

Un esempio di block binding con fonti di dati personalizzate
Un esempio di block binding con fonti di dati personalizzate

Chiaramente, aggiungere manualmente un oggetto JSON al markup del blocco non è un processo facile da usare. Fortunatamente, WordPress 6.9 ha introdotto miglioramenti significativi all’API Block Bindings, rendendo possibile la creazione di un’interfaccia utente per le fonti di dati personalizzate. Proviamo a migliorare il nostro plugin con un’interfaccia utente personalizzata.

Come creare un’interfaccia utente per le tue fonti Block Bindings personalizzate

Per creare un’interfaccia utente personalizzata per la tua fonte di associazione, devi scrivere del codice JavaScript. Per prima cosa, crea una sottocartella js sotto /includes e poi crea un file block-bindings-ui.js al suo interno. La struttura del plugin è ora la seguente:

/wp-content/plugins/
└── /block-bindings-example/
	├── block-bindings-example.php
	└── /includes/
		├── binding-sources.php
		├── meta-fields.php
		└── weather-api.php
			└── /js/
				└──	block-bindings-ui.js

Come primo passo, aggiungi lo script JS al file principale del tuo 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' );

Ecco cosa fa questa funzione:

  • Innanzitutto, controlla che la funzione register_block_bindings_source() esista.
  • Poi controlla che il file block-bindings-ui.js sia presente nella cartella /includes/js del plugin.
  • La funzione wp_enqueue_script() mette in attesa lo script da utilizzare nell’editor. Per una descrizione dettagliata della funzione, consulta la documentazione.
  • Utilizza l’hook enqueue_block_editor_assets per accodare gli script all’interfaccia di editing.

Ora apri il file block-bindings-ui.js e scrivi il seguente codice:

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' } }
		];
	}
});
  • La funzione registerBlockBindingsSource() registra una fonte di associazione nell’editor di blocchi.
  • name è un identificatore univoco per la tua fonte di associazione. Deve corrispondere esattamente al nome utilizzato in PHP con register_block_bindings_source().
  • label è un nome leggibile visualizzato nel menu Source del pannello Attributes.
  • useContext imposta i valori di contesto di cui questa fonte ha bisogno dal blocco. postId è necessario affinché la sorgente sappia quali dati meta/meteo del post leggere.
  • getValues fornisce un’anteprima del valore delimitato all’interno dell’editor del blocco. Restituisce le opzioni che appaiono nel menu a tendina dopo che l’utente ha selezionato la fonte associata (“Weather Conditions” nel nostro esempio). Questo metodo è disponibile da WordPress 6.9.
  • getFieldsList restituisce le opzioni che appaiono nel menu a tendina dopo che l’utente ha selezionato la fonte del vincolo (“Weather Conditions” nel nostro esempio).

Salva il file e torna all’editor. La fonte Weather Conditions è ora disponibile nell’interfaccia dell’editor, insieme a Post Meta. Ricarica la pagina e collega un blocco Paragrafo o Intestazione alla sorgente dell’associazione. L’immagine qui sotto mostra il risultato.

Fonte dell'UI personalizzata di Block Binding
Fonte dell’UI personalizzata di Block Binding

L’immagine finale mostra il risultato sul frontend del sito web.

Un post che mostra i dati provenienti da una fonte di binding esterna
Un post che mostra i dati provenienti da una fonte di associazione esterna

Cos’altro si può fare con l’API Block Bindings?

Questo articolo non fa che scalfire la superficie di ciò che puoi costruire con l’API Block Bindings. Il bello è che lo sviluppo di questa potente funzione di WordPress è tutt’altro che concluso e possiamo aspettarci nuove implementazioni e aggiunte in futuro.

L’integrazione dell’API Block Bindings con altre potenti API di WordPress, come l’API Interactivity, permette di costruire applicazioni dinamiche e interattive che vanno ben oltre le tradizionali funzioni di blogging che hanno reso popolare WordPress nei suoi primi anni di vita.

WordPress non è più solo una piattaforma di blogging o un costruttore di siti web. È ormai destinato a diventare una piattaforma di sviluppo multifunzionale per tutti i tipi di applicazioni web.

Più potenti sono le tue applicazioni, più importante diventa il tuo servizio di hosting. Kinsta offre un hosting gestito Premium con prestazioni elevate, una solida sicurezza, un’ampia automazione e un’assistenza di prim’ordine, riconosciuta come leader del settore dagli utenti di G2.

Le applicazioni web più potenti richiedono la migliore infrastruttura di hosting. Dai un’occhiata ai piani di Kinsta per trovare quello più adatto alle esigenze del tuo sito.

Carlo Daniele Kinsta

Carlo è cultore appassionato di webdesign e front-end development. Gioca con WordPress da oltre 20 anni, anche in collaborazione con università ed enti educativi italiani ed europei. Su WordPress ha scritto centinaia di articoli e guide, pubblicati sia in siti web italiani e internazionali, che su riviste a stampa. Lo trovate su LinkedIn.