Gutenberg block editor styling issues after adding custom CSS

Other Questions Wordpress
1

I’ve been working on customizing the WordPress block editor and ran into a strange problem. When I add my own CSS file to the Gutenberg editor, it seems to strip away all the default styling and only shows my custom styles.

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

After adding this code, the editor interface looks broken and missing most of its original appearance. The styling seems completely off from what it should be. I’m wondering if this behavior is expected or if I’m doing something wrong. My theme uses Bootstrap framework - do I need to include those styles in the editor stylesheet as well? Any guidance would be really helpful.

2

yep this happens becuase add_editor_style() completely replaces the default styles instead of adding to them. quick fix is to enqueue your styles differently - try using enqueue_block_editor_assets hook instead. that way you keep the default editor styling and just add your custom stuff on top

3

This is definitely a common gotcha with WordPress editor styling. When you add a custom editor stylesheet, it replaces the default editor styles entirely rather than merging with them. I ran into this same issue about six months ago and spent way too much time debugging it. The solution that worked best for me was to import the default WordPress editor styles at the top of my custom-editor.css file, then add my customizations below. You can find the core editor styles in wp-includes/css/dist/editor/style.css and copy the relevant parts into your custom file. Since you’re using Bootstrap, you’ll also need to include the Bootstrap CSS that affects typography and layout elements. Alternatively, you could try using wp_add_inline_style() to inject your custom styles into the existing editor stylesheet instead of replacing it completely. This approach is less clean but keeps the default functionality intact while adding your customizations on top.

4

Had this exact issue last year when I was customizing a client’s site. The problem is that when you use add_editor_style(), WordPress doesn’t automatically include all the default editor styles alongside your custom ones. You’re essentially overriding the entire editor stylesheet with just your custom CSS file. What worked for me was creating a comprehensive editor stylesheet that includes both the necessary editor base styles and my customizations. Since you’re using Bootstrap, you’ll definitely want to include those core Bootstrap styles in your editor CSS file, otherwise elements will look completely different between frontend and backend. Another approach is to be more specific with your custom CSS selectors to avoid conflicts rather than replacing the entire editor stylesheet. I found that targeting .editor-styles-wrapper in my custom CSS helped maintain the editor’s functionality while applying my theme styles.