Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Container Queries break editor style loading #49862

Closed
tomjn opened this issue Apr 17, 2023 · 4 comments
Closed

Container Queries break editor style loading #49862

tomjn opened this issue Apr 17, 2023 · 4 comments
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Status] Duplicate Used to indicate that a current issue matches an existing one and can be closed

Comments

@tomjn
Copy link
Contributor

tomjn commented Apr 17, 2023

Description

Adding an editor stylesheet to a theme does not work if that stylesheet contains CSS container queries.

This includes styles that are not container queries.

Step-by-step reproduction instructions

Add a container query such as the following to the editor stylesheet:

/* Default heading styles for the card title */
.card h2 {
  font-size: 1em;
}

/* If the container is larger than 700px */
@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}

Now load the editor and observe that all editor styles from the file fail to be applied.

Screenshots, screen recording, code snippet

No response

Environment info

WP 6.2

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

@carolinan
Copy link
Contributor

Hi
WhIch method exactly are you using to load the editor style?
Which theme type? Block/classic, is it reproducable in any theme?
Which editor? Both block editor, template editor, site editor?

@tomjn
Copy link
Contributor Author

tomjn commented Apr 18, 2023

all methods that I have tried have the issue, in my specific case add_editor_style with a block theme, however I raised this after someone on stack exchange also ran into this:

https://wordpress.stackexchange.com/questions/415275/add-editor-style-not-working-after-upgrade-to-wp-v-6-2

They had tried add_editor_style as well as placing a dedicated css file in their theme, and noted that it worked until they upgraded to 6.2.

Note that all block based editors have the problem that I can see, site editor/post editor/etc

@talldan
Copy link
Contributor

talldan commented Apr 19, 2023

If it happens with container queries, there's a good chance it's the same issue as #46277 (also noted in #42727).

There's some work/discussions on a fix in #49483, but I think it's a pretty challenging piece of work.

@tomjn
Copy link
Contributor Author

tomjn commented Apr 19, 2023

Happy for this to be closed as a duplicate

@Thelmachido Thelmachido added CSS Styling Related to editor and front end styles, CSS-specific issues. [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. labels Apr 25, 2023
@skorasaurus skorasaurus added the [Status] Duplicate Used to indicate that a current issue matches an existing one and can be closed label May 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. [Status] Duplicate Used to indicate that a current issue matches an existing one and can be closed
Projects
None yet
Development

No branches or pull requests

5 participants