WP_Theme_JSON::flatten_tree( array $tree, string $prefix = , string $token = ‘–‘ ): array

In this article

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

array The flattened tree.

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

VersionDescription
5.8.0Introduced.

User Contributed Notes

You must log in before being able to contribute a note or feedback.