Register block styles in WordPress Gutenberg blocks

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: