Block Bindings improvements in WordPress 6.9

For WordPress users.

The BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. Bindings user interface has been upgraded to improve how different data sources are displayed in the editor.
Users can now easily switch between sources, as well as bind and unbind attributes with a single click.

For WordPress developers.

On the server

A new filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output., block_bindings_supported_attributes_{$block_type}, allows developers to customize which of a block’s attributes can be connected to a Block Bindings source.

On the editor

Developers can now register custom sources in the editor UIUI User interface by adding a getFieldsList method to their source registration function.

This function must return an array of objects with the following properties:

• label (string): Defines the label shown in the dropdown selector. Defaults to the source label if not provided.
• type (string): Defines the attribute value type. It must match the attribute type it binds to; otherwise, it won’t appear in the UI.Example: An id attribute that accepts only numbers should only display fields that return numeric values.
• args (object): Defines the source arguments that are applied when a user selects the field from the dropdown.

This is an example that can be tried directly in the console from the Block Editor:

wp.blocks.registerBlockBindingsSource({
	name: 'state-word/haikus',
	label: 'Haikus',
	useContext: [ 'postId', 'postType' ],
	getValues: ( { bindings } ) => {

	        // this getValues assumes you're on a paragraph
		if ( bindings.content?.args?.haiku === 'one' ) {
			return {
				content:
					'Six point nine arrives,\nBlock bindings bloom like spring flowers,\nEditors rejoice.',
			};
		}
		if ( bindings.content?.args?.haiku === 'two' ) {
			return {
				content:
					'New features unfold,\nPatterns dance with dynamic grace,\nWordPress dreams take flight.',
			};
		}
		if ( bindings.content?.args?.haiku === 'three' ) {
			return {
				content:
					"December's gift shines,\nSix nine brings the future near,\nCreators build more.",
			};
		}
		return {
			content: bindings.content,
		};
	},
	
	getFieldsList() {
		return [
			{
				label: 'First Haiku', 
				type: 'string',
				args: {
					haiku: 'one',
				},
			},
			{
				label: 'Second Haiku', 
				type: 'string',
				args: {
					haiku: 'two',
				},
			},
			{
				label: 'Third Haiku', 
				type: 'string',
				args: {
					haiku: 'three',
				},
			},
		];
	},
} );

After executing the code above, when inserting a paragraph, a new UI selector for the Block Binding should be available for the content attribute of the paragraph.

Additional Information

More information can be found on the related tickets, changesets, and pull requests:

• TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticketticket Created for both bug reports and feature development on the bug tracker.: #64030
• Changeset: [60807]
• gutenberg repository pull request: PR-71820
• gutenberg pull request the idea originated from: PR-70975

Props: @bernhard-reiter and @cbravobernal for implementation. @juanmaguitar for peer review and providing examples.

#6-9, #block-bindings, #dev-notes, #dev-notes-6-9