Previews appear un-styled when using a block theme

[jffng]

Description

Block pattern previews in the pattern inserter, as well as mobile and tablet content previews, are appearing un-styled when using a block theme. I've tested using Twenty Twenty-Two and tt1-blocks. Also verified this is not happening in core trunk.

Step-by-step reproduction instructions

1. Activate a block theme like Twenty Twenty-Two
2. Go to a post and insert a pattern
3. Verify the pattern appears unstyled
4. Insert a pattern, verify it appears as expected (styled) in the post
5. Change the preview to "Tablet", and "Mobile", verify the styles disappear.

Screenshots, screen recording, code snippet

Kapture.2021-12-10.at.11.18.27.mp4

Environment info

• WordPress 5.8.2, Gutenberg trunk

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

[kjellr]

cc @noisysocks so we can make sure this regression doesn't make it into the next Beta. 😅

[youknowriad]

@oandregal could this be related to the recent change to how we load styles?

[oandregal]

Yeah, it looks like #36851 introduced this regression.

From a quick glance, the thing that previews and block patterns have in common is that they're rendered within an iframe. It makes sense that #36851 introduced this regression because it changed how some styles (the global styles presets) were loaded.

I presume the fix is to also load the preset vars within the styles key of the block editor settings, in addition to the other method.

[oandregal]

Got a potential fix at #37296