Register block styles in WordPress Gutenberg blocks
Adding custom styles to Gutenberg blocks is easy and at the same time very useful. All you need to do is to add a snippet in your functions.php or plugin file. Selecting a style to a block simply adds a class that you can style wherever you want!

Share
Adding a style to a block with php
Below is a code example that adds a style named ‘my-cover‘ to the cover block. This adds a class called ‘is-style-my-cover‘ to the block.
add_action('init', function() {
register_block_style('core/cover', [
'name' => 'my-cover',
'label' => __('My custom cover', 'mydomain'),
]);
});
Style it in your stylesheet:
.is-style-my-cover {
background-color: pink;
min-height: 80vh;
}
Add your styling to an admin stylesheet
In order to see your block styling in the editor, the WordPress editor also needs to read your css. Write a custom style sheet with the same styles (do this with scss & imports if you can!). Append the stylesheet to admin like this:
wp_register_style('my-block-styles', get_template_directory_uri() . '/css/my-custom-block-styles.css', false);
The above code should also be added in the ‘init’-hook. Together with the block style snippet, your functions.php should look something like this:
add_action('init', function() {
wp_register_style('my-block-styles', get_template_directory_uri() . '/css/my-custom-block-style.css', false);
register_block_style('core/cover', [
'name' => 'my-cover',
'label' => __('My custom cover', 'mydomain'),
]);
});
The style will show up here, along the WordPress default style:

More tutorials
Learn Gutenberg block building – Create a block that renders an ACF field
With this tutorial, you’ll learn how to create a custom Gutenberg block that displays an ACF field on the front-end of your…
Read more Learn Gutenberg block building – Create a block that renders an ACF field
What is the theme.json in WordPress Full Site Editing?
Short introduction to the theme.json file that defines a WordPress full site editing theme. Includes useful resources to learn more!
Read more What is the theme.json in WordPress Full Site Editing?
Creating a server side rendered Gutenberg block
Learn how to create your first ‘Hello World’ server side block. Adding dynamic content to your block theme with ease.