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.

Heads up! You need a child theme to work with this post. Check out what you need and how to create one in a couple of minutes at the Toolkit.

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 change with that; for instance, as you’ll see later on, the selectors we need in our style sheet are not 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 open the Developer Tools.

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

screenshot from this post

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

Laly York. Neurodivergent Gen-X writer / B.Ed. / Lawyer. Writing, coding and taking pics. From Jupiter, living in a soap opera; flying on the web with three blogs.

1 comment

  1. Yesterday I found that one of my blogs was broken, it lost its responsiveness. I turned off the plugins one by one and then I realized that is was not the plugins, it was the new widget full site editing. So for now I install the Classic Widget plugin and my blog become normal again.

Any thoughts?

%d bloggers like this: