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


		$stylesheet .= static::to_ruleset( $selector, $declarations );
	}

	return $stylesheet;
}

/**
 * Given a selector and a declaration list,
 * creates the corresponding ruleset.
 *
 * @since 5.8.0
 *
 * @param string $selector     CSS selector.
 * @param array  $declarations List of declarations.
 * @return string The resulting CSS ruleset.
 */
protected static function to_ruleset( $selector, $declarations ) {
	if ( empty( $declarations ) ) {
		return '';
	}

	$declaration_block = array_reduce(
		$declarations,
		static function ( $carry, $element ) {
			return $carry .= $element['name'] . ': ' . $element['value'] . ';'; },
		''
	);

	return $selector . '{' . $declaration_block . '}';
}

/**
 * Given a settings array, returns the generated rulesets
 * for the preset classes.
 *
 * @since 5.8.0
 * @since 5.9.0 Added the `$origins` parameter.
 * @since 6.6.0 Added check for root CSS properties selector.
 *
 * @param array    $settings Settings to process.
 * @param string   $selector Selector wrapping the classes.
 * @param string[] $origins  List of origins to process.
 * @return string The result of processing the presets.
 */
protected static function compute_preset_classes( $settings, $selector, $origins ) {
	if ( static::ROOT_BLOCK_SELECTOR === $selector || static::ROOT_CSS_PROPERTIES_SELECTOR === $selector ) {
		/*
		 * Classes at the global level do not need any CSS prefixed,
		 * and we don't want to increase its specificity.
		 */
		$selector = '';
	}

	$stylesheet = '';
	foreach ( static::PRESETS_METADATA as $preset_metadata ) {
		if ( empty( $preset_metadata['classes'] ) ) {
			continue;
		}
		$slugs = static::get_settings_slugs( $settings, $preset_metadata, $origins );
		foreach ( $preset_metadata['classes'] as $class => $property ) {
			foreach ( $slugs as $slug ) {
				$css_var    = static::replace_slug_in_string( $preset_metadata['css_vars'], $slug );
				$class_name = static::replace_slug_in_string( $class, $slug );

				// $selector is often empty, so we can save ourselves the `append_to_selector()` call then.
				$new_selector = '' === $selector ? $class_name : static::append_to_selector( $selector, $class_name );
				$stylesheet  .= static::to_ruleset(
					$new_selector,
					array(
						array(
							'name'  => $property,
							'value' => 'var(' . $css_var . ') !important',
						),
					)
				);
			}
		}
	}

	return $stylesheet;
}

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.