CSS @container queries break block editor styles

[retrovertigo]

Hi there,

It seems that having any selector inside a css @container query breaks the inlining of the styles applied to the block editor (.editor-styles-wrapper) via the add_editor_style( 'style-editor.css' ); file.

The CSS from style-editor.css does simply not get applied at all. Removing all @container queries "fixes" that issue.

This is the minimum test case where the issue appears

@container  {
  .selector {}
}

Note: Without the .selector the query gets ignored and the styles are getting applied.

Is there any known way around this issue besides removing all @container queries?

I have a file which gets auto-generated alongside my style.css and having to revert my code to work without the @container queries is currently a bit of a blow.

Many thanks,
Albert

[retrovertigo]

Broken block editor styles

[retrovertigo]

Fixed block editor styles

[petitphp]

Hello @retrovertigo and thanks for the report.

This is a known issue with the block editor (for example ​49862 or ​46277) with a couple of fixes being worked on.

I'm going to close this ticket as "reported-upstream" since there is already a discussion in Github for this. Don't hesitate to comment on the issues or test PR there, it'll be really helpful.

Thank you!