Gutenberg: Missing editor styles with Firefox

[Copons]

Impacted plugin

Jetpack

Steps to Reproduce

1. Use a Jetpack with a paid plan or an Atomic site to test.
2. Open the Site Editor.
3. Add the Donations block.

A clear and concise description of what you expected to happen.

The Donations block and its notice banners are styled appropriately.

What actually happened

The Donations block appears completely unstyled.

Other information

Note: the screenshots come from another test, but the result is virtually the same. Just ignore that it's on a free plan.

This is related to #22640.
That PR fixed this same issue on most browsers on Simple sites by adding JP editor styles with add_editor_style.

@sdixon194 noted that the issue persists on Jetpack and Atomic sites, but only when using Firefox.

I could reproduce on Atomic but not on Jetpack (tested locally and on JN).

All things considered, I think it might be worth it to:

• Either use the same add_editor_style (using the new Jetpack_Gutenberg::add_iframed_editor_style() function) workaround in JP itself.
• Or completely rethink how JP enqueues editor styles to only use add_editor_style by default.

I'm not familiar enough with the JP build system to make an educated decision on this, so I'd rather have a bit of a discussion before casually attempting the workaround. 🙂

Operating System

No response

OS Version

No response

Browser

Firefox

Browser Version(s)

No response

[BogdanUngureanu]

I've tried to reproduce this on two Atomic sites using two different themes (Blank canvas and Twenty Twenty-two) and I wasn't able to reproduce it anymore on Firefox. Jacopo, can you confirm that you still have this issues? 🤔

[Copons]

I've tried to reproduce this on two Atomic sites using two different themes (Blank canvas and Twenty Twenty-two) and I wasn't able to reproduce it anymore on Firefox. Jacopo, can you confirm that you still have this issues? 🤔

Just tried and yes, can reproduce.
Did you test in the Site Editor? 🤔

[BogdanUngureanu]

yup, the site is Atomic and connected to WPCOM sandbox, but I don't think it matters. Maybe we can try to reproduce it together?

[Copons]

This is what I see on a fresh Atomic site on Pro, using Twenty Twenty-Two (tested on Quadrat and Blank Canvas as well):

[BogdanUngureanu]

I’ve found the scenario where it fails: Gutenberg plugin has to be installed. When it’s installed, the user has a link in the menu pointing to wordpress.com/site-editor/site-name (Calypso). However, when they click on it, they'll be redirected to WP-Admin (wp-admin/themes.php?page=gutenberg-edit-site&postType=page&postId=2).

If the user disables the Gutenberg plugin on their Atomic site, the menu item will now point to WP-Admin (wp-admin/site-editor.php). In this scenario, the Donations form works.

Also, I was able to reproduce it on Chrome too.