将自定义 CSS 规则添加到 Wordpress 中的古腾堡块弹出窗口

Question

以下是我在 Wordpress 编辑器中编写的一些古腾堡块。

我想做的是稍微改变古腾堡编辑器块的弹出框的位置。

由于它出现在前一个块的前面，因此我无法选择前一个段落块。

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

所以我在 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 的规则适用于弹出窗口本身和其中的其他元素。