diff --git a/projects/plugins/wpcomsh/changelog/fix-custom-colors-block-editor-iframe b/projects/plugins/wpcomsh/changelog/fix-custom-colors-block-editor-iframe new file mode 100644 index 000000000000..f467624ee417 --- /dev/null +++ b/projects/plugins/wpcomsh/changelog/fix-custom-colors-block-editor-iframe @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +Custom Colors: Fix block editor CSS not applying in Gutenberg 22.6.0+ iframe context. diff --git a/projects/plugins/wpcomsh/custom-colors/colors.php b/projects/plugins/wpcomsh/custom-colors/colors.php index a2c493314683..144fa5c8c6bb 100644 --- a/projects/plugins/wpcomsh/custom-colors/colors.php +++ b/projects/plugins/wpcomsh/custom-colors/colors.php @@ -201,7 +201,7 @@ public static function init() { // If colors are set, print them in the Block Editor as well. if ( self::theme_has_set_colors() ) { self::override_themecolors(); - add_action( 'enqueue_block_editor_assets', array( __CLASS__, 'print_theme_css' ), 20 ); + add_action( 'enqueue_block_editor_assets', array( __CLASS__, 'print_block_editor_css' ), 20 ); } } } @@ -1461,6 +1461,32 @@ public static function print_theme_css() { ); } + /** + * Enqueue theme CSS for the block editor. + * + * @since $$next-version$$ + */ + public static function print_block_editor_css() { + if ( ! self::should_enable_colors() ) { + return; + } + $css = self::get_theme_css(); + + // Gutenberg 22.6.0+ renders the editor in an iframe for all themes. + // #editor no longer exists inside the iframe, so extend any + // "#editor .editor-styles-wrapper" selector to also match the + // iframe context while keeping the original for older versions. + $css = str_replace( + '#editor .editor-styles-wrapper', + '#editor .editor-styles-wrapper, :root :where(.editor-styles-wrapper)', + $css + ); + + wp_register_style( 'custom-colors-editor-css', false, array(), '20210311' ); // Register an empty stylesheet to append custom CSS to. + wp_enqueue_style( 'custom-colors-editor-css' ); + wp_add_inline_style( 'custom-colors-editor-css', $css ); // Append inline style to our new stylesheet + } + /** * Return theme CSS. */