Duotone filters are missing from live site when used in Classic Themes

[cuemarie]

Description

On sites using a classic theme, Duotone filters apply in the post editor, but don't appear on the live site

Step-by-step reproduction instructions

1. Activate a classic theme such as Twenty Twenty One
2. Open a new post and add an image block
3. Add a duotone filter to the image
   • (observe that this filter appears in the editor)
4. Save and view the post
   • (observe that the filter does not appear on the live site)

Screenshots, screen recording, code snippet

Screen.Capture.on.2023-08-31.at.14-43-58.mp4

Inspecting the image block shows wp-duotone-rgb10400-rgb255232232-1, even though the filter is not applied.

Environment info

• WP 6.3.1
• GB 16.5.1

Deactivating Gutenberg altogether allows the Duotone filter to appear on the live site.

Possibly related? #49293 (I can't tell if this is the same issue - it appears to just be about the default colors available, and not the function of duotone on the live site).

Many WordPress.com customers have reported this issue; those reports are being tracked here: Automattic/wp-calypso#78442

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

[bph]

I can reproduce this with the theme Twenty-Twenty-Thirteen for WordPress nightly and Gutenberg nightly.
The Duotones selected don't show on the front- end.

duotones-not-in-classic.theme.mp4

[bph]

Tested it with WordPress 6.2.2 (no GB plugin) and the duotone works for both, Editor and front-end.

Then I was curious, which Gutenberg plugin version broke the duotone in classic themes.
Gutenberg 15.6.2 it still worked
Gutenberg 15.7.0 it stopped working.

The regression might have been introduced via this PR

• Polish duotone rendering code #49706

@ajlende when you get a quiet moment, could you take a look at this?

[t-hamano]

This issue was also reproducible in WordPress 6.3 when I activated the latest Gutenberg plugin.

• ✅ The image block has a class called wp-duotone-XXXXXX-XXXXXXXXXXX-X in the block wrapper element.
• ✅ A filter element with an ID attribute identical to its class name is also rendered.
• ❌ However, the inline style for applying that filter is not output.