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?
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?
Share Improve this question edited Dec 5, 2018 at 15:14 fuxia♦ 107k39 gold badges255 silver badges461 bronze badges asked Dec 5, 2018 at 9:46 Fabio MarzoccaFabio Marzocca 2134 silver badges14 bronze badges 2- Have you checked if your formatting dropdown list is available in the classical editor block? I haven't checked, but I wonder if it grabs the custom code for the classical editor as well. – birgire Commented Dec 5, 2018 at 9:56
- 1 Yes, it is shown. – Fabio Marzocca Commented Dec 5, 2018 at 10:08
1 Answer
Reset to default 2Editor 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.