Editor default styles

sage
1

Do someone know why in previous versions of roots Sage the editor used a classic.css (wp file) which more or less gave a satisfying look (font and spaces), but in recent versions there is no css at all?

Older version:

image
image2426×1328 139 KB

New version:

image
image2426×1276 122 KB

2

I think to customize admin pages as you want.
If you build blocks with preview mode max width of 600 px is not enough to reflect your design in pages.

In my case, if I do not use preview mode, I add wp block max width and some bg colors for block as below:

.wp-block {
  @apply max-w-screen-lg mx-auto;
}

// Block color for acf
.acf-block-component { 
  .acf-block-fields {
    background: #edf6ff !important;
    margin-top: 30px;
  }
}
3

Yes, I always add some boilerplate stuff for the alignment/max-width. There are even multiple techniques for this (child-selectors or width-breakout).
And after each Gutenberg update I have to check/test the styles for breaking changes, even in frontend.

4

Because WP doesn’t load classic.css when a theme is using theme.json.

1 Like
5

this was what I was asking and I wasn’t able to find, thanks a lot!