From 2635cbd69b61caf4f862a896777e5f30ffbd47ee Mon Sep 17 00:00:00 2001 From: arthur Date: Mon, 16 Mar 2026 23:01:24 +0800 Subject: [PATCH 1/2] Custom Colors: Fix block editor CSS in Gutenberg 22.6.0+ iframe context Gutenberg 22.6.0+ renders the editor in an iframe for all themes, so the `#editor .editor-styles-wrapper` selector no longer matches inside the iframe. Add a dedicated `print_block_editor_css` method that extends the selector to also target `:root :where(.editor-styles-wrapper)` while keeping the original selector for backwards compatibility. Co-Authored-By: Claude Opus 4.6 --- .../fix-custom-colors-block-editor-iframe | 4 +++ .../plugins/wpcomsh/custom-colors/colors.php | 28 ++++++++++++++++++- 2 files changed, 31 insertions(+), 1 deletion(-) create mode 100644 projects/plugins/wpcomsh/changelog/fix-custom-colors-block-editor-iframe 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..fd7889a3c6e3 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, null, '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. */ From 2d5c1d30678d1fd4d7c15e96e3611ae906a5c210 Mon Sep 17 00:00:00 2001 From: arthur Date: Tue, 17 Mar 2026 09:42:08 +0800 Subject: [PATCH 2/2] Fix Phan type error in wp_register_style call Pass array() instead of null for the $deps parameter. Co-Authored-By: Claude Opus 4.6 --- projects/plugins/wpcomsh/custom-colors/colors.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/plugins/wpcomsh/custom-colors/colors.php b/projects/plugins/wpcomsh/custom-colors/colors.php index fd7889a3c6e3..144fa5c8c6bb 100644 --- a/projects/plugins/wpcomsh/custom-colors/colors.php +++ b/projects/plugins/wpcomsh/custom-colors/colors.php @@ -1482,7 +1482,7 @@ public static function print_block_editor_css() { $css ); - wp_register_style( 'custom-colors-editor-css', false, null, '20210311' ); // Register an empty stylesheet to append custom CSS to. + 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 }