add_editor_style not working after upgrade to WP v 6.2

UDATE

Following @TomJNowell’s comments, I tried removing container queries from my stylesheets, and as add_editor_style worked as expected. This seems like a bug to me, though there may be a logical explanation for this I am not aware of. In my case, I think I would prefer to keep using container queries, so I will probably be sticking to my JS solution below, but I figured it was worth flagging.

Previous answer

In lieu of an actual fix to add_editor_style, I have the following partial workaround/hack in place for now, in case it is helpful for others with this problem:

In functions.php:

function dnl_load_theme_styles_in_gutenberg() {
  wp_enqueue_script(
    'gutenberg-styles.js',
    get_template_directory_uri() . '/gutenberg-styles.js',
  );
}

add_action( 'enqueue_block_editor_assets', 'dnl_load_theme_styles_in_gutenberg' );

In gutenberg-styles.js:

window.addEventListener('DOMContentLoaded', () => {
  const themeStyleTag = document.createElement('link');

  themeStyleTag.setAttribute('rel', 'stylesheet');
  themeStyleTag.setAttribute('href', `/wp-content/themes/my-theme-name/style.css?v=${new Date().getTime()}`);

  document.querySelector('body').appendChild(themeStyleTag);
});

Assuming the CSS you want to load into Gutenberg is called style.css and is located in your theme root, and you swap out my-theme-name with the name of your theme, this should work.

I should note one important difference between doing this and using add_editor_style: the latter prefaces all your CSS file’s selectors with .editor-styles-wrapper, whereas the former does not. So, if your theme CSS includes, e.g.

.my-custom-block {
  background-color: limegreen;
  color: hotpink;
}

And you inject your theme CSS into Gutenberg with add_editor_style, Gutenberg will inline the following CSS in the editor view:

.editor-styles-wrapper .my-custom-block {
  background-color: limegreen;
  color: hotpink;
}

…changing the specificity of the selector.

Whereas my JS-based hack will just add the same CSS block you had in your theme CSS, since all it does is load the theme CSS into the editor.

Related Posts: