Unlock Hidden Power: 6 Little-Known Ways to Master Custom Block Styles in WordPress
The example code below removes the additional block style for the image block called rounded.
wp.domReady( function() {
wp.blocks.unregisterBlockStyle( 'core/image', [ 'rounded' ] );
} );
For more ways to modify the block editor, read 15 ways to curate the WordPress editing experience.
Summary: custom block styles at a glance
You now know the six ways to register block styles for the WordPress block editor. Here’s a quick recap of what we covered:
| Block Style Added in Example Code | Language | Theme/Plugin | Parameter | File | Global Styles |
|---|---|---|---|---|---|
| 🟥 Red | PHP+ | Theme | theme.json |
yes | |
| 🟦 Blue | JSON | Theme | image-blue-border.json |
yes | |
| 🟧 Orange | PHP | Theme/Plugin | style_data |
yes | |
| 🟪 Purple | PHP | Theme/Plugin | style_handle |
.css | no |
| 🟩 Double Frame | PHP | Theme/Plugin | inline_style |
no | |
| ⬛ Black | JS | Theme/Plugin | .js + .css + .php |
no |
The easiest method is to add a JSON file to the /styles folder using the theme.json format. Another option uses minimal PHP in your functions.php file alongside your theme.json configuration. Both approaches add block styles to the Styles panel in the editor, where users can apply and customize them.
