How to Remove Gutenberg Block Library CSS from WordPress

Are you using WordPress classic editor on your website and want to completely remove the Gutenberg block library from your website? Introduced in WordPress 5.0, Gutenberg is a new block-based editor, and the idea behind creating is to make it easier for people to build beautiful landing pages and posts with blocks.

Gutenberg is so powerful that if it is used correctly, it can remove the need of using any type of page builder for creating a pixel-perfect website for your needs. But still, some people don’t feel comfortable using this new block-based editor and want to remove it from their website.

But with so many pros, there are some cons to using the Gutenberg editor. One of these is that it adds a lot of extra CSS and JavaScript to your site. This can make your site slower and can cause conflicts with other plugins and themes.

Website loading Gutenberg block CSS

And if you’re someone who prefers the old Classic Editor styled editor on your website, then you probably shouldn’t even be using Gutenberg. In this case, why should you have to load an extra CSS file “/wp-includes/css/dist/block-library/style.min.css” on your site?

And to help you increase the overall performance of your website, we’re going to discuss the ways to remove this code from your website. For this, all you need to do is add a few lines of code to your theme’s function.php file.

I’ve shared the code below:

This code can help you remove all Gutenberg’s CSS files from loading on the front end of your website. All you need to do is paste this code into the functions.php file of your theme or use a “Code Snippets” named plugin on your website and activate the code from there.

While adding the code, we should recommend taking a complete backup of your website. Also, we don’t recommend adding this code to your theme’s functions.php, as it might get overwritten once there’s an update from your theme developer.

Once you have made these changes, you don’t have to worry anymore. Now, you’ll see that this CSS block code is not showing on the front-end of your website.

✍️ Author’s Note

If you’re not using Gutenberg and also not planning to use it in the future, then you can also disable it completely from your website by using a plugin named “Disable Gutenberg“. This plugin will not only disable the Gutenberg editor from your website, but also deletes (only from front-end) all the CSS and JS file related to it.

I hope this article has helped you in removing this extra CSS library from loading on the front end of your website. If you’re still facing an issue, please let us know in the comment section below and I’ll try my best to assist you further.

And if you liked this post, please don’t forget to share it with your friends.

Sunny Kumar

Number of posts: 145

Hi, I'm Sunny Kumar, a passionate tech enthusiast and a blogger from New Delhi, India. With a degree in IT from IIT-D and expertise in SEO, Cloud Computing, Telecom & Networking, and CEH, I specialize in various technical fields, including SEO, WordPress Development, and PC Building. And being a proficient WordPress user, I’m dedicated to delivering quality content and a remarkable user experience.

Leave a Comment