Context Navigation

← Previous Ticket
Next Ticket →

#61351 closed enhancement (fixed)

Simplify the block bindings HTML replacement logic

Reported by:	santosguillamot	Owned by:	audrasjb
Priority:	normal	Milestone:	6.6
Component:	Editor	Version:	6.5
Severity:	normal	Keywords:	has-patch commit
Cc:		Focuses:

Description

Gutenberg PRs:

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.

Attachments (3)

ticket_61351_editor.png (47.5 KB ) - added by petitphp 2 years ago.: blocks binding applied in the editor
ticket_61351_frontend.png (68.0 KB ) - added by petitphp 2 years ago.: blocks binding applied on the frontend
ticket_61351_frontend_custom_value.png (69.3 KB ) - added by petitphp 2 years ago.: blocks binding with custom value

Download all attachments as: .zip

Change History (10)

This ticket was mentioned in PR #6712 on WordPress/wordpress-develop by @santosguillamot.

2 years ago #1

Keywords has-patch added

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

register_meta(
	'post',
	'text_custom_field',
	array(
		'show_in_rest' => true,
		'single'       => true,
		'type'         => 'string',
		'default'	   => 'default value',
	)
);

Go to a page and insert a paragraph block.
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>
```
Save the page and check that in the frontend, the text defined in the custom field is used.
Repeat the process for heading, and button blocks.

#2 @gziolo
2 years ago

Component General → Editor
Keywords commit added
Milestone Awaiting Review → 6.6
Version → 6.5

#3 @petitphp
2 years ago

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

Last edited 2 years ago by petitphp (previous) (diff)

@petitphp
2 years ago

Attachment ticket_61351_editor.png added

blocks binding applied in the editor

@petitphp
2 years ago

Attachment ticket_61351_frontend.png added

blocks binding applied on the frontend

@petitphp
2 years ago

Attachment ticket_61351_frontend_custom_value.png added

blocks binding with custom value

#4 @audrasjb
2 years ago

Owner set to audrasjb
Status new → accepted

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

#5 @audrasjb
2 years ago

Resolution → fixed
Status accepted → closed

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.

@audrasjb commented on PR #6712:

2 years ago #6

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

#7 @audrasjb
2 years ago

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.

Note: See TracTickets for help on using tickets.

Download in other formats:

Make WordPress Core

Context Navigation

#61351 closed enhancement (fixed)

Simplify the block bindings HTML replacement logic

Description

Attachments (3)

Change History (10)

This ticket was mentioned in ​PR #6712 on ​WordPress/wordpress-develop by ​@santosguillamot. 2 years ago #1

#2 @gziolo 2 years ago

#3 @petitphp 2 years ago

Test Report

Environment

Actual Results

Additional Notes

Supplemental Artifacts

@petitphp 2 years ago

@petitphp 2 years ago

@petitphp 2 years ago

#4 @audrasjb 2 years ago

#5 @audrasjb 2 years ago

​@audrasjb commented on ​PR #6712: 2 years ago #6

#7 @audrasjb 2 years ago

Download in other formats:

This ticket was mentioned in PR #6712 on WordPress/wordpress-develop by @santosguillamot.

2 years ago #1

#2 @gziolo
2 years ago

#3 @petitphp
2 years ago

@petitphp
2 years ago

@petitphp
2 years ago

@petitphp
2 years ago

#4 @audrasjb
2 years ago

#5 @audrasjb
2 years ago

@audrasjb commented on PR #6712:

2 years ago #6

#7 @audrasjb
2 years ago