namespace Automattic\WooCommerce\Blocks\Utils;
* StyleAttributesUtils class used for getting class and style from attributes.
class StyleAttributesUtils {
* If color value is in preset format, convert it to a CSS var. Else return same value
* "var:preset|color|pale-pink" -> "var(--wp--preset--color--pale-pink)"
* @param string $color_value value to be processed.
public static function get_color_value( $color_value ) {
if ( is_string( $color_value ) && strpos( $color_value, 'var:preset|color|' ) !== false ) {
$color_value = str_replace( 'var:preset|color|', '', $color_value );
return sprintf( 'var(--wp--preset--color--%s)', $color_value );
* Get CSS value for color preset.
* @param string $preset_name Preset name.
* @return string CSS value for color preset.
public static function get_preset_value( $preset_name ) {
return "var(--wp--preset--color--$preset_name)";
* Get CSS value for shadow preset. Returns the same value if it's not a preset.
* @param string $shadow_name Shadow name.
* @return string CSS value for shadow preset.
public static function get_shadow_value( $shadow_name ) {
if ( is_string( $shadow_name ) && strpos( $shadow_name, 'var:preset|shadow|' ) !== false ) {
$shadow_name = str_replace( 'var:preset|shadow|', '', $shadow_name );
return "var(--wp--preset--shadow--{$shadow_name})";
* If spacing value is in preset format, convert it to a CSS var. Else return same value
* "var:preset|spacing|50" -> "var(--wp--preset--spacing--50)"
* @param string $spacing_value value to be processed.
public static function get_spacing_value( $spacing_value ) {
// Used following code as reference: https://github.com/WordPress/gutenberg/blob/cff6d70d6ff5a26e212958623dc3130569f95685/lib/block-supports/layout.php/#L219-L225.
if ( is_string( $spacing_value ) && strpos( $spacing_value, 'var:preset|spacing|' ) !== false ) {
$spacing_value = str_replace( 'var:preset|spacing|', '', $spacing_value );
return sprintf( 'var(--wp--preset--spacing--%s)', $spacing_value );
* Get class and style for align from attributes.
* @param array $attributes Block attributes.
public static function get_align_class_and_style( $attributes ) {
$align_attribute = $attributes['align'] ?? null;
if ( 'wide' === $align_attribute ) {
if ( 'full' === $align_attribute ) {
if ( 'left' === $align_attribute ) {
if ( 'right' === $align_attribute ) {
if ( 'center' === $align_attribute ) {
'class' => 'aligncenter',
return self::EMPTY_STYLE;
* Get class and style for background-color from attributes.
* @param array $attributes Block attributes.
public static function get_background_color_class_and_style( $attributes ) {
$gradient = $attributes['gradient'] ?? null;
$background_color = $attributes['backgroundColor'] ?? '';
$custom_background_color = $attributes['style']['color']['background'] ?? '';
$classes = [ $gradient ];
if ( $background_color || $custom_background_color || $gradient ) {
$classes[] = 'has-background';
if ( $background_color ) {
$classes[] = sprintf( 'has-%s-background-color', $background_color );
$value = self::get_preset_value( $background_color );
if ( $custom_background_color ) {
$styles[] = sprintf( 'background-color: %s;', $custom_background_color );
$value = $custom_background_color;
$classes[] = sprintf( 'has-%s-gradient-background', $gradient );
'class' => self::join_styles( $classes ),
'style' => self::join_styles( $styles ),
* Join classes and styles while removing duplicates and null values.
* @param array $rules Array of classes or styles.
protected static function join_styles( $rules ) {
return implode( ' ', array_unique( array_filter( $rules ) ) );
* Get class and style for border-color from attributes.
* Data passed to this function is not always consistent. It can be:
* Linked - preset color: $attributes['borderColor'] => 'luminous-vivid-orange'.
* Linked - custom color: $attributes['style']['border']['color'] => '#681228'.
* Unlinked - preset color: $attributes['style']['border']['top']['color'] => 'var:preset|color|luminous-vivid-orange'
* Unlinked - custom color: $attributes['style']['border']['top']['color'] => '#681228'.
* @param array $attributes Block attributes.
public static function get_border_color_class_and_style( $attributes ) {
$border_color_linked_preset = $attributes['borderColor'] ?? '';
$border_color_linked_custom = $attributes['style']['border']['color'] ?? '';
$custom_border = $attributes['style']['border'] ?? '';
if ( $border_color_linked_preset ) {
$class = sprintf( 'has-border-color has-%s-border-color', $border_color_linked_preset );
$value = self::get_preset_value( $border_color_linked_preset );
$style = 'border-color:' . $value . ';';
} elseif ( $border_color_linked_custom ) {
$style .= 'border-color:' . $border_color_linked_custom . ';';
$value = $border_color_linked_custom;
} elseif ( is_array( $custom_border ) ) {
foreach ( $custom_border as $border_color_key => $border_color_value ) {
if ( is_array( $border_color_value ) && array_key_exists( 'color', ( $border_color_value ) ) ) {
$style .= 'border-' . $border_color_key . '-color:' . self::get_color_value( $border_color_value['color'] ) . ';';
if ( ! $class && ! $style ) {
return self::EMPTY_STYLE;
* Get class and style for border-radius from attributes.
* @param array $attributes Block attributes.
public static function get_border_radius_class_and_style( $attributes ) {
$custom_border_radius = $attributes['style']['border']['radius'] ?? '';
if ( '' === $custom_border_radius ) {
return self::EMPTY_STYLE;
if ( is_string( $custom_border_radius ) ) {
$style = 'border-radius:' . $custom_border_radius . ';';
$border_radius = array();
$border_radius['border-top-left-radius'] = $custom_border_radius['topLeft'] ?? '';
$border_radius['border-top-right-radius'] = $custom_border_radius['topRight'] ?? '';
$border_radius['border-bottom-right-radius'] = $custom_border_radius['bottomRight'] ?? '';
$border_radius['border-bottom-left-radius'] = $custom_border_radius['bottomLeft'] ?? '';
foreach ( $border_radius as $border_radius_side => $border_radius_value ) {
if ( '' !== $border_radius_value ) {
$style .= $border_radius_side . ':' . $border_radius_value . ';';
* Get class and style for border width from attributes.
* @param array $attributes Block attributes.
public static function get_border_width_class_and_style( $attributes ) {
$custom_border = $attributes['style']['border'] ?? '';
if ( '' === $custom_border ) {
return self::EMPTY_STYLE;
if ( array_key_exists( 'width', ( $custom_border ) ) && ! empty( $custom_border['width'] ) ) {
$style = 'border-width:' . $custom_border['width'] . ';';
foreach ( $custom_border as $border_width_side => $border_width_value ) {
if ( isset( $border_width_value['width'] ) ) {
$style .= 'border-' . $border_width_side . '-width:' . $border_width_value['width'] . ';';
* Get class and style for border width from attributes.
* @param array $attributes Block attributes.
public static function get_border_style_class_and_style( $attributes ) {
$custom_border = $attributes['style']['border'] ?? '';
if ( '' === $custom_border ) {
return self::EMPTY_STYLE;
if ( array_key_exists( 'style', ( $custom_border ) ) && ! empty( $custom_border['style'] ) ) {
$style = 'border-style:' . $custom_border['style'] . ';';
foreach ( $custom_border as $side => $value ) {
if ( isset( $value['style'] ) ) {
$style .= 'border-' . $side . '-style:' . $value['style'] . ';';
* Get space-separated classes from block attributes.
* @param array $attributes Block attributes.
* @param array $properties Properties to get classes from.
* @return string Space-separated classes.
public static function get_classes_by_attributes( $attributes, $properties = array() ) {
$classes_and_styles = self::get_classes_and_styles_by_attributes( $attributes, $properties );
return $classes_and_styles['classes'];
* Get class and style for font-family from attributes.
* @param array $attributes Block attributes.
public static function get_font_family_class_and_style( $attributes ) {
$font_family = $attributes['fontFamily'] ?? '';
'class' => sprintf( 'has-%s-font-family', $font_family ),
return self::EMPTY_STYLE;
* Get class and style for font-size from attributes.
* @param array $attributes Block attributes.
public static function get_font_size_class_and_style( $attributes ) {
$font_size = $attributes['fontSize'] ?? '';
$custom_font_size = $attributes['style']['typography']['fontSize'] ?? '';
if ( ! $font_size && '' === $custom_font_size ) {
return self::EMPTY_STYLE;
'class' => sprintf( 'has-font-size has-%s-font-size', $font_size ),
} elseif ( '' !== $custom_font_size ) {
'style' => sprintf( 'font-size: %s;', $custom_font_size ),
return self::EMPTY_STYLE;
* Get class and style for font-style from attributes.
* @param array $attributes Block attributes.
public static function get_font_style_class_and_style( $attributes ) {
$custom_font_style = $attributes['style']['typography']['fontStyle'] ?? '';
if ( '' !== $custom_font_style ) {
'style' => sprintf( 'font-style: %s;', $custom_font_style ),
return self::EMPTY_STYLE;
* Get class and style for font-weight from attributes.
* @param array $attributes Block attributes.
public static function get_font_weight_class_and_style( $attributes ) {
$custom_font_weight = $attributes['style']['typography']['fontWeight'] ?? '';
if ( '' !== $custom_font_weight ) {
'style' => sprintf( 'font-weight: %s;', $custom_font_weight ),
return self::EMPTY_STYLE;
* Get class and style for letter-spacing from attributes.
* @param array $attributes Block attributes.
public static function get_letter_spacing_class_and_style( $attributes ) {
$custom_letter_spacing = $attributes['style']['typography']['letterSpacing'] ?? '';
if ( '' !== $custom_letter_spacing ) {
'style' => sprintf( 'letter-spacing: %s;', $custom_letter_spacing ),
return self::EMPTY_STYLE;
* Get class and style for line height from attributes.
* @param array $attributes Block attributes.
public static function get_line_height_class_and_style( $attributes ) {
$line_height = $attributes['style']['typography']['lineHeight'] ?? '';
return self::EMPTY_STYLE;
'style' => sprintf( 'line-height: %s;', $line_height ),
* Get a value from an array based on a path e.g style.elements.link
* @param array $array Target array.
* @param string $path Path joined by delimiter.
* @param string $delimiter Chosen delimiter defaults to ".".
protected static function array_get_value_by_path( array &$array, $path, $delimiter = '.' ) {
$array_path = explode( $delimiter, $path );
foreach ( $array_path as $key ) {
if ( is_array( $ref ) && array_key_exists( $key, $ref ) ) {
* Get class and style for link-color from attributes.
* @param array $attributes Block attributes.