To learn how to remove default block styles, we have to do a bit of reverse engineering on how block styles are registered and overwritten. It also means that the solutions are a bit “hacky”.
Some of the code examples on this page may be time sensitive as Gutenberg continues to be updated. Check the date of the last update, and let me know if the examples stop working 🙂
Big thank you to Ari Stathopoulos for filling in some gaps and providing code examples.
Estimated reading time: 4 minutes
Updated April 19, 2022
How to remove a block style from the front
To remove a block style from the front of the website, you can use wp_dequeue_style() with wp_enqueue_scripts().
The style handle to remove is the same as the slug for the block.
For most blocks, the slug is the block name but with the spaces replaced by a dash (-).
This code example removes the style for the columns and column blocks:
function prefix_remove_core_block_styles() {
wp_dequeue_style( 'wp-block-columns' );
wp_dequeue_style( 'wp-block-column' );
}
add_action( 'wp_enqueue_scripts', 'prefix_remove_core_block_styles' );How to remove all default block styles from the front
To remove all block styles, you need to get a list of all styles, loop through the list, and remove each block. You can get the list of styles from WP_Styles:
View a gist with a dump of WP_Styles
Specifically, the dump above shows us that the list of current block styles that we want to use is inside $wp_styles->queue. It uses a single key which is the style handle.
function prefix_remove_core_block_styles() {
global $wp_styles;
foreach ( $wp_styles->queue as $key => $handle ) {
if ( strpos( $handle, 'wp-block-' ) === 0 ) {
wp_dequeue_style( $handle );
}
}
}
add_action( 'wp_enqueue_scripts', 'prefix_remove_core_block_styles' );How to remove default block styles from the Block Editor and Site Editor
The editor bundles the core block styles together in the block library scss file. The handle for this file is wp-block-library.
Some WordPress blocks includes a second file called theme.scss. For example, the border of the quote block is added to this file.
Hence, you need to remove both wp-block-library and wp-block-library-theme.
Here you will be using WP_styles one more time, but specifically wp_default_styles():
wp_default_styles() manages a large amount of registered styles, including styles for the general WordPress admin area. The code needs to be highly specific about which style handles to remove. It also needs to run after the styles are registered, which is why PHP_INT_MAX is used as the priority for the action:
add_action(
'wp_default_styles',
function( $styles ) {
/* Create an array with the two handles wp-block-library and
* wp-block-library-theme.
*/
$handles = [ 'wp-block-library', 'wp-block-library-theme' ];
foreach ( $handles as $handle ) {
// Search and compare with the list of registered style handles:
$style = $styles->query( $handle, 'registered' );
if ( ! $style ) {
continue;
}
// Remove the style
$styles->remove( $handle );
// Remove path and dependencies
$styles->add( $handle, false, [] );
}
},
PHP_INT_MAX
);How to remove the inline styles on the front
Even after completing the steps above, we still have more CSS to remove; because what about those odd looking wp-container-id styles that are printed inline in the document?
.wp-container-1 {
display: flex;
gap: var( --wp--style--block-gap, 0.5em );
flex-wrap: wrap;
align-items: center;
}These styles are created by the settings in the Layout and Dimensions panels in the block settings sidebar. For example, the code above is for a button block with default settings, and with the site wide blockGap enabled in theme.json.
You can remove these by filtering render_block:
remove_filter( 'render_block', 'wp_render_layout_support_flag', 10, 2 );And if you have Gutenberg installed, you also need to remove the filter for the Gutenberg specific flag:
remove_filter( 'render_block', 'gutenberg_render_layout_support_flag', 10, 2 );WordPress also add the following style with the link color setting:
.wp-elements-1 a {
color: var(--wp--preset--color--vivid-green-cyan);
}To remove link colors, use:
remove_filter( 'render_block', 'wp_render_elements_support', 10, 2 );
remove_filter( 'render_block', 'gutenberg_render_elements_support', 10, 2 );How to remove global styles on the front
To remove global styles that are printed inline in the document, for example styles like in this background color example:
.has-vivid-cyan-blue-background-color {
background-color: var(--wp--preset--color--vivid-cyan-blue) !important;
}You can dequeue the style handle global-styles:
function prefix_remove_global_styles() {
wp_dequeue_style( 'global-styles' );
}
add_action( 'wp_enqueue_scripts', 'prefix_remove_global_styles', 100 );