updates - add_editor_style not working after upgrade to WP v 6.2

admin管理员组

文章数量:1125345

I had a site I was running with a block-based/FSE theme on WP v.6.1.1. In functions.php, I was loading my theme stylesheet in the Gutenberg editor using the following:

function dnl_theme_add_editor_styles() {
  add_editor_style();
}

add_action( 'after_setup_theme', 'dnl_theme_add_editor_styles' );

This worked perfectly well (editor-style.css loaded in Gutenberg) until I upgraded to WordPress 6.2. After that, the stylesheet stopped getting loaded in the editor. I tried loading style.css using add_editor_style like so:

function dnl_theme_add_editor_styles() {
  add_editor_style( 'style.css' );
}

I also tried calling add_theme_support first, e.g.:

function dnl_theme_add_editor_styles() {
  add_theme_support( 'wp-block-styles' );
  add_editor_style();
}

But none of that helped.

Has anyone else noticed this behavior after upgrading? Does anyone know why this would be happening? I looked at the source code for add_editor_style in wp-includes/theme.php and didn't see any changes there since 6.1.1.

I had a site I was running with a block-based/FSE theme on WP v.6.1.1. In functions.php, I was loading my theme stylesheet in the Gutenberg editor using the following:

function dnl_theme_add_editor_styles() {
  add_editor_style();
}

add_action( 'after_setup_theme', 'dnl_theme_add_editor_styles' );

This worked perfectly well (editor-style.css loaded in Gutenberg) until I upgraded to WordPress 6.2. After that, the stylesheet stopped getting loaded in the editor. I tried loading style.css using add_editor_style like so:

function dnl_theme_add_editor_styles() {
  add_editor_style( 'style.css' );
}

I also tried calling add_theme_support first, e.g.:

function dnl_theme_add_editor_styles() {
  add_theme_support( 'wp-block-styles' );
  add_editor_style();
}

But none of that helped.

Has anyone else noticed this behavior after upgrading? Does anyone know why this would be happening? I looked at the source code for add_editor_style in wp-includes/theme.php and didn't see any changes there since 6.1.1.

• updates
• add-editor-style

Share Improve this question asked Apr 11, 2023 at 14:27 EricEric 3144 bronze badges 7

• Does your theme use add_theme_support( 'editor-styles' )? – Jacob Peattie Commented Apr 11, 2023 at 14:42
• I wasn't using that. I tried adding that line just now, but it didn't help (I tried adding it before the add_action call, as well as within the function dnl_theme_add_editor_styles called by the add_action call copied above, with and without add_theme_support( 'wp-block-styles' )). No combination seemed to have any effect; the theme styles still aren't loading in Gutenberg. – Eric Commented Apr 11, 2023 at 15:00
• all styles? Or just styles that reference files and assets? Are you using css container queries? – Tom J Nowell ♦ Commented Apr 14, 2023 at 14:35
• 1 I see, in my own project we've found container queries broke editor styles, and have had to have a separate place for container queries so that we can load the rest into both – Tom J Nowell ♦ Commented Apr 17, 2023 at 12:51
• 1 I've raised github.com/WordPress/gutenberg/issues/49862 – Tom J Nowell ♦ Commented Apr 17, 2023 at 13:06

 |  Show 2 more comments

2 Answers 2

Sorted by: Reset to default 1

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.

This behavior can happen also when there's syntax error in the CSS. On frontend the browser can ignore the error (like missing }) but the editor cannot parse it.

本文标签： updatesaddeditorstyle not working after upgrade to WP v 62