Restore html scope in reset.scss selectors

[sabernhardt]

Fixes: #57176

(simplest option)

What?

Raise the specificity of reset selectors to what they were before #46752 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?

Revert the reset.scss change from #46752.

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 <sabernhardt@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: karmatosed <karmatosed@git.wordpress.org>

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

[carolinan]

This change solves the problem with the unexpected grey background color in classic themes.
What negative side effects do we need to test for?

[fabiankaegy]

@aaronrobertshaw I think this one may be of interest to you.

[fabiankaegy]

From recent other PR's such as #61638 I think :root would be a better selector here.

[sabernhardt]

I used html so this would be exactly as safe as it was in WordPress 6.3.

The only selector that I know needs an increased specificity is :where(.editor-styles-wrapper), so it can override the admin styles on body, and 0-0-1 would be enough for that element.

[aaronrobertshaw]

Given this is a reset stylesheet, I'm inclined towards the 0-0-1 specificity as well.

Perhaps we could further isolate the change here by extracting only the rules needed to override the common.css body styles under the restored selector. For example:

html :where(.editor-styles-wrapper) {
	/**
	* The following styles revert to the browser defaults overriding the WPAdmin styles.
	* This is only needed while the block editor is not being loaded in an iframe.
	*/
	font-family: serif; // unfortunately initial doesn't work for font-family.
	font-size: initial;
	line-height: initial;
	color: initial;
	// Many themes with white backgrounds load editor styles but fail to also provide
	// an explicit white background color, assuming a white editing canvas.
	// So to match browser defaults, we provide a white default here as well.
	background: #fff;
}

The rest could remain under :where(.editor-styles-wrapper).

There is also another PR around the editor styles wrapper that might be worth taking a look at to see how these changes might be affected.

[sabernhardt]

If you want to isolate the one element, you could use the html & method I mentioned in #57176 (comment)

However, a PR like that is more complex than I should try to create within the browser, so someone else should make it.

Plus, the comment about not being in an iframe is inaccurate (with classic themes), so that sentence could be removed too.

[fabiankaegy]

Suggested change

	html :where(.editor-styles-wrapper) {
	:root :where(.editor-styles-wrapper) {

[carolinan]

How can we arrive at a final decision about how to solve?

[sabernhardt]

#62350 is the version that only creates html :where(.editor-styles-wrapper) once in the compiled stylesheet.

[sabernhardt]

#62350 has been merged instead of this one.