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:'--'

Return

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;
 *     }
 *

View all references View on Trac View on GitHub

Changelog