Child theme editor-style.css no longer shown in Gutenberg with WP 6.1

  • Resolved cycas

    (@cycas)


    1 year, 5 months ago

    For the first time I am putting together a site using Gutenberg as the editor, having previously used the Classic editor.

    I set up:
    add_theme_support(‘editor-styles’);
    add_editor_style( ‘editor-style.css’ );

    in my child theme functions.php. and created my editor-style.css My parent theme is 2020.

    I had almost finished the styling, when… Since updating to wp 6.1, my child theme css styles no longer show in the block editor.

    The editor-style.css link now appears nowhere in the code of the editor page.

    Is it possible that wp 6.1 no longer supports child theme editor styles for Gutenberg ?

    It seems so unlikely and yet I feel like I’ve checked everything else.

    I have tried:
    – disabling all plugins (there are only 3, it’s a very simple site)
    – rolling theme 2020 back to version 1.9.
    – moving the add theme support to the top of functions.php, and to the end of it.
    – removing everything else from my functions.php file and just enqueuing the editor styles.
    – adjusting the version of Jquery
    -(on the offchance) resaving my permalinks.

    Everything else in functions.php and my child theme is working as expected. Any further ideas gratefully recieved.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Mario Santos

    (@santosguillamot)

    1 year, 5 months ago

    Hello @cycas! I was looking at this, but I wasn’t able to reproduce your issue. I created a new child theme with twentytwenty as its parent, used add_theme_support and add_editor_style, and everything was working as expected. The CSS in the editor-style.css file was sent to the editor and applied properly. This is how my functions.php looks like:

    
function my_theme_enqueue_styles() {
 $parent_style = 'parent-style';
 wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
 wp_enqueue_style( 'child-style',
 get_stylesheet_directory_uri() . '/style.css',
 array( $parent_style ),
 wp_get_theme()->get('Version')
 );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

// Add Editor styles
add_theme_support('editor-styles');
add_editor_style('editor-style.css');

    I am using WordPress 6.1.1 and Twenty Twenty 2,1, so this makes me think that it isn’t a problem related to WordPress version. The only thing I can think of right now is that there is a mismatch between the argument passed to the add_editor_style function and the name of the file, but I assume you have already double-checked that.

    Are you using the Gutenberg plugin on your site? In that case, which version of it?

    • This reply was modified 1 year, 5 months ago by Mario Santos.
    • This reply was modified 1 year, 5 months ago by Mario Santos.
    Thread Starter cycas

    (@cycas)

    1 year, 5 months ago

    Hi, thank you so much for testing that, I had reached that point where I felt I’d tried everything.

    I am using plain old Gutenberg blocks from WP 6.11 core, no plugin, no customisations.

    I was enqueuing my parent styles in functions.php using a slightly different syntax, so I just swapped in your version of it, but no change 🙁

    I am indeed enqueuing my editor styles with :

    
add_theme_support('editor-styles');
add_editor_style( 'editor-style.css' );

    and yes, I have triple-checked that my editor-style css is definitely named editor-style.css. The Theme File editor correctly identifies the file as Visual Editor Stylesheet too.

    No errors in my logs, and the editor stylesheet was loading fine until I updated wordpress and 2020 theme. I guess I might have changed something and the old version was caching until I ran the update, but I’m stumped as to what I could have changed to get this result.

    Mario Santos

    (@santosguillamot)

    1 year, 5 months ago

    I’ve been thinking about this, but I am still unable to reproduce it. I rolled back my local site to 6.0.3 and everything seems to work the same way. My only guess is that some versioning could be affecting somehow, but I don’t think that should be the case.

    Could you try to update your child theme version, just in case? You can do that in its style.css file.

    From what I am seeing, if you go to the browser Dev Tools while editing a post, you should find a <style> HTML element with your CSS inside a <div> with the class is-desktop-preview. The HTML should look similar to this:

    
<div class"is-desktop-preview" style="...">
    <style>...</style>
    <style>...</style>
    <style>YOUR STYLES</style>
</div>

    Could you check if you can find that in the HTML? If it is there, but it isn’t applying, it may be overwritten somehow. I’m running out of ideas.

    Thread Starter cycas

    (@cycas)

    1 year, 4 months ago

    Thank you SO MUCH for your help with this, Mario, it’s very much appreciated.

    I ran my editor-style.css through the validator at https://jigsaw.w3.org/css-validator/ and it … found the incorrectly formatted @media statement in my editor-style.css which was causing the problem. Doh! I had left out (or accidentally deleted) a curly bracket.

    The error was also in my public style.css, but it looks like the public css is rather more forgiving and renders all the correct statements and ignores the ones it can’t make sense of, whereas the Gutenberg editor just refuses to load anything on the stylesheet at all.

    I suspect I did this on the last css edit before the update to WP6.1 but it was caching my stylesheet until I did the update, and that’s why it looked to me like the update was related to the problem.

    Hopefully this support question will help others who make similar daft mistakes to me!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Child theme editor-style.css no longer shown in Gutenberg with WP 6.1’ is closed to new replies.