WP_Theme_JSON::compute_style_properties( array $styles, array $settings = array(), array $properties = null, array $theme_json = null, string $selector = null, boolean $use_root_padding = null ): array

In this article

Given a styles array, it extracts the style properties and adds them to the $declarations array following the format:

Description

array( ‘name’ => ‘property_name’, ‘value’ => ‘property_value, )

Parameters

$stylesarrayrequired
Styles to process.
$settingsarrayoptional
Theme settings.

Default:array()

$propertiesarrayoptional
Properties metadata.

Default:null

$theme_jsonarrayoptional
Theme JSON array.

Default:null

$selectorstringoptional
The style block selector.

Default:null

$use_root_paddingbooleanoptional
Whether to add custom properties at root level.

Default:null

Return

array Returns the modified $declarations.

Source

 *
 *     array(
 *       'name'  => 'property_name',
 *       'value' => 'property_value,
 *     )
 *
 * @since 5.8.0
 * @since 5.9.0 Added the `$origins` parameter.
 *
 * @param array    $settings Settings to process.
 * @param string[] $origins  List of origins to process.
 * @return array The modified $declarations.
 */
protected static function compute_preset_vars( $settings, $origins ) {
	$declarations = array();
	foreach ( static::PRESETS_METADATA as $preset_metadata ) {
		if ( empty( $preset_metadata['css_vars'] ) ) {
			continue;
		}
		$values_by_slug = static::get_settings_values_by_slug( $settings, $preset_metadata, $origins );
		foreach ( $values_by_slug as $slug => $value ) {
			$declarations[] = array(
				'name'  => static::replace_slug_in_string( $preset_metadata['css_vars'], $slug ),
				'value' => $value,
			);
		}
	}

	return $declarations;
}

/**
 * Given an array of settings, extracts the CSS Custom Properties
 * for the custom values and adds them to the $declarations
 * array following the format:
 *
 *     array(
 *       'name'  => 'property_name',
 *       'value' => 'property_value,
 *     )
 *
 * @since 5.8.0
 *
 * @param array $settings Settings to process.
 * @return array The modified $declarations.
 */
protected static function compute_theme_vars( $settings ) {
	$declarations  = array();
	$custom_values = isset( $settings['custom'] ) ? $settings['custom'] : array();
	$css_vars      = static::flatten_tree( $custom_values );
	foreach ( $css_vars as $key => $value ) {
		$declarations[] = array(
			'name'  => '--wp--custom--' . $key,
			'value' => $value,
		);
	}

	return $declarations;
}

/**
 * Given a tree, it creates a flattened one
 * by merging the keys and binding the leaf values
 * to the new keys.
 *
 * 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'
 *       }
 *     }

Changelog

VersionDescription
6.1.0Added $theme_json, $selector, and $use_root_padding parameters.
5.9.0Added the $settings and $properties parameters.
5.8.0Introduced.

User Contributed Notes

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