Snippet: Unregistering block styles

[ryanwelcher]

This came up in one of my live streams and it required some thinking to get it working. This snippet will unregister all registered block styles for all blocks.

This can be tweaked to only target specific blocks as well.

/**
 * WordPress dependencies
 */
import { registerPlugin } from '@wordpress/plugins';
import { useSelect, select as inlineSelect } from '@wordpress/data';
import { store as blockStore, unregisterBlockStyle } from '@wordpress/blocks';
import { useEffect } from '@wordpress/element';

const Render = () => {
	const types = useSelect(
		( select ) =>
			select( blockStore )
				.getBlockTypes()
				?.map( ( type ) => type.name ),

		[]
	);

	useEffect( () => {
		types.forEach( ( type ) => {
			const blockStyles =
				inlineSelect( blockStore ).getBlockStyles( type );

			blockStyles.forEach( ( style ) => {
				unregisterBlockStyle( type, style.name );
			} );
		} );
	}, [ types ] );

	return null;
};

registerPlugin( 'my-plugin-remove-block-styles', {
	render: Render,
} );

[bph]

Topic approved. Conversation continues on the issue:

• Snippet: Unregistering block styles #427