Remove embedded stylesheet for Gutenberg editor on the back end

user_1060679 0
Viewed 2397

The Gutenberg editor comes with an embedded stylesheet. Here's a snippet from that stylesheet:

...

.editor-styles-wrapper {
  font-family: "Noto Serif", serif;
  font-size: 16px;
  line-height: 1.8;
  color: #191e23;
}

.editor-styles-wrapper p {
  font-size: 16px;
  line-height: 1.8;
}

...

I've enqueued my own editor stylesheet using the following:

add_action("enqueue_block_editor_assets", "enqueue_custom_block_editor_assets");
function enqueue_custom_block_editor_assets() {
  wp_enqueue_style("editor-style", get_stylesheet_directory_uri()."/editor-style.css", null, null);
}

Since I have my own editor stylehseet, I'd like to get rid of the default one. A search on this topic yields lots of results for removing default block styling on the front end, but I'm referring to the editor styling on the back end. Thanks for your help!

wordpress-gutenberg wordpress
2 Answers

I drilled down into how it was being injected and found a way to nuke it out via the block_editor_settings filter. There is a styles key with an array that contains the css. The only iffy thing about this for me is that I'm assuming the shape of the array will always be the same, I should be doing some type of check here.

add_filter( 'block_editor_settings' , 'remove_guten_wrapper_styles' );
public function remove_guten_wrapper_styles( $settings ) {
    unset($settings['styles'][0]);

    return $settings;
}
user_36295840

My solution was a workaround to automatically override any styles within the .editor-styles-wrapper. Using LESS:

editor-style.css

.editor-styles-wrapper {
    @import "style.less";
}

I would still love to disable that embedded stylesheet though, if anyone knows how to do that.

user_10606790
Related