How to Add CSS to a Gutenberg Block
In this tutorial I am about to show how you can add CSS to your custom Gutenberg block and as a result our subscription form block is going to look like this:

Long ago in order to add CSS to a block we had to use enqueue_block_editor_assets
hook and wp_enqueue_style()
function. Right now this approach is obsolete and the whole process of working with block CSS becomes so much simpler.
Inline CSS
Before we dive into the chapther where we are going to enqueue CSS files, let’s learn how to add inline styles first. For example I would like the background color of my block to be #f4faff
, how can I achieve that?
The edit()
function:
import { useBlockProps } from '@wordpress/block-editor';
export default function Edit() {
const inlineStyles = {
backgroundColor: '#f4faff'
}
return (
<div { ...useBlockProps( { style: inlineStyles } ) }>
...
The save()
function:
import { useBlockProps } from '@wordpress/block-editor';
export default function Save() {
const inlineStyles = {
backgroundColor: '#f4faff'
}
return (
<div {...useBlockProps.save( { style: inlineStyles } )}>
...
Enqueueing CSS
Provide paths to CSS files in block.json
First things first let’s add the paths to the CSS files to our block.json
file:
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "rudr/subscription",
...
"editorStyle": "file:./build/index.css",
"style": "file:./build/style-index.css"
}
So we have two more parameters in block.json
now:
editorStyle
– this CSS file is going to be loaded in the Block Editor only.style
– this CSS file is not only going to be loaded in the Block Editor but also its content will be inserted between<style>
tags only on those site pages where our block is used.
How it was before
Before block.json
file came on the scene we had to use hooks and wp_enqueue_style()
/ wp_register_style()
functions.
enqueue_block_editor_assets
– only for block editor view,enqueue_block_assets
– both for frontend view and block editor view.
add_action( 'enqueue_block_editor_assets', function() {
wp_enqueue_style(
'misha-style-1',
plugin_dir_url( __FILE__ ) . 'build/index.css',
array(),
filemtime( plugin_dir_path( __FILE__ ) . 'build/index.css' )
);
} );
add_action( 'enqueue_block_assets', function() {
wp_enqueue_style(
'misha-style-2',
plugin_dir_url( __FILE__ ) . 'build/style-index.css',
array(),
filemtime( plugin_dir_path( __FILE__ ) . 'build/style-index.css' )
);
} );
Load a registered stylesheet or multiple stylesheets
Both editorStyle
and style
parameters accept an array of values.
{
"style": [
"file:./build/style-index.css",
"misha-style"
]
}
Everything is already clear with the first file, but what misha-style
actually is? It is a handle of any pre-registered CSS file. So you need to register misha-style
first.
add_action( 'enqueue_block_assets', function() {
wp_register_style(
'misha-style',
plugin_dir_url( __FILE__ ) . 'assets/misha.css',
array(),
filemtime( plugin_dir_path( __FILE__ ) . 'assets/misha.css' )
);
} );
Please note, that content of misha.css
won’t be inserted between <style>
tags directly in page HTML, the file is going to be included as usual.
How @wordpress/scripts Works with CSS/SCSS Files
The amazing thing is that @wordpress/scripts allows you to process CSS, SASS or SCSS files referenced in JavaScript files. For example you can this into your src/index.js
file:
import "./editor.scss"
import "./style.scss"
import "./somecustomstyle.scss"
When you run the build using the default command wp-scripts build
(also applies to start
) in addition to the JavaScript file index.js
generated in the build
folder, you should see two more files:
style-index.css
– it isstyle.scss
file,index.css
– all imported CSS exceptstyle.css
will bundled into this file, in our case it iseditor.scss
andsomecustomstyle.scss
.

Misha Rudrastyh
Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.
Need some developer help? Contact me
Great advices!
Hi Misha,
do you have an idea, how to make the CSS for the editor post-type-aware?
For example, I’d like to style .editor-post-title__input differently for Post and for Page.
I thought about running some javascript adding dynamically the classes with the results like:
.wp-block.editor-post-title__block.editor-post-type-page
Great introduction to Gutenberg CSS additions. Thanks Misha!
Amazing! Thank you for writing this, it has really helped me out :D