Option to disable default block styles

[erikjoling]

What problem does this address?

The CSS of blocks gets inserted inline (I'm using gutenberg 10.6). But this also adds default styles for some blocks. In the case of galleries and columns it's complex to overrule them. And redundant I would say, because one of the goals of the new style approach is to reduce bytes.

<style id='wp-block-gallery-inline-css' type='text/css'>
    .blocks-gallery-grid,.wp-block-gallery{
        display:flex;
        flex-wrap:wrap;
        list-style-type:none;
        padding:0;
        margin:0
    }
    .blocks-gallery-grid .blocks-gallery-image,
    .blocks-gallery-grid .blocks-gallery-item {
        margin: 0 1em 1em 0;
        [...]
</style>

https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/gallery/style.scss
https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/columns/style.scss

I want to disable the default block styles and let my theme handle the styles.

What is your proposed solution?

A setting in theme.json would do. Or something with a filter or theme-support.

Or is it already possible to disable the default styles?

Extra info

This is what the documentation has to say about it:

Core blocks include default structural styles. These are loaded in both the editor and the front end by default. An example of these styles is the CSS that powers the columns block. Without these rules, the block would result in a broken layout containing no columns at all.

https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#default-block-styles

[erikjoling]

I listened to the Gutenberg Changelog podcast and read these github issues: WordPress/wordpress-develop#1236 and #25220 (comment).

As a theme author I'm trying to get my head around this. Should I override the core block css by adding my own theme css for specific blocks? Like this: wp_add_inline_style( "wp-block-gallery", file_get_contents( get_theme_file_path( "styles/blocks/gallery.css" ) ) );?

What would be the best path? @aristath @gziolo

[aristath]

As it happens I am currently writing a post for these changes, and it will be published in a few days in the make.w.org blog.

Below is a neat function you can use in your theme to add styles for blocks. It works both for WP 5.8 as well as previous versions, and adds your block-styles both in the frontend and the editor.

/**
 * Attach extra styles to multiple blocks.
 */
function my_theme_enqueue_block_styles() {
	// An array of blocks.
	$styled_blocks = [ 'paragraph', 'code', 'cover', 'group', 'gallery' ];

	foreach ( $styled_blocks as $block_name ) {
		// Get the stylesheet handle. This is backwards-compatible and checks the
		// availability of the `wp_should_load_separate_core_block_assets` function,
		// and whether we want to load separate styles per-block or not.
		$handle = (
			function_exists( 'wp_should_load_separate_core_block_assets' ) &&
			wp_should_load_separate_core_block_assets()
		) ? "wp-block-$block_name" : 'wp-block-library';

		// Get the styles.
		$styles = file_get_contents( get_theme_file_path( "styles/blocks/$block_name.min.css" ) );

		// Add frontend styles.
		wp_add_inline_style( $handle, $styles );

		// Add editor styles.
		add_editor_style( "styles/blocks/$block_name.min.css" );
		if ( file_exists( get_theme_file_path( "styles/blocks/$block_name-editor.min.css" ) ) ) {
			add_editor_style( "styles/blocks/$block_name-editor.min.css" );
		}
	}
}
// Add frontend styles.
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_block_styles' );
// Add editor styles.
add_action( 'admin_init', 'my_theme_enqueue_block_styles' );

If you want to remove default styles for a block, you could just de-register its styles using the wp_deregister_style function.

[erikjoling]

Great, thank you! I will try it out. If it works for me I'll close this issue and add a reference to your future blog post.

[chthonic-ds]

@aristath @erikjoling has the post mentioned above been published on make.w.org? I've looked but can't find it.

[aristath]

No, it's not published. Posts like that are usually published when WordPress reaches beta.

[colorful-tones]

I'm super curious on a write up on all the neat changes that @aristath has helped introduce here in #32051, and #31239, and even #32275. These all seem to have a great impact on how styling can be applied by theme authors.

@aristath is there a post looming please?

Also, huge thanks for all your work! 👏

[aristath]

Not yet... Not everything made it in 5.8 so I'm compiling a list of all the improvements that did make it. For example, splitting theme.css files from #31239 didn't make it in 5.8 so will probably be part of 5.9.
There's also a couple commits that still need to be backported and until they get committed to core any published posts will be false (for example https://core.trac.wordpress.org/ticket/53375 is still pending).

[chthonic-ds]

Super, thank you! https://make.wordpress.org/core/2021/07/01/block-styles-loading-enhancements-in-wordpress-5-8/

[erikjoling]

Thanks for sharing.

If I opt-in loading only the styles for rendered blocks in a page; would it be possible to disable the core style (for example for the gallery block) and load my own gallery style?

[aristath]

If I opt-in loading only the styles for rendered blocks in a page; would it be possible to disable the core style (for example for the gallery block) and load my own gallery style?

Yes.

wp_deregister_style( 'wp-block-gallery' );
wp_register_style( 'wp-block-gallery', $src, ... );

[erikjoling]

Thank you for you work and providing extra information Ari. I will close this issue.

[szykuc]

If I opt-in loading only the styles for rendered blocks in a page; would it be possible to disable the core style (for example for the gallery block) and load my own gallery style?

Yes.

wp_deregister_style( 'wp-block-gallery' );
wp_register_style( 'wp-block-gallery', $src, ... );

Hello, i found this thread because i try to remove default styles for some blocks. I was try yours code but it didn't work for me. Still it load default gallery css in /wp-includes/css/dist/block-library/style.min.css
Any advices?

function remove_wp_block_style(){ 
    wp_deregister_style( 'wp-block-gallery' );    
} 
add_action( 'wp_enqueue_scripts', 'remove_wp_block_style', 100 );

[kjtolsma]

@szykuc I think you also must use this filter:

add_filter( 'should_load_separate_core_block_assets', '__return_true' );

[szykuc]

@szykuc I think you also must use this filter:

add_filter( 'should_load_separate_core_block_assets', '__return_true' );

Thank you, that was a point.
I need to use also:
filter( 'styles_inline_size_limit', '__return_zero' );
to avoid inline styles for every block

[illycz]

Is it possible remove styles for specific block also in editor?
Thanks