Hi all,
I’ve been thinking about this workflow, and have come up with a possible solution based on an idea @strarsis mentioned at Extract editor styles · Issue #2853 · roots/sage · GitHub
The approach is extracting styles wrapped in @editor {} to a separate CSS asset, then enqueuing via add_editor_style as normal. Gutenberg expects the CSS to be on disk or at URL, and can’t unpack JS runtimes, so a CSS asset makes sense here.
Now, I’ve never written a Webpack plugin, so this is a very dirty clone and hack of SassNinja/media-query-plugin, but perhaps it can be improved with community input.
Not on NPM, so yarn add https://github.com/talss89/wp-editor-query-plugin --dev if you want to try it out.
This currently works for me w/ Sage 10 and Bud 6.7.2, in both dev and production modes. Just wrap CSS rules in @editor or @editor-only. A css/default.editor.css file should be emitted as an asset.
Currently only wrapping selectors is supported, wrapping rules will result in broken CSS, but will add that functionality soon.
If people think this is a decent approach, I’ll put some time into developing the plugin, proper readme, NPM publish, etc.