Block Bindings: Backport block bindings refactor from WordPress core

[SantosGuillamot]

What?

In this pull request, I'm moving the changes made in this PR from WordPress core.

Why?

To keep both codebases in sync and implement the improvements made there.

How?

Mostly copying and pasting and adapting the few things needed by Gutenberg.

Testing Instructions

Ensure that the existing bindings keep working as expected:

0. Register a new custom field however you prefer. You can use a snippet similar to this:

register_meta(
	'post',
	'text_custom_field',
	array(
		'show_in_rest' => true,
		'single'       => true,
		'type'         => 'string',
		'default'	   => 'This is the content of the text custom field',
	)
);
register_meta(
	'post',
	'url_custom_field',
	array(
		'show_in_rest' => true,
		'single'       => true,
		'type'         => 'string',
		'default'	   => 'https://wpmovies.dev/wp-content/uploads/2023/04/goncharov-poster-original-1-682x1024.jpeg',
	)
);

In a page

Test paragraph

1. Add a paragraph with the content connected to a custom field:

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

2. Add a paragraph without any bindings.
3. Check that the paragraph with the bindings became non-editable.
4. Check that the paragraph shows the content of the custom field.
5. Check that the normal paragraph works as expected.
6. Go to the frontend and check that the value of the custom field is shown there.

Test heading

Repeat the paragraph test but using a heading.

Test button

1. Add a button with the text connected to a custom field.
2. Add another button with the URL connected to a custom field.
3. Add a button with the text and the URL connected to custom fields.

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"metadata":{"bindings":{"text":{"source":"core/post-meta","args":{"key":"text_custom_field"}}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">TEXT</a></div>
<!-- /wp:button -->

<!-- wp:button {"metadata":{"bindings":{"url":{"source":"core/post-meta","args":{"key":"url_custom_field"}}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://wpmovies.dev/wp-content/uploads/2023/03/3bhkrj58Vtu7enYsRolD1fZdja1-683x1024.jpg">URL</a></div>
<!-- /wp:button -->

<!-- wp:button {"metadata":{"bindings":{"text":{"source":"core/post-meta","args":{"key":"text_custom_field"}},"url":{"source":"core/post-meta","args":{"key":"url_custom_field"}}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://wpmovies.dev/wp-content/uploads/2023/03/3bhkrj58Vtu7enYsRolD1fZdja1-683x1024.jpg">TEXT</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

4. Check that for the buttons with the text connected, they are not editable and they show the content of the custom field.
5. Check that for the buttons with the URL connected, the buttons to change the URL disappear from the UI.
6. Check that everything works in the frontend.

Test image

1. Add an image with the URL connected to a custom field.
2. Add an image with the alt attribute connected to a custom field.
3. Add an image with the title attribute connected to a custom field.
4. Add an image with more than one connection.

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Image url and alt connected</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":134,"sizeSlug":"large","linkDestination":"none","metadata":{"bindings":{"url":{"source":"core/post-meta","args":{"key":"page_url_custom_field"}},"alt":{"source":"core/post-meta","args":{"key":"page_text_custom_field"}}}}} -->
<figure class="wp-block-image size-large"><img src="https://wpmovies.dev/wp-content/uploads/2023/03/3bhkrj58Vtu7enYsRolD1fZdja1-683x1024.jpg" alt="Content of the page_text_custom_field" class="wp-image-134" title="Content of the PAGE text custom field"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Alt connected</h3>
<!-- /wp:heading -->

<!-- wp:image {"sizeSlug":"large","linkDestination":"none","metadata":{"bindings":{"alt":{"source":"core/post-meta","args":{"key":"page_text_custom_field"}}}}} -->
<figure class="wp-block-image size-large"><img src="https://wpmovies.dev/wp-content/uploads/2023/04/q6y0Go1tsGEsmtFryDOJo3dEmqu-683x1024.jpg" alt="Content of the page_text_custom_field" title=""/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Nothing connected</h3>
<!-- /wp:heading -->

<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://wpmovies.dev/wp-content/uploads/2023/04/q6y0Go1tsGEsmtFryDOJo3dEmqu-683x1024.jpg" alt=""/></figure>
<!-- /wp:image -->

5. For the images with the URL connected, check that the related buttons to link an image have disappeared and the image shows the URL from the custom field.
6. For the images with the alt/title connected, check that, in the right sidebar, they are disabled. Showing the value of the custom field instead and a message saying it is connected to custom fields.

In a template

Go to a page template, for example, and repeat the process. In this case, the blocks can't show the value of the custom fields because it depends on each page. They should show a placeholder instead.

Test pattern syncing overrides

1. Go to the Site Editor -> Patterns -> Create new synced pattern.
2. Add a paragraph, go to the Advanced section, and enable "Allow instance overrides".
3. Add a heading, go to the Advanced section, and enable "Allow instance overrides".
4. Add an image block, upload or select any media, go to the Advanced section, and enable "Allow instance overrides".
5. Add a button block, go to the Advanced section, and enable "Allow instance overrides".
6. Go to a page an insert the new pattern.
7. Modify the values of the blocks.
8. Check that the updated values are reflected in the frontend

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core SVN

If you're a Core Committer, use this list when committing to wordpress-develop in SVN:

Props: santosguillamot, czapla.

GitHub Merge commits

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: SantosGuillamot <[email protected]>
Co-authored-by: michalczaplinski <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress.

If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged.

If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack.

Thank you! ❤️

View changed files

❔ lib/compat/wordpress-6.5/block-bindings/block-bindings.php
❔ lib/compat/wordpress-6.5/block-bindings/class-wp-block-bindings-registry.php
❔ lib/compat/wordpress-6.5/blocks.php
❔ lib/load.php
❔ lib/compat/wordpress-6.5/block-bindings/pattern-overrides.php
❔ lib/compat/wordpress-6.5/block-bindings/post-meta.php

[michalczaplinski]

I would also add this on the WP_Block_Bindings_Registry::register() method

[SantosGuillamot]

Done in this commit: link.

[michalczaplinski]

Here
we added a check with isset() but I think empty() is even more appropriate
(like you did). Let's remember to update it in Core

[SantosGuillamot]

It was included in this backport: link. From what I can see, it seems to be already in core: link.

[michalczaplinski]

Just some minor comments (non-blocking).

Looks good to me overall! 👍

[SantosGuillamot]

I also took the opportunity to not escape the attribute passed to $processor->set_attribute() as discussed here.