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. But I’m sure there are folks like me who don’t like adding one more external CSS file to their theme–the point here is to avoid another render block.

If you are like me, you may have already noticed that style.min.css (with the ID wp-block-library-css) file popping-up in the head section of your WordPress site’s HTML.

Note that this is the file which keeps the Gutenberg blocks as is in your blog posts. Removing this file may render all those blocks partially or completely broken.

As it comes preloaded now since WordPerss 5.0, Gutenberg hooks this file automatically to the head of your WordPress theme.

In case if you are not really using Gutenberg, and want to remove this additional big-fat CSS file (25+ kB), here is what I did for the same.

The right way to dequeue Gutenberg-hooked CSS file

Yes, it’s a functions.php hack yet again. Stay ready to get your hands dirty in code if you are not into coding. Don’t worry much though, it’s not that hard.

Below is the code you need to place at the end of the functions.php file of your WordPress theme. Also make sure you back up your theme to avoid crashes, and always place the code above the closing PHP tag (?>) if there are any.

/*
 * Remove the `wp-block-library.css` file from `wp_head()`
 *
 * @author Rahul Arora
 * @since  12182018
 * @uses   wp_dequeue_style
 */
add_action( 'wp_enqueue_scripts', function() {
  wp_dequeue_style( 'wp-block-library' );
} );

Save changes, check back. Gutenberg CSS is gone now. Too easy, wasn’t it? Cheers.