Unregistering WordPress editor block styles

Discover in this tutorial how to remove WordPress block styles that you don’t want to display using code.

In a previous tutorial you saw how to create custom block styles to offer more layouts of the same block.

But what happens if you prefer to remove the default styles or those added by some plugins/themes and leave only the ones you have created?

That’s okay because WordPress has a feature that helps you do that.

Let’s see how.

Options to unregister or remove block styles from the WordPress editor

Option A

If the block style has been registered at the server level using the register_block_style() function you can use this strategy to remove it.

Add the following code at the end of functions.php or in your functionality plugin:

In this code you use the function unregister_block_style to remove the styles you are interested in.

Specifically, with the above example you are unregistering the ’rounded’ style of the image block (this is a fictitious example).

I only recommend you to use this option if you know that a plugin or theme has used the function register_block_style() to add the styles.

If it has used JavaScript to register it, this strategy will not work for you.

But don’t worry because here’s how to do it in that case.

Option B

If the block style has been registered with JavaScript, follow these instructions.

Create a file called block-styles.js inside the /js/ folder of your child theme (if it doesn’t exist you can create it) with the following code:

Each style consists of 2 elements:

• core/xxxxx -> the block from which we are going to remove the styles
• name -> internal name of the styles

With the above example you unregister:

• All styles added to the image block by the EditorsKit plugin
• The ‘Large’ style of the quote block
• The ‘Solid Color’ style of the pullquote block

This is just an example, the idea is that you customize it according to your needs.

Enqueue the new styles

Once you have the file where you have unregistered the styles you must enqueue it to the theme. To do this add the following snippet to the end of functions.php:

There you have it. The block styles you have decided will no longer be shown in the block editor.

WordPress native blocks

Here you have the list with all the native WordPress blocks:

You may find this information useful for unregistering styles of the different blocks.

Conclusions

Do you prefer not to load the styles of blocks that you are not going to use? Or maybe you don’t want your client to see them? Well, now you know how to unregister them with a little bit of code.

If you have any question, please leave it in the comments. And if you want to give me a suggestion for future snippets, please send it through the contact form.

Benefits of being a subscriber. 🙂