Iframe stylesheets are not cloned in Firefox

[miguelpeixe]

Description

The styleSheetsCompat() strategy introduced by #25775 is not working properly on Firefox (tested in 96.0). It behaves as expected on Chrome and Safari

Step-by-step reproduction instructions

1. Enqueue a style containing one of the keywords to match the cloning strategy (e.g.: .editor-styles-wrapper)
2. Edit a post, toggle block inserter, click on "Patterns"
3. Observe the style is applied to the main editor but not on the Patterns block previews

You can use the sample code below to compare the behavior on Chrome and Firefox

Screenshots, screen recording, code snippet

Sample plugin for testing:

styleSheetsCompat-ff-test.php

<?php
/**
 * Plugin name: styleSheetsCompat FF Test
 */
add_action( 'admin_init' , 'styleSheetsCompat_ff_css_iframe_clone_init' );
function styleSheetsCompat_ff_css_iframe_clone_init() {
  wp_enqueue_style( 'ff-css-iframe-clone', plugins_url( 'styleSheetsCompat-ff-test.css', __FILE__ ) );
}

styleSheetsCompat-ff-test.css

.editor-styles-wrapper {
  background: #f00 !important;
}

Environment info

• WordPress 5.9 RC2
• Gutenberg trunk
• Firefox 96.0 on macOS 12.1

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

[tomusborne]

This seems to be an issue outside of the pattern block previews as well.

Themes and plugins that are still using enqueue_block_editor_assets instead of editorStyle or add_editor_style() (due to the lack of being able to add dynamic CSS using wp_add_inline_style()) are missing their styles in Firefox when using the tablet and mobile previews in the regular editor.

[miguelpeixe]

This seems to be an issue outside of the pattern block previews as well.

Yes, this bug will affect any compatible wp_enqueue_style() or wp_add_inline_style() for every iframed editor in Firefox.

[ellatrix]

I believe this was fixed in #40842. Please reopen if I'm mistaken. :)