Add Editor Style for Custom WordPress Block Editor After WordPress Update 5.8

If after having upgraded to WordPress 5.8, your pretty custom editor stopped working, here’s a quick post to explain why that happened and how to quickly fix it with the function add_theme_support() to then add editor style.

Requirements: You’ll be modifying your theme’s files, which is strongly discouraged. For this reason, we create “Child Themes”, something you can achieve very easily in a couple of minutes. Check out how to create a child theme at my toolkit, step by step.

Please note: I’ll be using, as example, screenshots for the Twenty Twenty Theme but this applies to any classic theme.

What Are We Talking About?

I mentioned in a previous post that I had customized my editor for a better readability, with a child theme for Twenty Twenty. I didn’t get the chance to publish how I had achieved that but now it’s one less post to update.

Basically, by adding a new style sheet “for the editor”, we were able to make it look like in the front end (what people see); since WordPress 5.8, we need to add a function.

Straight to the point: I had customized my editor simply by re writing the /assets/css/editor-style-block.css file; and now, we need a little bit more of coding.

WordPress 5.8 and a New Way to Customize the Gutenberg Editor

We use the WordPress function add_theme_support() for a lot of things, such us making our theme able to support thumbnails, post formats, etc.

With WordPress 5.8, “The widgets-block-editor (for add_theme_support() ) feature enables the Widgets block editor,” as stated at developer.wordpress.org.

And many things have changed with that; for instance, as you’ll see later on, the selectors we need in our style sheet are no longer the same we used to use, and we need to create a function so that our style sheet works.

How to, Step By Step

Step 1: Find Your Selectors

First of all, we need to find the new selectors for our editor. Simply open the editor, add a few blocks you always use, and then open the Developer Tools (right there in the editor, not in preview mode).

Once you’ve done that, search for the selectors that have the expression “rich-text.block-editor-rich-text__editable“.

Personally, I only need the following: paragraphs, ol and ul elements, quotes and headings; hence this is what I wrote in my editor’s style sheet.

/*This is New*/
p.rich-text.block-editor-rich-text__editable,
ol.rich-text.block-editor-rich-text__editable,
ol.rich-text.block-editor-rich-text__editable li,
ul.rich-text.block-editor-rich-text__editable,
ul.rich-text.block-editor-rich-text__editable li,
[role="textbox"].rich-text.block-editor-rich-text__editable p /*quotes*/,
blockquote.rich-text.block-editor-rich-text__editable /*citations*/
{
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size:20px;
	line-height:1.5em;
	color:#111;
}

h2.rich-text.block-editor-rich-text__editable {
	font-size: 30px;
	color: #222;
}

h3.rich-text.block-editor-rich-text__editable {
	font-size: 25px;
	color: #888;
}

Step 2: Save the File

Quick heads up: I had to re name the file; even after having deleted my caché and everything, it wouldn’t work.

So, once you’re done writing down all the selectors you need with their properties and values, simply save your file under /assets/css/whatever-name-you-give-to-your-editor-style-block-.css. In the example below, I named it “my-editor-style-block.css“.

Step 3: Add the function!

Finally in your functions.php file, the little magic:

// Gutenberg Custom Stylesheet
add_theme_support('editor-styles');
add_editor_style( '/assets/css/my-editor-style-block.css' ); // make sure this path looks like yours

And that’s it!

Further reading

• add_theme_support()
• add_editor_style()