Duotone filter not rendering in some places

[ajlende]

Description

When applying duotone as a block style in theme.json, there are still a couple places the duotone filter doesn't get applied.

See #34667 (comment)

The thumbnail for block patterns that use duotone won't show the filter applied:

The site editor shows the image without a filter but the frontend works fine. The post editor when I insert an image does work fine:

To reproduce

You can test on Skatepark applying Automattic/themes#4740

Or by adding the following to your theme.json for testing the image and cover blocks.

{
	"styles": {
		"blocks": {
			"core/cover": {
				"filter": {
					"duotone": "var(--wp--preset--duotone--blue-red)"
				}
			},
			"core/image": {
				"filter": {
					"duotone": "var(--wp--preset--duotone--blue-red)"
				}
			}
		}
	}
}

[ajlende]

The SVG containing the filter is generated during the admin_footer hook which, I think, is causing the issue.

The assets for the site editor are generated during the admin_footer-toplevel_page_gutenberg-edit-site hook which is the last hook in admin-footer.php, so the SVG never gets rendered.

[carolinan]

Did you try without using a preset var?

[andrewserong]

I'm currently working on refactoring a few of the block supports to ensure they render correctly in the site editor in #35450. I think I've managed to get it working properly for Duotone in the Site Editor (haven't tested block patterns thumbnails yet) by outputting to wp_footer instead of admin_footer, but I'm keen for feedback on the PR as there's a lot of context to how Duotone was implemented that I might have missed! 🙂

[oandregal]

I'm marking this for 5.9. Please, feel free to remove if it isn't necessary.

[oandregal]

Braindump for when someone is able to pick this up.

While working on #36236 I discussed with Alex that for duotone to work on the site editor we need to port the same changes introduced in the server at #34667 (and follow-ups). Refs:

• server: https://github.com/WordPress/gutenberg/blob/trunk/lib/compat/wordpress-5.9/class-wp-theme-json-gutenberg.php#L717
• client: https://github.com/WordPress/gutenberg/blob/trunk/packages/edit-site/src/components/global-styles/use-global-styles-output.js

[Mamaduka]

@oandregal, I'm removing this issue from WP 5.9 project board.

Feel free to add it back to a minor release board once it's created.

[ndiego]

@ajlende can this be closed now that #37727 is merged?

[ajlende]

#37727 solved the problem for the site editor, but I've confirmed that there are still issues with the block/pattern previews.

I haven't investigated why yet, but it seems some of the patterns are working, just not all of them.

[matiasbenedetto]

A small PR with a potential fix for this issue: #41249

[ajlende]

Fixed by #41249