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.
Description
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};"Parameters
$style_valuearrayrequired- A single raw style value from
$block_stylesarray. $individual_property_definitionarrayrequired- A single style definition from BLOCK_STYLE_DEFINITIONS_METADATA representing an individual property of a CSS property, e.g.
'top'in'border-top'. $optionsarrayoptional- An array of options.
convert_vars_to_classnamesboolWhether to skip converting incoming CSS var patterns, e.g.var:preset|<PRESET_TYPE>|<PRESET_SLUG>, tovar( --wp--preset--* )values. Default false.
Default:
array()
Source
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;
}
Changelog
| Version | Description |
|---|---|
| 6.1.0 | Introduced. |
User Contributed Notes
You must log in before being able to contribute a note or feedback.