WordPress 6.0 (add_editor_style) does not load style.css in Gutenberg editor

Question

I am taking the Udemy WordPress course to create a custom WordPress block theme. I successfully registered the block type in function.php and can select my block in the Gutenberg editor.

The tutorial suggested using the following method to load the styles for my gutenberg block element so that the css is also loaded on the frontend.

function lr_theme_features() {

   // Enqueue editor styles
   // Borrowed from TwentyTwentyToTheme
   add_editor_style( 'style.css' );
   add_theme_support('editor-styles');

}

add_action('after_setup_theme', 'lr_theme_features');

Anyway, no matter what I do, Gutenberg won't load my block's style.css file.

Image from Gutenberg backend

Any tips? What might I be missing or how can I debug the problem?

Thank you so much!

Answer 1

I'm also having some issues with my admin CSS. I found that if you import CSS in admin style.css like this, it breaks style loading:

@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");

Strangely, it works without quotes, like this:

@import url(https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap);

But not sure if this is a good practice... The best practice is to load external libraries like this instead of using import statements:

add_editor_style( 'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

Hope it helps others!

Answer 2

In block-based themes, wp-block-styles is used to load stylesheets in the editor and frontend. TwentyTwentyTwo The theme uses the same technology; given that block-based themes are relatively new, you may have followed a (now) outdated theme tutorial.

function lr_theme_features() {

   // Add support for block styles.
   add_theme_support( 'wp-block-styles' );

   // Enqueue editor styles.
   add_editor_style( 'style.css' );

}

add_action('after_setup_theme', 'lr_theme_features');

If you still don't see the styles loading, check that the class name of the block you're targeting matches the HTML tag.

PS. Always clear your browser cache/hard refresh to ensure you are not seeing a cached version of your editor - this is a very common but overlooked cause of many problems.