Try/global style root css vars #41040
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
|
Size Change: +2.49 kB (0%) Total Size: 1.24 MB
ℹ️ View Unchanged
|
ramonjd
commented
May 18, 2022
| // Note: if the columns block has a style.spacing.blockGap value of > var(--wp--style--block-gap, 2em) this effect will not show. | ||
| // What would make this particular definition more robust is if we could do the following dynamically: ( var(--wp--style--block-gap, 2em) + style.spacing.blockGap ) | ||
| flex-basis: calc(50% - calc(var(--wp--style--block-gap, 2em) + var(--wp--style--root--block--gap, 0) / 2)) !important; | ||
| } |
There was a problem hiding this comment.
Tested whether this will provide a fix for #41098
Yes. Seems to work.
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.
What?
Related to #39789
🚧 This PR is for illustrative purposes only. Please do not install at home, kids.
The premise behind this PR is to set a "global" fallback block gap CSS var
--wp--style--root--block--gapthat houses the "root" global styles value, and that can act as a fallback for--wp--style--block-gap, which is set at the block level and "preferred" by the layout implementation.Maybe
--wp--style--block-gapshould be renamed to--wp--style--layout--block-gap😕The intention is to prevent conflicts by having a global fallback block gap value for universal usage, while allowing individual blocks to overwrite it via the layout implementation.
Note: This PR is only experimenting with layout. Existing usages of
--wp--style--block-gap, such as in the Button block would have to be updatedWhy?
How?
Testing Instructions
Screenshots or screencast