Make WordPress Core

Opened 7 weeks ago

Closed 7 weeks ago

Last modified 6 weeks ago

#61351 closed enhancement (fixed)

Simplify the block bindings HTML replacement logic

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

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 7 weeks ago.
blocks binding applied in the editor
ticket_61351_frontend.png (68.0 KB) - added by petitphp 7 weeks ago.
blocks binding applied on the frontend
ticket_61351_frontend_custom_value.png (69.3 KB) - added by petitphp 7 weeks 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.


7 weeks 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

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

#2 @gziolo
7 weeks ago

  • Component changed from General to Editor
  • Keywords commit added
  • Milestone changed from Awaiting Review to 6.6
  • Version set to 6.5

#3 @petitphp
7 weeks 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 7 weeks ago by petitphp (previous) (diff)

@petitphp
7 weeks ago

blocks binding applied in the editor

@petitphp
7 weeks ago

blocks binding applied on the frontend

@petitphp
7 weeks ago

blocks binding with custom value

#4 @audrasjb
7 weeks ago

  • Owner set to audrasjb
  • Status changed from new to accepted

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

#5 @audrasjb
7 weeks ago

  • Resolution set to fixed
  • Status changed from accepted to 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.

#7 @audrasjb
6 weeks 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.