Block Bindings: Simplify the HTML replacement logic until the HTML API is ready

[SantosGuillamot]

What?

Change the block bindings HTML replacement logic to use a hardcoded list of selectors based on the block and a regex to substitute the inner content.

Why?

The existing logic is too complex because the HTML API doesn't support CSS selectors yet and it doesn't have an official way to modify the inner HTML. This makes it difficult to understand, iterate on it and add new functionalities.

As it will be solved in the future once the HTML API is ready, I believe it is better to keep a simple hardcoded version that is easier to understand and iterate on.

How?

• Change the selector based on the supported blocks.
• Using a regex, replace the inner content.

Testing Instructions

0. Register a custom field in your site to test it. You can use a code snippet like this:

register_meta(
	'post',
	'text_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',
	)
);

1. Go to a page and insert a paragraph block.
2. Go to the Code editor and connect the paragraph to the custom field by adding the metadata bindings property. It should look something like this:

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

3. Save the page and check that in the frontend, the text defined in the custom field is used.
4. Repeat the process for heading, and button blocks.

[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.

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 <santosguillamot@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: cbravobernal <cbravobernal@git.wordpress.org>

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

[github-actions]

Flaky tests detected in a2d9f08.
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/8894082376
📝 Reported issues:

• [Flaky Test] Redirection after template creation #60678 in /test/e2e/specs/site-editor/site-editor-url-navigation.spec.js

[talldan]

I think a button block can also be a <button> element depending on the value of the tagName attribute.

[SantosGuillamot]

You're right it seems supported according to the attributes. Although I checked how that attribute works and I couldn't find a way to use a <button> instead of a link tag.

I added this commit to cover that possibility.

[cbravobernal]

Works as expected.

[cbravobernal]

Should we update it in wordpress-develop too?

[SantosGuillamot]

Should we update it in wordpress-develop too?

Yes, I plan to create a backport PR, but I wanted to wait to confirm this was the right approach. I'll do that.