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:

Gutenberg block with added CSS styles

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:

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.

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:

  1. style-index.css – it is style.scss file,
  2. index.css – all imported CSS except style.css will bundled into this file, in our case it is editor.scss and somecustomstyle.scss.
Misha Rudrastyh

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

Follow me on X