Remove block styles in the Block Editor

Question

The Block Editor recently introduced block styles as seen below:

How do we disable these?

Answer 1

We start off by finding out which block styles exists via .getBlockTypes(). This will dump it into the console:

wp.domReady(() => {
    // find blocks styles
    wp.blocks.getBlockTypes().forEach((block) => {
        if (_.isArray(block['styles'])) {
            console.log(block.name, _.pluck(block['styles'], 'name'));
        }
    });
});

Example output:

core/image (2) ["default", "rounded"]
core/quote (2) ["default", "large"]
core/button (2) ["fill", "outline"]
core/pullquote (2) ["default", "solid-color"]
core/separator (3) ["default", "wide", "dots"]
core/table (2) ["regular", "stripes"]
core/social-links (3) ["default", "logos-only", "pill-shape"]

With this information, we can deactivate the block styles as desired. For example, if we want to remove the large quote style, we can use the following in our remove-block-styles.js:

wp.domReady(() => {
    wp.blocks.unregisterBlockStyle('core/quote', 'large');
} );

We can load the remove-block-styles.js in the themes functions.php:

function remove_block_style() {
    // Register the block editor script.
    wp_register_script( 'remove-block-style', get_stylesheet_directory_uri() . '/remove-block-styles.js', [ 'wp-blocks', 'wp-edit-post' ] );
    // register block editor script.
    register_block_type( 'remove/block-style', [
        'editor_script' => 'remove-block-style',
    ] );
}
add_action( 'init', 'remove_block_style' );

If we want to remove all block styles (as listed above), we can use:

wp.domReady(() => {
    // image
    wp.blocks.unregisterBlockStyle('core/image', 'rounded');
    wp.blocks.unregisterBlockStyle('core/image', 'default');
    // quote
    wp.blocks.unregisterBlockStyle('core/quote', 'default');
    wp.blocks.unregisterBlockStyle('core/quote', 'large');
    // button
    wp.blocks.unregisterBlockStyle('core/button', 'fill');
    wp.blocks.unregisterBlockStyle('core/button', 'outline');
    // pullquote
    wp.blocks.unregisterBlockStyle('core/pullquote', 'default');
    wp.blocks.unregisterBlockStyle('core/pullquote', 'solid-color');
    // separator
    wp.blocks.unregisterBlockStyle('core/separator', 'default');
    wp.blocks.unregisterBlockStyle('core/separator', 'wide');
    wp.blocks.unregisterBlockStyle('core/separator', 'dots');
    // table
    wp.blocks.unregisterBlockStyle('core/table', 'regular');
    wp.blocks.unregisterBlockStyle('core/table', 'stripes');
    // social-links
    wp.blocks.unregisterBlockStyle('core/social-links', 'default');
    wp.blocks.unregisterBlockStyle('core/social-links', 'logos-only');
    wp.blocks.unregisterBlockStyle('core/social-links', 'pill-shape');
} );

Major credits to Per Søderlind for the snippets.

Answer 2

This has now changed to

wp.blocks.unregisterBlockStyle('core/image', 'rounded');

Gotta love those guys in core ;)

Answer 3

The answer from Christine already gets you quite far but I saw two ways to still improve it:

1. The snippet that helps you get the list of block styles only lists the default styles of blocks, not the currently registered ones. So if some other plugin/code has added further styles they will be missed.
2. It makes you manually unregister the styles after you got the list.

Let's fix this. :)

1. Getting the real, current list of block styles:

_.forEach(wp.blocks.getBlockTypes(), function(blockType){
    let blockStyles = wp.data.select('core/blocks').getBlockStyles(blockType.name);
    if(!_.isEmpty(blockStyles)){
        console.log(blockType.name, _.pluck(blockStyles, 'name'));
    }
});

2. Remove them all

_.forEach(wp.blocks.getBlockTypes(), function(blockType){
    let blockStyles = wp.data.select('core/blocks').getBlockStyles(blockType.name);
    if(!_.isEmpty(blockStyles)){
        _.forEach(_.pluck(blockStyles, 'name'), function(blockStyle){
                wp.blocks.unregisterBlockStyle(blockType.name, blockStyle);
        });        
    }
});

---

Of course you can get more creative from here with an allow/disallow list or whatever other logic you need, but I'll leave this as an exercise to the reader. :)

Answer 4

One thing I noticed when trying to achieve this is that my domReady kept running ahead of the core blocks registration making it unable to unregister the core block styles.

Not sure if it's a problem with my enqueuing or if something changed on WordPress core through an update. Changing domReady for a window load event was late enough for it to work. Not sure if there are any side effects of unregistering too late, however I haven't seen any issues so far.

Replace this:

wp.domReady( () => {
} );

With this:

window.addEventListener( 'load', ( event ) => {
} );

Answer 5

If you are using TwentyTwentyOne theme, you will not find the names of the core/image styles as Christine Cooper describes.

I had to dig a bit (themes › twentytwentyone › inc › block-styles.php › twenty_twenty_one_register_block_styles())

This is how the styles are registered:

        // Image: Borders.
        register_block_style(
            'core/image',
            array(
                'name'  => 'twentytwentyone-border',
                'label' => esc_html__( 'Borders', 'twentytwentyone' ),
            )
        );

        // Image: Frame.
        register_block_style(
            'core/image',
            array(
                'name'  => 'twentytwentyone-image-frame',
                'label' => esc_html__( 'Frame', 'twentytwentyone' ),
            )
        );

PHP to remove styles:

/**
 * Remove styles from core/image
 */
 function unregister_core_image_styles() {
     unregister_block_style( 'core/image', 'twentytwentyone-border' );
     unregister_block_style( 'core/image', 'twentytwentyone-image-frame' );
 }

add_action('init', 'unregister_core_image_styles', 20);

JS to remove the style (use this one):

wp.domReady(() => {
    wp.blocks.unregisterBlockStyle('core/image', 'twentytwentyone-border');
    wp.blocks.unregisterBlockStyle('core/image', 'twentytwentyone-image-frame');
    wp.blocks.unregisterBlockStyle('core/image', 'rounded');
    wp.blocks.unregisterBlockStyle('core/image', 'default');
});

For me, the unregistering styles with PHP was acting weird. I could not get rid of 'Default' and 'Rounded'.