Allow themes to enqueue custom CSS variables via theme.json #25446
Conversation
|
Size Change: +1.67 kB (0%) Total Size: 1.17 MB
ℹ️ View Unchanged
|
kjellr
added
the
[Feature] Themes
| @@ -686,6 +693,7 @@ function gutenberg_experimental_global_styles_normalize_schema( $tree ) { | |||
| ), | |||
| 'settings' => array( | |||
| 'color' => array(), | |||
| 'custom' => array(), | |||
There was a problem hiding this comment.
The CSS variables are like styles e.g: one can do:
:root {
--wp-test-var: 4;
background-color: black;
}
Given that css variables are like styles wouldn't it make sense to set the variables together with the styles?
There was a problem hiding this comment.
Presets are also styles, though. I think it makes sense having presets & this custom thing together as they behave the same: name is generated based on the object shape, both generate CSS vars (so aren't attached to any style prop so won't do anything by themselves).
|
|
||
| ```css | ||
| :root { | ||
| --wp--theme--base-font: 16; |
There was a problem hiding this comment.
I think we don't need the theme prefix. The variables may not be added by the theme but for example by a plugin that filters theme.json. Also, core in the future may have default variables and it may be nece to merge core and theme variables.
There was a problem hiding this comment.
I'm not sure I see the use cases of plugin and core. But, in the interests of having something more general, what do you think of --wp--custom--... instead?
There was a problem hiding this comment.
Changed to --wp--custom-- in 8eba9be
There was a problem hiding this comment.
Our documentation still refers --wp--theme-- should we update it?
There was a problem hiding this comment.
Absolutely! Addressed at a3c6b25
oandregal
requested review from
ajitbohra,
chrisvanpatten,
mkaz,
spacedmonkey,
TimothyBJacobs and
youknowriad
as code owners
oandregal
force-pushed
the
add/custom-props-theme-json
branch
from
1b10c40 to
d2a0e7b
Compare
|
This has been rebased. |
There was a problem hiding this comment.
From the code point of view, the implementation looks good to me 👍
Given that we are expanding the functionality of theme.json I guess it would be good to have feedback from @youknowriad and @mtias.
| @@ -100,6 +100,33 @@ export default ( blockData, baseTree, userTree ) => { | |||
| ); | |||
| }; | |||
|
|
|||
| const flattenTree = ( input, prefix, token ) => { | |||
There was a problem hiding this comment.
Do we need to render the custom variables on the client? There is no UI to change the custom variables, so I guess we can just keep the ones set on the server?
There was a problem hiding this comment.
👍 I'll address in a follow-up PR.
| @@ -100,6 +100,33 @@ export default ( blockData, baseTree, userTree ) => { | |||
| ); | |||
| }; | |||
|
|
|||
| const flattenTree = ( input, prefix, token ) => { | |||
| let result = []; | |||
| Object.keys( input ).forEach( ( key ) => { | |||
There was a problem hiding this comment.
Minor non-blocking suggestion: I guess using reduce instead of Object.keys + forEach would simplify a little bit the code here.
|
I think this is good to have. That said, I'm not sure if this feature is important enough for the first stages of theme.json. |
oandregal
force-pushed
the
add/custom-props-theme-json
branch
from
d2a0e7b to
a3c6b25
Compare
|
I've realized that, within the |
|
@nosolosw I just tested this with a test theme I've got on https://github.com/aristath/q |
oandregal
changed the title
Fixes #25393
This PR adds a way for themes to generate their own CSS Custom Properties via theme.json (new section
settings.custom, see docs).How to test