A API de vinculação de blocos é uma ferramenta poderosa do editor de blocos que permite conectar qualquer fonte de dados aos atributos de um bloco.

Essa API foi introduzida pela primeira vez no WordPress 6.5 e, em sua implementação inicial, permitiu que os usuários do WordPress exibissem valores de campos personalizados em artigos e páginas.

A API de vinculação de blocos, serve como base para outros recursos robustos do WordPress. Entre os exemplos estão as substituições de padrões sincronizados e a variação do bloco Data do artigo introduzida no WordPress 6.9.

Então, afinal, o que é a API de vinculação de blocos ? E para que ela é usada? A seguir, apresentamos uma introdução simples e um exemplo do mundo real mostrando como criar vínculos entre blocos do Gutenberg e fontes de dados externas.

Vamos ao trabalho.

A API de vinculação de blocos: conceitos básicos

Como mencionado acima, a API de vinculação de blocos permite criar vínculos entre uma fonte de dados e os atributos de um bloco.

Se você não estiver familiarizado com atributos de blocos, navegue até o diretório src da biblioteca de blocos do projeto Gutenberg no GitHub, localize o bloco Parágrafo e abra o arquivo block.json. A propriedade attributes fornece uma lista dos atributos do bloco Parágrafo.

"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" ]
	}
},

Os blocos a seguir são compatíveis com a API de vinculação de blocos a partir do WordPress 6.9 e, portanto, podem ser vinculados aos seus campos personalizados:

Blocos compatíveis Atributos
Parágrafo conteúdo
Título conteúdo
Imagem id, url, alt, título, legenda
Botão texto, url, linkTarget, rel

Para conectar seus campos personalizados aos blocos do Gutenberg, você deve primeiro registrá-los. O código a seguir registra um campo personalizado por meio de um plugin do WordPress ou do arquivo functions.php do seu 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 aceita um array de atributos que definem as características dos campos personalizados, e a documentação fornece uma lista completa deles. Para tornar um campo personalizado disponível para a API de vinculação de blocos, é necessário definir show_in_rest como true. A partir do WordPress 6.9, string é o único tipo compatível.

Para ver a API de vinculação de blocos em ação com campos personalizados, crie um novo plugin do WordPress e registre um campo meta com o código mostrado acima.

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

No painel do WordPress, ative o plugin. Em seguida, navegue até a tela Artigos e crie um novo artigo. Ao selecionar um bloco compatível, o painel Atributos na barra lateral de Configurações do bloco exibirá a lista de atributos que podem ser vinculados a um campo personalizado registrado.

Atributos do bloco de Imagem compatíveis com a vinculação de blocos.
Atributos do bloco de Imagem compatíveis com a vinculação de blocos.

Abra o menu Opções no canto superior direito e selecione Preferências. Na aba Geral, localize a seção Avançado e ative campos personalizados. Salve as alterações, aguarde o recarregamento da página e retorne ao editor.

Preferências do editor de blocos.
Habilitar campos personalizados nas Preferências do editor.

O próximo passo é inserir um bloco Image. Com o bloco selecionado, clique no ícone + no painel Atributos e selecione o atributo url. O painel Atributos exibirá então uma lista de campos meta disponíveis. Selecione url novamente. Agora, você verá a lista de campos meta disponíveis para o tipo de conteúdo atual.

Imagem: campo personalizado e interface da vinculação de blocos.
Vinculando um campo personalizado ao atributo url de um bloco Imagem na interface de vinculação de blocos.

Selecione seu campo meta e salve o artigo. Agora você deverá ver a imagem tanto no editor quanto no frontend.

Imagem: editor de blocos com um bloco Imagem cujo atributo url está vinculado a um campo personalizado.
Bloco Imagem com o atributo url vinculado ao valor de um campo personalizado.

A partir da versão 6.7 do WordPress, é possível usar o atributo Label para exibir texto na interface do editor. O bloco de código a seguir mostra um exemplo:

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',
	] );
} );
Imagem: rótulos de campos personalizados na interface da API de vinculação de blocos.
Rótulos de campos personalizados na interface da API de vinculação de blocos.

Ao abrir o editor de código, é possível ver um objeto JSON dentro do delimitador do bloco de imagem. A propriedade metadata.bindings.url mostra que o url do bloco de imagem está vinculado a um campo de metadados.

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

A propriedade source especifica a fonte de dados para os vínculos do bloco. A propriedade args.key estabelece uma referência ao seu campo de metadados.

O aspecto mais interessante da API de vinculação de blocos é sua capacidade de registrar fontes de dados personalizadas, o que abre possibilidades novas e empolgantes para desenvolvedores. A seguir, veremos como usar dados de serviços de terceiros com a API de vinculação de blocos.

Como registrar fontes de dados personalizadas para a API de vinculação de blocos: um exemplo do mundo real

Depois que você estiver familiarizado com os conceitos básicos da API de vinculação de blocos, podemos avançar para seus aspectos mais avançados e interessantes para desenvolvedores.

Como mencionado anteriormente, a API de vinculação de blocos permite registrar fontes de dados personalizadas. Isso possibilita recuperar dados de uma fonte remota e ou manipular dados brutos para gerar informações úteis que podem ser inseridas automaticamente no seu conteúdo.

Nesta seção, você aprenderá como maximizar o potencial da API de vinculação de blocos por meio de um exemplo prático que pode servir como base para o desenvolvimento de seus próprios aplicativos personalizados.

Suponha que você queira recuperar dados de uma fonte externa e exibi-los em seus artigos, páginas ou tipos de post personalizados. Por exemplo, você pode consultar a API de um serviço de previsão do tempo enviando uma solicitação com a latitude e longitude de uma cidade para obter dados meteorológicos em tempo real, que então podem ser exibidos no seu site.

Graças à API de vinculação de blocos, você pode exibir a temperatura atual ou fornecer aos leitores a previsão do tempo para os próximos dias. Também é possível alterar programaticamente o atributo url de uma ou mais imagens na página, dependendo das condições climáticas.

Para adicionar esse recurso ao seu site WordPress, é necessário criar um plugin. Siga estas etapas:

Etapa 1: criar um plugin básico

A primeira etapa é criar os arquivos do plugin. Navegue até o diretório wp-content/plugins de sua instalação do WordPress e crie uma nova pasta chamada block-bindings-example. Dentro dessa pasta, adicione os seguintes arquivos:

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

Abra o arquivo block-bindings-example.php em seu editor de código favorito e adicione o seguinte código:

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

Veja o que esse código faz:

  • A constante BB_WEATHER_CACHE_TIME determina por quanto tempo os dados meteorológicos são armazenados em cache. Isso reduz as chamadas à API, melhora o desempenho da página e reduz os custos do serviço.
  • As expressões require_once incluem os scripts necessários para registrar campos meta, registrar a fonte de vinculação e recuperar dados da API.
  • A função setup chama duas funções que registram os campos meta do post e as fontes de vinculação personalizadas.

Etapa 2: registrar campos meta do post

O próximo passo é registrar os campos meta necessários para o seu caso de uso. Abra o arquivo meta-fields.php na pasta includes e adicione o seguinte código:

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

A função register_post_meta registra uma chave meta para uso em artigos. Observe que, para usar campos meta registrados dessa forma com a API de vinculação de blocos, é necessário definir show_in_rest como true e type como string. Consulte a documentação para mais informações.

Etapa 3: Registrar a fonte da da API de vinculação de blocos

Chegou a hora de registrar sua fonte de vinculação. Abra o arquivo binding-sources.php e adicione o seguinte código:

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

A função register_block_bindings_source() exige o nome da fonte e uma função de callback que recupera dados de uma fonte e retorna o valor manipulado.

Em seguida, no mesmo arquivo binding-sources.php, defina a função de 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;
}

Vamos detalhar essa função:

  • $source_args['key'] identifica os dados vinculados ao atributo do bloco.
  • A linha seguinte recupera o ID do post atual a partir do contexto. Se o contexto estiver ausente, como pode ocorrer em visualizações, o ID do post atual é obtido com get_the_ID().
  • Em seguida, a função chama bb_fetch_and_cache_weather_data, que recupera os dados da API. Essa função será definida na próxima etapa.
  • $weather_data[$key] contém os dados fornecidos pela API, como temperatura e estado do tempo.
  • Se a chave for temperature, a função adiciona °C ao valor fornecido.
  • Por fim, a função retorna o valor final.

Etapa 4: recuperar dados de uma fonte externa

Conforme mencionado acima, recuperamos dados do serviço Open-Meteo (gratuito para uso não comercial).

Para obter a temperatura atual e as condições climáticas, é necessário enviar uma solicitação à API que inclua a latitude e longitude de um determinado local e a variável de consulta current=weather_code,temperature_2m. Abaixo está um exemplo de solicitação:

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

A API fornece uma resposta semelhante à seguinte:

{
	"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
	}
}
Resposta do Open-Meteo no Postman para o Visual Studio Code.
Resposta do Open-Meteo no Postman para o Visual Studio Code.

Agora que você sabe como obter os dados de que precisa, abra o arquivo weather-api.php e adicione o seguinte código:

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

Essa função recupera os dados meteorológicos atuais da API do Open-Meteo e os armazena no cache usando transientes. Vamos dar uma olhada mais de perto.

  • Duas chamadas a get_post_meta recuperam a latitude e a longitude da sua localização.
  • As duas linhas seguintes normalizam o separador decimal caso o usuário informe uma vírgula em vez de um ponto.
  • O bloco condicional verifica se os valores estão em formato numérico usando is_numeric().
  • Em seguida, verifica se os dados já estão em cache. Se estiverem, retorna os dados em cache e encerra a função sem enviar nenhuma solicitação à API.
  • Se nenhum dado for encontrado em cache, a função constrói a requisição e armazena a resposta.
  • As linhas seguintes fornecem temperature e weather_code.
  • O weather_code é mapeado para weather_state graças à função bb_map_wmo_code_to_state, definida logo abaixo.
  • Os dados são salvos com set_transient.
  • Por fim, a função retorna os dados mapeados.

Por último, defina a função que traduz weather_code em uma string legível por humanos:

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

O código está completo, e seu plugin está pronto para testes.

Como usar a API de vinculação de blocos

Chegou a hora de aprender como usar os novos recursos adicionados ao seu site com a API de vinculação de blocos.

No painel do WordPress, navegue até a tela Plugins e ative o plugin Block Bindings Example que você acabou de criar.

Ative o plugin no painel do WordPress.
Ative o plugin no painel do WordPress.

Em seguida, crie um novo artigo ou página. Adicione um bloco de Imagem, um título e quatro blocos de Linha, cada um contendo dois parágrafos, conforme mostrado na imagem abaixo. Depois, salve o artigo.

Uma captura de tela da tela do editor de blocos com blocos.
Adicione blocos à tela do editor.

Na sequência, adicione seus campos personalizados e salve o artigo novamente.

Adicione campos personalizados à postagem.
Adicione campos personalizados à postagem.

Selecione o bloco de Imagem e localize o painel Atributos na barra lateral de Configurações do bloco. Clique no botão + para abrir o menu suspenso, que exibe a lista de atributos do bloco de Imagem compatíveis com a API de vinculação de blocos. Selecione o item url.

Uma captura de tela mostrando os atributos do bloco de Imagem compatíveis com a API de vinculação de blocos
Atributos do bloco de Imagem compatíveis com a  API de vinculação de blocos

Após selecionar o atributo do bloco, a aba Avançado exibirá um novo elemento de URL com a descrição “Não conectado”. Clique novamente no item url para visualizar a lista de fontes de binding disponíveis. Post Meta fornece os quatro campos personalizados registrados para o tipo de post, juntamente com seus respectivos valores. Selecione a URL da imagem da cidade.

Uma captura de tela da interface de Vinculação de Blocos
Conectar campos meta registrados.

Você atribuiu o metacampo City Image URL ao atributo url do bloco de Imagem. Agora você deve ver uma foto da cidade escolhida.

Siga o mesmo processo para os outros metacampos. Você atribuiu o campo City Name ao atributo content do bloco Título e os campos Latitude e Longitude aos blocos de Parágrafo correspondentes.

Agora, conecte os dois últimos blocos à sua fonte de vinculação personalizada. Infelizmente, como você viu nas capturas de tela anteriores, essa opção não está disponível na interface do usuário do editor.

Atualmente, você precisa alternar para o editor de código e escrever manualmente a marcação para os dois blocos vinculados à sua fonte de vinculação. Abaixo está o código para exibir a temperatura fornecida pelo serviço Open-Meteo:

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

Com esse método, o nome da sua fonte de binding aparecerá no editor como Weather Condition, mas os dados reais só serão visíveis no frontend.

Um exemplo de vinculações de bloco com fontes de dados personalizadas
Um exemplo de vinculações de bloco com fontes de dados personalizadas.

Claramente, adicionar manualmente um objeto JSON à marcação do bloco não é um processo amigável ao usuário. Felizmente, o WordPress 6.9 introduziu melhorias significativas na API de vinculação de blocos, possibilitando a criação de uma interface do usuário para fontes de dados personalizadas. Vamos melhorar nosso plugin com uma interface personalizada.

Como criar uma interface para suas fontes personalizadas da API de vinculação de blocos

Para criar uma interface do usuário para sua fonte de vinculação personalizada, você precisa escrever algum código JavaScript. Primeiro, crie uma subpasta js em /includes e, em seguida, crie o arquivo block-bindings-ui.js dentro dela. A estrutura do plugin agora é a seguinte:

/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

Como primeira etapa, adicione o script JS ao arquivo principal do 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' );

Veja o que essa função faz:

  • Primeiro, verifica se a função register_block_bindings_source() existe.
  • Em seguida, verifica se o arquivo block-bindings-ui.js existe na pasta /includes/js do plugin.
  • A função wp_enqueue_script() registra o script para uso no editor. Para uma descrição detalhada dessa função, consulte a documentação.
  • Ela usa o hook enqueue_block_editor_assets para carregar scripts na interface de edição.

Agora, abra o arquivo block-bindings-ui.js e escreva o seguinte código:

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' } }
		];
	}
});
  • A função registerBlockBindingsSource() registra uma fonte de vinculação no editor de blocos.
  • name é um identificador exclusivo para sua fonte de vinculação. Ele deve corresponder exatamente ao nome usado no PHP com register_block_bindings_source().
  • label é um nome legível por humanos exibido no menu suspenso Source (Fonte) do painel Attributes (Atributos).
  • useContext define os valores de contexto que essa fonte precisa do bloco. postId é obrigatório para que a fonte saiba de qual post ler os dados meta ou meteorológicos.
  • getValues fornece uma prévia do valor vinculado dentro do editor de blocos. Ele retorna as opções que aparecem no menu suspenso depois que o usuário seleciona a fonte de binding (“Weather Condition”, no nosso exemplo). Esse método está disponível desde o WordPress 6.9.
  • getFieldsList retorna as opções que aparecem no menu suspenso depois que o usuário seleciona a fonte de binding (“Weather Conditions”, no nosso exemplo).

Salve o arquivo e retorne ao editor. Sua fonte Weather Conditions agora está disponível na interface do usuário do editor, ao lado de Post Meta. Recarregue a página e conecte um bloco de Parágrafo ou Cabeçalho à sua fonte de associação. A imagem abaixo mostra o resultado.

Interface de fonte personalizada da vinculação de blocos.
Interface de fonte personalizada da vinculação de blocos.

A imagem final mostra o resultado no frontend do site.

Um artigo que exibe dados vinculados a uma fonte de dados externa
Um artigo que exibe dados vinculados a uma fonte de dados externa.

O que mais você pode fazer com a API de vinculação de blocos?

Este artigo apenas arranha a superfície do que você pode criar com a API de vinculação de blocos. O melhor de tudo é que o desenvolvimento desse poderoso recurso do WordPress está longe de terminar, e podemos esperar novas implementações e melhorias no futuro.

A integração da API de vinculação de blocos com outras APIs avançadas do WordPress, como a API de interatividade, permite criar aplicativos dinâmicos e interativos que vão muito além dos recursos tradicionais de blog que tornaram o WordPress popular em seus primeiros anos.

O WordPress não é mais apenas uma plataforma de blogs ou um construtor de sites. Ele está se tornando uma plataforma de desenvolvimento multipropósito para todos os tipos de aplicativos web.

À medida que seus projetos se tornam mais complexos, a escolha da infraestrutura de hospedagem passa a ter um papel fundamental. A Kinsta oferece hospedagem gerenciada premium com alto desempenho, segurança avançada, automação e suporte especializado, reconhecido pelos usuários do G2.

Para sites que exigem desempenho consistente e confiabilidade, confira os planos da Kinsta e encontre a opção mais adequada às necessidades do seu site.

Carlo Daniele Kinsta

Carlo é um apaixonado por webdesign e desenvolvimento frontend. Ele tem mais de 10 anos de experiência com WordPress e colaborou com diversas universidades e instituições educacionais na Itália e na Europa. Carlo já publicou inúmeros artigos e guias sobre WordPress, tanto em sites italianos quanto internacionais, além de revistas impressas. Você pode seguir ele no LinkedIn e no X.