CODEWITHSUNDEEP
wordpresswordpress-gutenberg
David Jones
David Jones

Reputation: 10219

Remove embedded stylesheet for Gutenberg editor on the back end

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!

Upvotes: 4

Views: 3234

Answers (3)

Yaroslav Borodii
Yaroslav Borodii

Reputation: 53

Updated working code on 7 June 2023.

It didn't work for me because unset doesn't shift keys in array. This is a working solution.

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

    return $settings;
}

Upvotes: 2

eballeste
eballeste

Reputation: 819

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;
}

Upvotes: 6

David Jones
David Jones

Reputation: 10219

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.

Upvotes: 1

Related Questions