如何将编辑器 css 规则添加到 Wordpress Gutenberg 块弹出窗口本身？

Question

这是我在 Wordpress ediotr 中写的一些古腾堡块。

我想做的是稍微改变古腾堡编辑器弹出窗口的 position 块。

由于它出现在前一个块的前面，因此我不能 select 前一个段落块。

我找到了一个正确的规则来在开发者模式下为我解决问题，如下所示

所以我在 editor-style.css 文件中添加了一条 css 规则：

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

当然，我在子主题的function.php中添加了编辑器样式。

add_action( 'after_setup_theme', 'kyle_gutenberg_editor_css' );
function kyle_gutenberg_editor_css(){
    add_theme_support( 'editor-styles' ); 
    add_editor_style( 'editor-style.css'); 
}

它肯定在页面上添加了<style>标签：

但是，Wordpress 还在我编写的规则的 css 选择器的前端添加了前缀.editor-styles-wrapper 。 这就是为什么我认为它不适用于弹出窗口。

与自定义古腾堡块的许多解决方案不同，我找不到将 css 规则添加到弹出框本身的方法。 我怎样才能做到这一点？

先感谢您。

Answer 1

我认为add_editor_style()不是你想的那样。 这是我的一个例子，我用它在后端编辑器中加载一个 CSS & JS 文件：

add_action( 'admin_enqueue_scripts', [ $this, 'my_admin_enqueue_scripts' ], 100 );


/**
 * Load the CSS & Javascript files for the admin
 */
function my_admin_enqueue_scripts() {
        $theme             = wp_get_theme();

        $file_with_path_js = get_template_directory() . '/includes/my_file.js';
        wp_enqueue_script( 'my-editor-scripts', $file_with_path_js, '', $theme->Version, true );

        $file_with_path_css = get_template_directory() . '/includes/my_file.css';
        wp_enqueue_style( 'my-editor-styles', $file_with_path_css, '', $theme->Version, 'all' );
}

Answer 2

好吧，我终于知道了。

我以前使用after_setup_them钩子来添加编辑器样式。

add_action( 'after_setup_theme', 'kyle_gutenberg_editor_css' );
function kyle_gutenberg_editor_css(){
  add_theme_support( 'editor-styles' ); // if you don't add this line, your stylesheet won't be added
  add_editor_style( 'editor-style.css'); // tries to include style-editor.css directly from your theme folder
}

但是当涉及到古腾堡编辑器时，我们最好使用另一个钩子。 enqueue_block_editor_assets钩子在 Wordpress 5.0 中引入。

现在，我这样写：

add_action( 'enqueue_block_editor_assets', 'kyle_gutenberg_editor_css', 9999 );
function kyle_gutenberg_editor_css() {
   $css_file_modified_time = filemtime(get_stylesheet_directory() . '/editor-style.css');
   wp_enqueue_style( 'kyle-editor-styles', get_theme_file_uri( '/editor-style.css' ).'?time='.$css_file_modified_time, false, '' , 'all' );
}

现在在我的editor-style.css中，带有.editor-styles-wrapper的 css 规则适用于主体，没有.editor-styles-wrapper任何规则适用于 popover 本身和其中的其他元素。