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.
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.
| <?php | |
| //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.
18 Responses
// 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
}
Thanks for the tip! This is good to know since mine assumed you were using the classic editor plugin.
Thanks faruk yetkin!!! Your code helped to finally remove the block library css. Awesome!!!
Sorry, but I wished it worked for me! I wasn’t sure where to put it, so tried at top of funcionts.php and at bottom – neither worked,
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' );to
add_action( 'wp_enqueue_scripts', 'smartwp_remove_wp_block_library_css', 9999 );Thanks, Andy. Nice to get some advice – it’s a minefield to a newbie!
Thanks Andy – not using Gutenberg and looking to make some speed gains. This is a great little snippet to have.
Glad it helped Chris! be sure to remove it if you ever want to use Gutenberg though.
Thanks Andy – not using Gutenberg and looking to make some speed gains. This is a great little snippet to have.
Glad it helped! and yeah it’s odd the classic editor plugin doesn’t do this for you.
Hi Andy, thanks for the code. I’ve been looking for this. Thank you.
Glad to help Carl!
Thanks faruk yetkin!!
Awesome!
Thank you for the tip.
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.
Hey Clay, if you are not using Gutenberg it shouldn’t affect the front end.
@Andy Awesome! Thank you for this guide!
thx mucho 😉