Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Block Bindings: Add support to image caption attribute in block bindings #61255

Open
wants to merge 39 commits into
base: trunk
Choose a base branch
from

Conversation

SantosGuillamot
Copy link
Contributor

@SantosGuillamot SantosGuillamot commented Apr 30, 2024

What?

Add support for the image caption attribute in block bindings.

Why?

There is an issue caused by this: #62287.

How?

These are the main changes made to the pull request:

Change the core bindings logic
The core pull request adds the logic to support caption in the bindings replacement logic. Right now, it uses an anonymous class simulating set_inner_text until the HTML API provides a similar method. It is done this way to avoid using regex.

Change the image render logic
This pull request changes the image render logic to cover two use cases:

  • Remove the figcaption element when it exists, and the binding value is empty.
  • Add the figcaption element when it doesn't exist, and the binding value is not empty.

This is done again creating an anonymous class with a couple of methods until this can be easily done with HTML API core code. It is done this way to avoid using regex.

Change the compat folder for versions previous to 6.5
Apart from that, this pull request adapts the code that runs when a WordPress version below 6.5 is used. They look like big changes, but most of them are just code reorganization. It covers:

  • Copy the replacement code used in core.
  • Reorganize the code to abstract gutenberg_is_valid_block_for_block_bindings and gutenberg_is_valid_block_binding.
  • Create a new render_block_data filter to modify the attributes with the binding value. This is done in core from 6.5, but there wasn't an equivalent in Gutenberg compat, and it is needed for this use case.

Testing Instructions

Keep in mind that in order to test it you need the code from this core pull request apart from this one.

Mainly, three scenarios need to be tested in three different environments:

Scenarios

  1. An image with existing figcaption is replaced with the pattern overrides value.
  2. An image without figcaption creates a figcaption when provided by pattern overrides.
  3. An image with existing figcaption is removed when the pattern overrides value is empty.

Enviroments

  • Test with the branch from this core pull request.
  • Test with 6.5 branch in core.
  • Test with 6.4 branch in core.

How to test it

Best way to test it, after having a local environment with the relevant Gutenberg and core branches:

  1. Go to a page and add a row with three images: One with a figcaption that will be replaced, another one without figcaption, and other with a caption that will be removed. You can use this snippet:
<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:image {"width":"126px","height":"auto","sizeSlug":"large","metadata":{"bindings":{"__default":{"source":"core/pattern-overrides"}},"name":"Bulbasur Override"}} -->
<figure class="wp-block-image size-large is-resized"><img src="https://img.pokemondb.net/artwork/large/bulbasaur.jpg" alt="" style="width:126px;height:auto"/><figcaption class="wp-element-caption">Replace</figcaption></figure>
<!-- /wp:image -->

<!-- wp:image {"width":"107px","height":"auto","sizeSlug":"large","metadata":{"bindings":{"__default":{"source":"core/pattern-overrides"}},"name":"Charmander Override"}} -->
<figure class="wp-block-image size-large is-resized"><img src="https://img.pokemondb.net/artwork/large/charmander.jpg" alt="" style="width:107px;height:auto"/></figure>
<!-- /wp:image -->

<!-- wp:image {"width":"118px","height":"auto","sizeSlug":"large","metadata":{"bindings":{"__default":{"source":"core/pattern-overrides"}},"name":"Squirtle Override"}} -->
<figure class="wp-block-image size-large is-resized"><img src="https://img.pokemondb.net/artwork/large/squirtle.jpg" alt="" style="width:118px;height:auto"/><figcaption class="wp-element-caption">Remove</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
  1. Click on the options and select create pattern, and give it a name.
  2. Change the name of the first caption to whatever you want. "Bulbasur", for example.
  3. Add a caption to the second image. "Charmander", for example.
  4. Remove the caption of the third image.
  5. Save and check the frontend shows the expected results.

Screenshot 2024-06-20 at 18 09 50

  1. Switch core branches to ensure it works in all the scenarios.

Issues before this pull request

Before.supporting.caption.mp4

As can be seen in the video:

  • when you have a synced pattern with an image without caption, you add it to a page, and replace it with an image with caption, the caption is not added and there is no way to add it.
  • when you have a synced pattern with an image with caption, you add it to a page, and replace it with an image without caption, the original caption can't be removed.

Issues fixed after this pull request

After.caption.support.mp4

As can be seen in the video:

  • when you have a synced pattern with an image without caption, you add it to a page, and replace it with an image with caption, the caption IS directly added.
  • when you have a synced pattern with an image with caption, you add it to a page, and replace it with an image without caption, the original caption CAN be removed. It is not removed by default, but that happens for all the images, not just pattern overrides: link.

Image caption can be replaced, added, or removed from the editor

Caption.demos.mp4

As can be seen in the video, the following scenarios are possible after this PR:

  • You can replace the caption of the original image.
  • You can add a new caption if the original image doesn't have one.
  • You can remove the caption of the original image.

Copy link

github-actions bot commented Apr 30, 2024

Size Change: +10 B (0%)

Total Size: 1.75 MB

Filename Size Change
build/block-editor/index.min.js 252 kB -1 B (0%)
build/block-library/index.min.js 219 kB +26 B (+0.01%)
build/patterns/index.min.js 7.33 kB -15 B (-0.2%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 951 B
build/annotations/index.min.js 2.26 kB
build/api-fetch/index.min.js 2.31 kB
build/autop/index.min.js 2.12 kB
build/blob/index.min.js 579 B
build/block-directory/index.min.js 7.31 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/content-rtl.css 4.58 kB
build/block-editor/content.css 4.58 kB
build/block-editor/default-editor-styles-rtl.css 394 B
build/block-editor/default-editor-styles.css 394 B
build/block-editor/style-rtl.css 15.7 kB
build/block-editor/style.css 15.7 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 90 B
build/block-library/blocks/archives/style.css 90 B
build/block-library/blocks/audio/editor-rtl.css 149 B
build/block-library/blocks/audio/editor.css 151 B
build/block-library/blocks/audio/style-rtl.css 132 B
build/block-library/blocks/audio/style.css 132 B
build/block-library/blocks/audio/theme-rtl.css 134 B
build/block-library/blocks/audio/theme.css 134 B
build/block-library/blocks/avatar/editor-rtl.css 115 B
build/block-library/blocks/avatar/editor.css 115 B
build/block-library/blocks/avatar/style-rtl.css 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/button/editor-rtl.css 310 B
build/block-library/blocks/button/editor.css 310 B
build/block-library/blocks/button/style-rtl.css 538 B
build/block-library/blocks/button/style.css 538 B
build/block-library/blocks/buttons/editor-rtl.css 336 B
build/block-library/blocks/buttons/editor.css 336 B
build/block-library/blocks/buttons/style-rtl.css 328 B
build/block-library/blocks/buttons/style.css 328 B
build/block-library/blocks/calendar/style-rtl.css 240 B
build/block-library/blocks/calendar/style.css 240 B
build/block-library/blocks/categories/editor-rtl.css 113 B
build/block-library/blocks/categories/editor.css 112 B
build/block-library/blocks/categories/style-rtl.css 124 B
build/block-library/blocks/categories/style.css 124 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 122 B
build/block-library/blocks/code/theme.css 122 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 420 B
build/block-library/blocks/columns/style.css 420 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 124 B
build/block-library/blocks/comment-author-avatar/editor.css 124 B
build/block-library/blocks/comment-content/style-rtl.css 90 B
build/block-library/blocks/comment-content/style.css 90 B
build/block-library/blocks/comment-template/style-rtl.css 200 B
build/block-library/blocks/comment-template/style.css 199 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 221 B
build/block-library/blocks/comments-pagination/editor.css 211 B
build/block-library/blocks/comments-pagination/style-rtl.css 234 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 832 B
build/block-library/blocks/comments/editor.css 832 B
build/block-library/blocks/comments/style-rtl.css 632 B
build/block-library/blocks/comments/style.css 631 B
build/block-library/blocks/cover/editor-rtl.css 668 B
build/block-library/blocks/cover/editor.css 669 B
build/block-library/blocks/cover/style-rtl.css 1.62 kB
build/block-library/blocks/cover/style.css 1.6 kB
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 86 B
build/block-library/blocks/details/style.css 86 B
build/block-library/blocks/embed/editor-rtl.css 314 B
build/block-library/blocks/embed/editor.css 314 B
build/block-library/blocks/embed/style-rtl.css 419 B
build/block-library/blocks/embed/style.css 419 B
build/block-library/blocks/embed/theme-rtl.css 133 B
build/block-library/blocks/embed/theme.css 133 B
build/block-library/blocks/file/editor-rtl.css 326 B
build/block-library/blocks/file/editor.css 326 B
build/block-library/blocks/file/style-rtl.css 278 B
build/block-library/blocks/file/style.css 279 B
build/block-library/blocks/file/view.min.js 324 B
build/block-library/blocks/footnotes/style-rtl.css 198 B
build/block-library/blocks/footnotes/style.css 197 B
build/block-library/blocks/form-input/editor-rtl.css 229 B
build/block-library/blocks/form-input/editor.css 229 B
build/block-library/blocks/form-input/style-rtl.css 342 B
build/block-library/blocks/form-input/style.css 342 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 344 B
build/block-library/blocks/form-submission-notification/editor.css 341 B
build/block-library/blocks/form-submit-button/style-rtl.css 69 B
build/block-library/blocks/form-submit-button/style.css 69 B
build/block-library/blocks/form/view.min.js 470 B
build/block-library/blocks/freeform/editor-rtl.css 2.6 kB
build/block-library/blocks/freeform/editor.css 2.6 kB
build/block-library/blocks/gallery/editor-rtl.css 958 B
build/block-library/blocks/gallery/editor.css 962 B
build/block-library/blocks/gallery/style-rtl.css 1.71 kB
build/block-library/blocks/gallery/style.css 1.71 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 B
build/block-library/blocks/group/editor-rtl.css 402 B
build/block-library/blocks/group/editor.css 402 B
build/block-library/blocks/group/style-rtl.css 103 B
build/block-library/blocks/group/style.css 103 B
build/block-library/blocks/group/theme-rtl.css 79 B
build/block-library/blocks/group/theme.css 79 B
build/block-library/blocks/heading/style-rtl.css 188 B
build/block-library/blocks/heading/style.css 188 B
build/block-library/blocks/html/editor-rtl.css 346 B
build/block-library/blocks/html/editor.css 347 B
build/block-library/blocks/image/editor-rtl.css 845 B
build/block-library/blocks/image/editor.css 843 B
build/block-library/blocks/image/style-rtl.css 1.54 kB
build/block-library/blocks/image/style.css 1.54 kB
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/image/view.min.js 1.54 kB
build/block-library/blocks/latest-comments/style-rtl.css 355 B
build/block-library/blocks/latest-comments/style.css 354 B
build/block-library/blocks/latest-posts/editor-rtl.css 204 B
build/block-library/blocks/latest-posts/editor.css 204 B
build/block-library/blocks/latest-posts/style-rtl.css 509 B
build/block-library/blocks/latest-posts/style.css 510 B
build/block-library/blocks/list/style-rtl.css 104 B
build/block-library/blocks/list/style.css 104 B
build/block-library/blocks/media-text/editor-rtl.css 304 B
build/block-library/blocks/media-text/editor.css 303 B
build/block-library/blocks/media-text/style-rtl.css 516 B
build/block-library/blocks/media-text/style.css 515 B
build/block-library/blocks/more/editor-rtl.css 427 B
build/block-library/blocks/more/editor.css 427 B
build/block-library/blocks/navigation-link/editor-rtl.css 663 B
build/block-library/blocks/navigation-link/editor.css 664 B
build/block-library/blocks/navigation-link/style-rtl.css 192 B
build/block-library/blocks/navigation-link/style.css 191 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 295 B
build/block-library/blocks/navigation-submenu/editor.css 294 B
build/block-library/blocks/navigation/editor-rtl.css 2.2 kB
build/block-library/blocks/navigation/editor.css 2.21 kB
build/block-library/blocks/navigation/style-rtl.css 2.26 kB
build/block-library/blocks/navigation/style.css 2.25 kB
build/block-library/blocks/navigation/view.min.js 1.03 kB
build/block-library/blocks/nextpage/editor-rtl.css 392 B
build/block-library/blocks/nextpage/editor.css 392 B
build/block-library/blocks/page-list/editor-rtl.css 378 B
build/block-library/blocks/page-list/editor.css 378 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 236 B
build/block-library/blocks/paragraph/editor.css 236 B
build/block-library/blocks/paragraph/style-rtl.css 341 B
build/block-library/blocks/paragraph/style.css 340 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 506 B
build/block-library/blocks/post-comments-form/style.css 506 B
build/block-library/blocks/post-content/editor-rtl.css 74 B
build/block-library/blocks/post-content/editor.css 74 B
build/block-library/blocks/post-date/style-rtl.css 62 B
build/block-library/blocks/post-date/style.css 62 B
build/block-library/blocks/post-excerpt/editor-rtl.css 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 729 B
build/block-library/blocks/post-featured-image/editor.css 726 B
build/block-library/blocks/post-featured-image/style-rtl.css 341 B
build/block-library/blocks/post-featured-image/style.css 341 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 399 B
build/block-library/blocks/post-template/style.css 398 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-time-to-read/style-rtl.css 70 B
build/block-library/blocks/post-time-to-read/style.css 70 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 125 B
build/block-library/blocks/preformatted/style.css 125 B
build/block-library/blocks/pullquote/editor-rtl.css 134 B
build/block-library/blocks/pullquote/editor.css 134 B
build/block-library/blocks/pullquote/style-rtl.css 342 B
build/block-library/blocks/pullquote/style.css 342 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 121 B
build/block-library/blocks/query-pagination-numbers/editor.css 118 B
build/block-library/blocks/query-pagination/editor-rtl.css 220 B
build/block-library/blocks/query-pagination/editor.css 208 B
build/block-library/blocks/query-pagination/style-rtl.css 287 B
build/block-library/blocks/query-pagination/style.css 283 B
build/block-library/blocks/query-title/style-rtl.css 64 B
build/block-library/blocks/query-title/style.css 64 B
build/block-library/blocks/query/editor-rtl.css 502 B
build/block-library/blocks/query/editor.css 502 B
build/block-library/blocks/query/view.min.js 958 B
build/block-library/blocks/quote/style-rtl.css 238 B
build/block-library/blocks/quote/style.css 238 B
build/block-library/blocks/quote/theme-rtl.css 221 B
build/block-library/blocks/quote/theme.css 225 B
build/block-library/blocks/read-more/style-rtl.css 138 B
build/block-library/blocks/read-more/style.css 138 B
build/block-library/blocks/rss/editor-rtl.css 101 B
build/block-library/blocks/rss/editor.css 101 B
build/block-library/blocks/rss/style-rtl.css 288 B
build/block-library/blocks/rss/style.css 287 B
build/block-library/blocks/search/editor-rtl.css 183 B
build/block-library/blocks/search/editor.css 183 B
build/block-library/blocks/search/style-rtl.css 672 B
build/block-library/blocks/search/style.css 671 B
build/block-library/blocks/search/theme-rtl.css 113 B
build/block-library/blocks/search/theme.css 113 B
build/block-library/blocks/search/view.min.js 475 B
build/block-library/blocks/separator/editor-rtl.css 100 B
build/block-library/blocks/separator/editor.css 100 B
build/block-library/blocks/separator/style-rtl.css 248 B
build/block-library/blocks/separator/style.css 248 B
build/block-library/blocks/separator/theme-rtl.css 195 B
build/block-library/blocks/separator/theme.css 195 B
build/block-library/blocks/shortcode/editor-rtl.css 286 B
build/block-library/blocks/shortcode/editor.css 286 B
build/block-library/blocks/site-logo/editor-rtl.css 806 B
build/block-library/blocks/site-logo/editor.css 803 B
build/block-library/blocks/site-logo/style-rtl.css 218 B
build/block-library/blocks/site-logo/style.css 218 B
build/block-library/blocks/site-tagline/editor-rtl.css 87 B
build/block-library/blocks/site-tagline/editor.css 87 B
build/block-library/blocks/site-title/editor-rtl.css 123 B
build/block-library/blocks/site-title/editor.css 123 B
build/block-library/blocks/site-title/style-rtl.css 71 B
build/block-library/blocks/site-title/style.css 71 B
build/block-library/blocks/social-link/editor-rtl.css 338 B
build/block-library/blocks/social-link/editor.css 338 B
build/block-library/blocks/social-links/editor-rtl.css 676 B
build/block-library/blocks/social-links/editor.css 675 B
build/block-library/blocks/social-links/style-rtl.css 1.5 kB
build/block-library/blocks/social-links/style.css 1.5 kB
build/block-library/blocks/spacer/editor-rtl.css 346 B
build/block-library/blocks/spacer/editor.css 346 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 394 B
build/block-library/blocks/table/editor.css 394 B
build/block-library/blocks/table/style-rtl.css 640 B
build/block-library/blocks/table/style.css 639 B
build/block-library/blocks/table/theme-rtl.css 152 B
build/block-library/blocks/table/theme.css 152 B
build/block-library/blocks/tag-cloud/style-rtl.css 266 B
build/block-library/blocks/tag-cloud/style.css 265 B
build/block-library/blocks/template-part/editor-rtl.css 393 B
build/block-library/blocks/template-part/editor.css 393 B
build/block-library/blocks/template-part/theme-rtl.css 113 B
build/block-library/blocks/template-part/theme.css 113 B
build/block-library/blocks/term-description/style-rtl.css 108 B
build/block-library/blocks/term-description/style.css 108 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 165 B
build/block-library/blocks/text-columns/style.css 165 B
build/block-library/blocks/verse/style-rtl.css 98 B
build/block-library/blocks/verse/style.css 98 B
build/block-library/blocks/video/editor-rtl.css 553 B
build/block-library/blocks/video/editor.css 554 B
build/block-library/blocks/video/style-rtl.css 192 B
build/block-library/blocks/video/style.css 192 B
build/block-library/blocks/video/theme-rtl.css 134 B
build/block-library/blocks/video/theme.css 134 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.1 kB
build/block-library/common.css 1.1 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 11.9 kB
build/block-library/editor.css 11.9 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/style-rtl.css 14.6 kB
build/block-library/style.css 14.6 kB
build/block-library/theme-rtl.css 702 B
build/block-library/theme.css 707 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 52.2 kB
build/commands/index.min.js 15.2 kB
build/commands/style-rtl.css 955 B
build/commands/style.css 952 B
build/components/index.min.js 223 kB
build/components/style-rtl.css 12.1 kB
build/components/style.css 12.1 kB
build/compose/index.min.js 12.9 kB
build/core-commands/index.min.js 2.77 kB
build/core-data/index.min.js 72.6 kB
build/customize-widgets/index.min.js 10.9 kB
build/customize-widgets/style-rtl.css 1.35 kB
build/customize-widgets/style.css 1.35 kB
build/data-controls/index.min.js 641 B
build/data/index.min.js 8.98 kB
build/date/index.min.js 18 kB
build/deprecated/index.min.js 458 B
build/dom-ready/index.min.js 325 B
build/dom/index.min.js 4.65 kB
build/edit-post/classic-rtl.css 578 B
build/edit-post/classic.css 580 B
build/edit-post/index.min.js 12.5 kB
build/edit-post/style-rtl.css 2.34 kB
build/edit-post/style.css 2.33 kB
build/edit-site/index.min.js 208 kB
build/edit-site/posts-rtl.css 6.54 kB
build/edit-site/posts.css 6.55 kB
build/edit-site/style-rtl.css 11.8 kB
build/edit-site/style.css 11.7 kB
build/edit-widgets/index.min.js 17.6 kB
build/edit-widgets/style-rtl.css 4.18 kB
build/edit-widgets/style.css 4.18 kB
build/editor/index.min.js 98.2 kB
build/editor/style-rtl.css 9.23 kB
build/editor/style.css 9.24 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 8.07 kB
build/format-library/style-rtl.css 494 B
build/format-library/style.css 493 B
build/hooks/index.min.js 1.54 kB
build/html-entities/index.min.js 445 B
build/i18n/index.min.js 3.58 kB
build/interactivity/debug.min.js 16.5 kB
build/interactivity/file.min.js 447 B
build/interactivity/image.min.js 1.68 kB
build/interactivity/index.min.js 13.4 kB
build/interactivity/navigation.min.js 1.16 kB
build/interactivity/query.min.js 742 B
build/interactivity/router.min.js 2.8 kB
build/interactivity/search.min.js 615 B
build/is-shallow-equal/index.min.js 526 B
build/keyboard-shortcuts/index.min.js 1.31 kB
build/keycodes/index.min.js 1.46 kB
build/list-reusable-blocks/index.min.js 2.17 kB
build/list-reusable-blocks/style-rtl.css 846 B
build/list-reusable-blocks/style.css 846 B
build/media-utils/index.min.js 2.92 kB
build/modules/importmap-polyfill.min.js 12.3 kB
build/notices/index.min.js 946 B
build/nux/index.min.js 1.58 kB
build/nux/style-rtl.css 749 B
build/nux/style.css 745 B
build/patterns/style-rtl.css 687 B
build/patterns/style.css 685 B
build/plugins/index.min.js 1.81 kB
build/preferences-persistence/index.min.js 2.06 kB
build/preferences/index.min.js 2.9 kB
build/preferences/style-rtl.css 578 B
build/preferences/style.css 578 B
build/primitives/index.min.js 829 B
build/priority-queue/index.min.js 1.54 kB
build/private-apis/index.min.js 1.01 kB
build/react-i18n/index.min.js 630 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 6.76 kB
build/redux-routine/index.min.js 2.69 kB
build/reusable-blocks/index.min.js 2.73 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.1 kB
build/router/index.min.js 1.96 kB
build/server-side-render/index.min.js 1.94 kB
build/shortcode/index.min.js 1.4 kB
build/style-engine/index.min.js 2.01 kB
build/token-list/index.min.js 581 B
build/url/index.min.js 3.85 kB
build/vendors/react-dom.min.js 42.8 kB
build/vendors/react-jsx-runtime.min.js 560 B
build/vendors/react.min.js 2.65 kB
build/viewport/index.min.js 965 B
build/warning/index.min.js 250 B
build/widgets/index.min.js 7.19 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.03 kB

compressed-size-action

@carolinan
Copy link
Contributor

Hi is this still planned for 6.6? Or is it blocked?

@carolinan
Copy link
Contributor

if it is not planned can you please remove it from the board?

@afercia
Copy link
Contributor

afercia commented Jun 5, 2024

See related #62287 and #59819

@SantosGuillamot
Copy link
Contributor Author

Unfortunately, it didn't make it in time for 6.6. We focused on other aspects related to the block bindings API, and the approach taken in this draft pull request would need to be discussed in detail. Additionally, after postponing it, we might be able to rely more on the HTML API.

I just removed it from the board.

@priethor
Copy link
Contributor

As Andrea points out, not supporting this results in bugs in Pattern Overrides, so it's fair to catalog this as a bugfix for 6.6 rather than an enhancement.

@priethor priethor added [Type] Bug An existing feature does not function as intended and removed [Type] Enhancement A suggestion for improvement. labels Jun 10, 2024
@SantosGuillamot
Copy link
Contributor Author

SantosGuillamot commented Jun 11, 2024

Okay, I will work on it during the beta phase then and try to support the image attributes to solve those issues. This is what I have in mind so far:

  • Logic to support caption without regex.
  • Logic to support link attributes without regex.
  • Make it work when the caption doesn’t exist, and it is added dynamically with bindings.
  • Make it work when the caption exists, and it is removed dynamically with bindings.
  • Make it work when the link doesn’t exist, and it is added dynamically with bindings.
  • Make it work when the link exists, and it is removed dynamically with bindings.
  • Allow/disallow editing in the UI as we are doing for the rest of the attributes.
  • Probably in a separate pull request, adapt the UI for pattern overrides.
  • We might need a backward compatibility render_block_data filter to manage the attributes properly.
  • Add some tests.

Apart from that, we are working on the compatibility code here, but these changes would also be needed in the core.

@SantosGuillamot SantosGuillamot force-pushed the add/support-all-image-attributes-in-block-bindings branch from 542b6f9 to 54f3eb1 Compare June 11, 2024 08:52
Copy link

github-actions bot commented Jun 11, 2024

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/blocks.php
❔ lib/compat/wordpress-6.6/blocks.php
❔ packages/block-library/src/image/index.php

Copy link

github-actions bot commented Jun 11, 2024

Flaky tests detected in 94e4020.
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/9468598992
📝 Reported issues:

@SantosGuillamot
Copy link
Contributor Author

I've been exploring the different options to cover the wanted use cases, and I am not sure which one is better. I am not convinced about either of them:

  1. Change the save.js HTML and always return the <a> wrapper and the <figcaption>.

Following a similar approach to this pull request, I tried to always return the link element wrapper and the figcaption and remove them in the render if they should be empty.

You can see the code here.

  1. Don't change the save.js and rebuild OR remove the HTML in the render.

Another approach could be keeping the save logic as it is and add logic to the render to handle both case:

  • Rebuild the HTML to include the figcaption or the link wrapper if the attributes are changed by bindings.
  • Remove the figcaption or the link wrapper if the value from bindings is empty.

I was testing it here, although it would also need the removal part.

Any opinions?


Apart from that, I started working on this branch to include these changes in core as well. Right now, the files we are modifying are just part of the compat folder for versions older than 6.5, where bindings in core didn't exist.

@talldan
Copy link
Contributor

talldan commented Jun 12, 2024

I've been exploring the different options to cover the wanted use cases, and I am not sure which one is better. I am not convinced about either of them

I personally prefer the first option, purely because it keeps the block responsible for the majority of the markup of the caption. With the second option the block bindings code is taking lots of responsibility for the block's html. I feel it's better if the bindings code is only lightly updating the html as much as possible.

BTW, I pushed a couple of commits, the first one updates another supported_attrs array that's in the codebase 😬

The second one allows for editing of captions in patterns. A similar change will probably also have to be made for the link, though I think it's good to focus on the caption first (and perhaps these changes can be split into two separate PRs?).

@cbravobernal
Copy link
Contributor

cbravobernal commented Jun 13, 2024

Change the save.js HTML and always return the <a> wrapper and the <figcaption>

Would this require to create a v9 in deprecated.js? As far as I remember, any markup change inside save.js requires a deprecation, so previous posts blocks won't crash on loading.

@cbravobernal
Copy link
Contributor

I got the caption working on the editor, but not in the frontend, I'll take a look at that:

Screenshot 2024-06-13 at 19 01 56

@talldan
Copy link
Contributor

talldan commented Jun 14, 2024

Would this require to create a v9 in deprecated.js? As far as I remember, any markup change inside save.js requires a deprecation, so previous posts blocks won't crash on loading.

That's a good question. It doesn't cause any noticeable issues when testing, but it looks like that's because the saved markup matches the existing latest deprecation for the image block, so it successfully upgrades. It does seem to work fine, but it might cause unexpected issues, so it would probably be best to add a new deprecation.

@SantosGuillamot SantosGuillamot changed the title Block Bindings: Add support to all content image and button attributes in block bindings Block Bindings: Add support to image caption attribute in block bindings Jun 17, 2024
@SantosGuillamot
Copy link
Contributor Author

SantosGuillamot commented Jun 17, 2024

I've been thinking more about this and made a few changes. These are some comments about them:

  • I've cleaned the pull request to only include caption, which seems to be the main issue here.
  • I agree that the changes should be made in core first, and just update the compat and the image rendering in this pull request. I've started a draft pull request for that: link. Both PRs should be tested together.
  • I've added some logic to cover the uses cases for the image render, without modifying the save.js file. To me, it seems a bit safer to handle it this way, because we aren't changing the way it works right now.
  • I'm using anonymous classes to extend the Tag Processor with some methods until the HTML API provides those by default. This way, regex aren't needed, it should be more reliable (if they are correct), and those methods remain private.
  • I've changed the title and description to reflect all these changes.

@SantosGuillamot SantosGuillamot force-pushed the add/support-all-image-attributes-in-block-bindings branch from 1b20b0c to f16e3e4 Compare June 17, 2024 08:03
@SantosGuillamot SantosGuillamot force-pushed the add/support-all-image-attributes-in-block-bindings branch from f4b229a to be4c4c2 Compare July 1, 2024 14:44
@ellatrix
Copy link
Member

ellatrix commented Jul 3, 2024

What is the long term plan here? Are we going to keep making exceptions for some blocks and some attributes? Imo, a more long term solution should be explored, for example templates in the block API, so the server knows how to serialise the block.

@SantosGuillamot
Copy link
Contributor Author

What is the long term plan here? Are we going to keep making exceptions for some blocks and some attributes?

The plan is to use the HTML API once it is ready to create an abstraction that works for all block attributes. The main functionalities missing are:

  • Support for CSS selectors.
  • A set_inner_html function or something similar.
  • A set_outer_html function or something similar.

Once that is in place, we should be able to create an abstraction that works for all use cases just by reading the type and selector of each block attribute.

@ellatrix
Copy link
Member

ellatrix commented Jul 3, 2024

@SantosGuillamot how does that solve adding or removing attributes?

@SantosGuillamot
Copy link
Contributor Author

how does that solve adding or removing attributes?

Oh, sorry. I thought you meant exceptions in the logic used to replace the HTML based on the block attributes: link. I assume you are talking about the changes we are making to the image render (or other blocks), right?

I totally agree that we should explore a long-term solution for that. To be honest, I don't have a clear idea how it could be solved, so any ideas are more than welcome. The initial plan was to fully explore potential paths before opening block bindings for more blocks.

templates in the block API

Could you elaborate more on what you mean by templates in the block API? I'd love to understand that better.

@ellatrix
Copy link
Member

ellatrix commented Jul 4, 2024

Oh, sorry. I thought you meant exceptions in the logic used to replace the HTML based on the block attributes: link. I assume you are talking about the changes we are making to the image render (or other blocks), right?

I'm talking about everything :)

Could you elaborate more on what you mean by templates in the block API? I'd love to understand that better.

Some sort of templating language that works both client and server side. Maybe something like what @youknowriad created a while ago. But we probably need logic in templates. Maybe something like Liquid? Or maybe Mustache is just enough for blocks.

@SantosGuillamot
Copy link
Contributor Author

SantosGuillamot commented Jul 5, 2024

Some sort of templating language that works both client and server side.

That would definitely help with this particular problem, and I'd love to see something like that in the future. If I am not mistaken, a templating language was also discussed at some point as a possibility while working on the Interactivity API. Maybe @luisherranz has some insights.

EDIT: Thinking about it a bit more, it could have other use cases and it seems a big topic. Maybe it deserves a separate issue/discussion to start gathering feedback?

@cbravobernal
Copy link
Contributor

Some sort of templating language that works both client and server side.

That would definitely help with this particular problem, and I'd love to see something like that in the future. If I am not mistaken, a templating language was also discussed at some point as a possibility while working on the Interactivity API. Maybe @luisherranz has some insights.

EDIT: Thinking about it a bit more, it could have other use cases and it seems a big topic. Maybe it deserves a separate issue/discussion to start gathering feedback?

It has indeed an issue from 5 years ago:
#14446

Copy link

github-actions bot commented Jul 5, 2024

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>
Co-authored-by: gziolo <gziolo@git.wordpress.org>
Co-authored-by: sirreal <jonsurrell@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: priethor <priethor@git.wordpress.org>
Co-authored-by: ellatrix <ellatrix@git.wordpress.org>

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

@luisherranz
Copy link
Member

Some sort of templating language that works both client and server side

Yes, we want to start experimenting with that 🙂

@gziolo
Copy link
Member

gziolo commented Jul 15, 2024

What is the long term plan here? Are we going to keep making exceptions for some blocks and some attributes? Imo, a more long term solution should be explored, for example templates in the block API, so the server knows how to serialise the block.

EDIT: Thinking about it a bit more, it could have other use cases and it seems a big topic. Maybe it deserves a separate issue/discussion to start gathering feedback?

Indeed, that deserves a better place to discuss all the details, as using any templating solution might not be straightforward with the currently existing extensibility model. There is a lot of nuances even in how the block editor injects additional class names and styles to the serialized HTML with block supports. If we were to use a templating system, we would have to ensure that hooks offered on the client, have a matching implementation on the server so the reconstructed HTML from attributes and the template wouldn't miss any details.

I also wanted to highlight the proposal from @dmsnell about HTML API templating: https://make.wordpress.org/core/2023/08/19/progress-report-html-api/#templating. Prototype: WordPress/wordpress-develop#5949. That's something that could be re-implemented in JavaScript. However, it's also a good reminder that conditions and loops are very important aspects here. Overall, it's a bigger topic that this PR only surfaces by trying to address the limitations on the current saving mechanism for static blocks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Buttons Affects the Buttons Block [Block] Image Affects the Image Block [Feature] Block bindings [Type] Bug An existing feature does not function as intended
Projects
No open projects
Status: 🏈 Punted to 6.7
Development

Successfully merging this pull request may close these issues.

10 participants