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
$tree
arrayrequired- Input tree to process.
$prefix
stringoptional- Prefix to prepend to each variable.
Default:
''
$token
stringoptional- Token to use between levels. Default
'--'
.Default:
'--'
Source
continue;
}
$selector = $metadata['selector'];
$node = _wp_array_get( $this->theme_json, $metadata['path'], array() );
$declarations = static::compute_preset_vars( $node, $origins );
$theme_vars_declarations = static::compute_theme_vars( $node );
foreach ( $theme_vars_declarations as $theme_vars_declaration ) {
$declarations[] = $theme_vars_declaration;
}
$stylesheet .= static::to_ruleset( $selector, $declarations );
}
return $stylesheet;
}
/**
* Given a selector and a declaration list,
* creates the corresponding ruleset.
Changelog
Version | Description |
---|---|
5.8.0 | Introduced. |
User Contributed Notes
You must log in before being able to contribute a note or feedback.