Gutenberg previews are not loading styles correctly

[goranalkovic-infinum]

Describe your bug

When you enter the mobile/tablet preview mode and Gutenberg enables the iframed editor, our styles (mostly CSS variable definitions) are not loading so everything looks very broken.

Steps to Reproduce

1. Open Gutenberg
2. Add a block (e.g. Button)
3. Enter mobile preview mode
4. See that the button is missing styles

Expected behavior

Styles should look the same as in Desktop mode.

Screenshots, screen recording, code snippet

https://user-images.githubusercontent.com/77000136/187384349-46d93c2f-99ae-4f4c-9f7d-8d6ff71e1eed.mov

Environment info

• PHP version: 7.4
• Dev env.: Valet
• Server type: nginx
• OS: macOS Monterey 12.5
• Libs version: latest stable (7.0.1)

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

Yes

Please confirm that you have searched in our documentation and couldn't find the answer.

Yes

Please confirm that your bug occurs with all plugins uninstalled and with the default WordPress theme active.

Yes

[dingo-d]

The same applies to pattern previews, they are not loading styles as well.

[dingo-d]

Possibly related: https://github.com/WordPress/gutenberg/issues/38673#issuecomment-1623148583

[goranalkovic-infinum]

While this seems to be working way better now, it looks like it's rendering the editor previews for everything, with some styles still missing

[dingo-d]

@goranalkovic-infinum Check the below documentation, maybe it'll help:

https://developer.wordpress.org/block-editor/how-to-guides/enqueueing-assets-in-the-editor/