Wordpress - Remove block styles in the Block Editor

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.


This has now changed to

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

Gotta love those guys in core ;)

Tags:

Block Editor