Simplify the block bindings HTML replacement logic

[santosguillamot]

Gutenberg PRs:

• ​https://github.com/WordPress/gutenberg/pull/61236
• ​https://github.com/WordPress/gutenberg/pull/61660

Proposal to 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.

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.

Trac ticket: 61351

Backport of the following PRs: ​#61236 and ​#61660

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

Apart from that, it removes some extra breaks that are not needed.

## 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'	   => 'default value',
   	)
   );
   

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:

   <p>Original content</p>
   
   

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.

[petitphp]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/6712

Environment

• OS: macOS 13.6
• Web Server: nginx/1.25.3
• PHP: 8.2.18
• WordPress: 6.6-alpha-57778-src
• Browser: Firefox 127.0b8
• Theme: Twenty Twenty-Four
• Active Plugins: None

Actual Results

• ✅ Paragraph content was successfully replace by the binding in the editor and on the frontend.
• ✅ Heading content was successfully replace by the binding in the editor and on the frontend.
• ✅ Button content was successfully replace by the binding in the editor and on the frontend.

Additional Notes

HTML content use to test the patch :

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

<!-- wp:heading {"metadata":{"bindings":{"content":{"source":"core/post-meta","args":{"key":"text_custom_field"}}}}} -->
<h2 class="wp-block-heading">Original content</h2>
<!-- /wp:heading -->

<!-- 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" href="https://wordpress.org/">Original content</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

Supplemental Artifacts

See attachments

[petitphp]

blocks binding applied in the editor

[petitphp]

blocks binding applied on the frontend

[petitphp]

blocks binding with custom value

[audrasjb]

Alright, looks like we're good to go with the proposed patch. Self assigning for commit.

[audrasjb]

In 58298:

Editor: Simplify the block bindings HTML replacement logic until the HTML API is ready.

This changeset modifies 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. The previous logic was too complex because the HTML API does not support CSS selectors yet and it does not have an official way to modify the inner HTML. This made 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, it is better for now to keep a simple hardcoded version that is easier to understand and iterate on.

Props santosguillamot, gziolo, petitphp.
Fixes #61351.

committed in https://core.trac.wordpress.org/changeset/58298

[audrasjb]

In 58398:

HTML API: Revert using regex in block bindings HTML replacement logic.

This changeset reverts part of the changes made in [58298] to avoid using regex that can cause potential bugs. It is indeed safer to revert these changes for now and do the refactoring once the HTML API supports CSS selectors and provides a way to set inner content.

It also adds a unit test to cover the regression experienced in ​https://github.com/WordPress/gutenberg/issues/62347.

Follow-up to [58298].

Props santosguillamot, gziolo.
Fixes #61385.
See #61351.