Given a tree, it creates a flattened one by merging the keys and binding the leaf values to the new keys.
Description
It also transforms camelCase names into kebab-case and substitutes ‘/’ by ‘-‘.
This is thought to be useful to generate CSS Custom Properties from a tree, although there’s nothing in the implementation of this function that requires that format.
For example, assuming the given prefix is ‘–wp’ and the token is ‘–‘, for this input tree:
{
'some/property': 'value',
'nestedProperty': {
'sub-property': 'value'
}
}it’ll return this output:
{
'--wp--some-property': 'value',
'--wp--nested-property--sub-property': 'value'
}Parameters
$treearrayrequired- Input tree to process.
$prefixstringoptional- Prefix to prepend to each variable.
Default:
'' $tokenstringoptional- Token to use between levels. Default
'--'.Default:
'--'
Source
$node = _wp_array_get( $this->theme_json, $metadata['path'], array() );
$preset_rules .= static::compute_preset_classes( $node, $selector, $origins );
}
return $preset_rules;
}
/**
* Converts each styles section into a list of rulesets
* to be appended to the stylesheet.
* These rulesets contain all the css variables (custom variables and preset variables).
*
* See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
*
* For each section this creates a new ruleset such as:
*
* block-selector {
* --wp--preset--category--slug: value;
* --wp--custom--variable: value;
* }
*
Changelog
| Version | Description |
|---|---|
| 5.8.0 | Introduced. |
User Contributed Notes
You must log in before being able to contribute a note or feedback.