CODEWITHSUNDEEP
phpcsswordpresswordpress-gutenberg
Dan
Dan

Reputation: 21

What's the correct way to add custom CSS to Gutenberg Editor

I'm trying to find the correct way to add custom CSS to the WordPress Gutenberg editor. Currently, I have added a custom .CSS file to my child-theme CSS directory and added the following function to the child-theme's function.php file.

    // 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');

However, when I refresh the WordPress editor, nothing has changed. I have added a background-color of black to the body property so when the file loads it's obvious.

Is the above function incorrect or am I trying to do this the wrong way?

Thanks.

Upvotes: 1

Views: 1321

Answers (1)

S.Walsh
S.Walsh

Reputation: 3699

This issue occurs when the Parent Theme does not have add_theme_support('editor-styles') declared. The Child Theme is unable to override an option or stylesheet the Parent Theme does not include (ref: Advanced Topics / Child Themes )

To resolve this issue, simply locate the function in the Parent Theme functions.php which hooks into add_action('after_setup_theme', ...), then remove it via your Child Theme and add your own function which supports editor styles, eg:

Child Theme: 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' );

Upvotes: 3

Related Questions