Migrate spacer style from TT1 theme #109
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The following is to replicate the styles found in /twentytwentyone/assets/sass/05-blocks/spacer/_style.scss Where when in mobile width and the spacer has a style attribute assigned (assumingly for a height value) force the height of the spacer to whatever the global spacing unit is set to be. CSS variables cannot be used for media queries (an example that does not work...) @media only screen and (max-width: var(--wp--custom--spacing--mobile-breakpoint)) { I don't know of a configurable way to manage breakpoints with theme.json I attempted to construct a possible implementation of those settings in the theme.json file and couldn't figure out how it might work... What are we trying to define and allow a user to configure... and what do we just want to be a part of the theme's style? The fact that the spacer collapses? At what breakpoint it collapses? What height it should collapse to? Or is the below just an aspect of the theme, the already configured spacing unit is enough variance. And if that is the case how do we normalize the breakpoints?
|
I think we should just this rule out, honestly. I've found it to be a little weird personally — it unexpectedly overrides any specific setting the user has made. I believe it was added because some spacers seemed too large, but a better fix for that is just to use dynamic units for the spacer block ( |
|
I also found this odd and did not realize this style was in there. It should respect the size the user set. We should consider removing it from Twenty Twenty-One. |
|
Closing this PR RE: comments above. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The following is to replicate the styles found in /twentytwentyone/assets/sass/05-blocks/spacer/_style.scss
Where when in mobile width and the spacer has a style attribute assigned (assuringly for a height value)
force the height of the spacer to whatever the global spacing unit is set to be.
CSS variables cannot be used for media queries
(an example that does not work...)
@media only screen and (max-width: var(--wp--custom--spacing--mobile-breakpoint)) {I don't know of a configurable way to manage breakpoints with theme.json
I attempted to construct a possible implementation of those settings in the theme.json
file and couldn't figure out how it might work so I have no suggestions there.
What are we trying to define and allow a user to configure... and what do we just want to be a part of the theme's style?
The fact that the spacer collapses at a breakpoint?
At what breakpoint it collapses?
What height it should collapse to?
Or is it just an aspect of the theme, the already configured spacing unit is enough variance.
If it just belongs as CSS in the theme, how do we normalize the media query breakpoints?