1

The Block Editor recently introduced block styles as seen below:

Block Styles

How do we disable these?

2

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", "circle-mask"]
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/qoute', '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', 'circle-mask');
    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.

|improve this answer|||||

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.