Utilize the WordPress Block Bindings API to power your blocks

-sidebar-toc>        -language-notice>

Displaying data that is custom in the WordPress Block Editor hasn't always been an easy task. This required the creation of an individual block that could fetch information from custom fields, as well as other sources.

This is a significant amount of work that is often out of reach for some programmers. In certain cases this could also mean making duplicate functions. As an example, you could consider showing fields that you have created in the form of a heading text. Shouldn't this be possible without creating a completely new block?

This article introduces Block Bindings API. Block Bindings API, shows you how it works with a simple demo and examines the possibilities for what the future holds as the API develops.

The reason Block Bindings API is a revolutionary instrument

You have to use to use the register_meta() function or install a plugin in order to register and configure new fields. That's just the first step. Displaying this data on your site is another challenge.

The Block Bindings API brings this capability to WordPress. In addition, there are no plugins to help you display information. It ties a data source to specific blocks like the Button, Heading, Image, and Paragraph which opens a new world of customization choices for blocks themes as well as using the Block Editor.

It's not as complete as the capabilities of creating PHP or using the custom field plugin. However, it's a first step towards. This could be all you'll need at times.

A simple use case of using the Block Bindings API

How does how does the Block Bindings API perform in real life? We've put together a simple example of how it can help.

Before we begin, here's an outline of our plan:

• Create a few fields that you can customize:
• Quote: A famous quote we want to highlight on each page, bound by a Paragraph block.
• Photo: The URL of a different photo for each page, binds by an Image block.
• Finally, edit the theme's page template and add blocks that retrieve these fields with custom value.

Once we've got the strategy, let's implement the WordPress Block Bindings API into motion.

Custom fields can be enabled in the Block Editor

WordPress hides custom fields by default, so the first step is to enable them in Block Editor. Block Editor.

To allow custom fields you must open your Options menu ( icon) in the Block Editor. After that, click Preferences.

Next, click then the custom fields toggle to show them within the editor. Click the Show and Reload Page button to save your changes.

Create custom fields

To register custom fields for us, you need to go to your theme's functions.php file. After that, add the following code:

// Register custom fields for pages in WordPress using register_meta() function _register_custom_meta_fields_for_pages()  // Register the text field "_famous_quote" for pages register_meta('post', '_famous_quote', array( 'type' => 'string', // Text field 'single' => true, // Single value for the field 'sanitize_callback' => 'wp_strip_all_tags', // Sanitize the input 'show_in_rest' => true, // Expose this field in the REST API for Gutenberg )); // Register the image field "_photo" for pages register_meta('post', '_photo', array( 'type' => 'string', // Can store the URL or attachment ID as a string 'single' => true, // Single value for the field 'sanitize_callback' => 'esc_url_raw', // Sanitize the input as a URL 'show_in_rest' => true, // Expose this field in the REST API for Gutenberg ));  add_action('init', '_register_custom_meta_fields_for_pages');

Take note of the slugs for each field as we'll need them in the next section:

•      _famous_quote    
•      _photo    

The fields can be customized more by following instructions in the WordPress register_meta() documentation.

Custom field values can be added to pages

After that, add custom field values to a page by following these steps:

1. Go to Pages > All Pages and then select the page of your choice.
2. Scroll to the end of the page and find the custom fields panel. Click to click the "Enter new" button below the first field. Add famous quotes in the left column. Add the text of the quote to the right. The future belongs to those who believe in that beauty in their visions. - Eleanor Roosevelt
3. After that, press then the Create Custom Field button to create the _photo field. Enter your URL to the image we want to use on the left.

We can now save the page, and then repeat the process on the remaining pages on our site.

The custom field information should be bound into blocks

Go to Appearance > Editor Then click the Templates link on the right column. Find the Templates template and click on it to launch it within the editor.

The first step is to choose a spot to display our custom field data. Let's add an area to the right of each page.

In this example, we'll include the Group block and insert a column block in it. The left column contains an Image block (to showcase our picture) The right column has the paragraph block (to display our quote).

We have changed the name the Group block we created to the Custom Field Data for future reference. It makes it simpler to locate if we need to modify it later.

The Block Bindings API doesn't have a visual interface for displaying the values yet (more on that below). Therefore, we must modify the code in our Image and Paragraph blocks. This allows us to bind customized data to them.

Click on the Options menu ( icon) located in the upper left of the Website Editor. Select the Coding Editor button. This opens up the code editor.

Find the Group block that we have recently added. It begins with:

The appropriate code in the image below:

After that, you must locate then the Image as well as the Paragraph blocks within the section. The default codes look as follows:

    Image:    

    Paragraph:    

We can edit these blocks so that they are bindable to custom fields.

    Image:    

Note it is important to note that the value of the key value has been in our _photo custom field.

    Paragraph:    

In this case in this instance, the value of the key value is assigned to our _famous_quote custom field.

    Make the necessary changes, then close in the code editor.    

Click on the Image or Paragraph blocks. WordPress outlines each block in the color purple, which indicates that it is bound to a data source. Additionally, the left screen will show an attributes section that provides more information.

Note: You won't see these blocks when you edit pages. They will be displayed at the top of your website.

It is the final stage to access the front of the website. Our image should be displayed as well as a quote on pages with custom field values.

Alternative options for binding blocks

The project was a simple example of binding blocks to a data source. But, there are alternatives to enhance the project. These include:

•      Create ALT attributes     The possibility of registering a second customized field, which defines the the ALT attributes of our images. It would make this function more readily available. As an example, we could bind a new field,      _photo_alt      Then,      alt      attribute like so:

• Use a custom data source: The custom fields function perfectly for the purposes we have. We could, however, choose to pull data from the custom source. The possibilities include APIs, tables for custom databases, plugin/theme options, site data, and taxonomies.

The idea is to consider how you want to include specific data to your site. After that, you'll create a plan to implement it in a way that is simple to update. Block Bindings API Block Bindings API provides plenty of options for doing so.

Going further with the Block Bindings API

The Block Bindings API is not an end-to-end product. It evolves as WordPress releases new versions. WordPress.

For instance, several changes are scheduled for inclusion within WordPress 6.7:

• An UI that defaults to binding blocks to the available data sources.
• Post meta labels for easier to identify.
• Compatibility with custom post-type theme templates.
• Permissions default for determining the person who is able to edit bindings for blocks.
• A number of technical improvements under the hood.

Be on the lookout for updates that make the API simpler to use and make it more effective.

It is also possible to install this Gutenberg plugin to get early access to features before they're integrated into WordPress core. It is recommended to use it in a staging or local environment.

Summary

The Block Bindings API represents a shift in how we work with data that is custom-made in WordPress. It eliminates the need for custom blocks or plugins in many instances. And it brings more flexibility to WordPress blocks as well as block themes.

Adding it to the workflow of your application can cut down on development time. As a native feature additionally, it can enhance performance compared to relying on plugins.

Those are some big advantages to using it today. The future is more promising!

We've only begun to explore the possibilities covered in this article. Dive deeper into this API Block Bindings API by exploring the possibilities of the connection of with custom fields, working with the custom binding source, and learning how to find and modify Block Binding values in the editor.

Eric Karkovack

Eric Karkovack is a freelance web developer and a writer with more than 25 years of experience. He is passionate about helping other people learn about WordPress freelance work, as well as technology.