Add and Remove Block Styles in Gutenberg in WordPress

Every block type in Gutenberg editor can have multiple style options. It is useful to learn how to add and remove them. By using the Block Styles UI for previewing and selecting different styles, you and your editors won’t need to remember specific class names.

You can add styles to any block type in Gutenberg, not only to core blocks but also custom blocks from plugins.

First, add the following code to a new plugin (or your theme’s functions.php file). You can use the enqueue_block_editor_assets hook to load assets into the block editor and enqueue_block_assets hook for block styles in general (needed in the editor and on the front end).

<?php
/*
Plugin Name: My Custom Block Styles
Description: Add custom block styles in Gutenberg editor
Author: Open4Tech
*/
function open4tech_gutenberg_scripts() {
	wp_enqueue_script(
		'open4tech-block-script', 
		plugins_url( 'block.js', __FILE__ ), 
		array( 'wp-blocks' ), 
		filemtime( plugin_dir_path( __FILE__ ) . 'block.js' ),		
		true
		);
}
add_action( 'enqueue_block_editor_assets', 'open4tech_gutenberg_scripts' );

function open4tech_gutenberg_styles() {
	wp_enqueue_style(
		'open4tech-block-style',
		plugins_url( 'style.css', __FILE__ )
		);
}
add_action( 'enqueue_block_assets', 'open4tech_gutenberg_styles' );

Then create an empty block.js file in the directory of your plugin (or in /your-theme-folder/ if you use the code in functions.php) and add the blocks which you want to style using registerBlockStyle.

wp.domReady( () => {

	wp.blocks.registerBlockStyle( 'core/heading', {
		name: 'default',
		label: 'Default',
		isDefault: true,
	} );

	wp.blocks.registerBlockStyle( 'core/heading', {
		name: 'alt',
		label: 'Alternate',
	} );

} );

In the example, we add two new styles to the heading block. One will be the default and one alternate. When a style is selected, a class of .is-style-{name} is applied to the block. So in our stylesheet, the h2 { } has default styling and h2.is-style-alt { } has alternate style. You should put all styling in the style.css file located in the directory of your plugin (or in /your-theme-folder/ if you use the code in functions.php).

It is useful to register more than one style because the block style selector will let you select what style you want to be applied but will not let you unselect it and return to default styling. You can register an extra style option without adding any specific styles to it and use it for such cases.

If you add isDefault: true then this style will be marked active on blocks that don’t already have a style specified.

Along with adding new styles, you can also remove the existing ones. You can use unregisterBlockStyle to remove existing block styles from a block and add your own. Add the following to the block.js file:

wp.domReady( () => {
	wp.blocks.unregisterBlockStyle( 'core/button', 'default' );
	wp.blocks.unregisterBlockStyle( 'core/button', 'outline' );
	wp.blocks.unregisterBlockStyle( 'core/button', 'squared' );

	wp.blocks.registerBlockStyle( 'core/button', {
		name: 'solid',
		label: 'Solid',
		isDefault: true,
	});

	wp.blocks.registerBlockStyle( 'core/button', {
		name: 'gradient',
		label: 'Gradient',
	} );

} );

This code snippet will remove the ‘default’, ‘outline’ and ‘squared’ button block styles, which are registered by default in the editor and then will add your custom block styles – ‘solid’ and ‘gradient’. You should also add the corresponding styling for the newly created button blocks in the style.css file.

.wp-block-button.is-style-solid .wp-block-button__link {
  background: #54a3ee !important;
}
.wp-block-button.is-style-gradient .wp-block-button__link {
  background: linear-gradient(
    to bottom,
    #6db3f2 0%,
    #54a3ee 50%,
    #3690f0 51%,
    #1e69de 100%
  ) !important;
}
 
.wp-block-button.is-style-gradient .wp-block-button__link:hover {
  opacity: 0.9;
  cursor: pointer;
}

Result:

You need to know the full block name in order to add or remove styles from it. Use the following code in the browser console after all the Gutenberg scripts have been loaded (e.g. in the editor window of a post) to show all currently registered blocks, including their attributes.

console.log(wp.blocks.getBlockTypes());