How are the frontend styles supposed to be injected into the Gutenberg editor?editor.scss shipped with Sage 10 contains adjustments for the editor GUI.
Those styles can be enqueued as editor styles and Gutenberg editor will automatically wrap these styles.
This may be also interesting (WordPress loopback):
opened 02:23AM - 20 Dec 19 UTC
[Type] Help Request
[Feature] Themes
**Describe the bug**
This part of the theme main (frontend) stylesheet is inclu… ded as Gutenberg asset style:
```css
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
color: #261773;
text-transform: uppercase;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-weight: 400;
margin: 0;
transform: scaleY(0.6);
font-size: 1.7em;
}
````
```php
add_theme_support( 'editor-styles' );
// [...]
wp_enqueue_style(
'editor-theme',
'./styles/main.css',
false,
true
);
````
While many styles with `body` selector are correctly rewritten/mapped(/whatever method internally used by the Gutenberg editor), the styles above also style the heading elements of the Gutenberg editor UI, not just the editor contents, which is unintended.
**To reproduce**
Steps to reproduce the behavior:
1. Enqueue the styles above as Gutenberg editor assets style.
2. Ensure `add_theme_support( 'editor-styles' );` is called correctly for the theme.
3. Enable that theme.
4. Visit a Gutenberg editor page and notice that its UI headings also have been styled.
**Expected behavior**
All `body` selectors in that stylesheet are mapped to `.editor-style-wrapper`.
Follow up (also to close this): Adding the frontend styles as editor styles allows to be agnostic towards the technique that Gutenberg editor uses to isolate the styles from its UI.iframe will be used instead, see
WordPress:trunk ← WordPress:try/iframe-block-based-theme-post-editor
opened 04:15PM - 30 Nov 22 UTC
<!-- Thanks for contributing to Gutenberg! Please follow the Gutenberg Contribut… ing Guidelines:
https://github.com/WordPress/gutenberg/blob/trunk/CONTRIBUTING.md -->
## What?
Iframes the post editor for block based themes.
Context: #33346.
Previously #21102.
Fixes #20797.
Fixes #21193.
Fixes #6156.
See #25775 for FSE.
> * There would be no admin CSS bleed at all. This is something we’ve been struggling with since the beginning.
> * There would be no need to simulate media queries, which is arguably technically more difficult than using an iframe.
> * Relative units like `(r)em` and `vw`/`vh` just work.
> * For a full site, a theme stylesheet can be just dropped in the editor without any adjustment. I think this is important as it makes the life of theme authors much easier.
> * It's possible to have one selection per window, so one in the admin and one in the content. This is useful for e.g. the link UI where the selection in the content can be kept while the selection is also in an input element (for the URL). Maybe be useful in other cases.
## Why?
## How?
## Testing Instructions
### Testing Instructions for Keyboard
## Screenshots or screencast
Therefore hardcoded style isolation (by prefixing a editor-styles-wrapper CSS class selector) would then either be unnecessary or even require additional post-processing which itself was thought to avoid in the first place.
1 Like