Title: WP_Theme_JSON::compute_style_properties
Published: July 20, 2021
Last modified: February 24, 2026

---

# 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

 * [Description](https://developer.wordpress.org/reference/classes/wp_theme_json/compute_style_properties/?output_format=md#description)
 * [Parameters](https://developer.wordpress.org/reference/classes/wp_theme_json/compute_style_properties/?output_format=md#parameters)
 * [Return](https://developer.wordpress.org/reference/classes/wp_theme_json/compute_style_properties/?output_format=md#return)
 * [Source](https://developer.wordpress.org/reference/classes/wp_theme_json/compute_style_properties/?output_format=md#source)
 * [Related](https://developer.wordpress.org/reference/classes/wp_theme_json/compute_style_properties/?output_format=md#related)
 * [Changelog](https://developer.wordpress.org/reference/classes/wp_theme_json/compute_style_properties/?output_format=md#changelog)

[ Back to top](https://developer.wordpress.org/reference/classes/wp_theme_json/compute_style_properties/?output_format=md#wp--skip-link--target)

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

## 󠀁[Description](https://developer.wordpress.org/reference/classes/wp_theme_json/compute_style_properties/?output_format=md#description)󠁿

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

## 󠀁[Parameters](https://developer.wordpress.org/reference/classes/wp_theme_json/compute_style_properties/?output_format=md#parameters)󠁿

 `$styles`arrayrequired

Styles to process.

`$settings`arrayoptional

Theme settings.

Default:`array()`

`$properties`arrayoptional

Properties metadata.

Default:`null`

`$theme_json`arrayoptional

Theme JSON array.

Default:`null`

`$selector`stringoptional

The style block selector.

Default:`null`

`$use_root_padding`booleanoptional

Whether to add custom properties at root level.

Default:`null`

## 󠀁[Return](https://developer.wordpress.org/reference/classes/wp_theme_json/compute_style_properties/?output_format=md#return)󠁿

 array Returns the modified $declarations.

## 󠀁[Source](https://developer.wordpress.org/reference/classes/wp_theme_json/compute_style_properties/?output_format=md#source)󠁿

    ```php
    protected static function compute_style_properties( $styles, $settings = array(), $properties = null, $theme_json = null, $selector = null, $use_root_padding = null ) {
    	if ( empty( $styles ) ) {
    		return array();
    	}

    	if ( null === $properties ) {
    		$properties = static::PROPERTIES_METADATA;
    	}
    	$declarations             = array();
    	$root_variable_duplicates = array();
    	$root_style_length        = strlen( '--wp--style--root--' );

    	foreach ( $properties as $css_property => $value_path ) {
    		if ( ! is_array( $value_path ) ) {
    			continue;
    		}

    		$is_root_style = str_starts_with( $css_property, '--wp--style--root--' );
    		if ( $is_root_style && ( static::ROOT_BLOCK_SELECTOR !== $selector || ! $use_root_padding ) ) {
    			continue;
    		}

    		$value = static::get_property_value( $styles, $value_path, $theme_json );

    		/*
    		 * Root-level padding styles don't currently support strings with CSS shorthand values.
    		 * This may change: https://github.com/WordPress/gutenberg/issues/40132.
    		 */
    		if ( '--wp--style--root--padding' === $css_property && is_string( $value ) ) {
    			continue;
    		}

    		if ( $is_root_style && $use_root_padding ) {
    			$root_variable_duplicates[] = substr( $css_property, $root_style_length );
    		}

    		/*
    		 * Processes background image styles.
    		 * If the value is a URL, it will be converted to a CSS `url()` value.
    		 * For uploaded image (images with a database ID), apply size and position defaults,
    		 * equal to those applied in block supports in lib/background.php.
    		 */
    		if ( 'background-image' === $css_property && ! empty( $value ) ) {
    			$background_styles = wp_style_engine_get_styles(
    				array( 'background' => array( 'backgroundImage' => $value ) )
    			);
    			$value             = $background_styles['declarations'][ $css_property ];
    		}
    		if ( empty( $value ) && static::ROOT_BLOCK_SELECTOR !== $selector && ! empty( $styles['background']['backgroundImage']['id'] ) ) {
    			if ( 'background-size' === $css_property ) {
    				$value = 'cover';
    			}
    			// If the background size is set to `contain` and no position is set, set the position to `center`.
    			if ( 'background-position' === $css_property ) {
    				$background_size = $styles['background']['backgroundSize'] ?? null;
    				$value           = 'contain' === $background_size ? '50% 50%' : null;
    			}
    		}

    		// Skip if empty and not "0" or value represents array of longhand values.
    		$has_missing_value = empty( $value ) && ! is_numeric( $value );
    		if ( $has_missing_value || is_array( $value ) ) {
    			continue;
    		}

    		/*
    		 * Look up protected properties, keyed by value path.
    		 * Skip protected properties that are explicitly set to `null`.
    		 */
    		$path_string = implode( '.', $value_path );
    		if (
    			isset( static::PROTECTED_PROPERTIES[ $path_string ] ) &&
    			_wp_array_get( $settings, static::PROTECTED_PROPERTIES[ $path_string ], null ) === null
    		) {
    			continue;
    		}

    		// Calculates fluid typography rules where available.
    		if ( 'font-size' === $css_property ) {
    			/*
    			 * wp_get_typography_font_size_value() will check
    			 * if fluid typography has been activated and also
    			 * whether the incoming value can be converted to a fluid value.
    			 * Values that already have a clamp() function will not pass the test,
    			 * and therefore the original $value will be returned.
    			 * Pass the current theme_json settings to override any global settings.
    			 */
    			$value = wp_get_typography_font_size_value( array( 'size' => $value ), $settings );
    		}

    		if ( 'aspect-ratio' === $css_property ) {
    			// For aspect ratio to work, other dimensions rules must be unset.
    			// This ensures that a fixed height does not override the aspect ratio.
    			$declarations[] = array(
    				'name'  => 'min-height',
    				'value' => 'unset',
    			);
    		}

    		$declarations[] = array(
    			'name'  => $css_property,
    			'value' => $value,
    		);
    	}

    	// If a variable value is added to the root, the corresponding property should be removed.
    	foreach ( $root_variable_duplicates as $duplicate ) {
    		$discard = array_search( $duplicate, array_column( $declarations, 'name' ), true );
    		if ( is_numeric( $discard ) ) {
    			array_splice( $declarations, $discard, 1 );
    		}
    	}

    	return $declarations;
    }
    ```

[View all references](https://developer.wordpress.org/reference/files/wp-includes/class-wp-theme-json.php/)
[View on Trac](https://core.trac.wordpress.org/browser/tags/6.9.4/src/wp-includes/class-wp-theme-json.php#L2332)
[View on GitHub](https://github.com/WordPress/wordpress-develop/blob/6.9.4/src/wp-includes/class-wp-theme-json.php#L2332-L2446)

## 󠀁[Related](https://developer.wordpress.org/reference/classes/wp_theme_json/compute_style_properties/?output_format=md#related)󠁿

| Uses | Description | 
| [wp_style_engine_get_styles()](https://developer.wordpress.org/reference/functions/wp_style_engine_get_styles/)`wp-includes/style-engine.php` |

Global public interface method to generate styles from a single style object, e.g. the value of a block’s attributes.style object or the top level styles in theme.json.

  | 
| [_wp_array_get()](https://developer.wordpress.org/reference/functions/_wp_array_get/)`wp-includes/functions.php` |

Accesses an array in depth based on a path of keys.

  |

## 󠀁[Changelog](https://developer.wordpress.org/reference/classes/wp_theme_json/compute_style_properties/?output_format=md#changelog)󠁿

| Version | Description | 
| [6.7.0](https://developer.wordpress.org/reference/since/6.7.0/) | `ref` resolution of background properties, and assigning custom default values. | 
| [6.6.0](https://developer.wordpress.org/reference/since/6.6.0/) | Pass current theme JSON settings to wp_get_typography_font_size_value(), and process background properties. | 
| [6.5.0](https://developer.wordpress.org/reference/since/6.5.0/) | Output a `min-height: unset` rule when `aspect-ratio` is set. | 
| [6.1.0](https://developer.wordpress.org/reference/since/6.1.0/) | Added `$theme_json`, `$selector`, and `$use_root_padding` parameters. | 
| [5.9.0](https://developer.wordpress.org/reference/since/5.9.0/) | Added the `$settings` and `$properties` parameters. | 
| [5.8.0](https://developer.wordpress.org/reference/since/5.8.0/) | Introduced. |

[Show 1 more](https://developer.wordpress.org/reference/classes/wp_theme_json/compute_style_properties/?output_format=md#)
[Show less](https://developer.wordpress.org/reference/classes/wp_theme_json/compute_style_properties/?output_format=md#)

## User Contributed Notes

You must [log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fclasses%2Fwp_theme_json%2Fcompute_style_properties%2F)
before being able to contribute a note or feedback.