Make WordPress Core

Opened 12 months ago

Closed 12 months ago

Last modified 8 months ago

#58292 closed defect (bug) (reported-upstream)

CSS @container queries break block editor styles

Reported by: retrovertigo's profile retrovertigo Owned by:
Milestone: Priority: normal
Severity: normal Version: 6.1.1
Component: Editor Keywords:
Focuses: css Cc:

Description

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

Attachments (2)

block-editor-styles_broken.png (13.9 KB) - added by retrovertigo 12 months ago.
Broken block editor styles
block-editor-styles_fixed.png (30.2 KB) - added by retrovertigo 12 months ago.
Fixed block editor styles

Download all attachments as: .zip

Change History (5)

@retrovertigo
12 months ago

Broken block editor styles

@retrovertigo
12 months ago

Fixed block editor styles

#1 @sabernhardt
12 months ago

  • Component changed from Post Formats to Editor

#2 @petitphp
12 months ago

  • Resolution set to reported-upstream
  • Status changed from new to closed

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!

Last edited 12 months ago by petitphp (previous) (diff)

#3 @desrosj
8 months ago

  • Keywords needs-patch removed
  • Milestone Awaiting Review deleted
Note: See TracTickets for help on using tickets.