Remove Gutenberg CSS

gutenberg css reset
enqueue block editor assets
wp-block styles
wp_enqueue_style
remove gutenberg plugin wordpress
wp-embed js

I have Gutenberg plugin installed in WordPress v4.9.8 and am trying to remove the CSS that comes with it so I can supply my own.

This is the sheet that gets included:

<link rel='stylesheet' id='wp-block-library-css'  href='/wp-content/plugins/gutenberg/build/block-library/style.css?ver=1535795173' type='text/css' media='all' />

I have tried the following:

add_action( 'wp_print_styles', 'wps_deregister_styles', 100 );
function wps_deregister_styles() {
    wp_dequeue_style( 'wp-block-library-css' );
    wp_deregister_style( 'wp-block-library-css' );
}

As well as variations of this, but the file persists. How can I remove it?

I'm adding this as a more complete answer than my comment:

You need to remove the -css when trying to dequeue the script. That's added to the HTML markup and not the actual tag for the css file.

If you search the code (the location of the enqueue may change as Gutenberg gets rolled into core), you can find:

wp_enqueue_style( 'wp-block-library' );

As you can see, there is no -css. This solution may work for other plugins that people have trouble dequeuing styles.

Edit: Since this still gets some traction, here is the code to handle it:

add_action( 'wp_print_styles', 'wps_deregister_styles', 100 );
function wps_deregister_styles() {
    wp_dequeue_style( 'wp-block-library' );
}

Remove Gutenberg CSS, [This thread is closed.] So if we disable the Gutenberg editor and use the Classic editor, I guess we don't need the CSS file they force into… You can remove Gutenberg CSS by using the PHP below to dequeue the “/wp-includes/css/dist/block-library/style.min.css” file. Note : If you are using Gutenberg editor do not add this to your site. This PHP will work in your functions.php file or being added using a plugin like Code Snippets .

I am use this code to to remove default style.

//Disable gutenberg style in Front
function wps_deregister_styles() {
    wp_dequeue_style( 'wp-block-library' );
}
add_action( 'wp_print_styles', 'wps_deregister_styles', 100 );

Remove Gutenberg CSS, I'm adding this as a more complete answer than my comment: You need to remove the -css when trying to dequeue the script. That's added to  For now you can disable it by making a tiny plugin and dropping it in mu-plugins, however eventually that CSS may be needed by your theme or if you even change the Classic Editor plugin’s settings.

I use Wordpress 5.1. Tried the most upvoted answers and they didn't work for me, 'wp_enqueue_scripts' instead of 'wp_print_styles' does the trick.

Here is my whole WordPress 5.1 solution to get rid of Gutenberg without bloat stylesheets loading:

// Disable Gutenberg editor.
add_filter('use_block_editor_for_post_type', '__return_false', 10);
// Don't load Gutenberg-related stylesheets.
add_action( 'wp_enqueue_scripts', 'remove_block_css', 100 );
function remove_block_css() {
    wp_dequeue_style( 'wp-block-library' ); // Wordpress core
    wp_dequeue_style( 'wp-block-library-theme' ); // Wordpress core
    wp_dequeue_style( 'wc-block-style' ); // WooCommerce
    wp_dequeue_style( 'storefront-gutenberg-blocks' ); // Storefront theme
}

Edit:

It works with WordPress 5.2 as well and because it handles the stylesheets added by WooCommerce and Storefront theme, I made this one of the settings in my new plugin:

https://wordpress.org/plugins/extra-settings-for-woocommerce/

How to remove gutenberg CSS · Issue #12659 · WordPress , Hello, I'm testing two ways to remove Gutenberg, the https://wordpress.org/​support/plugin/disable-gutenberg/ plugin and the  Removing Gutenberg-enqueued CSS from your WordPress theme. Unhook the CSS added by Gutenberg to your WordPress theme the right way – a quick PHP code snippet to get rid of additinal Gutenberg CSS files. Gutenberg has brought in things which look quite interesting to enhance our editing task to another level.

Paste the following code on your functions.php file

function custom_theme_assets() {
wp_dequeue_style( 'wp-block-library' );
}
add_action( 'wp_enqueue_scripts', 'custom_theme_assets', 100 );

Please like if this has helped you.

Remove Gutenberg CSS completely (not just the "wp-block-library , Is it possible to remove the CSS that covers this area? How? (i already disabled the "wp-block-library"). I need to create my own style for the  You can remove Gutenberg CSS by using the PHP below to dequeue the /wp-includes/css/dist/block-library/style.min.css file. Add the following code in your theme’s functions.php file.

As the wp_dequeue_style-approach did not work to disable wp-editor-font (wp-editor-font-css) I used the following code:

function my_remove_gutenberg_styles($translation, $text, $context, $domain)
{
    if($context != 'Google Font Name and Variants' || $text != 'Noto Serif:400,400i,700,700i') {
        return $translation;
    }
    return 'off';
}
add_filter( 'gettext_with_context', 'my_remove_gutenberg_styles',10, 4);

Also see https://github.com/dimadin/disable-google-fonts/blob/master/disable-google-fonts.php

[How To] Remove Block Library CSS from WordPress // WPAssist, Gutenberg editor, that is the default editor for latest WordPress installations, uses special CSS libraries to manage blocks on your site's frontend  Remove Gutenberg Editor Block-CSS from WordPress front end Updated on : January 7th, 2019 Wordpress How to WordPress 5.0 is already out and I am sure all of you have already upgraded your WordPress.

How To Remove wp-block-library (Gutenberg), In your theme's functions.php file, you need to may need to add the following code to remove the CSS stylesheet. function  This code snippet will remove the ‘default’, ‘outline’ and ‘squared’ button block styles, which are registered by default in the editor and then will add your custom block styles – ‘solid’ and ‘gradient’. You should also add the corresponding styling for the newly created button blocks in the style.css file.

REMOVE Gutenberg-hooked CSS file from your WordPress Theme, Unhook the CSS added by Gutenberg to your WordPress theme the right way - a quick PHP code snippet to get rid of additinal Gutenberg CSS  First of all thanks for all these precious Gutenberg tips. We are currently implementing Gutenberg at work, and I’d like to know if there’s any way to remove the default blocks groups (Most Used, Common Blocks, etc) and just display the allowed blocks in the popup without any group notion? Thanks in advance, keep up the good work! Jeremy

Styling the Gutenberg Columns Block, WordPress 5.0 is quickly approaching, and the new Gutenberg editor is coming The simplest solution would be to remove flexbox altogether: Disable Gutenberg enables you to disable Gutenberg and replace it with the Classic Editor wherever you want. For example, lots of WordPress users already enjoy robust page-building functionality via one of the many great plugins like Composer or Elementor.

Comments
  • This question is not off-topic, but there's a chance you might find a better, possibly already-existing, answer over at WordPress Development.
  • Use wp_enqueue_scripts instead. try add_action( 'wp_enqueue_scripts', 'wps_deregister_styles', 100 );
  • Check exactly how Gutenberg is adding the styles. Also see Dequeue, Unregister, Remove Action - Not Working on Plugin
  • @TamilSelvanC thanks, that didn't work. I've tried so many variations of this, and it's not the first time I've had this exact problem. Really frustrating aspect of WP!
  • @MattSaunders try removing the -css from the tag. So wp-block-library
  • The best answer. +1
  • Worked for me! Not sure why I didn't try other answers first, but this is succinct and works on 5.2.
  • You might mean this: add_action('wp_enqueue_scripts', 'wp_deregister_style', 200); but this will remove ANY styles that are registered - probably not what you want!
  • And can you share this function?