Title: WP_Style_Engine::get_css_declarations
Published: November 2, 2022
Last modified: May 20, 2026

---

# WP_Style_Engine::get_css_declarations( mixed $style_value, array $style_definition, array $options = array() ): string[]

## In this article

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

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

Returns an array of CSS declarations based on valid block style values.

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

 `$style_value`mixedrequired

A single raw style value from $block_styles array.

`$style_definition`arrayrequired

A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA.

`$options`arrayoptional

An array of options.

 * `convert_vars_to_classnames` bool
 * Whether to skip converting incoming CSS var patterns, e.g. `var:preset|<PRESET_TYPE
   >|<PRESET_SLUG>`, to `var( --wp--preset--* )` values. Default false.

Default:`array()`

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

 string[] An associative array of CSS definitions, e.g. `array( "$property" => "
$value", "$property" => "$value" )`.

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

    ```php
    protected static function get_css_declarations( $style_value, $style_definition, $options = array() ) {
    	if ( isset( $style_definition['value_func'] ) && is_callable( $style_definition['value_func'] ) ) {
    		return call_user_func( $style_definition['value_func'], $style_value, $style_definition, $options );
    	}

    	$css_declarations     = array();
    	$style_property_keys  = $style_definition['property_keys'];
    	$should_skip_css_vars = isset( $options['convert_vars_to_classnames'] ) && true === $options['convert_vars_to_classnames'];

    	/*
    	 * Build CSS var values from `var:preset|<PRESET_TYPE>|<PRESET_SLUG>` values, e.g, `var(--wp--css--rule-slug )`.
    	 * Check if the value is a CSS preset and there's a corresponding css_var pattern in the style definition.
    	 */
    	if ( is_string( $style_value ) && str_contains( $style_value, 'var:' ) ) {
    		if ( ! $should_skip_css_vars && ! empty( $style_definition['css_vars'] ) ) {
    			$css_var = static::get_css_var_value( $style_value, $style_definition['css_vars'] );
    			if ( static::is_valid_style_value( $css_var ) ) {
    				$css_declarations[ $style_property_keys['default'] ] = $css_var;
    			}
    		}
    		return $css_declarations;
    	}

    	/*
    	 * Default rule builder.
    	 * If the input contains an array, assume box model-like properties
    	 * for styles such as margins and padding.
    	 */
    	if ( is_array( $style_value ) ) {
    		// Bail out early if the `'individual'` property is not defined.
    		if ( ! isset( $style_property_keys['individual'] ) ) {
    			return $css_declarations;
    		}

    		foreach ( $style_value as $key => $value ) {
    			if ( is_string( $value ) && str_contains( $value, 'var:' ) && ! $should_skip_css_vars && ! empty( $style_definition['css_vars'] ) ) {
    				$value = static::get_css_var_value( $value, $style_definition['css_vars'] );
    			}

    			$individual_property = sprintf( $style_property_keys['individual'], _wp_to_kebab_case( $key ) );

    			if ( $individual_property && static::is_valid_style_value( $value ) ) {
    				$css_declarations[ $individual_property ] = $value;
    			}
    		}

    		return $css_declarations;
    	}

    	$css_declarations[ $style_property_keys['default'] ] = $style_value;
    	return $css_declarations;
    }
    ```

[View all references](https://developer.wordpress.org/reference/files/wp-includes/style-engine/class-wp-style-engine.php/)
[View on Trac](https://core.trac.wordpress.org/browser/tags/7.0/src/wp-includes/style-engine/class-wp-style-engine.php#L557)
[View on GitHub](https://github.com/WordPress/wordpress-develop/blob/7.0/src/wp-includes/style-engine/class-wp-style-engine.php#L557-L608)

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

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

This function is trying to replicate what lodash’s kebabCase (JS library) does in the client.

  |

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

| Version | Description | 
| [6.1.0](https://developer.wordpress.org/reference/since/6.1.0/) | Introduced. |

## User Contributed Notes

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