wp_render_elements_support_styles

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

WordPress Version: 6.5

/**
 * Renders the elements stylesheet.
 *
 * In the case of nested blocks we want the parent element styles to be rendered before their descendants.
 * This solves the issue of an element (e.g.: link color) being styled in both the parent and a descendant:
 * we want the descendant style to take priority, and this is done by loading it after, in DOM order.
 *
 * @since 6.0.0
 * @since 6.1.0 Implemented the style engine to generate CSS and classnames.
 * @access private
 *
 * @param string|null $pre_render The pre-rendered content. Default null.
 * @param array       $block      The block being rendered.
 * @return null
 */
function wp_render_elements_support_styles($pre_render, $block)
{
    $block_type = WP_Block_Type_Registry::get_instance()->get_registered($block['blockName']);
    $element_block_styles = isset($block['attrs']['style']['elements']) ? $block['attrs']['style']['elements'] : null;
    if (!$element_block_styles) {
        return null;
    }
    $skip_link_color_serialization = wp_should_skip_block_supports_serialization($block_type, 'color', 'link');
    $skip_heading_color_serialization = wp_should_skip_block_supports_serialization($block_type, 'color', 'heading');
    $skip_button_color_serialization = wp_should_skip_block_supports_serialization($block_type, 'color', 'button');
    $skips_all_element_color_serialization = $skip_link_color_serialization && $skip_heading_color_serialization && $skip_button_color_serialization;
    if ($skips_all_element_color_serialization) {
        return null;
    }
    $class_name = wp_get_elements_class_name($block);
    $element_types = array('button' => array('selector' => ".{$class_name} .wp-element-button, .{$class_name} .wp-block-button__link", 'skip' => $skip_button_color_serialization), 'link' => array('selector' => ".{$class_name} a:where(:not(.wp-element-button))", 'hover_selector' => ".{$class_name} a:where(:not(.wp-element-button)):hover", 'skip' => $skip_link_color_serialization), 'heading' => array('selector' => ".{$class_name} h1, .{$class_name} h2, .{$class_name} h3, .{$class_name} h4, .{$class_name} h5, .{$class_name} h6", 'skip' => $skip_heading_color_serialization, 'elements' => array('h1', 'h2', 'h3', 'h4', 'h5', 'h6')));
    foreach ($element_types as $element_type => $element_config) {
        if ($element_config['skip']) {
            continue;
        }
        $element_style_object = isset($element_block_styles[$element_type]) ? $element_block_styles[$element_type] : null;
        // Process primary element type styles.
        if ($element_style_object) {
            wp_style_engine_get_styles($element_style_object, array('selector' => $element_config['selector'], 'context' => 'block-supports'));
            if (isset($element_style_object[':hover'])) {
                wp_style_engine_get_styles($element_style_object[':hover'], array('selector' => $element_config['hover_selector'], 'context' => 'block-supports'));
            }
        }
        // Process related elements e.g. h1-h6 for headings.
        if (isset($element_config['elements'])) {
            foreach ($element_config['elements'] as $element) {
                $element_style_object = isset($element_block_styles[$element]) ? $element_block_styles[$element] : null;
                if ($element_style_object) {
                    wp_style_engine_get_styles($element_style_object, array('selector' => ".{$class_name} {$element}", 'context' => 'block-supports'));
                }
            }
        }
    }
    return null;
}

WordPress Version: 6.4

/**
 * Renders the elements stylesheet.
 *
 * In the case of nested blocks we want the parent element styles to be rendered before their descendants.
 * This solves the issue of an element (e.g.: link color) being styled in both the parent and a descendant:
 * we want the descendant style to take priority, and this is done by loading it after, in DOM order.
 *
 * @since 6.0.0
 * @since 6.1.0 Implemented the style engine to generate CSS and classnames.
 * @access private
 *
 * @param string|null $pre_render The pre-rendered content. Default null.
 * @param array       $block      The block being rendered.
 * @return null
 */
function wp_render_elements_support_styles($pre_render, $block)
{
    $block_type = WP_Block_Type_Registry::get_instance()->get_registered($block['blockName']);
    $element_block_styles = isset($block['attrs']['style']['elements']) ? $block['attrs']['style']['elements'] : null;
    if (!$element_block_styles) {
        return null;
    }
    $skip_link_color_serialization = wp_should_skip_block_supports_serialization($block_type, 'color', 'link');
    $skip_heading_color_serialization = wp_should_skip_block_supports_serialization($block_type, 'color', 'heading');
    $skip_button_color_serialization = wp_should_skip_block_supports_serialization($block_type, 'color', 'button');
    $skips_all_element_color_serialization = $skip_link_color_serialization && $skip_heading_color_serialization && $skip_button_color_serialization;
    if ($skips_all_element_color_serialization) {
        return null;
    }
    $class_name = wp_get_elements_class_name($block);
    $element_types = array('button' => array('selector' => ".{$class_name} .wp-element-button, .{$class_name} .wp-block-button__link", 'skip' => $skip_button_color_serialization), 'link' => array('selector' => ".{$class_name} a", 'hover_selector' => ".{$class_name} a:hover", 'skip' => $skip_link_color_serialization), 'heading' => array('selector' => ".{$class_name} h1, .{$class_name} h2, .{$class_name} h3, .{$class_name} h4, .{$class_name} h5, .{$class_name} h6", 'skip' => $skip_heading_color_serialization, 'elements' => array('h1', 'h2', 'h3', 'h4', 'h5', 'h6')));
    foreach ($element_types as $element_type => $element_config) {
        if ($element_config['skip']) {
            continue;
        }
        $element_style_object = isset($element_block_styles[$element_type]) ? $element_block_styles[$element_type] : null;
        // Process primary element type styles.
        if ($element_style_object) {
            wp_style_engine_get_styles($element_style_object, array('selector' => $element_config['selector'], 'context' => 'block-supports'));
            if (isset($element_style_object[':hover'])) {
                wp_style_engine_get_styles($element_style_object[':hover'], array('selector' => $element_config['hover_selector'], 'context' => 'block-supports'));
            }
        }
        // Process related elements e.g. h1-h6 for headings.
        if (isset($element_config['elements'])) {
            foreach ($element_config['elements'] as $element) {
                $element_style_object = isset($element_block_styles[$element]) ? $element_block_styles[$element] : null;
                if ($element_style_object) {
                    wp_style_engine_get_styles($element_style_object, array('selector' => ".{$class_name} {$element}", 'context' => 'block-supports'));
                }
            }
        }
    }
    return null;
}

WordPress Version: 6.3

/**
 * Renders the elements stylesheet.
 *
 * In the case of nested blocks we want the parent element styles to be rendered before their descendants.
 * This solves the issue of an element (e.g.: link color) being styled in both the parent and a descendant:
 * we want the descendant style to take priority, and this is done by loading it after, in DOM order.
 *
 * @since 6.0.0
 * @since 6.1.0 Implemented the style engine to generate CSS and classnames.
 * @access private
 *
 * @param string|null $pre_render The pre-rendered content. Default null.
 * @param array       $block      The block being rendered.
 * @return null
 */
function wp_render_elements_support_styles($pre_render, $block)
{
    $block_type = WP_Block_Type_Registry::get_instance()->get_registered($block['blockName']);
    $element_block_styles = isset($block['attrs']['style']['elements']) ? $block['attrs']['style']['elements'] : null;
    /*
     * For now we only care about link color.
     */
    $skip_link_color_serialization = wp_should_skip_block_supports_serialization($block_type, 'color', 'link');
    if ($skip_link_color_serialization) {
        return null;
    }
    $class_name = wp_get_elements_class_name($block);
    $link_block_styles = isset($element_block_styles['link']) ? $element_block_styles['link'] : null;
    wp_style_engine_get_styles($link_block_styles, array('selector' => ".{$class_name} a", 'context' => 'block-supports'));
    if (isset($link_block_styles[':hover'])) {
        wp_style_engine_get_styles($link_block_styles[':hover'], array('selector' => ".{$class_name} a:hover", 'context' => 'block-supports'));
    }
    return null;
}

WordPress Version: 6.2

/**
 * Renders the elements stylesheet.
 *
 * In the case of nested blocks we want the parent element styles to be rendered before their descendants.
 * This solves the issue of an element (e.g.: link color) being styled in both the parent and a descendant:
 * we want the descendant style to take priority, and this is done by loading it after, in DOM order.
 *
 * @since 6.0.0
 * @since 6.1.0 Implemented the style engine to generate CSS and classnames.
 * @access private
 *
 * @param string|null $pre_render The pre-rendered content. Default null.
 * @param array       $block      The block being rendered.
 * @return null
 */
function wp_render_elements_support_styles($pre_render, $block)
{
    $block_type = WP_Block_Type_Registry::get_instance()->get_registered($block['blockName']);
    $element_block_styles = isset($block['attrs']['style']['elements']) ? $block['attrs']['style']['elements'] : null;
    /*
     * For now we only care about link color.
     */
    $skip_link_color_serialization = wp_should_skip_block_supports_serialization($block_type, 'color', 'link');
    if ($skip_link_color_serialization) {
        return null;
    }
    $class_name = wp_get_elements_class_name($block);
    $link_block_styles = isset($element_block_styles['link']) ? $element_block_styles['link'] : null;
    wp_style_engine_get_styles($link_block_styles, array('selector' => ".{$class_name} a", 'context' => 'block-supports'));
    return null;
}

WordPress Version: 6.1

/**
 * Render the elements stylesheet.
 *
 * In the case of nested blocks we want the parent element styles to be rendered before their descendants.
 * This solves the issue of an element (e.g.: link color) being styled in both the parent and a descendant:
 * we want the descendant style to take priority, and this is done by loading it after, in DOM order.
 *
 * @since 6.0.0
 * @since 6.1.0 Implemented the style engine to generate CSS and classnames.
 * @access private
 *
 * @param string|null $pre_render   The pre-rendered content. Default null.
 * @param array       $block        The block being rendered.
 *
 * @return null
 */
function wp_render_elements_support_styles($pre_render, $block)
{
    $block_type = WP_Block_Type_Registry::get_instance()->get_registered($block['blockName']);
    $element_block_styles = isset($block['attrs']['style']['elements']) ? $block['attrs']['style']['elements'] : null;
    /*
     * For now we only care about link color.
     */
    $skip_link_color_serialization = wp_should_skip_block_supports_serialization($block_type, 'color', 'link');
    if ($skip_link_color_serialization) {
        return null;
    }
    $class_name = wp_get_elements_class_name($block);
    $link_block_styles = isset($element_block_styles['link']) ? $element_block_styles['link'] : null;
    wp_style_engine_get_styles($link_block_styles, array('selector' => ".{$class_name} a", 'context' => 'block-supports'));
    return null;
}