Duotone filter selector does not apply when using Image block alignment

[sabernhardt]

Description

(reported earlier on Trac 59138)

Duotone filters seem to fail in any 'classic' theme when the image has an alignment class because the duotone classes are added to the figure element, and that is not the same as the .wp-block-image element in classic themes. The selector in block.json expects both classes to be on the same element.

.wp-duotone-cf2e2e-abb8c3-1.wp-block-image img,
.wp-duotone-cf2e2e-abb8c3-1.wp-block-image .components-placeholder {
  filter: url(#wp-duotone-cf2e2e-abb8c3-1);
}

Changing .wp-block-image to [class] in that line of the block JSON worked for me in the bundled themes (Twenty Ten to Twenty Twenty-Three), though I do not know if the .wp-block-image class was necessary somehow.

Step-by-step reproduction instructions

1. Activate a 'classic' theme such as Twenty Seventeen.
2. Create a new post.
3. Add an Image block.
4. Select one of the block's Alignment options (left, center or right).
5. Give duotone Highlight and Shadow colors to the block.
6. Preview the post on the front end.

Screenshots, screen recording, code snippet

Image blocks with each alignment option, on the front end, with Twenty Seventeen

Environment info

WordPress 6.3 and 6.3.1, without the Gutenberg plugin
Windows 10, with both Firefox and Chrome

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[sabernhardt]

When I activated Gutenberg 16.5.1, the styles did not print, so even unaligned image blocks did receive the duotone effect. (And after experiencing that in the post I created earlier, I again had no duotone with an unaligned image in a new post.)

[bph]

Seems to be a similar problem as in

• Duotone filters are missing from live site when used in Classic Themes #54099
  Doesn't feel like it's a duplicate, though.

[sabernhardt]

#54099 is probably related to the missing styles in the latest plugin version, but not the bug first reported on Trac about the aligned images. The faulty CSS selector is a regression in WordPress 6.3, which might be fixable in a minor release.

[ndiego]

Thanks for reporting. I can confirm. Updating the issue labels.

[annezazu]

Noting for @ajlende in case you can share any insights!

[annezazu]

After a review by core editor triage leads and core editor tech leads, this has been removed from the board for 6.5 consideration.