Sage 10.0.0-beta.3 - Gutenberg editor style

Hi there,

I have tried to use the “new” beta 3 version, using the theme.json file. It is working fine, but it seems the Gutenberg editor is not styled anymore. I am missing something, of course.

I don’t know how to better explain my problem: the Gutenberg editor (into the wp-admin pages editor) it is not styled at all.

The editor.css file is empty, as per the repository on GitHub. I suppose it is right.

Anyone could help me?

Thank you

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:

2 Likes

Thank you @strarsis you put me on the right track.

Hey. Can anyone can give some tips on how to achieve this. Just installed Beta3, and the block editor styles have completly changed? Is there a way to apply it like beta2?

@BSBjorn

Look at the @strarsis reply.
For example, you could try to add this into your editor.css file.

.block-editor-block-list__layout {
  @apply font-sans;

  .block-editor-block-list__block {
    margin: 0 auto;
    padding: 1rem 0;
  }
}

.wp-block {
  @apply max-w-screen-md;

  &.editor-post-title__block .editor-post-title__input {
    @apply font-sans;
  }
}
1 Like