Remove Gutenberg Block CSS

This WordPress code snippet is useful for those who don’t want to use the default Gutenberg block CSS on the frontend of their website. Gutenberg, the new block editor for WordPress, enqueues its own CSS styles for blocks. These styles might conflict with the styles of your theme or custom blocks, or you might simply prefer to write all the styles yourself.

The smartwp_remove_wp_block_library_css function removes the Gutenberg block library CSS by dequeuing the ‘wp-block-library’ and ‘wp-block-library-theme’ styles. Dequeuing a style prevents it from being loaded on the page.

This function is hooked to the ‘wp_enqueue_scripts’ action, which is the appropriate action for enqueueing and dequeuing scripts and styles.

You can use this snippet as is. Be aware, though, that this will remove all Gutenberg block library styles, so if you’re using Gutenberg blocks on your site, you’ll need to provide your own styles for them. Also, keep in mind that dequeuing these styles could affect the appearance of your blocks in the Gutenberg editor, making it less WYSIWYG (what you see is what you get).

PHP
//Remove Gutenberg Block Library CSS from loading on the frontend
function smartwp_remove_wp_block_library_css(){
 wp_dequeue_style( 'wp-block-library' );
 wp_dequeue_style( 'wp-block-library-theme' );
}
add_action( 'wp_enqueue_scripts', 'smartwp_remove_wp_block_library_css' );