Removing Gutenberg-enqueued CSS from your WordPress theme

a minute read

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.

Facebook Twitter LinkedIn Telegram Whatsapp Pocket

Related Posts:

WordPress functions wp_enqueue_script / wp_register_script and wp_enqueue_style / wp_register_style add additional version info in the end of the JavaScript and CSS files you link (include or add) using these functions. This version info is important to ensure...
To enable Animate.css in WordPress, you need to follow these steps:Download the Animate.css library First, go to the Animate.css website (https://animate.style/) and click on the "Download" button to obtain the CSS file. Upload the Animate.css file Nav...
To hide the thumbnail image in a WordPress post, you can use CSS code in your theme's style.css file or in the Customizer's Additional CSS section. Here's how you can do it:Access your WordPress dashboard.Go to Appearance and select Editor or Custo...