Block editor: add consolidated styles to store #34156
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
ramonjd
added
[Type] Question
|
Size Change: +118 B (0%) Total Size: 1.03 MB
ℹ️ View Unchanged
|
ramonjd
commented
Aug 19, 2021
| [ styleProperty ]: { | ||
| ...consolidatedStyles[ styleProperty ], | ||
| ...userStyles[ styleProperty ], | ||
| }, |
There was a problem hiding this comment.
This doesn't take into account that some values will be var('--some-var-name').
Nor have I asked the question whether we should take it into account at all.
If yes, we could see if pre-filling with getPropertyValue('--some-var-name') is possible.
There was a problem hiding this comment.
If yes, we could see if pre-filling with getPropertyValue('--some-var-name') is possible.
Turns out we can access CSS var values in presets: https://github.com/WordPress/gutenberg/pull/34178/files#diff-c7f239b002e1dfa2d70dc9ac84af4975a6c1cd63d00f0c14e4510c5a6a9ecc93
ramonjd
changed the title
ramonjd
commented
Aug 19, 2021
| * const consolidatedStyles = useConsolidatedStyles( props.attributes?.style, 'border' ); | ||
| * ``` | ||
| */ | ||
| export default function useConsolidatedStyles( userStyles, styleProperty ) { |
|
Thank you for working on this @ramonjd 🏅 There is currently a second PR tackling this issue. #34178 It might be a good idea to cross-check between the two PRs and make sure whichever we proceed with covers all bases. |
Thanks for the heads up. 🙇 I plan on having a look at #34178 today. It's a lot further along, so I would guess that I could retire this PR. #34178 also answered my questions about css vars, and confirms the direction I was heading in was nearly right :) |
|
Closing in favour of #34178 |
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 this PR does
This is an experimental PR meant to spark discussion and seek guidance only.
It adds consolidated styles (global and theme styles) to the post editor store, and making it accessible to style block supports hooks.
At first, and just to test propositions/ideas, we're working with border styles in order to delay having to parse CSS vars in the consolidated style object. It might be that we can used merged consolidated styles for all properties.
Why would we want to do this?
In the post editor, we can override global and theme styles for specific blocks using sidebar controls for padding, border, margin and so on.
We don't, however, know about the underlying style values – those set in global or theme styles – we're overriding.
Sharing consolidated styles in the post editor would allow us to:
'solid'if a user changes the border width value, but use any pre-defined border style value set in global styles or elsewhere.For relevant context, see the comments in border style default controls and related discussions.
The objective
The PR seeks to answer the following questions:
Thank you!