Usually, for Gutenberg styles the normal frontend styles are added as editor styles.
The Gutenberg editor will automatically wrap all frontend styles with an .editor-styles-wrapper class selector.
This is required to scope the styles to the Gutenberg editor area, so the rest of the page (UI) is not also styled.
Issue (with workaround/fix) for using the styles in Sage:
Sage 10 followed a different approach (in alpha) some commits ago where the editor.scss was enqueued as the only styles (as editor styles) and wrapped the frontend styles itself.
This isn’t the case anymore in latest Sage 10. IMHO this is better as Gutenberg already expects frontend styles to be added as editor styles and handles the wrapping of these.
I still enqueue additional editor styles with editor-specific adjustments to the Gutenberg editor - the frontend DOM is usually much leaner and sometimes differs too much to the backend DOM where extra UI elements are added (e.g. extra wrappers, control handles, toolbars, etc.).
On the other hand I want to have the editor-specific styles at the same place where the usual frontend styles are - but the editor specific styles should be extracted, see this issue/feature request:
Lastly there can be some issues with Gutenberg FSE template loading:
The behavior changed with different WordPress core and Gutenberg plugin releases.
Here is a Sage 10 FSE branch I started, it is not perfect though, there are still issues, newer Gutenberg releases also have subtle problems:
With this, the editor will be styled similarly, except the font family, which I don’t know how to define without messing with the front-end.
Or just edit the editor.css and copy it from project to project.
What do you think?
I think the most consistent one for now it’s editor.css since everything outside of “layout” appears in the frontend, but it’s nice to know theme.json is an alternative, and probably the way to go in the future.