How to add custom block editor css in WordPress

So you have changed the style of your WordPress child theme in style.css and see the changes on your WordPress website. But the style of the block editor remains the same when you are creating or updating your posts or pages.

If the Gutenberg editor style is consistent with your published website, you have a better idea of what the post/page will look like. How can I customize the style of the Gutenberg block editor in my theme editor?

Create css file in WordPress theme

First, we’ll need to create the css file where you will use to apply the style to the Gutenberg block editor.

To create the style file, make sure you are in your custom theme folder. You should be in a folder whose path ends with themes/twentytwenty-custom.

In your custom theme folder, create a folder to contain the css file. The convention is to have a nested folder whose path is assets/css. This is the convention of the default WordPress theme twenty-twenty.

mkdir -p assets/css/

Next, we will need to create a css file for the style of the Gutenberg block editor. The naming convention is editor-style-block.css where block is for the Gutenberg block editor. Here we’ll append custom to the filename, so we have editor-style-block-custom.css.

# [optional] create editor-style-block-custom.css
touch assets/css/editor-style-block-custom.css

# edit
vim touch assets/css/editor-style-block-custom.css

After you add the style that you want to apply to the WordPress Gutenberg block editor, save the file. For example, the default twentytwenty WordPress theme uses a serif font, and you may want to use a sans-serif font for the content of your editor. Then add the following css style to the editor-style-block-custom.css file:

.editor-styles-wrapper p, .editor-styles-wrapper ol, .editor-styles-wrapper ul, .editor-styles-wrapper dl, .editor-styles-wrapper dt {
	font-family: inherit;
}

Enqueue block editor CSS file in WordPress

Now, go to the Theme Editor page and open the functions.php file of your custom theme. Then add the following code.

add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_style( 'twentytwenty-custom-block-editor-styles',\
        get_theme_file_uri( "/assets/css/editor-style-block-custom.css" ),\
        false, wp_get_theme()->get( 'Version' ));
} );

Here we used the WordPress hook enqueue_block_editor_assets to enqueue the editor-style-block-custom.css file to block editor assets. We give the file a handle twentytwenty-custom-block-editor-styles which we will search in the source of any edit page.

We also set the version of the css file to be the same as the theme version, so in case you set the cache policy of your server, Nginx or Apache, to be max, the new version will be added as query string. See the Nginx http headers module documentation for more detail.

Verify editor style on an editor page

After you update the functions.php file, you should see the editor-style-block-custom.css added to the editor page source and the style of the editor should be changed correspondently.

To double check, edit any post or page on your WordPress website. If you are already on the editor webpage, refresh the page to make sure the change show up.

To see the source of the edit web page, press “Ctrl” and “U” or right click the page and click “View page source”. Now you should see an HTML page with syntax hightlight.

Now search for twentytwenty-custom-block-editor-styles-css which is the handle we give earlier. You should see something like the following with the search term as id.

<link rel='stylesheet' id='twentytwenty-custom-block-editor-styles-css' href='https://lgtm.cf/wp-content/themes/twentytwenty-custom/assets/css/editor-style-block-custom.css?ver=1.0.4' media='all' />

To triple check, search for block-editor-styles-css. You should see the parent editor style css as well.

Click on the file (e.g., https://lgtm.cf/wp-content/themes/twentytwenty-custom/assets/css/editor-style-block-custom.css?ver=1.0.4) to double check the content. If the css file doesn’t have the change you made, fresh the page. If you have to refresh every time after you make the change, increase the version in the style.css file of your WordPress theme to invaidate the cache.

We hope this article helps you to add aditional style to the WordPress block editor.

Let us know if it helps or if you have any questions.

---

wp_enqueue_style function: https://developer.wordpress.org/reference/functions/wp_enqueue_style/

---