WordPress 6.0 (add_editor_style) doesn't load the style.css within the Gutenberg Editor

Question

I'm following a Udemy WordPress Course to create a custom WordPress Block Theme. I successfully registered the block type within my functions.php and can select my Block in the Gutenberg Editor.

The tutorial suggested to use the following ways to load the styles for my gutenberg block element, so the the css will be loaded in the frontend as well.

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 isn't loading the style.css file for my block.

Image from the Gutenberg Backend

Any Tips, what I might be missing or how I can debug the problem?

Thank you very much!

Answer 1

In a block based theme, wp-block-styles is used to load the stylesheet in the Editor and Frontend. The TwentyTwentyTwo Theme uses the same technique; it may be you've followed a (now) outdated theme tutorial given block based themes are relatively new.

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 can't see your styles being loaded, check the class names of the blocks you're targeting matches the HTML markup.

PS. Always clear your browser cache/hard refresh to be sure you're not seeing a cached version of the Editor - its a very common but overlooked cause of many issues.