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:

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.

# Gutenberg, Gutenberg Blocks

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