Dequeue Gutenberg Block Inline Styles in WordPress

Block themes, and classic themes that opt in, make WordPress load CSS for each Gutenberg block separately. Small block styles are printed inline as <style id="wp-block-group-inline-css"> and so on. When your own CSS already styles those blocks, these inline styles are extra bytes and extra rules to override.

This snippet dequeues the inline styles of the blocks you list, one block at a time, and leaves every other block style in place.

The snippet

<?php
/**
 * Remove the CSS of single core blocks that WordPress loads one block at a time
 * (<style id="wp-block-group-inline-css"> and similar).
 */

// ===== Config: style handles to remove (the id without "-inline-css" or "-css") =====
function dpc_removed_block_styles() {
	$handles = array(
		'wp-block-post-title',
		'wp-block-spacer',
		'wp-block-group',
		'wp-block-paragraph',
		'wp-block-template-part',
		'wp-block-columns',
		'wp-block-post-featured-image',
	);
	// ===== End of config =====

	return (array) apply_filters( 'dpc_removed_block_styles', $handles );
}

// Styles of blocks in the template are queued before wp_head, blocks in classic theme
// content are queued later and printed in the footer, so remove them at both points.
add_action( 'wp_enqueue_scripts', 'dpc_dequeue_block_styles', 99 );
add_action( 'wp_footer', 'dpc_dequeue_block_styles', 1 );

function dpc_dequeue_block_styles() {
	foreach ( dpc_removed_block_styles() as $handle ) {
		wp_dequeue_style( $handle );
	}
}

How it works

Find the handle in the page source: take the id of the <style> or <link> tag and drop -inline-css or -css. wp-block-group-inline-css becomes wp-block-group.
With separate block assets, WordPress only queues the CSS of blocks that are on the page. Blocks in a block theme template are rendered before wp_head, so wp_enqueue_scripts at priority 99 removes their styles before the head is printed.
In classic themes, blocks in the post content are rendered later and their styles are printed in the footer. The second pass on wp_footer at priority 1 removes those before WordPress prints them.
wp_dequeue_style() only takes the style out of the queue; it stays registered, so nothing breaks if another block or plugin asks for it again.

The older version of this post used a generic function name and namespaced callback string, and only removed styles queued before the head.

Add it with Scripts Organizer

In Scripts Organizer go to Code Blocks → Add New and give the block a name. Set Trigger location to Everywhere, tick PHP under Script location, paste the code into the PHP editor and publish. Leave Action/Hook empty. The styles are queued on front-end requests, where Everywhere code is loaded before wp_enqueue_scripts runs.

The same code also works unchanged in a small plugin or an mu-plugin.

Customise it

Add or remove handles in dpc_removed_block_styles(). Core block handles follow wp-block-{block-name}, for example wp-block-image or wp-block-navigation.
Remove all block CSS at once instead: see Remove Gutenberg Block Library CSS in WordPress.
Other theme or plugin styles: see Deregister Scripts and Styles.

Gotchas

The block’s layout, spacing and alignment come partly from this CSS. Check columns, groups and featured images on desktop and mobile after removing it, and add the rules you need to your own stylesheet.
Styles WordPress generates from block settings, such as core-block-supports-inline-css and the global styles from theme.json, are separate handles and are not removed here.
The editor loads block CSS on its own, so blocks still look right while editing.

In the Scripts Organizer library Import it with one click from Scripts Organizer.