SOLVED: How to load editor styles in Gutenberg

How To
1

Browser: Chrome , Safari, FF, Latest
OS: macOS

I’m loading editor stylesheet so that editing a blog or page in the editor loads styles consistently in both the editor and front end. When I load editor stylesheets it seems to create an issue where the editor loses styles.

Here’s my code placed in bricks child theme functions.php

add_theme_support( 'editor-styles' );
add_action('init', 'dgs_add_editor_styles');
function dgs_add_editor_styles() {
    add_editor_style( get_stylesheet_directory_uri() . '/editor-style.css' );
}

Video: Screencastify

I expect that when I activate editor styles that all editor styles are retained, with the addition of whatever I put in my editor stylesheet.

2

Hi Alex,
Thanks so much for your report!

I was able to reproduce the issue and added it to our bug tracker.
The regular editor inline styles are missing in this case.

Best regards,
timmse

PS: Nice Browser :handshake:

3

Haha, thanks! I’ve been using it for a week so far and loving Arc!

It should note in addition to trying the init hook I also tried after_theme_setup and the issue persists.

4

@digisavvy The add_theme_support needs to be called in the correct hook, which is after_setup_theme. After which you have to call the add_editor_style.

The following PHP should work to load your editor-styles.css (located in the root directory of your Bricks child theme)

add_action( 'after_setup_theme', function() {
	add_theme_support( 'editor-styles' );
	add_editor_style( 'editor-styles.css' );
} );

Here is a good guide that goes into this topic in more detail: https://rudrastyh.com/gutenberg/css.html#custom_css

2 Likes
5

Thank you, i was looking for this tutorial for a long time.

6

Ahhh, thank you @thomas - Kickin’ myself for that one! I appreciate it.