Description

With non-iframed block editor, specificity of top-level element selectors are different relative to other selectors. I believe this is due to the .editor-style-wrapper prefix.

Step-by-step reproduction instructions

1. Create theme using code snippets below.
2. Activate the created theme.
3. Edit a page or post.
4. Add a Heading block, with default attributes and any text content.
5. Save.
6. Observe the font size.
7. Top right 3-dots menu → Preferences → Enable "Custom Fields".
8. Hit Show and Reload Page button (to enable the non-iframe editor).
9. Observe the heading block size is different to step 5.
10. On the front end, observe the heading block size is the same as 5.

Screenshots, screen recording, code snippet

Theme

theme.json

{
  "$schema": "https://schemas.wp.org/wp/6.6/theme.json",
  "version": 3,
  "styles": {
    "blocks": {
      "core/heading": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--large)"
        }
      }
    },
    "elements": {
      "heading": {
        "typography": {
          "fontSize": "inherit"
        }
      }
    }
  }
}

style.css

/*
Theme Name: Test
*/

templates/index.html

<!-- wp:post-content /-->

Observed behavior

:root :where(.wp-block-heading) {
  font-size: var(--wp--preset--font-size--large);
}
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
}

:root :where(.wp-block-heading) {
  font-size: var(--wp--preset--font-size--large);
}
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
  font-size: inherit;
}
.editor-styles-wrapper :where(.wp-block-heading) {
  font-size: var(--wp--preset--font-size--large);
}

Environment info

• WordPress 6.6.1
• Custom theme (see code snippets)

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes