Block Bindings: Adapt block bindings to wordpress code latest changes

[SantosGuillamot]

What?

This pull request brings the latest changes included in WordPress core related to block bindings:

• Add Block Bindings API helpers.
• Add block bindings registry class.

Why?

We need the block bindings API to follow the same format and make it compatible in the Gutenberg plugin.

How?

I basically copied and paste the code from those PRs and make minor modifications to adapt it for 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]

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/class-wp-block-bindings-registry.php
❔ lib/compat/wordpress-6.5/block-bindings/block-bindings.php
❔ lib/compat/wordpress-6.5/block-bindings/sources/pattern.php
❔ lib/compat/wordpress-6.5/block-bindings/sources/post-meta.php
❔ lib/compat/wordpress-6.5/blocks.php
❔ lib/load.php

[github-actions]

Flaky tests detected in 9587798.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7697424598
📝 Reported issues:

• [Flaky Test] directives inside islands should not be hydrated twice #58332 in /test/e2e/specs/interactivity/tovdom-islands.spec.ts

[gziolo]

Code changes look good! I haven’t tested, but it would be great to do some additional rounds of verification with trunk after landing.

[michalczaplinski]

Looks good to me code-wise!

I've tested it for all the blocks and found no issues.

I also tested using trunk of wordpress-develop. No issues either 👍 .

[cbravobernal]

I just cherry-picked this PR to the release/17.6 branch to get it included in the next release: 6042c93