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.
