WP_Style_Engine::get_individual_property_css_declarations()protected staticWP 6.1.0

Style value parser that returns a CSS definition array comprising style properties that have keys representing individual style properties, otherwise known as longhand CSS properties.

Example:

"$style_property-$individual_feature: $value;"

Which could represent the following:

"border-{top|right|bottom|left}-{color|width|style}: {value};"

or:

"border-image-{outset|source|width|repeat|slice}: {value};"

Method of the class: WP_Style_Engine{}

No Hooks.

Return

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

Usage

$result = WP_Style_Engine::get_individual_property_css_declarations( $style_value, $individual_property_definition, $options );
$style_value(array) (required)
A single raw style value from $block_styles array.
$individual_property_definition(array) (required)
A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA representing an individual property of a CSS property, e.g. 'top' in 'border-top'.
$options(array)

An array of options.

Default: empty array

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

Changelog

Since 6.1.0 Introduced.

WP_Style_Engine::get_individual_property_css_declarations() code WP 6.5.4

protected static function get_individual_property_css_declarations( $style_value, $individual_property_definition, $options = array() ) {
	if ( ! is_array( $style_value ) || empty( $style_value ) || empty( $individual_property_definition['path'] ) ) {
		return array();
	}

	/*
	 * The first item in $individual_property_definition['path'] array
	 * tells us the style property, e.g. "border". We use this to get a corresponding
	 * CSS style definition such as "color" or "width" from the same group.
	 *
	 * The second item in $individual_property_definition['path'] array
	 * refers to the individual property marker, e.g. "top".
	 */
	$definition_group_key    = $individual_property_definition['path'][0];
	$individual_property_key = $individual_property_definition['path'][1];
	$should_skip_css_vars    = isset( $options['convert_vars_to_classnames'] ) && true === $options['convert_vars_to_classnames'];
	$css_declarations        = array();

	foreach ( $style_value as $css_property => $value ) {
		if ( empty( $value ) ) {
			continue;
		}

		// Build a path to the individual rules in definitions.
		$style_definition_path = array( $definition_group_key, $css_property );
		$style_definition      = _wp_array_get( static::BLOCK_STYLE_DEFINITIONS_METADATA, $style_definition_path, null );

		if ( $style_definition && isset( $style_definition['property_keys']['individual'] ) ) {
			// Set a CSS var if there is a valid preset value.
			if ( is_string( $value ) && str_contains( $value, 'var:' )
				&& ! $should_skip_css_vars && ! empty( $individual_property_definition['css_vars'] )
			) {
				$value = static::get_css_var_value( $value, $individual_property_definition['css_vars'] );
			}

			$individual_css_property = sprintf( $style_definition['property_keys']['individual'], $individual_property_key );

			$css_declarations[ $individual_css_property ] = $value;
		}
	}
	return $css_declarations;
}