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 ;)