After hours of piecing together articles and testing things on my own templates, I bring to you my tried-and-true method of using the new Block Bindings UI!

Block Bindings API

In the simplest terms, the Block Bindings API, introduced in WordPress 6.5, allows blocks to display data from custom fields.

Block Bindings UI

The Block Bindings UI was integrated into the WordPress core in version 6.7. This allows you to bind custom data to a block by selecting an attribute in the right column of the editor.

Which blocks allow bindings?

At this time, only the following blocks and their attributes are supported:

Blocks	Attributes
Paragraph	content
Heading	content
Image	url, alt, title, id, caption
Button	url, text, linkTarget, rel
Navigation	url
Post Date	datetime

What do I need?

1. WordPress, at least version 6.7, which is when the Block Bindings UI was introduced. But don’t use an old version, update to the latest, which at this moment, is 7.0
2. Advanced Custom Fields (ACF) (or an equivalent custom field plugin). WordPress also has built-in custom fields, but configuration instructions should be similar.
3. WPCode (or equivalent plugin). A little PHP code will need to be added, so a plugin will help avoid touching the theme PHP files.

Add a custom field to a template

Let’s start by using ACF to add a single custom field to only show on pages.

In WordPress Admin, go to ACF > Field Groups, then Add New. Name it whatever you want, but choose a name that reminds you where the fields are. In this case, the fields will only display on pages, so I’ve named it “Pages.”

Under Settings > Location Rules, set a rule:

Show this field group if Post Type is equal to Page

Now we will add a single field, called “Phone Number.”

Fields > General

• Field Type: Text
• Field Label: Phone Number
• Field Name: phone_number

Important: The following option must be checked for the Block Bindings UI to read the data.

Fields > Presentation

• Allow Access to Value in Editor UI: Checked

Settings > Group Settings

• Active: Checked
• Show in REST API: Checked

Now Save Changes. The rest of the settings are mostly visual, and can be adjusted as you wish.

Place a custom field in a template

Let’s make a very simple custom template that uses this new Phone Number field. There are two ways to get there.

Appearance > Editor

or

Appearance > Themes > Customize

Both go to the same Design screen with Navigation, Styles, Pages, Templates, and Patterns.

• Choose Templates.
• Add New Template, then choose Custom template.
• Name it “Client Template.” If the screen asks to choose a pattern, just Skip.
• Put down three blocks: Title, Paragraph, and Content.
• Click “Save”

Register Custom Fields

This is a very important step. Go back to the main WordPress admin area. Add the following to a code editor or the theme’s functions.php file:

add_action( 'init', 'register_meta_for_block_bindings' );
function register_meta_for_block_bindings() {
	register_meta( 'post', 'phone_number', [ 
		'show_in_rest'  => true, 
		'single' => true, 
		'type' => 'string',
		'sanitize_callback' => 'wp_strip_all_tags', 
		'label' => '[Location URL]',
		'default' => ''
	] );
}

Notice the “phone_number” value. That is the name of the custom field. The first three attributes, “show_in_rest”, “single”, and “type” are required for this to work. The rest are recommended, but optional.

Save and publish the file, or activate the snippet.

To be continued…