How to overwrite or remove core block styles

The technical documented term for block styles is Block Style Variations and are the smallest unit of Styles. They are on the block level. The others are Global Style Variations coming with a block theme, and Sections Style variations, that are for patterns and container blocks.

WordPress includes a few block-level styles. You might have an urge to change them. Adjust them to your theme or branding designs. This post shows you three ways on how to alter those styles.

Use Editor > Styles > Blocks

WordPress offers more than one style for certain blocks. For example, the Buttons block has two styles: Fill and Outline. 

Content creators and site builders can change the block’s style on a per-block basis. They can also change it on a per-site basis via the Styles area in the site editor.

Overwrite core block styles via theme.json

As a developer, you can overwrite the Outline button styles via theme.json file.

The example code below shows the modification of the core/button variation with a: 

• 0px border radius.
• 3px wide blue border.

These styles will replace the default rounded, black, 2px borders.

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"styles": {
		"blocks": {
			"core/button": {
				"variations": {
					"outline": {
						"border": {
							"color": "blue",
							"radius": "0",
							"style": "solid",
							"width": "3px"
						},
					}
				}
			}
		}
	}
}

🖼️

For other core/block styles, you can overwrite their styles in the styles.blocks.core/[block] section of your theme.json file—simply replace [block] above with the actual block name. You can find a detailed walk-through of this process, including a list of available core block styles, on the WordPress.org Developer Blog: Customizing core block style variations via theme.json.

Removing unwanted core block styles

There are two functions you’ll need to address: 

• The PHP function unregister_block_style()
• The JavaScript function unregisterBlockStyle() 

Block styles can only be unregistered in the same coding language used to register them. Core blocks are all registered via JavaScript. The example code removes the extra block style for the image block called rounded.

wp.domReady( function() {

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

} );

If you are keen to learn more about how to create block styles, I just published a deep dive into that topic.

Mastering Custom Block Styles in WordPress: 6 Methods for Theme and Plugin Developers

Resources to learn more

For more ways to change the block editor, read 15 ways to curate the WordPress editing experience.

For more articles on the various styles, there are great articles on the WordPress Developer blog:

• Styling sections, nested elements, and more with Block Style Variations in WordPress 6.6
• Leveraging theme.json and per-block styles for more performant themes
• Per-block CSS with theme.json
• Beyond block styles, part 1: using the WordPress scripts package with themes
• Beyond block styles, part 2: building a custom style for the Separator block
• Beyond block styles, part 3: building custom design tools

What are other questions you might have about changing core blocks via the Global Styles? Leave a comment or join us on Discord