Remove the Gutenberg Block Library CSS from WordPress

The new WordPress editor Gutenberg which was included in WordPress 5.0 has been loathed by many WordPress users. Whether you’re a fan or not millions have been moved to the new WordPress editor.

If you’re addicted to making your WordPress site load as fast as possible you may have noticed a bit of CSS from Gutenberg. Every request on your site will slightly slow down your pages so if you’re not using Gutenberg you’ll want to remove Gutenberg CSS.

This provides support to blocks but if you are using the classic editor you most likely don’t want it loading with your pages. I noticed the “block-library/style.min.css” file loading even though I exclusively use the classic editor.

Block library style.min.css CSS loading on all WordPress pages

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 you won’t want to add this snippet to your site.

This PHP will work in your theme’s functions.php file or being added using a plugin like Code Snippets. Additionally from dequeuing core Gutenberg block CSS it will also remove the WooCommerce block CSS.

//Remove Gutenberg Block Library CSS from loading on the frontend
function smartwp_remove_wp_block_library_css(){
wp_dequeue_style( 'wp-block-library' );
wp_dequeue_style( 'wp-block-library-theme' );
wp_dequeue_style( 'wc-block-style' ); // Remove WooCommerce block CSS
add_action( 'wp_enqueue_scripts', 'smartwp_remove_wp_block_library_css', 100 );

If you ever decide to use the Gutenberg editor just remember to remove this snippet since it’ll affect your blocks from working correctly.

I hope this code snippet helped speed up your site! If you have any issues feel free to let me know in the comments below.

Andy Feliciotti

Andy Feliciotti

Andy has been a full time WordPress developer for over 10 years. Through his years of experience has built 100s of sites and learned plenty of tricks along the way.

41 Responses

  1. // Alternative
    // Fully 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

        1. Hi Andy, since I added this code snippet add_filter( 'use_block_editor_for_post_type', '__return_false', 10 ); I don’t even use that Classic editor plugin (for what? cause it sets WP back to the state it was before Gutenberg era)
          All works flawless, so highlight ppl why you think it is still needed please.

    1. Sorry Mike! The location in functions.php shouldn’t matter. But you could try increasing the priority of the action. Let me know if changing
      add_action( 'wp_enqueue_scripts', 'smartwp_remove_wp_block_library_css' );
      add_action( 'wp_enqueue_scripts', 'smartwp_remove_wp_block_library_css', 9999 );

  2. Is the snippet safe to use when I’m using WooCommerce? My website is an eCommerce website that uses heavily on WooCommerce and I noticed this line of code:

    wp_dequeue_style( ‘wc-block-style’ ); // Remove WooCommerce block CSS

    Will this affect the front-end?

    Thank for the reply.

  3. This is good but is there a way to entirely disable the customizer too? I hate that whatever i do to keep my source code clean it’s still loaded with junk inline css. I’m using WP5.5 with a custom Storefront child theme. Thanks!

    1. Hey Victor, I don’t think there is an easy way to disable the WP customizer (I assume you mean the customize button in the header). You can use a role editor plugin to disable usage for admins on your site though. Not sure if that is a solution you’d want but I don’t think disabling the customizer will lead to any performance improvements.

  4. For anyone trying this with the Avada theme you might notice it only works for the woo commerce styles.
    I was sure my pages where not using gutenberg blocks so I had to set:
    Avada > Options > Advanced > Theme Features > Load Frontend Block Styles
    To “Off” for the styles to stop loading.

  5. Hi All, This is very interesting about the CSS from the Block editor. I am curious to know if anyone has tried to get the WP Core team developers to add “do not load block editor css” as an option in the General Settings, or do you think it is better that the theme developers implement it as an option on their side?

    For myself, I have always viewed WordPress as a great engine on which to add on to, either with my own custom-written themes, or with a website builder like Elementor. I have inherited various sites that are built in Divi, WP Bakery, Beaver Builder, among others, and each case there is no real need for the Block Editor css.

    It seems so futile to have to disable something in “core” and really, I wonder why the core code can’t be more intelligent and decide whether or not to load all of the block editor css, much in the way that a plugin like Contact Form 7 knows when to add its CSS in. Is it now the case that a page building tool should be smart enough to know whether or not to load the Block editor CSS/JS?

    I also recall that either Drupal or Joomla offered a choice of editors, but I suppose that train has left the station for WordPress. I am increasingly alarmed by the amount of code that WordPress core is adding.

  6. Hey! Thank you – this can greatly improve page speed. I wonder how I can tweak this to only remove Gutenberg on certain pages.

  7. doesn’t work unfortunately in 2021 with WP 5.8
    Have to change a line to make it work as someone changed spelling somewhere in WP, they changed wc-block-style into wc-blocks-style

    Below the old line:
    wp_dequeue_style( ‘wc-block-style’ ); // WooCommerce

    Below the new line:
    wp_dequeue_style( ‘wc-blocks-style’ ); // WooCommerce

Leave a Reply

Your email address will not be published. Required fields are marked *

WordPress Tips Monthly

Get the latest from SmartWP to your inbox.