public static function get_link_color_class_and_style( $attributes ) {
$link_color = self::array_get_value_by_path( $attributes, 'style.elements.link.color.text' );
if ( empty( $link_color ) ) {
return self::EMPTY_STYLE;
// If the link color is selected from the theme color picker, the value of $link_color is var:preset|color|slug.
// If the link color is selected from the core color picker, the value of $link_color is an hex value.
// When the link color is a string var:preset|color|slug we parsed it for get the slug, otherwise we use the hex value.
if ( strstr( $link_color, '|' ) ) {
$link_color_parts = explode( '|', $link_color );
$link_color = self::get_preset_value( end( $link_color_parts ) );
'class' => 'has-link-color',
'style' => sprintf( 'color: %s;', $link_color ),
* Get class and style for link-hover-color from attributes.
* @param array $attributes Block attributes.
public static function get_link_hover_color_class_and_style( $attributes ) {
$link_color = self::array_get_value_by_path( $attributes, 'style.elements.link.:hover.color.text' );
if ( empty( $link_color ) ) {
return self::EMPTY_STYLE;
// If the link color is selected from the theme color picker, the value of $link_color is var:preset|color|slug.
// If the link color is selected from the core color picker, the value of $link_color is an hex value.
// When the link color is a string var:preset|color|slug we parsed it for get the slug, otherwise we use the hex value.
if ( strstr( $link_color, '|' ) ) {
$link_color_parts = explode( '|', $link_color );
$link_color = self::get_preset_value( end( $link_color_parts ) );
'class' => 'has-link-color',
'style' => sprintf( 'color: %s;', $link_color ),
* Get class and style for margin from attributes.
* @param array $attributes Block attributes.
public static function get_margin_class_and_style( $attributes ) {
$margin = $attributes['style']['spacing']['margin'] ?? null;
return self::EMPTY_STYLE;
$spacing_values_css = '';
foreach ( $margin as $margin_side => $margin_value ) {
$spacing_values_css .= 'margin-' . $margin_side . ':' . self::get_spacing_value( $margin_value ) . ';';
'style' => $spacing_values_css,
* Get class and style for padding from attributes.
* @param array $attributes Block attributes.
public static function get_padding_class_and_style( $attributes ) {
$padding = $attributes['style']['spacing']['padding'] ?? null;
return self::EMPTY_STYLE;
$spacing_values_css = '';
foreach ( $padding as $padding_side => $padding_value ) {
$spacing_values_css .= 'padding-' . $padding_side . ':' . self::get_spacing_value( $padding_value ) . ';';
'style' => $spacing_values_css,
* Get class and style for shadow from attributes.
* @param array $attributes Block attributes.
public static function get_shadow_class_and_style( $attributes ) {
$shadow = $attributes['style']['shadow'] ?? null;
return self::EMPTY_STYLE;
'style' => sprintf( 'box-shadow: %s;', self::get_shadow_value( $shadow ) ),
* Get space-separated style rules from block attributes.
* @param array $attributes Block attributes.
* @param array $properties Properties to get styles from.
* @return string Space-separated style rules.
public static function get_styles_by_attributes( $attributes, $properties = array() ) {
$classes_and_styles = self::get_classes_and_styles_by_attributes( $attributes, $properties );
return $classes_and_styles['styles'];
* Get class and style for text align from attributes.
* @param array $attributes Block attributes.
public static function get_text_align_class_and_style( $attributes ) {
// Check if the text align is set in the attributes manually (legacy) or in the global styles.
$text_align = $attributes['textAlign'] ?? $attributes['style']['typography']['textAlign'] ?? null;
'class' => 'has-text-align-' . $text_align,
return self::EMPTY_STYLE;
* Get class and style for text-color from attributes.
* @param array $attributes Block attributes.
public static function get_text_color_class_and_style( $attributes ) {
$text_color = $attributes['textColor'] ?? '';
$custom_text_color = $attributes['style']['color']['text'] ?? '';
if ( ! $text_color && ! $custom_text_color ) {
return self::EMPTY_STYLE;
'class' => sprintf( 'has-text-color has-%s-color', $text_color ),
'value' => self::get_preset_value( $text_color ),
} elseif ( $custom_text_color ) {
'style' => sprintf( 'color: %s;', $custom_text_color ),
'value' => $custom_text_color,
return self::EMPTY_STYLE;
* Get class and style for text-decoration from attributes.
* @param array $attributes Block attributes.
public static function get_text_decoration_class_and_style( $attributes ) {
$custom_text_decoration = $attributes['style']['typography']['textDecoration'] ?? '';
if ( '' !== $custom_text_decoration ) {
'style' => sprintf( 'text-decoration: %s;', $custom_text_decoration ),
return self::EMPTY_STYLE;
* Get class and style for text-transform from attributes.
* @param array $attributes Block attributes.
public static function get_text_transform_class_and_style( $attributes ) {
$custom_text_transform = $attributes['style']['typography']['textTransform'] ?? '';
if ( '' !== $custom_text_transform ) {
'style' => sprintf( 'text-transform: %s;', $custom_text_transform ),
return self::EMPTY_STYLE;
* Get extra CSS classes from attributes.
* @param array $attributes Block attributes.
public static function get_classes_from_attributes( $attributes ) {
$extra_css_classes = $attributes['className'] ?? '';
if ( '' !== $extra_css_classes ) {
'class' => esc_attr( $extra_css_classes ),
return self::EMPTY_STYLE;
* Get classes and styles from attributes.
* Excludes link_color and link_hover_color since those should not apply to the container.
* @param array $attributes Block attributes.
* @param array $properties Properties to get classes/styles from.
* @param array $exclude Properties to exclude.
public static function get_classes_and_styles_by_attributes( $attributes, $properties = array(), $exclude = array() ) {
$classes_and_styles = array(
'align' => self::get_align_class_and_style( $attributes ),
'background_color' => self::get_background_color_class_and_style( $attributes ),
'border_color' => self::get_border_color_class_and_style( $attributes ),
'border_radius' => self::get_border_radius_class_and_style( $attributes ),
'border_width' => self::get_border_width_class_and_style( $attributes ),
'border_style' => self::get_border_style_class_and_style( $attributes ),
'font_family' => self::get_font_family_class_and_style( $attributes ),
'font_size' => self::get_font_size_class_and_style( $attributes ),
'font_style' => self::get_font_style_class_and_style( $attributes ),
'font_weight' => self::get_font_weight_class_and_style( $attributes ),
'letter_spacing' => self::get_letter_spacing_class_and_style( $attributes ),
'line_height' => self::get_line_height_class_and_style( $attributes ),
'margin' => self::get_margin_class_and_style( $attributes ),
'padding' => self::get_padding_class_and_style( $attributes ),
'shadow' => self::get_shadow_class_and_style( $attributes ),
'text_align' => self::get_text_align_class_and_style( $attributes ),
'text_color' => self::get_text_color_class_and_style( $attributes ),
'text_decoration' => self::get_text_decoration_class_and_style( $attributes ),
'text_transform' => self::get_text_transform_class_and_style( $attributes ),
'extra_classes' => self::get_classes_from_attributes( $attributes ),
if ( ! empty( $properties ) ) {
foreach ( $classes_and_styles as $key => $value ) {
if ( ! in_array( $key, $properties, true ) ) {
unset( $classes_and_styles[ $key ] );
if ( ! empty( $exclude ) ) {
foreach ( $classes_and_styles as $key => $value ) {
if ( in_array( $key, $exclude, true ) ) {
unset( $classes_and_styles[ $key ] );
$classes_and_styles = array_filter( $classes_and_styles );
// Exclude link color styles from parent to avoid conflict with text color.
array_flip( array( 'link_color' ) )
$classes = array_filter( $classes );
$styles = array_filter( $styles );
'classes' => implode( ' ', $classes ),
'styles' => implode( ' ', $styles ),