Question 2914 in Wordpress Question posted in
The official Wordpress documentation can be found here.

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

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!

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    I had some problem with my admin css too.
    I found that if you import CSS like this in your admin style.css, it break the style load :

    @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");

    Strangly, it work 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 it’s a good practice…
    The best practive is too load external libraries like this, instead of use import statement :

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

    Hope it will help someone else!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search