Make duotone support compatible with enhanced pagination

[luisherranz]

What?

Partial fix for #55230.

This fix makes the duotone compatible with the enhanced pagination by making sure that the CSS is always on the page, even when the posts have no featured image. It also prevents the duotone from interfering with other blocks using wp_unique_id.

Why?

With the current implementation of enhanced pagination, we are still not detecting the CSS corresponding to each block. Therefore, for the enhanced pagination to work correctly, the CSS of the blocks present in the Post Template must be stable on all pages.

The featured image block can contain a duotone, but the duotone CSS is only inlined when the block is not empty. As posts can have or not have a featured image, if all posts on one page do not have a featured image, the duotone CSS will not load, and when you paginate, the CSS will not be applied to the posts that do have a featured image.

In addition, some duotone settings use the wp_unique_id, and as it is a conditional use, this can break the stability of the rest of the blocks that use wp_unique_id causing another series of problems like those described in #55230.

How?

Simply by making the duotone CSS render even when the block is empty. This seems to be the normal behavior of other types of block supports, because the duotone, according to my tests, is the only one that has this problem. This means that on some occasions, we will inline the CSS unnecessarily, for example, in a template that renders a post without a featured image. But we can add this optimization back (and even add it in other block supports) once the enhanced pagination is able to detect the CSS corresponding to each block.

Testing Instructions

• Create multiple posts so you can paginate with the Query block.
• Make it so that on the first page of the Query block, none of the posts have featured images.
• Make it so that on the second page of the Query block, at least one post has a featured image.
• Add a duotone to the featured image.
• Enable the enhanced pagination setting.
• Check that the duotone works fine when you paginate.
• Repeat with different types of duotone: presets, CSS, custom, global styles…

Screenshots or screencast

Before:

Screen.Capture.on.2023-10-17.at.12-15-05.mov

After:

Screen.Capture.on.2023-10-17.at.12-14-03.mp4

[github-actions]

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/class-wp-duotone-gutenberg.php

[github-actions]

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

• [Flaky Test] should insert elements from multiple completers in a single block #47916 in /test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js

[tellthemachines]

Thanks for the PR! I'm afraid this fix isn't quite working for me. Not quite sure why, but it seems the duotone classnames can still vary across pages. In my local, I have pagination set to 4 items per page; on the first page there's only one featured image, and on the second page all 4 posts have it. One of the posts on the second page has a classname for which the style isn't being output:

It might be that we need a similar logic to the layout fix here?

[luisherranz]

Can you share the exact steps to reproduce that issue? Like the exact configuration of blocks, their hierarchy and the type of duotone (preset, css, custom or global).

[tellthemachines]

Can you share the exact steps to reproduce that issue? Like the exact configuration of blocks, their hierarchy and the type of duotone (preset, css, custom or global).

Sure!

Here's the template markup

<!-- wp:query {"queryId":20,"query":{"perPage":4,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"enhancedPagination":true,"layout":{"type":"constrained"}} -->
<div class="wp-block-query"><!-- wp:post-template {"layout":{"type":"grid","columnCount":3}} -->
<!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide"><!-- wp:post-title {"isLink":true} /-->

<!-- wp:post-featured-image {"isLink":true,"align":"wide","style":{"color":{"duotone":["#5b0d73","rgb(252, 254, 124)"]}}} /-->

<!-- wp:post-excerpt {"moreText":"\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e"} /--></div>
<!-- /wp:group -->

<!-- wp:separator {"opacity":"css"} -->
<hr class="wp-block-separator has-css-opacity"/>
<!-- /wp:separator -->

<!-- wp:post-date /-->
<!-- /wp:post-template -->

<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"center"}} -->
<!-- wp:query-pagination-previous /-->

<!-- wp:query-pagination-numbers /-->

<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination --></div>
<!-- /wp:query -->

<!-- wp:gallery {"linkTo":"none"} -->
<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":160,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="http://localhost:8888/wp-content/uploads/2023/10/PXL_20230428_121033487-1024x768.jpg" alt="" class="wp-image-160"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":75,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="http://localhost:8888/wp-content/uploads/2023/09/tumblr_ef4d6c9edbff0723397fd2bf21103b2d_c3a297fd_1280-1024x768.jpg" alt="" class="wp-image-75"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":52,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="http://localhost:8888/wp-content/uploads/2023/09/tumblr_13f0f7a77e8cf2cb694fc5f3e38543c9_8cd79083_540.jpg" alt="" class="wp-image-52"/></figure>
<!-- /wp:image --></figure>
<!-- /wp:gallery -->

I'm using TT3 theme with the Pilgrimage style variation, that uses a default duotone filter for all images. On top of that, I customised the Featured Image block to use one of the preset duotone filters.

Note that the template only contains the Query and a Gallery block. If I remove the Gallery the bug persists, except that funnily enough, on the second posts page the image that doesn't get the correct duotone preset now shows with no duotone filter at all (instead of showing with the default duotone from the theme variation).

Hope this helps!

[luisherranz]

Thanks for the details, but I'm still not able to reproduce it.

I've made a video just in case it helps to understand if I'm missing something.

https://www.loom.com/share/6778b34d888547a482d3bb2bbc7e3310

[tellthemachines]

Oh whoops sorry, turns out I wasn't using a preset filter! As the markup for Featured Image shows: <!-- wp:post-featured-image {"isLink":true,"align":"wide","style":{"color":{"duotone":["#5b0d73","rgb(252, 254, 124)"]}}} /-->. The rest of the steps on your video are correct.

I reset styles on my theme and tried to follow the same steps and am no longer able to reproduce the issue so I guess let's go with this solution and revisit later if the bug pops up again 🤷

[luisherranz]

Ok, thanks. I'll merge it then, and I'll do the backport 🙂

[SiobhyB]

Cherry-picked to the 6.4 branch in 687cb22.

[cbravobernal]

Backport: WordPress/wordpress-develop#5540

[getdave]

✅ I updated the PHP Sync Tracking Issue for WP 6.5 to note this PR does not require a backport for WP 6.5.