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!
![](https://wpblockz.com/wp-content/uploads/2020/09/custom_style-edited.png)
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:
![](https://wpblockz.com/wp-content/uploads/2020/09/custom_style-1024x717.png)
More tutorials
How to use multiple post types in a Query Loop Block
Currently the Query Loop only supports one post type. In this article we will show how we add multiple post types to…
Read more How to use multiple post types in a Query Loop Block
How to add filters and search to the WordPress Query Loop Block
It has been a pain to add filters and search to your feeds in Gutenberg. Not any more, we will teach you…
Read more How to add filters and search to the WordPress Query Loop Block
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