wp_apply_colors_support

The timeline below displays how wordpress function wp_apply_colors_support has changed across different WordPress versions. If a version is not listed, refer to the next available version below.

WordPress Version: 6.4

/**
 * Adds CSS classes and inline styles for colors to the incoming attributes array.
 * This will be applied to the block markup in the front-end.
 *
 * @since 5.6.0
 * @since 6.1.0 Implemented the style engine to generate CSS and classnames.
 * @access private
 *
 * @param  WP_Block_Type $block_type       Block type.
 * @param  array         $block_attributes Block attributes.
 *
 * @return array Colors CSS classes and inline styles.
 */
function wp_apply_colors_support($block_type, $block_attributes)
{
    $color_support = isset($block_type->supports['color']) ? $block_type->supports['color'] : false;
    if (is_array($color_support) && wp_should_skip_block_supports_serialization($block_type, 'color')) {
        return array();
    }
    $has_text_colors_support = true === $color_support || isset($color_support['text']) && $color_support['text'] || is_array($color_support) && !isset($color_support['text']);
    $has_background_colors_support = true === $color_support || isset($color_support['background']) && $color_support['background'] || is_array($color_support) && !isset($color_support['background']);
    $has_gradients_support = isset($color_support['gradients']) ? $color_support['gradients'] : false;
    $color_block_styles = array();
    // Text colors.
    if ($has_text_colors_support && !wp_should_skip_block_supports_serialization($block_type, 'color', 'text')) {
        $preset_text_color = array_key_exists('textColor', $block_attributes) ? "var:preset|color|{$block_attributes['textColor']}" : null;
        $custom_text_color = isset($block_attributes['style']['color']['text']) ? $block_attributes['style']['color']['text'] : null;
        $color_block_styles['text'] = $preset_text_color ? $preset_text_color : $custom_text_color;
    }
    // Background colors.
    if ($has_background_colors_support && !wp_should_skip_block_supports_serialization($block_type, 'color', 'background')) {
        $preset_background_color = array_key_exists('backgroundColor', $block_attributes) ? "var:preset|color|{$block_attributes['backgroundColor']}" : null;
        $custom_background_color = isset($block_attributes['style']['color']['background']) ? $block_attributes['style']['color']['background'] : null;
        $color_block_styles['background'] = $preset_background_color ? $preset_background_color : $custom_background_color;
    }
    // Gradients.
    if ($has_gradients_support && !wp_should_skip_block_supports_serialization($block_type, 'color', 'gradients')) {
        $preset_gradient_color = array_key_exists('gradient', $block_attributes) ? "var:preset|gradient|{$block_attributes['gradient']}" : null;
        $custom_gradient_color = isset($block_attributes['style']['color']['gradient']) ? $block_attributes['style']['color']['gradient'] : null;
        $color_block_styles['gradient'] = $preset_gradient_color ? $preset_gradient_color : $custom_gradient_color;
    }
    $attributes = array();
    $styles = wp_style_engine_get_styles(array('color' => $color_block_styles), array('convert_vars_to_classnames' => true));
    if (!empty($styles['classnames'])) {
        $attributes['class'] = $styles['classnames'];
    }
    if (!empty($styles['css'])) {
        $attributes['style'] = $styles['css'];
    }
    return $attributes;
}

WordPress Version: 6.2

/**
 * Adds CSS classes and inline styles for colors to the incoming attributes array.
 * This will be applied to the block markup in the front-end.
 *
 * @since 5.6.0
 * @since 6.1.0 Implemented the style engine to generate CSS and classnames.
 * @access private
 *
 * @param  WP_Block_Type $block_type       Block type.
 * @param  array         $block_attributes Block attributes.
 *
 * @return array Colors CSS classes and inline styles.
 */
function wp_apply_colors_support($block_type, $block_attributes)
{
    $color_support = _wp_array_get($block_type->supports, array('color'), false);
    if (is_array($color_support) && wp_should_skip_block_supports_serialization($block_type, 'color')) {
        return array();
    }
    $has_text_colors_support = true === $color_support || is_array($color_support) && _wp_array_get($color_support, array('text'), true);
    $has_background_colors_support = true === $color_support || is_array($color_support) && _wp_array_get($color_support, array('background'), true);
    $has_gradients_support = _wp_array_get($color_support, array('gradients'), false);
    $color_block_styles = array();
    // Text colors.
    if ($has_text_colors_support && !wp_should_skip_block_supports_serialization($block_type, 'color', 'text')) {
        $preset_text_color = array_key_exists('textColor', $block_attributes) ? "var:preset|color|{$block_attributes['textColor']}" : null;
        $custom_text_color = _wp_array_get($block_attributes, array('style', 'color', 'text'), null);
        $color_block_styles['text'] = $preset_text_color ? $preset_text_color : $custom_text_color;
    }
    // Background colors.
    if ($has_background_colors_support && !wp_should_skip_block_supports_serialization($block_type, 'color', 'background')) {
        $preset_background_color = array_key_exists('backgroundColor', $block_attributes) ? "var:preset|color|{$block_attributes['backgroundColor']}" : null;
        $custom_background_color = _wp_array_get($block_attributes, array('style', 'color', 'background'), null);
        $color_block_styles['background'] = $preset_background_color ? $preset_background_color : $custom_background_color;
    }
    // Gradients.
    if ($has_gradients_support && !wp_should_skip_block_supports_serialization($block_type, 'color', 'gradients')) {
        $preset_gradient_color = array_key_exists('gradient', $block_attributes) ? "var:preset|gradient|{$block_attributes['gradient']}" : null;
        $custom_gradient_color = _wp_array_get($block_attributes, array('style', 'color', 'gradient'), null);
        $color_block_styles['gradient'] = $preset_gradient_color ? $preset_gradient_color : $custom_gradient_color;
    }
    $attributes = array();
    $styles = wp_style_engine_get_styles(array('color' => $color_block_styles), array('convert_vars_to_classnames' => true));
    if (!empty($styles['classnames'])) {
        $attributes['class'] = $styles['classnames'];
    }
    if (!empty($styles['css'])) {
        $attributes['style'] = $styles['css'];
    }
    return $attributes;
}

WordPress Version: 6.1

/**
 * Add CSS classes and inline styles for colors to the incoming attributes array.
 * This will be applied to the block markup in the front-end.
 *
 * @since 5.6.0
 * @since 6.1.0 Implemented the style engine to generate CSS and classnames.
 * @access private
 *
 * @param  WP_Block_Type $block_type       Block type.
 * @param  array         $block_attributes Block attributes.
 *
 * @return array Colors CSS classes and inline styles.
 */
function wp_apply_colors_support($block_type, $block_attributes)
{
    $color_support = _wp_array_get($block_type->supports, array('color'), false);
    if (is_array($color_support) && wp_should_skip_block_supports_serialization($block_type, 'color')) {
        return array();
    }
    $has_text_colors_support = true === $color_support || is_array($color_support) && _wp_array_get($color_support, array('text'), true);
    $has_background_colors_support = true === $color_support || is_array($color_support) && _wp_array_get($color_support, array('background'), true);
    $has_gradients_support = _wp_array_get($color_support, array('gradients'), false);
    $color_block_styles = array();
    // Text colors.
    if ($has_text_colors_support && !wp_should_skip_block_supports_serialization($block_type, 'color', 'text')) {
        $preset_text_color = array_key_exists('textColor', $block_attributes) ? "var:preset|color|{$block_attributes['textColor']}" : null;
        $custom_text_color = _wp_array_get($block_attributes, array('style', 'color', 'text'), null);
        $color_block_styles['text'] = $preset_text_color ? $preset_text_color : $custom_text_color;
    }
    // Background colors.
    if ($has_background_colors_support && !wp_should_skip_block_supports_serialization($block_type, 'color', 'background')) {
        $preset_background_color = array_key_exists('backgroundColor', $block_attributes) ? "var:preset|color|{$block_attributes['backgroundColor']}" : null;
        $custom_background_color = _wp_array_get($block_attributes, array('style', 'color', 'background'), null);
        $color_block_styles['background'] = $preset_background_color ? $preset_background_color : $custom_background_color;
    }
    // Gradients.
    if ($has_gradients_support && !wp_should_skip_block_supports_serialization($block_type, 'color', 'gradients')) {
        $preset_gradient_color = array_key_exists('gradient', $block_attributes) ? "var:preset|gradient|{$block_attributes['gradient']}" : null;
        $custom_gradient_color = _wp_array_get($block_attributes, array('style', 'color', 'gradient'), null);
        $color_block_styles['gradient'] = $preset_gradient_color ? $preset_gradient_color : $custom_gradient_color;
    }
    $attributes = array();
    $styles = wp_style_engine_get_styles(array('color' => $color_block_styles), array('convert_vars_to_classnames' => true));
    if (!empty($styles['classnames'])) {
        $attributes['class'] = $styles['classnames'];
    }
    if (!empty($styles['css'])) {
        $attributes['style'] = $styles['css'];
    }
    return $attributes;
}

WordPress Version: 5.9

/**
 * Add CSS classes and inline styles for colors to the incoming attributes array.
 * This will be applied to the block markup in the front-end.
 *
 * @since 5.6.0
 * @access private
 *
 * @param  WP_Block_Type $block_type       Block type.
 * @param  array         $block_attributes Block attributes.
 *
 * @return array Colors CSS classes and inline styles.
 */
function wp_apply_colors_support($block_type, $block_attributes)
{
    $color_support = _wp_array_get($block_type->supports, array('color'), false);
    if (is_array($color_support) && array_key_exists('__experimentalSkipSerialization', $color_support) && $color_support['__experimentalSkipSerialization']) {
        return array();
    }
    $has_text_colors_support = true === $color_support || is_array($color_support) && _wp_array_get($color_support, array('text'), true);
    $has_background_colors_support = true === $color_support || is_array($color_support) && _wp_array_get($color_support, array('background'), true);
    $has_gradients_support = _wp_array_get($color_support, array('gradients'), false);
    $classes = array();
    $styles = array();
    // Text colors.
    // Check support for text colors.
    if ($has_text_colors_support) {
        $has_named_text_color = array_key_exists('textColor', $block_attributes);
        $has_custom_text_color = isset($block_attributes['style']['color']['text']);
        // Apply required generic class.
        if ($has_custom_text_color || $has_named_text_color) {
            $classes[] = 'has-text-color';
        }
        // Apply color class or inline style.
        if ($has_named_text_color) {
            $classes[] = sprintf('has-%s-color', _wp_to_kebab_case($block_attributes['textColor']));
        } elseif ($has_custom_text_color) {
            $styles[] = sprintf('color: %s;', $block_attributes['style']['color']['text']);
        }
    }
    // Background colors.
    if ($has_background_colors_support) {
        $has_named_background_color = array_key_exists('backgroundColor', $block_attributes);
        $has_custom_background_color = isset($block_attributes['style']['color']['background']);
        // Apply required background class.
        if ($has_custom_background_color || $has_named_background_color) {
            $classes[] = 'has-background';
        }
        // Apply background color classes or styles.
        if ($has_named_background_color) {
            $classes[] = sprintf('has-%s-background-color', _wp_to_kebab_case($block_attributes['backgroundColor']));
        } elseif ($has_custom_background_color) {
            $styles[] = sprintf('background-color: %s;', $block_attributes['style']['color']['background']);
        }
    }
    // Gradients.
    if ($has_gradients_support) {
        $has_named_gradient = array_key_exists('gradient', $block_attributes);
        $has_custom_gradient = isset($block_attributes['style']['color']['gradient']);
        if ($has_named_gradient || $has_custom_gradient) {
            $classes[] = 'has-background';
        }
        // Apply required background class.
        if ($has_named_gradient) {
            $classes[] = sprintf('has-%s-gradient-background', _wp_to_kebab_case($block_attributes['gradient']));
        } elseif ($has_custom_gradient) {
            $styles[] = sprintf('background: %s;', $block_attributes['style']['color']['gradient']);
        }
    }
    $attributes = array();
    if (!empty($classes)) {
        $attributes['class'] = implode(' ', $classes);
    }
    if (!empty($styles)) {
        $attributes['style'] = implode(' ', $styles);
    }
    return $attributes;
}

WordPress Version: 5.8

/**
 * Add CSS classes and inline styles for colors to the incoming attributes array.
 * This will be applied to the block markup in the front-end.
 *
 * @since 5.6.0
 * @access private
 *
 * @param  WP_Block_Type $block_type       Block type.
 * @param  array         $block_attributes Block attributes.
 *
 * @return array Colors CSS classes and inline styles.
 */
function wp_apply_colors_support($block_type, $block_attributes)
{
    $color_support = _wp_array_get($block_type->supports, array('color'), false);
    if (is_array($color_support) && array_key_exists('__experimentalSkipSerialization', $color_support) && $color_support['__experimentalSkipSerialization']) {
        return array();
    }
    $has_text_colors_support = true === $color_support || is_array($color_support) && _wp_array_get($color_support, array('text'), true);
    $has_background_colors_support = true === $color_support || is_array($color_support) && _wp_array_get($color_support, array('background'), true);
    $has_gradients_support = _wp_array_get($color_support, array('gradients'), false);
    $classes = array();
    $styles = array();
    // Text colors.
    // Check support for text colors.
    if ($has_text_colors_support) {
        $has_named_text_color = array_key_exists('textColor', $block_attributes);
        $has_custom_text_color = isset($block_attributes['style']['color']['text']);
        // Apply required generic class.
        if ($has_custom_text_color || $has_named_text_color) {
            $classes[] = 'has-text-color';
        }
        // Apply color class or inline style.
        if ($has_named_text_color) {
            $classes[] = sprintf('has-%s-color', $block_attributes['textColor']);
        } elseif ($has_custom_text_color) {
            $styles[] = sprintf('color: %s;', $block_attributes['style']['color']['text']);
        }
    }
    // Background colors.
    if ($has_background_colors_support) {
        $has_named_background_color = array_key_exists('backgroundColor', $block_attributes);
        $has_custom_background_color = isset($block_attributes['style']['color']['background']);
        // Apply required background class.
        if ($has_custom_background_color || $has_named_background_color) {
            $classes[] = 'has-background';
        }
        // Apply background color classes or styles.
        if ($has_named_background_color) {
            $classes[] = sprintf('has-%s-background-color', $block_attributes['backgroundColor']);
        } elseif ($has_custom_background_color) {
            $styles[] = sprintf('background-color: %s;', $block_attributes['style']['color']['background']);
        }
    }
    // Gradients.
    if ($has_gradients_support) {
        $has_named_gradient = array_key_exists('gradient', $block_attributes);
        $has_custom_gradient = isset($block_attributes['style']['color']['gradient']);
        if ($has_named_gradient || $has_custom_gradient) {
            $classes[] = 'has-background';
        }
        // Apply required background class.
        if ($has_named_gradient) {
            $classes[] = sprintf('has-%s-gradient-background', $block_attributes['gradient']);
        } elseif ($has_custom_gradient) {
            $styles[] = sprintf('background: %s;', $block_attributes['style']['color']['gradient']);
        }
    }
    $attributes = array();
    if (!empty($classes)) {
        $attributes['class'] = implode(' ', $classes);
    }
    if (!empty($styles)) {
        $attributes['style'] = implode(' ', $styles);
    }
    return $attributes;
}

WordPress Version: 5.7

/**
* Add CSS classes and inline styles for colors to the incoming attributes array.
* This will be applied to the block markup in the front-end.
*
* @access private
*
* @param  WP_Block_Type $block_type       Block type.
* @param  array         $block_attributes Block attributes.
*
* @return array Colors CSS classes and inline styles.
*/
function wp_apply_colors_support($block_type, $block_attributes)
{
    $color_support = _wp_array_get($block_type->supports, array('color'), false);
    $has_text_colors_support = true === $color_support || is_array($color_support) && _wp_array_get($color_support, array('text'), true);
    $has_background_colors_support = true === $color_support || is_array($color_support) && _wp_array_get($color_support, array('background'), true);
    $has_link_colors_support = _wp_array_get($color_support, array('link'), false);
    $has_gradients_support = _wp_array_get($color_support, array('gradients'), false);
    $classes = array();
    $styles = array();
    // Text Colors.
    // Check support for text colors.
    if ($has_text_colors_support) {
        $has_named_text_color = array_key_exists('textColor', $block_attributes);
        $has_custom_text_color = isset($block_attributes['style']['color']['text']);
        // Apply required generic class.
        if ($has_custom_text_color || $has_named_text_color) {
            $classes[] = 'has-text-color';
        }
        // Apply color class or inline style.
        if ($has_named_text_color) {
            $classes[] = sprintf('has-%s-color', $block_attributes['textColor']);
        } elseif ($has_custom_text_color) {
            $styles[] = sprintf('color: %s;', $block_attributes['style']['color']['text']);
        }
    }
    // Link Colors.
    if ($has_link_colors_support) {
        $has_link_color = isset($block_attributes['style']['color']['link']);
        // Apply required class and style.
        if ($has_link_color) {
            $classes[] = 'has-link-color';
            // If link is a named color.
            if (strpos($block_attributes['style']['color']['link'], 'var:preset|color|') !== false) {
                // Get the name from the string and add proper styles.
                $index_to_splice = strrpos($block_attributes['style']['color']['link'], '|') + 1;
                $link_color_name = substr($block_attributes['style']['color']['link'], $index_to_splice);
                $styles[] = sprintf('--wp--style--color--link: var(--wp--preset--color--%s);', $link_color_name);
            } else {
                $styles[] = sprintf('--wp--style--color--link: %s;', $block_attributes['style']['color']['link']);
            }
        }
    }
    // Background Colors.
    if ($has_background_colors_support) {
        $has_named_background_color = array_key_exists('backgroundColor', $block_attributes);
        $has_custom_background_color = isset($block_attributes['style']['color']['background']);
        // Apply required background class.
        if ($has_custom_background_color || $has_named_background_color) {
            $classes[] = 'has-background';
        }
        // Apply background color classes or styles.
        if ($has_named_background_color) {
            $classes[] = sprintf('has-%s-background-color', $block_attributes['backgroundColor']);
        } elseif ($has_custom_background_color) {
            $styles[] = sprintf('background-color: %s;', $block_attributes['style']['color']['background']);
        }
    }
    // Gradients.
    if ($has_gradients_support) {
        $has_named_gradient = array_key_exists('gradient', $block_attributes);
        $has_custom_gradient = isset($block_attributes['style']['color']['gradient']);
        if ($has_named_gradient || $has_custom_gradient) {
            $classes[] = 'has-background';
        }
        // Apply required background class.
        if ($has_named_gradient) {
            $classes[] = sprintf('has-%s-gradient-background', $block_attributes['gradient']);
        } elseif ($has_custom_gradient) {
            $styles[] = sprintf('background: %s;', $block_attributes['style']['color']['gradient']);
        }
    }
    $attributes = array();
    if (!empty($classes)) {
        $attributes['class'] = implode(' ', $classes);
    }
    if (!empty($styles)) {
        $attributes['style'] = implode(' ', $styles);
    }
    return $attributes;
}

WordPress Version: 5.6

/**
* Add CSS classes and inline styles for colors to the incoming attributes array.
* This will be applied to the block markup in the front-end.
*
* @access private
*
* @param  WP_Block_Type $block_type       Block type.
* @param  array         $block_attributes Block attributes.
*
* @return array Colors CSS classes and inline styles.
*/
function wp_apply_colors_support($block_type, $block_attributes)
{
    $color_support = _wp_array_get($block_type->supports, array('__experimentalColor'), false);
    $has_text_colors_support = true === $color_support || is_array($color_support) && _wp_array_get($color_support, array('text'), true);
    $has_background_colors_support = true === $color_support || is_array($color_support) && _wp_array_get($color_support, array('background'), true);
    $has_link_colors_support = _wp_array_get($color_support, array('linkColor'), false);
    $has_gradients_support = _wp_array_get($color_support, array('gradients'), false);
    $classes = array();
    $styles = array();
    // Text Colors.
    // Check support for text colors.
    if ($has_text_colors_support) {
        $has_named_text_color = array_key_exists('textColor', $block_attributes);
        $has_custom_text_color = isset($block_attributes['style']['color']['text']);
        // Apply required generic class.
        if ($has_custom_text_color || $has_named_text_color) {
            $classes[] = 'has-text-color';
        }
        // Apply color class or inline style.
        if ($has_named_text_color) {
            $classes[] = sprintf('has-%s-color', $block_attributes['textColor']);
        } elseif ($has_custom_text_color) {
            $styles[] = sprintf('color: %s;', $block_attributes['style']['color']['text']);
        }
    }
    // Link Colors.
    if ($has_link_colors_support) {
        $has_link_color = isset($block_attributes['style']['color']['link']);
        // Apply required class and style.
        if ($has_link_color) {
            $classes[] = 'has-link-color';
            // If link is a named color.
            if (strpos($block_attributes['style']['color']['link'], 'var:preset|color|') !== false) {
                // Get the name from the string and add proper styles.
                $index_to_splice = strrpos($block_attributes['style']['color']['link'], '|') + 1;
                $link_color_name = substr($block_attributes['style']['color']['link'], $index_to_splice);
                $styles[] = sprintf('--wp--style--color--link: var(--wp--preset--color--%s);', $link_color_name);
            } else {
                $styles[] = sprintf('--wp--style--color--link: %s;', $block_attributes['style']['color']['link']);
            }
        }
    }
    // Background Colors.
    if ($has_background_colors_support) {
        $has_named_background_color = array_key_exists('backgroundColor', $block_attributes);
        $has_custom_background_color = isset($block_attributes['style']['color']['background']);
        // Apply required background class.
        if ($has_custom_background_color || $has_named_background_color) {
            $classes[] = 'has-background';
        }
        // Apply background color classes or styles.
        if ($has_named_background_color) {
            $classes[] = sprintf('has-%s-background-color', $block_attributes['backgroundColor']);
        } elseif ($has_custom_background_color) {
            $styles[] = sprintf('background-color: %s;', $block_attributes['style']['color']['background']);
        }
    }
    // Gradients.
    if ($has_gradients_support) {
        $has_named_gradient = array_key_exists('gradient', $block_attributes);
        $has_custom_gradient = isset($block_attributes['style']['color']['gradient']);
        if ($has_named_gradient || $has_custom_gradient) {
            $classes[] = 'has-background';
        }
        // Apply required background class.
        if ($has_named_gradient) {
            $classes[] = sprintf('has-%s-gradient-background', $block_attributes['gradient']);
        } elseif ($has_custom_gradient) {
            $styles[] = sprintf('background: %s;', $block_attributes['style']['color']['gradient']);
        }
    }
    $attributes = array();
    if (!empty($classes)) {
        $attributes['class'] = implode(' ', $classes);
    }
    if (!empty($styles)) {
        $attributes['style'] = implode(' ', $styles);
    }
    return $attributes;
}