Tutorial on WP 6.5's Block Bindings API and connecting custom fields

[justintadlock]

WordPress 6.5 will ship with a Block Bindings API and the ability to connect custom fields to block attributes. The feature will be in a limited form, but it is a major first step toward handling a feature that extenders have needed for years. In many cases, it will mean that theme authors and plugin devs will be able to use the existing Core blocks to output dynamic data.

Resources:

• Connecting block attributes and custom fields
• Block Bindings API

I'm thinking the tutorial should at least cover which blocks and attributes can be connected to custom fields and show some examples.

A second part of this (though, it may be a separate tutorial) is to show how to register custom binding sources. WP 6.5 should ship with core/post-meta and core/pattern-overrides, but devs can also build custom sources.

To test

Add a mood and weather custom field key in your Custom Fields panel. Add any text to the fields. Then, add these blocks to your editor:

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

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

This is a really basic example, and the post should walk devs through the basics to a more advanced example.

[justintadlock]

Rough example of a custom binding source that ties the Image block URL to the featured image:

add_action('init', function() {
	register_block_bindings_source('x3p0/meta', [
		'label' => 'X3P0 Meta',
		'get_value_callback' => function(array $args, $block_instance, $name) {
			if ('url' === $name && '_thumbnail_id' === $args['key']) {
				// dd($args);
				// dd($block_instance->context);
				return get_the_post_thumbnail_url();
			}

			return null;
		}
	]);
});

Drop this in the post editor:

<!-- wp:image {"metadata":{"bindings":{"url":{"source":"x3p0/meta","args":{"key":"_thumbnail_id"}}}}} -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->

This works great on the front end. But, unlike custom fields binding, the editor UI lets the user upload an image.

[justintadlock]

There's PR that handles the UI locking: WordPress/gutenberg#58787

[SantosGuillamot]

It seems there is an issue right now. I've opened a new pull request trying to solve that: WordPress/gutenberg#58961

[justintadlock]

I jumped ahead and put a major dent into what this tutorial will be: https://docs.google.com/document/d/1LAwj_Gynb_zlvQ_eOMSXriN0gZVJrh6OghjJuBdehms/edit?usp=sharing

[SantosGuillamot]

I took a quick look, and it looks amazing so far 🙌 Thank you so much for working on that.

I can see that you are still working on some sections. Do you want us to share feedback, or should we wait until you consider it ready?

[justintadlock]

It's not quite ready for grammar/English feedback yet because it's mostly just a "brain dump" at this point. But, if you happen to have any early technical feedback or more "big concept" ideas, sharing those early in the doc or here in the ticket is always welcome.

[justintadlock]

This discussion has now been moved to a ticket: #222