Theme provided duotone preset is not displayed in the post editor

[draganescu]

Description

Duotone applied at the level of theme is not visible in the post editor.

Step-by-step reproduction instructions

1. Install the Skatepark theme
2. Go to the site editor
3. Open a template part
4. Insert an image block
5. Choose an image from your media library
6. Notice the image has a duotone filter applied
7. Go to wordpress admin
8. Create a new post
9. 4. Insert an image block
10. Choose an image from your media library
11. Notice the image does not a duotone filter applied

The image in the post editor should have a duotone filter applied by the current theme.

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

[draganescu]

Notes on investigating this issue:

• the filter definitions do not load in the edit post iframe because they have to be manually added in the iframe’s rendering
• in the site editor they are manually added but they come from this global styles hook which depends on a global styles provider which the edit post editor does not have/need

[draganescu]

Ways to fix this issue:

1. add these filters to a new key in the styles that we pass to the iframe via EditorStyles suggested by @youknowriad

• the problem here is that we'll need to polyfill for a Safari bug which does not use SVGs if they're in the head of a HTML document, which complicates things

2. export a function that returns the SVG presets which is independent of any global styles hooks and providers, because all we need is the presets which we know without any special processing required, then use this function to add presets to post editor iframe.

I am workiing on (2) and will explore (1) with @ajlende once a fix exists.