Extract editor styles

[strarsis]

• [x] I've read the guidelines for Contributing to Roots Projects
• [x] This request isn't a duplicate of an existing request
• [x] This is not a personal support request that should be posted on the Roots Discourse community

Summary

Frontend and editor/backend styles are often very close together for Gutenberg blocks. The ability to have these styles close together and extract the editor-specific styles into a separate editor stylesheet can be a huge productivity improvement.

Motivation

Sometimes additional editor styles have to be added to the normal frontend styles, as the editor DOM and default styles occasionally differ. It would be nice to have these styles all at one place. Print media queries can be already nicely nested into the existing styles and SASS will correctly extract them into one outer media query. Now I want something similar with the editor styles.

.wp-block-group {
  // frontend styles

  @editor { // or some other selector
    // editor-specific styles + nested selectors, etc
  }
}

Now the styles for @editor should be extracted into the separate editor stylesheet.

Additional context

laravel-mix already does this for react and vue styles, using css/mini-extract.

[bzx]

On a side note, recently all style files were changed from SCSS to CSS, but editor.css still keeps SCSS syntax.

[strarsis]

@bzx: Oh, so not only laravel-mix was replaced by bud (for webpack configuration management), but also SCSS replaced by CSS? Is PostCSS with a SCSS subset used now? I am right now using a Sage 10 theme that is still based on Sage 10 with laravel-mix + SCSS.

[bzx]

@strarsis it looks like it: https://github.com/roots/sage/tree/master/resources/styles ...

I also have a Sage 10 theme which still has laravel-mix, and another one created on the next day which already uses Bud.

[retlehs]

if you are creating new themes from the master branch then you should be expecting there to be some changes that might not yet be clearly communicated or documented. you can follow the commit history to stay on top of it, or you can choose to use one of the tagged releases.

for sage 10, the latest tagged release is https://github.com/roots/sage/releases/tag/10.0.0-beta.1

[strarsis]

@retlehs: Thanks. For still being able to use SCSS I can reconfigure bud or re-add custom webpack configuration?

[retlehs]

@strarsis see https://github.com/roots/bud/issues/700#issuecomment-978727895

if you have further questions would you mind opening a topic on https://discourse.roots.io/?

[strarsis]

@retlehs: Got latest Sage 10 with bud running! It runs really well. What can be added to bud to make it extract the editor styles (e.g. by custom media query) into a separate file? Something like postcss-extract-media-query?

[strarsis]

Follow up: (https://discourse.roots.io/t/bud-build-development-asset-function/24553/5?u=strarsis) @talss89 made a plugin for this: https://github.com/talss89/wp-editor-query-plugin

[strarsis]

So installing bud-wp-editor-query should be sufficient to add this feature, see this example in Sage 10 FSE: https://github.com/strarsis/sage10-fse/blob/master/resources/styles/app.css#L6-L12