How to Properly add CSS to Gutenberg Editor and the Blocks

If your theme is a minimalist one, maybe the content styles of your website and in Gutenberg matches 90%. But what if they don’t?

For example I’m using Roboto Slab font and I want it in Gutenberg editor too.

How to Add Custom CSS to Gutenberg

We are talking about custom themes right? So, in this case you can safely add all the php code from this tutorial to your current theme functions.php file. And let’s begin with this piece of code:

add_action( 'after_setup_theme', 'misha_gutenberg_css' );
function misha_gutenberg_css(){
	add_theme_support( 'editor-styles' ); // if you don't add this line, your stylesheet won't be added
	add_editor_style( 'style-editor.css' ); // tries to include style-editor.css directly from your theme folder
}

In this case your style-editor.css has to be just inside your current theme directory. But it is also possible to place this file in any theme subfolder, like gutenberg/style-editor.css – in this case your add_editor_style() function will look like this:

add_editor_style( 'gutenberg/style-editor.css' );

You can make a quick test if your stylesheet has been added to the website just by adding there something like body{ background: #000 }

Change Gutenberg Content Width

Once our CSS file is added to Gutenberg, we can make some customization. Let’s begin with one of the most important things – content width.

Actually everything you have to do is to change max-width CSS property for blocks:

.wp-block{
    max-width: 800px;
}
.wp-block[data-align=wide] { /* it can be "data-align=full" and also "right", "left" and "center" */
    max-width: 1228px;
}

As you probably noticed, blocks could have different data-align attributes. Here is the full list: center, right, left, wide and full. Example below:

How to Include Google Fonts?

Okay, nothing especial here, first of all you can use @import in the stylesheet we added before.

@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');

But it is also possible to use it this way. But in this case do not forget about add_theme_support( 'editor-styles' ); No, you do not have to add it twice, just make sure, this line exists.

add_editor_style( 'https://fonts.googleapis.com/css?family=Roboto+Slab' );

CSS for Post Title and H2, H3, etc

For the post title you can use this selector:

.editor-post-title__block .editor-post-title__input{
	font-family: 'Roboto Slab';
	font-size: 40px;
}

If you want to add some CSS to headings like h2, h3, h4 etc, you can use these rules:

h2, h3, h4{
	font-family: 'Roboto Slab'; /* easy breezy ;D */
}

Styles for Default Blocks

You can add CSS for certain blocks, using this selector .wp-block-{name} for example for image block, the selector will be .wp-block-image, but please note, that the element with this selector will be inside the .wp-block element! The full list of default block names you can find here.

.wp-block .wp-block-image{
	/* some CSS rules here */
}

But you can also use the full block slug I guess, example:

.wp-block[data-type="core/image"]{
	/* some CSS rules here */
}

Styles for your Custom Blocks

When you’re registering your custom blocks in Gutenberg, there is also an option to include CSS styles specifically for that certain block.

First of all – unless you are creating your custom plugin, this step is not necessary, because you can put all the styles in style-editor.css file, mentioned above.

Creating your custom plugin? The below code is for you.

add_action( 'enqueue_block_editor_assets', 'misha_custom_block' );
function misha_custom_block(){
	// wp_enqueue_script() with your block JS goes first...
	
	// block css
	wp_enqueue_style(
		'misha-block-css',
		get_stylesheet_directory_uri() . '/inc/block-misha.css',
		array( 'wp-edit-blocks' ),
		time()
	);
}

Please look at the 4th function parameter time() – we need this parameter, because during our developer work we do not want the CSS to be cached. But there is a better solution, replace time with filetime() function, which won’t update the caches every second, but only if the file has been changed.

filemtime( dirname( __FILE__ ) . '/inc/block-misha.css' )

CSS for Selected Blocks

Once you’re editing any Gutenberg block, a specific CSS class will be added to it – .is-selected. And this option gives you even more customization freedom. Example:

.wp-block.is-selected {
    background-color: #e0e0e0;
}

And the result:

Do you think I forgot to mention something in this tut? Let’s discuss it in comment below!

More Gutenberg

• Read how deactivate default blocks
• Can not add blocks?

# Gutenberg

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 Twitter