How to add custom style to Gutenberg?

Question

In my Classic Editor, I have loaded a few custom styles, which can be selected from an additional "Format" dropdown list. They are included into an editor-style.css.

Now, in Gutenberg, that dropdown is no more visible and I can't apply my custom styles to the text.

How can I add custom styles to Gutenberg editor?

Answer 1

Editor styles work much differently in the block editor. This is because the content in the previous editor was loaded in an iframe, so you could use a stylesheet isolated from the rest of the admin, and do things like use the body selector to change the font in the editor.

The content in block editor, on the other hand, is not in an iframe, and shares styles with the rest of the admin. So if you tried to load an editor style in the block editor that changed the body font colour, you'd change the font colour for the entire UI.

Thankfully WordPress has a way to enqueue a stylesheet and apply styles as if it were an iframe. All you need to do is register support for editor styles:

add_theme_support( 'editor-styles' );

Then you can continue to enqueue an editor stylesheet like before:

add_editor_style( 'editor-style.css' );

But WordPress will now dynamically modify the CSS rules so that they only apply to the content in the editor. For example, CSS targeting the body element will be changed to target .editor-styles-wrapper.

See the section on editor styles from the Gutenberg handbook for more.