Add html to reset styles for the .editor-styles-wrapper container

[sabernhardt]

Fixes: #57176

(similar to option in #61959, but only increasing the specificity for one selector instead of the whole group)

What?

Raise the specificity of only the :where(.editor-styles-wrapper) selector in reset.scss so that the CSS reset overrides styles in wp-admin/css/common.css.

Why?

The admin CSS bleed affects the iframed post editor in 'classic' themes that do not specify font-size, line-height and/or background-color for the body. In addition to the extra discrepancies between editor and front end, the smaller text is more difficult to read when editing post content, and the background reduces color contrast.

How?

1. Add html to the :where(.editor-styles-wrapper) ruleset (in the compiled stylesheet).
2. Remove inaccurate comment that says the reset is unnecessary in an iframe. Enqueuing the admin styles makes the reset necessary.

Testing Instructions

1. Activate a 'classic' theme such as Twenty Thirteen or Twenty Fourteen (those two currently have the wrong font size and background color).
2. Create a new post and add blocks including a Paragraph and/or List.
3. Check whether the post editor is using an iframe by using the browser inspector on text in a Paragraph block. If it is not inside an iframe, you may need to save the post and then deactivate plugins or go to Preferences and remove a panel such as Custom Fields.
4. In the browser inspector, look for styles on the body element coming from common.css (or load-styles.php if SCRIPT_DEBUG is false). With the PR applied, the background, color, font-family, font-size and line-height properties should have a line through them (the min-width is not reset, but that seems to be fine).
   

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @peXed.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: peXed.

Co-authored-by: sabernhardt <[email protected]>
Co-authored-by: ellatrix <[email protected]>
Co-authored-by: karmatosed <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[ellatrix]

The admin styles seem to specifically target the body. Could we move these particular styles out of the here(.editor-styles-wrapper) block and under body, maybe with a link to which styles are being reset?

Also when did this break? Where you able to pinpoint the specific commit or release?

[ellatrix]

Cc @aaronrobertshaw in case it rings a bell

[sabernhardt]

The selector needs at least 0-0-1 specificity to override body, which it had before removing html in 46752.

I made #61959 to restore that selector exactly as it was for the whole set, and Aaron already suggested to isolate the change to only the first selector of the stylesheet.

[ellatrix]

In that case, we should probably change the selector to:

div:where(.editor-styles-wrapper),
body:where(.editor-styles-wrapper)

So that it overrides the admin styles for both an iframed and non-iframe editor.

[sabernhardt]

html :where(.editor-styles-wrapper) applied to either element in WordPress 6.3, and I just made a quick edit directly in wp-includes\css\dist\block-library\reset.css with 6.6 beta to confirm that it still covers both elements.

iframe:

non-iframe:

(the theme for these screenshots is Twenty Thirteen)

[ellatrix]

Why not just restore it to https://github.com/WordPress/gutenberg/pull/46752/files#diff-bda8e417e9cfc8724167f4c82aab1d0d205245c51360a8afa4bba99ba078e6dbR10?

[sabernhardt]

Restoring is what I tried first :) #61959

[ellatrix]

Yes, so we only want it to affect the top level styles. I guess I meant, why not take out that section and do it in a separate block? I find that a bit more readable than html &.

[ellatrix]

I just cherry-picked this PR to the wp/6.6-rc-1 branch to get it included in the next release: 9f0380f