What it is and how to use it

How to register custom Block Bindings data sources: A real-life example

Once you are familiar with the Block Bindings API’s basic concepts, we can move on to its more advanced and interesting aspects for developers.

As mentioned earlier, the Block Bindings API allows you to register custom data sources. This enables you to retrieve data from a remote source and/or manipulate raw data to generate useful information that can be automatically inserted into your content.

In this section, you learn how to maximize the potential of Block Bindings through a practical example that you can use as a foundation for developing your own custom applications.

Suppose you want to retrieve data from an external source and display it in your posts, pages, or custom post types. For instance, you might query a weather service API by sending a request with the latitude and longitude of a city to get real-time weather data, which you could then display on your site.

Thanks to the Block Bindings API, you can display the current temperature or provide your readers with the weather forecast for the coming days. You can also programmatically change the url attribute of one or more images on the page depending on weather conditions.

To add this feature to your WordPress website, you need to create a plugin. Follow these steps:

Step 1: Create a basic plugin

The first step is to create the plugin files. Navigate to the wp-content/plugins directory of your WordPress installation and create a new folder called block-bindings-example. Inside this folder, add the following files:

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

Open the block-bindings-example.php file in your favorite code editor and add the following code:

Here’s what this code does:

• The constant BB_WEATHER_CACHE_TIME determines how long weather data is cached. This reduces API calls, improves page performance, and lowers service costs.
• The require_once expressions include the necessary scripts to register meta fields, register the binding source, and retrieve data from the API.
• The setup function calls two functions that register the post meta fields and the custom binding sources.

Step 2: Register post meta fields

The next step is to register the meta fields you need for your use case. Open the meta-fields.php file in the includes folder and add the following code:

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

The register_post_meta function registers a meta key for use in posts. Note that to use meta fields registered this way with the Block Bindings API, you must set show_in_rest to true and type to string. See the documentation for more information.