How to Properly add CSS to Gutenberg Editor and the Blocks

The goal of Gutenberg editor is to display the website content while you’re editing it the same way it is displayed on the website. But if you’re using your custom theme, it isn’t going to happen just by itself.

#Gutenberg  /    /   1

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:

Using alignment toolbar in Gutenberg editor.
When I click the button, data-align="wide" attribute is added to the block. And we can add specific CSS to this block state.

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;
}
Add custom CSS for post titles in Gutenberg
As you can see I made post titles in Gutenberg look like on my website pages.

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:

Extra CSS for selected blocks in Gutenberg
Just an example – I added #e0e0e0 background for any selected blocks

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

More Gutenberg

Misha Rudrastyh
About the author Misha Rudrastyh

Passionate about WordPress and snowboarding, creating websites for over 10 years! Let's work together — just contact me.

If you are a developer too, subscribe to my facebook page.

Comments 1

Leave your question or feedback

phpjsHTMLCSSSQLCode
Please, enter a comment
Please, enter a name
Incorrect email