将自定义CSS添加到Gutenberg Editor的正确方法是什么

问题描述

我正在尝试找到将自定义CSS添加到wordpress Gutenberg编辑器的正确方法。目前，我已经在子主题CSS目录中添加了自定义.CSS文件，并在子主题的function.PHP 文件中添加了以下功能。

    // Custom Editor Styles
    function theme_editor_styles() {
        // Add support for Editor Styles
        add_theme_support('editor-styles');

        // Enqueue Editor Styles
        add_editor_style('style-editor.css');
    }

    add_action('after_setup_theme','theme_editor_styles');

但是，当我刷新wordpress编辑器时，没有任何改变。我在body属性中添加了黑色的背景色，因此在文件加载时很明显。

上述功能是否不正确？还是我尝试以错误的方式进行操作？

谢谢。

解决方法

当父主题没有声明add_theme_support('editor-styles')时，会发生此问题。子主题无法覆盖父主题不包括的选项或样式表（参考：Advanced Topics / Child Themes）

要解决此问题，只需在挂钩add_action('after_setup_theme',...)的“父主题” functions.php中找到该函数，然后通过“子主题”将其删除，然后添加自己的支持编辑器样式的函数，例如：

儿童主题：functions.php

// Custom Editor Styles
function theme_editor_styles() {
    // Add support for Editor Styles
    add_theme_support('editor-styles');

    // Enqueue Editor Styles
    add_editor_style('style-editor.css');

   // Also re-add any other add_theme_support() options as needed from Parent Theme
}

// Remove the Parent Themes Editor Styles function
remove_action( 'after_setup_theme','name_of_parent_theme_editor_styles' );
// Add your own Editor Styles to add support for Guternberg Editor Styles
add_action( 'after_setup_theme','theme_editor_styles' );

wordpress wordpress wordpress-gutenberg