6

The Block Editor recently introduced block styles as seen below:

Block Styles

How do we disable these?

3 Answers 3

12

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.

1
  • If someone is considering automatically removing all block styles by using the mentioned wp.blocks.getBlockTypes() be aware that this is not the list of currently registered styles but just the default styles those blocks have defined which might have been changed by other code.
    – kraftner
    Nov 13, 2020 at 15:55
3

This has now changed to

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

Gotta love those guys in core ;)

1
  • Thanks! I've updated the answer with this adjustment.
    – Christine Cooper
    Nov 4, 2020 at 12:55
1

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. :)

2
  • Beautiful! Should I add this to my answer?
    – Christine Cooper
    Nov 13, 2020 at 22:22
  • Sure, go ahead but I guess the listing part should be noted as an alternative since sometimes you may actually want to get the initial default list of styles.
    – kraftner
    Nov 14, 2020 at 11:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.