Understanding Block Binding API

Written by Tinjure WP Posted on

Note: This post of understanding newly added WordPress Site Editor features including using blocks. This learning post is still in active development and updated regularly.

The Block Bindings API, first introduced in WordPress 6.5 and refined in 6.6, enables dynamic data binding to block attributes, benefiting custom blocks and features like pattern overrides. Initially, this feature required coding, but WordPress 6.7 is adding a user-friendly interface to simplify its use.

An experimental update for the UI has already been merged, with further enhancements planned to improve accessibility. This development aims to make it easier for users to connect attributes to data sources without the need for custom coding and address sources like “Post Meta,” which are managed through private APIs.

Available Resources

Twenty Twenty-Five Theme

The new Twenty Twenty-Five default theme, that’s currently in development process, has make use of BB API to create Copyright patterns for its footer. Let’s look at how it is accomplished.

Step 1: Registering block binding source in functions.php file

Below is the code snippets for registering copyright block binding source.

/**
 * Register block binding sources.
 */
if ( ! function_exists( 'twentytwentyfive_register_block_bindings' ) ) :
	/**
	 * Register the copyright block binding source.
	 */
	function twentytwentyfive_register_block_bindings() {
		register_block_bindings_source(
			'twentytwentyfive/copyright',
			array(
				'label'              => _x( '© YEAR', 'Label for the copyright placeholder in the editor', 'twentytwentyfive' ),
				'get_value_callback' => 'twentytwentyfive_copyright_binding',
			)
		);
	}
endif;

Step 2: Registering block binding callback function for the copyright

Here is how the block binding callback function is registered in the functions.php file.

/**
 * Register block binding callback function for the copyright.
 */
if ( ! function_exists( 'twentytwentyfive_copyright_binding' ) ) :
	/**
	 * Callback function for the copyright block binding source.
	 */
	function twentytwentyfive_copyright_binding() {
		$copyright_text = sprintf(
			/* translators: 1: Copyright symbol or word, 2: Year */
			esc_html__( '%1$s %2$s', 'twentytwentyfive' ),
			'©',
			wp_date( 'Y' ),
		);

		return $copyright_text;
	}
endif;

add_action( 'init', 'twentytwentyfive_register_block_bindings' );

Next step is registering copyright pattern in in the /patterns directory.

Copyright Pattern

The following code snippets shows how the copyright pattern is registered to display symbol and date.

<?php
/**
 * Title: Copyright symbol and date
 * Slug: twentytwentyfive/copyright
 * Categories: text
 * Description: Displays a placeholder for the copyright year in the editors, and the current year on the front.
 */

?>
<!-- wp:paragraph {
	"metadata":{
		"bindings":{
			"content":{
				"source":"twentytwentyfive/copyright"
			}
		}
	},
	"className":"copyright",
	"textColor":"primary",
	"fontSize":"small"
} -->
<p class="copyright has-primary-color has-text-color has-small-font-size"></p>
<!-- /wp:paragraph -->

Below is a screenshot showing the use of copyright pattern in the Site Editor.

Screenshot showing the copyright pattern in the Site Editor, with the Attributes field displayed in the sidebar.
Update (9/28)

After this post was completed during the development phase, the Block Bonding copy right pattern has been removed and the BB code has been added to the footer pattern. Below is the footer pattern code snippet:

// tt5 - footer pattern
...
...

<!-- wp:group {"align":"full","style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
		<div class="wp-block-group alignfull">
			<!-- wp:paragraph { "metadata":{ "bindings":{ "content":{ "source":"twentytwentyfive/copyright" } } }, "fontSize":"small" } -->
			<p class="has-small-font-size"></p>
			<!-- /wp:paragraph -->

			<!-- wp:paragraph {"fontSize":"small"} -->
			<p class="has-small-font-size">
				<?php
				printf(
					/* Translators: Designed with WordPress. %1$s: WordPress link. */
					esc_html__( 'Designed with %1$s', 'twentytwentyfive' ),
					'<a href="' . esc_url( __( 'https://wordpress.org', 'twentytwentyfive' ) ) . '" rel="nofollow">WordPress</a>'
				);
				?>
			</p>
			<!-- /wp:paragraph -->
		</div>
<!-- /wp:group -->
...
...
Wrapping Up

This simple copyright pattern of TT5 demonstrates how the Block Binding API can be used in a theme to capture dynamic data. More advanced use cases are available on the WordPress Developer Blog.

Related Resources