Block Bindings and Custom Fields – an (almost) no-code example

This article received two updates today, March 13, 2024:

With the upcoming release of version 6.5, WordPress will receive the first iteration of Block Bindings API, a way to bind content of blocks to data stored in custom fields. Custom fields have been around for a long time. What wasn’t available was a way for content creators / no-code site builders to read out the values of custom fields without using plugins like ACF or Metabox, etc. To include values from Custom fields on Theme templates, you also need a developer to help out.

This first iteration is mostly for developers. Justin Tadlock published Introducing Block Bindings, part 1: connecting custom fields.

The article Introducing Block Bindings, part 2: Working with custom binding sources is now available, too.

There are some restrictions to consider:

  • It’s only enabled for heading, buttons, paragraphs, and image blocks.
  • The binding sources are either core/patterns or core/post-meta.
  • The feature does come with a way to register additional binding sources for your plugin or theme.
  • A way to add or edit custom fields via the block editor is missing.

So you might ask why should I bother? And you’d be right. Whether you are a no-code site builder or site owner, don’t quit just yet.

As Custom Fields have been part of WordPress since the Stone Age, there is a way to add and modify custom fields. The good ol’ meta boxes.

Block Bindings will open so many possibilities that many users have been longing for since the start of blocks in 2017. I found the feature so intriguing that I wondered if I could make it work now using as little code as possible. And with a minimal squinting in the code editor, you can start using it, too. Even if only as a proof of concept. There is the little warning: Use this in production at your own risk.

Here is a rundown of my idea:

Each blog post is part of a logbook, which reports what happened today– including a note about the weather, which then appears above the title of a post.

Here are the broad steps to accomplish this:

  • Use the good ol’ meta box to add a note about today’s weather to the blog post
  • Use a block to read the post-meta value, and
  • Add the block to the single post template, with some styling and a drop-shadow.

The middle step is the meat of the matter, and that’s where the squinting skill comes in. If you know how to use meta boxes to create custom fields, you can skip over the next section right to the middle step.

How to use Meta boxes to create a Custom Field

First, you need to enable Custom Fields for the post editor via the Preference menu . Go to the 3-dot Options menu and select Preferences. But before you go there, make sure you saved all your changes to the post. To show the meta boxes below the post, the block editor needs to reload the page, and unsaved content would be removed.

Here is a short video.

You can add a new custom field called “Weather” to the post and add the value: “Sunny with a chance of rain in the afternoon.”

For subsequent posts you can select the name of the Custom field from the dropdown box and add the value.

That was our short discourse on handling Custom Fields with WordPress. Now we apply your knowledge a bit further.

Block Binding Block markup

The documentation for the Block Bindings shows how you can use the block markup to add information about the meta field (aka Custom field) to the block.

The template looks like this: 

<!-- wp:paragraph {
     "metadata":{
        "bindings":{
          "content":{
            "source":"core/post-meta",
            "args":{
              "key":"Weather"
              }
             }
            }
         }
      } -->
<p></p>
<!-- /wp:paragraph -->

The source parameter identifies the place where the system looks for the information. Here it says, “core/post-meta.” That’s the space where custom fields and their values are stored. In the args section, it asks for the key of the custom field, that’s the name, which is “Weather” in our case.

Yes, it can be a bit intimidating. You need to enter the code editor for a minute to add this to your post.

Now, here comes the hard part for non-coders.

  • Use the copy button on the right of the code block to add the content to your clipboard.
  • Switch to the code editor via the Options menu or use the Keyboard shortcut.
  • Then paste the code above into the code editor
  • Save everything and exit the code editor.
  • When you return to the visual editor, you only see one word in the space where the block went: Weather. Don’t worry, that’s a little downside of this process, there is no preview in the editor.
  • Click on the Preview in new tab, and you see the post’s value for the custom field “Weather” displayed on the front end.

Here is a video of the whole process.

Phew! For the first time, that seems like a complicated move. You might not want to do too often, right? Or maybe it gives you a bit more confidence. I’d be happy to help you while you try to figure it out. Just email me at pauli@gutenbergtimes.com or ping me in WP Slack as @bph.

Add the block with bindings to the single post template

The next and final step is easier. Now that you know how this works, you might want to add the block to the Single Post template. So every time an editor makes a logbook entry and adds the weather to the meta box, it will display on the front end.

Here is the video of the steps.

From there, you can embellish the weather section of your posts some more.

Update March 13, 2024: With PR 59185 contributors added a purple connector icon as visual indicator, to show that this particular block has a binding associated.

Screenshot of purple visual indicator for block binding.

After I transformed the block into a column, I added another paragraph to the template section with a drop shadow.

Some things to consider

Although it works well when you always remember to add the weather note to every post, there is no reminder, and we know there is no preview. I also see two major issues:

  • There is no default option on what to display when the value of the custom field is empty. It will display the empty white box.
  • All you can do with custom field in meta boxes is a text input field. There is no select box to make sure only a certain set of values is added, no control of numbers, etc. and shadow just. These issues and a few more are better solved with code.

In his post, Introducing Block Bindings, part 1: connecting custom fields, Justin Tadlock wrote about how to user register_meta() function to add custom fields properly.

Meta boxes are also a legacy system that doesn’t really fit the block editor way of doing things anymore. The Gutenberg developers are working on the interface to add and edit custom fields as well as make the block show that it’s connected to a custom field.

If you are interested in the Block Binding API work you can follow along this tracking issue.

Please share in the comments if you run into trouble, and you are welcome to share your ideas and implementations if you followed along. Furthermore, please post your questions so we can answer them.

On the WordPress Slack space there is also an #outreach channel where I and other contributors hang out to answer questions and facilitate discussions about upcoming features. You are more than welcome to join. If you are not on the WordPress Slack yet, you can sign up with your WordPress.org account and then follow the instructions.

Related Posts