0

Edit: I didn't adequately research this question before posting it, so the behavior I'm describing is much older than I realized. The issue I was observing comes from elsewhere. Leaving the original question here for context.


add_editor_style copies the styles of the body {} selector from the specified stylesheet into the class selector .editor-styles-wrapper {}. This isn't well-documented, as far as I can tell, other than in a comment in the documentation.

Since upgrading to 6.3 (or possibly earlier), I notice that the styles on html {} are also being copied to .editor-styles-wrapper {}.

So if you load a file like editor-styles.css that contains the following declarations:

html {
  font-size: 100%;
}

body {
  font-size: 1.2rem;
}

WordPress will inject these styles into the editor as:

.editor-styles-wrapper {
  font-size: 100%;
}

.editor-styles-wrapper {
  font-size: 1.2rem;
}

(Previously, the html {} styles would have just been dropped.)

Is this intentional? Is it documented anywhere? This has led to some slight breakages in my editor styles.

1
  • Could you please paste your code to enqueue the style sheet? Since 6.3 my calls to add_editor_style are no longer prepending editor-styles-wrapper which has broken all my block editor css! Aug 22, 2023 at 11:25

1 Answer 1

2

I had a look at the code history in the Gutenberg repository, and it looks like html and body have been transformed since the very beginning, 5 years ago:

https://github.com/WordPress/gutenberg/blame/15fc0c13eb33a6e4426ff4ad681b6bfb6d0adaec/packages/editor/src/editor-styles/transforms/wrap.js

:root was added several months later.

So yes, it appears to be intentional, but not new. If something has changed in your styles in 6.3 it must be something else. I can't see any meaningful change in how this feature has been implemented since it was introduced.

1
  • Thanks Jacob. I was just looking at exactly the same file and coming to the same conclusion! I think I didn't do enough research before asking this question.
    – Jay
    Aug 21, 2023 at 15:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.