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:

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;
}

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:

#e0e0e0
background for any selected blocksDo you think I forgot to mention something in this tut? Let’s discuss it in comment below!
More 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
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:
Great introduction to Gutenberg CSS additions. Thanks Misha!
Amazing! Thank you for writing this, it has really helped me out :D