How to remove Gutenberg library CSS and global inline styles

Let's get rid of the CSS bloat

I'm a big fan of the possibilities Gutenberg provides for rapid, flexible content editing, but I'm not a fan of the default blocks and their associated styles. I've been on a long-term mission to create a theme and small collection of blocks that break out of the constraints and cut away the bloat from the default Gutenberg experience.

Here's a code snippet you can add to your functions.php file that will dequeue all of the CSS Gutenberg adds to your WordPress site that's part of the journey.

    function foolhat_remove_gutenberg_css(){
    wp_dequeue_style( 'wp-block-library' ); // Gutenberg CSS
    wp_dequeue_style( 'wp-block-library-theme' ); // Gutenberg CSS
    wp_dequeue_style( 'wc-block-style' ); // WooCommerce block CSS
	wp_dequeue_style( 'global-styles' ); // Gutenberg Style Tag
} 
add_action( 'wp_enqueue_scripts', 'foolhat_remove_gutenberg_css', 100 );

Restricting Gutenberg Blocks

One of the issues you might run into by removing these styles is that all of the default blocks won't display as intended. One way to handle this is to restrict what blocks are available in the block editor. Here's a snippet that can limit what blocks are available in the Gutenberg editor:

    add_filter( 'allowed_block_types', 'gutenberg_allowed_block_types' );
 
function gutenberg_allowed_block_types( $allowed_blocks ) {
 
	return array(
		'core/image',
		'core/paragraph',
		'core/heading',
		'core/separator',
		'core/list',
		'core/html',
		'core/shortcode',
		'core/block',
	);
}

Unfortunately you have to provide a list of what blocks are allowed - you can't provide a list of what blocks aren't allowed.

As with most things Gutenberg, there's a lot of frustration tightly intertwined with a lot of frustration, though after spending a lot of time with Gutenberg and extensive work customising the editing experience, I do think I give more credit to the potential than the frustration.