Styles from editor.css in editor being overridden by editor styles

sage
1

Layered styles from app.css/editor.css is overridden by other styles without layers, I know that this is how the cascade works in styles, but it’s not done perfectly.

CleanShot 2025-02-22 at 13.53.16@2x
CleanShot 2025-02-22 at 13.53.16@2x1920×1044 150 KB

I have clean installation, without any plugins, just sage 11 and wp 6.7.2.
Editor is with iframe, I have only default v3 blocks.

app.css

@import "tailwindcss";

@layer base {
  body {
    background-color: var(--color-black);
    color: var(--color-white);
  }
}

editor.css

@import "./app.css";

Simplest solution is add style without @layer or add !important, but it’s not a pretty solution, but it’s there and works.

These are styles that overwrite the body styles

CleanShot 2025-02-22 at 16.59.07@2x
CleanShot 2025-02-22 at 16.59.07@2x1724×728 113 KB

Is there any way to disable these styles or wrap them in @layer?

2

Doesn’t look like it, but it’s also pretty minimal…

It wouldn’t be terrible to use a single !important to override the body background color if you’re wanting to use @layer

1 Like
3

@Liskownik Just curious - does your block have JSX in the supports set to true?
Using ACF blocks, if jsx is set to true in the supports array - i get the same issue. Setting it to false, restores my styles. Just a thought…

4

I tested it, but this piece of styles is hardcoded in Gutenberg, so it doesn’t change anything.
Just adding !important is solution at the moment