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

Add mechanism to convert media queries into "element" queries #17057

Closed

Conversation

jorgefilipecosta
Copy link
Member

This PR adds a run time mechanism that converts simple media queries e.g: max/min-width/height into element queries that reference the dimensions of .editor-styles-wrapper-container.

We are using https://github.com/marcj/css-element-queries as our element queries "polyfill".

There are some visual regressions in the customizer it happens because although the media queries evaluate as if the viewport was small our components (if/With)ViewportMatches still think the viewport is large.
I will create a separate PR that allows us to simulate widths in these components.

How has this been tested?

I verified things work as before and there are no visual regressions excluding in the customizer.
I added a rule that changes editor-styles-wrapper width to 550px:

.editor-styles-wrapper {
width: 550px;
}

In the editor styles.
I added media & text block, I enabled stack on mobile option and I verified the media & text got stacked even though the window continues to have a big size.

@jorgefilipecosta jorgefilipecosta added Mobile Web Viewport sizes for mobile and tablet devices [Feature] Widgets Screen The block-based screen that replaced widgets.php. labels Aug 15, 2019
@jorgefilipecosta jorgefilipecosta force-pushed the add/mechanism-to-convert-media-queries branch 3 times, most recently from b12f646 to 5705307 Compare August 16, 2019 21:35
@jorgefilipecosta jorgefilipecosta force-pushed the add/mechanism-to-convert-media-queries branch from 5705307 to c2d0d86 Compare August 16, 2019 21:40
@jorgefilipecosta jorgefilipecosta force-pushed the add/mechanism-to-convert-media-queries branch from c2d0d86 to fc2a82a Compare August 17, 2019 16:16
@mapk
Copy link
Contributor

mapk commented Aug 19, 2019

I am so excited about this! Element queries, yay! 🎉

@jorgefilipecosta
Copy link
Member Author

Given the problems we faced with transforming media queries in element queries namely: performance issues and CSS specificity changes, this PR is closed in favor of #17946.

@youknowriad youknowriad deleted the add/mechanism-to-convert-media-queries branch October 16, 2019 09:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Widgets Screen The block-based screen that replaced widgets.php. Mobile Web Viewport sizes for mobile and tablet devices
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants