如何让WordPress Gutenberg区块弹窗的自定义CSS规则生效？

问题原因 #

使用add_editor_style添加的编辑器样式，WordPress会自动给所有CSS选择器加上.editor-styles-wrapper前缀，但Gutenberg的弹窗组件（.components-popover__content）是渲染在编辑器容器外部的，不在.editor-styles-wrapper范围内，导致样式无法命中目标元素。

解决方案 #

方案1：直接后台入队CSS（推荐） #

绕过add_editor_style的前缀机制，使用admin_enqueue_scripts钩子直接在Gutenberg编辑器页面加载样式：

替换你子主题functions.php中的原有代码为：

add_action( 'admin_enqueue_scripts', 'kyle_enqueue_gutenberg_popover_css' );
function kyle_enqueue_gutenberg_popover_css() {
    // 仅在区块编辑器页面加载样式
    $current_screen = get_current_screen();
    if ( $current_screen && $current_screen->is_block_editor() ) {
        wp_enqueue_style( 
            'kyle-gutenberg-popover-styles', 
            get_stylesheet_directory_uri() . '/editor-style.css', 
            array(), 
            wp_get_theme()->get('Version') 
        );
    }
}

你的editor-style.css保持原有规则不变即可：

.components-popover__content {
    position: relative !important;
    top: -4rem !important;
    left: 4.3rem !important;
}

方案2：使用:where()伪类绕过前缀限制 #

如果不想修改PHP代码，可以通过CSS伪类消除前缀的影响，修改editor-style.css中的选择器：

:where(.editor-styles-wrapper) .components-popover__content {
    position: relative !important;
    top: -4rem !important;
    left: 4.3rem !important;
}

:where()伪类的优先级为0，会让.editor-styles-wrapper前缀不干扰选择器对目标元素的匹配，相当于直接选中.components-popover__content。注意该方法要求浏览器支持CSS伪类:where()（现代浏览器均支持，IE不兼容）。

内容的提问来源于stack exchange，提问作者Kyle KIM