wp_apply_typography_support

The timeline below displays how wordpress function wp_apply_typography_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 typography features such as font sizes
 * 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 Used the style engine to generate CSS and classnames.
 * @since 6.3.0 Added support for text-columns.
 * @access private
 *
 * @param WP_Block_Type $block_type       Block type.
 * @param array         $block_attributes Block attributes.
 * @return array Typography CSS classes and inline styles.
 */
function wp_apply_typography_support($block_type, $block_attributes)
{
    if (!$block_type instanceof WP_Block_Type) {
        return array();
    }
    $typography_supports = isset($block_type->supports['typography']) ? $block_type->supports['typography'] : false;
    if (!$typography_supports) {
        return array();
    }
    if (wp_should_skip_block_supports_serialization($block_type, 'typography')) {
        return array();
    }
    $has_font_family_support = isset($typography_supports['__experimentalFontFamily']) ? $typography_supports['__experimentalFontFamily'] : false;
    $has_font_size_support = isset($typography_supports['fontSize']) ? $typography_supports['fontSize'] : false;
    $has_font_style_support = isset($typography_supports['__experimentalFontStyle']) ? $typography_supports['__experimentalFontStyle'] : false;
    $has_font_weight_support = isset($typography_supports['__experimentalFontWeight']) ? $typography_supports['__experimentalFontWeight'] : false;
    $has_letter_spacing_support = isset($typography_supports['__experimentalLetterSpacing']) ? $typography_supports['__experimentalLetterSpacing'] : false;
    $has_line_height_support = isset($typography_supports['lineHeight']) ? $typography_supports['lineHeight'] : false;
    $has_text_columns_support = isset($typography_supports['textColumns']) ? $typography_supports['textColumns'] : false;
    $has_text_decoration_support = isset($typography_supports['__experimentalTextDecoration']) ? $typography_supports['__experimentalTextDecoration'] : false;
    $has_text_transform_support = isset($typography_supports['__experimentalTextTransform']) ? $typography_supports['__experimentalTextTransform'] : false;
    $has_writing_mode_support = isset($typography_supports['__experimentalWritingMode']) ? $typography_supports['__experimentalWritingMode'] : false;
    // Whether to skip individual block support features.
    $should_skip_font_size = wp_should_skip_block_supports_serialization($block_type, 'typography', 'fontSize');
    $should_skip_font_family = wp_should_skip_block_supports_serialization($block_type, 'typography', 'fontFamily');
    $should_skip_font_style = wp_should_skip_block_supports_serialization($block_type, 'typography', 'fontStyle');
    $should_skip_font_weight = wp_should_skip_block_supports_serialization($block_type, 'typography', 'fontWeight');
    $should_skip_line_height = wp_should_skip_block_supports_serialization($block_type, 'typography', 'lineHeight');
    $should_skip_text_columns = wp_should_skip_block_supports_serialization($block_type, 'typography', 'textColumns');
    $should_skip_text_decoration = wp_should_skip_block_supports_serialization($block_type, 'typography', 'textDecoration');
    $should_skip_text_transform = wp_should_skip_block_supports_serialization($block_type, 'typography', 'textTransform');
    $should_skip_letter_spacing = wp_should_skip_block_supports_serialization($block_type, 'typography', 'letterSpacing');
    $should_skip_writing_mode = wp_should_skip_block_supports_serialization($block_type, 'typography', 'writingMode');
    $typography_block_styles = array();
    if ($has_font_size_support && !$should_skip_font_size) {
        $preset_font_size = array_key_exists('fontSize', $block_attributes) ? "var:preset|font-size|{$block_attributes['fontSize']}" : null;
        $custom_font_size = isset($block_attributes['style']['typography']['fontSize']) ? $block_attributes['style']['typography']['fontSize'] : null;
        $typography_block_styles['fontSize'] = $preset_font_size ? $preset_font_size : wp_get_typography_font_size_value(array('size' => $custom_font_size));
    }
    if ($has_font_family_support && !$should_skip_font_family) {
        $preset_font_family = array_key_exists('fontFamily', $block_attributes) ? "var:preset|font-family|{$block_attributes['fontFamily']}" : null;
        $custom_font_family = isset($block_attributes['style']['typography']['fontFamily']) ? wp_typography_get_preset_inline_style_value($block_attributes['style']['typography']['fontFamily'], 'font-family') : null;
        $typography_block_styles['fontFamily'] = $preset_font_family ? $preset_font_family : $custom_font_family;
    }
    if ($has_font_style_support && !$should_skip_font_style && isset($block_attributes['style']['typography']['fontStyle'])) {
        $typography_block_styles['fontStyle'] = wp_typography_get_preset_inline_style_value($block_attributes['style']['typography']['fontStyle'], 'font-style');
    }
    if ($has_font_weight_support && !$should_skip_font_weight && isset($block_attributes['style']['typography']['fontWeight'])) {
        $typography_block_styles['fontWeight'] = wp_typography_get_preset_inline_style_value($block_attributes['style']['typography']['fontWeight'], 'font-weight');
    }
    if ($has_line_height_support && !$should_skip_line_height) {
        $typography_block_styles['lineHeight'] = isset($block_attributes['style']['typography']['lineHeight']) ? $block_attributes['style']['typography']['lineHeight'] : null;
    }
    if ($has_text_columns_support && !$should_skip_text_columns && isset($block_attributes['style']['typography']['textColumns'])) {
        $typography_block_styles['textColumns'] = isset($block_attributes['style']['typography']['textColumns']) ? $block_attributes['style']['typography']['textColumns'] : null;
    }
    if ($has_text_decoration_support && !$should_skip_text_decoration && isset($block_attributes['style']['typography']['textDecoration'])) {
        $typography_block_styles['textDecoration'] = wp_typography_get_preset_inline_style_value($block_attributes['style']['typography']['textDecoration'], 'text-decoration');
    }
    if ($has_text_transform_support && !$should_skip_text_transform && isset($block_attributes['style']['typography']['textTransform'])) {
        $typography_block_styles['textTransform'] = wp_typography_get_preset_inline_style_value($block_attributes['style']['typography']['textTransform'], 'text-transform');
    }
    if ($has_letter_spacing_support && !$should_skip_letter_spacing && isset($block_attributes['style']['typography']['letterSpacing'])) {
        $typography_block_styles['letterSpacing'] = wp_typography_get_preset_inline_style_value($block_attributes['style']['typography']['letterSpacing'], 'letter-spacing');
    }
    if ($has_writing_mode_support && !$should_skip_writing_mode && isset($block_attributes['style']['typography']['writingMode'])) {
        $typography_block_styles['writingMode'] = isset($block_attributes['style']['typography']['writingMode']) ? $block_attributes['style']['typography']['writingMode'] : null;
    }
    $attributes = array();
    $styles = wp_style_engine_get_styles(array('typography' => $typography_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.3

/**
 * Adds CSS classes and inline styles for typography features such as font sizes
 * 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 Used the style engine to generate CSS and classnames.
 * @since 6.3.0 Added support for text-columns.
 * @access private
 *
 * @param WP_Block_Type $block_type       Block type.
 * @param array         $block_attributes Block attributes.
 * @return array Typography CSS classes and inline styles.
 */
function wp_apply_typography_support($block_type, $block_attributes)
{
    if (!property_exists($block_type, 'supports')) {
        return array();
    }
    $typography_supports = _wp_array_get($block_type->supports, array('typography'), false);
    if (!$typography_supports) {
        return array();
    }
    if (wp_should_skip_block_supports_serialization($block_type, 'typography')) {
        return array();
    }
    $has_font_family_support = _wp_array_get($typography_supports, array('__experimentalFontFamily'), false);
    $has_font_size_support = _wp_array_get($typography_supports, array('fontSize'), false);
    $has_font_style_support = _wp_array_get($typography_supports, array('__experimentalFontStyle'), false);
    $has_font_weight_support = _wp_array_get($typography_supports, array('__experimentalFontWeight'), false);
    $has_letter_spacing_support = _wp_array_get($typography_supports, array('__experimentalLetterSpacing'), false);
    $has_line_height_support = _wp_array_get($typography_supports, array('lineHeight'), false);
    $has_text_columns_support = _wp_array_get($typography_supports, array('textColumns'), false);
    $has_text_decoration_support = _wp_array_get($typography_supports, array('__experimentalTextDecoration'), false);
    $has_text_transform_support = _wp_array_get($typography_supports, array('__experimentalTextTransform'), false);
    // Whether to skip individual block support features.
    $should_skip_font_size = wp_should_skip_block_supports_serialization($block_type, 'typography', 'fontSize');
    $should_skip_font_family = wp_should_skip_block_supports_serialization($block_type, 'typography', 'fontFamily');
    $should_skip_font_style = wp_should_skip_block_supports_serialization($block_type, 'typography', 'fontStyle');
    $should_skip_font_weight = wp_should_skip_block_supports_serialization($block_type, 'typography', 'fontWeight');
    $should_skip_line_height = wp_should_skip_block_supports_serialization($block_type, 'typography', 'lineHeight');
    $should_skip_text_columns = wp_should_skip_block_supports_serialization($block_type, 'typography', 'textColumns');
    $should_skip_text_decoration = wp_should_skip_block_supports_serialization($block_type, 'typography', 'textDecoration');
    $should_skip_text_transform = wp_should_skip_block_supports_serialization($block_type, 'typography', 'textTransform');
    $should_skip_letter_spacing = wp_should_skip_block_supports_serialization($block_type, 'typography', 'letterSpacing');
    $typography_block_styles = array();
    if ($has_font_size_support && !$should_skip_font_size) {
        $preset_font_size = array_key_exists('fontSize', $block_attributes) ? "var:preset|font-size|{$block_attributes['fontSize']}" : null;
        $custom_font_size = isset($block_attributes['style']['typography']['fontSize']) ? $block_attributes['style']['typography']['fontSize'] : null;
        $typography_block_styles['fontSize'] = $preset_font_size ? $preset_font_size : wp_get_typography_font_size_value(array('size' => $custom_font_size));
    }
    if ($has_font_family_support && !$should_skip_font_family) {
        $preset_font_family = array_key_exists('fontFamily', $block_attributes) ? "var:preset|font-family|{$block_attributes['fontFamily']}" : null;
        $custom_font_family = isset($block_attributes['style']['typography']['fontFamily']) ? wp_typography_get_preset_inline_style_value($block_attributes['style']['typography']['fontFamily'], 'font-family') : null;
        $typography_block_styles['fontFamily'] = $preset_font_family ? $preset_font_family : $custom_font_family;
    }
    if ($has_font_style_support && !$should_skip_font_style && isset($block_attributes['style']['typography']['fontStyle'])) {
        $typography_block_styles['fontStyle'] = wp_typography_get_preset_inline_style_value($block_attributes['style']['typography']['fontStyle'], 'font-style');
    }
    if ($has_font_weight_support && !$should_skip_font_weight && isset($block_attributes['style']['typography']['fontWeight'])) {
        $typography_block_styles['fontWeight'] = wp_typography_get_preset_inline_style_value($block_attributes['style']['typography']['fontWeight'], 'font-weight');
    }
    if ($has_line_height_support && !$should_skip_line_height) {
        $typography_block_styles['lineHeight'] = _wp_array_get($block_attributes, array('style', 'typography', 'lineHeight'));
    }
    if ($has_text_columns_support && !$should_skip_text_columns && isset($block_attributes['style']['typography']['textColumns'])) {
        $typography_block_styles['textColumns'] = _wp_array_get($block_attributes, array('style', 'typography', 'textColumns'), null);
    }
    if ($has_text_decoration_support && !$should_skip_text_decoration && isset($block_attributes['style']['typography']['textDecoration'])) {
        $typography_block_styles['textDecoration'] = wp_typography_get_preset_inline_style_value($block_attributes['style']['typography']['textDecoration'], 'text-decoration');
    }
    if ($has_text_transform_support && !$should_skip_text_transform && isset($block_attributes['style']['typography']['textTransform'])) {
        $typography_block_styles['textTransform'] = wp_typography_get_preset_inline_style_value($block_attributes['style']['typography']['textTransform'], 'text-transform');
    }
    if ($has_letter_spacing_support && !$should_skip_letter_spacing && isset($block_attributes['style']['typography']['letterSpacing'])) {
        $typography_block_styles['letterSpacing'] = wp_typography_get_preset_inline_style_value($block_attributes['style']['typography']['letterSpacing'], 'letter-spacing');
    }
    $attributes = array();
    $styles = wp_style_engine_get_styles(array('typography' => $typography_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

/**
 * Adds CSS classes and inline styles for typography features such as font sizes
 * 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 Used 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 Typography CSS classes and inline styles.
 */
function wp_apply_typography_support($block_type, $block_attributes)
{
    if (!property_exists($block_type, 'supports')) {
        return array();
    }
    $typography_supports = _wp_array_get($block_type->supports, array('typography'), false);
    if (!$typography_supports) {
        return array();
    }
    if (wp_should_skip_block_supports_serialization($block_type, 'typography')) {
        return array();
    }
    $has_font_family_support = _wp_array_get($typography_supports, array('__experimentalFontFamily'), false);
    $has_font_size_support = _wp_array_get($typography_supports, array('fontSize'), false);
    $has_font_style_support = _wp_array_get($typography_supports, array('__experimentalFontStyle'), false);
    $has_font_weight_support = _wp_array_get($typography_supports, array('__experimentalFontWeight'), false);
    $has_letter_spacing_support = _wp_array_get($typography_supports, array('__experimentalLetterSpacing'), false);
    $has_line_height_support = _wp_array_get($typography_supports, array('lineHeight'), false);
    $has_text_decoration_support = _wp_array_get($typography_supports, array('__experimentalTextDecoration'), false);
    $has_text_transform_support = _wp_array_get($typography_supports, array('__experimentalTextTransform'), false);
    // Whether to skip individual block support features.
    $should_skip_font_size = wp_should_skip_block_supports_serialization($block_type, 'typography', 'fontSize');
    $should_skip_font_family = wp_should_skip_block_supports_serialization($block_type, 'typography', 'fontFamily');
    $should_skip_font_style = wp_should_skip_block_supports_serialization($block_type, 'typography', 'fontStyle');
    $should_skip_font_weight = wp_should_skip_block_supports_serialization($block_type, 'typography', 'fontWeight');
    $should_skip_line_height = wp_should_skip_block_supports_serialization($block_type, 'typography', 'lineHeight');
    $should_skip_text_decoration = wp_should_skip_block_supports_serialization($block_type, 'typography', 'textDecoration');
    $should_skip_text_transform = wp_should_skip_block_supports_serialization($block_type, 'typography', 'textTransform');
    $should_skip_letter_spacing = wp_should_skip_block_supports_serialization($block_type, 'typography', 'letterSpacing');
    $typography_block_styles = array();
    if ($has_font_size_support && !$should_skip_font_size) {
        $preset_font_size = array_key_exists('fontSize', $block_attributes) ? "var:preset|font-size|{$block_attributes['fontSize']}" : null;
        $custom_font_size = isset($block_attributes['style']['typography']['fontSize']) ? $block_attributes['style']['typography']['fontSize'] : null;
        $typography_block_styles['fontSize'] = $preset_font_size ? $preset_font_size : wp_get_typography_font_size_value(array('size' => $custom_font_size));
    }
    if ($has_font_family_support && !$should_skip_font_family) {
        $preset_font_family = array_key_exists('fontFamily', $block_attributes) ? "var:preset|font-family|{$block_attributes['fontFamily']}" : null;
        $custom_font_family = isset($block_attributes['style']['typography']['fontFamily']) ? wp_typography_get_preset_inline_style_value($block_attributes['style']['typography']['fontFamily'], 'font-family') : null;
        $typography_block_styles['fontFamily'] = $preset_font_family ? $preset_font_family : $custom_font_family;
    }
    if ($has_font_style_support && !$should_skip_font_style && isset($block_attributes['style']['typography']['fontStyle'])) {
        $typography_block_styles['fontStyle'] = wp_typography_get_preset_inline_style_value($block_attributes['style']['typography']['fontStyle'], 'font-style');
    }
    if ($has_font_weight_support && !$should_skip_font_weight && isset($block_attributes['style']['typography']['fontWeight'])) {
        $typography_block_styles['fontWeight'] = wp_typography_get_preset_inline_style_value($block_attributes['style']['typography']['fontWeight'], 'font-weight');
    }
    if ($has_line_height_support && !$should_skip_line_height) {
        $typography_block_styles['lineHeight'] = _wp_array_get($block_attributes, array('style', 'typography', 'lineHeight'));
    }
    if ($has_text_decoration_support && !$should_skip_text_decoration && isset($block_attributes['style']['typography']['textDecoration'])) {
        $typography_block_styles['textDecoration'] = wp_typography_get_preset_inline_style_value($block_attributes['style']['typography']['textDecoration'], 'text-decoration');
    }
    if ($has_text_transform_support && !$should_skip_text_transform && isset($block_attributes['style']['typography']['textTransform'])) {
        $typography_block_styles['textTransform'] = wp_typography_get_preset_inline_style_value($block_attributes['style']['typography']['textTransform'], 'text-transform');
    }
    if ($has_letter_spacing_support && !$should_skip_letter_spacing && isset($block_attributes['style']['typography']['letterSpacing'])) {
        $typography_block_styles['letterSpacing'] = wp_typography_get_preset_inline_style_value($block_attributes['style']['typography']['letterSpacing'], 'letter-spacing');
    }
    $attributes = array();
    $styles = wp_style_engine_get_styles(array('typography' => $typography_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

/**
 * Adds CSS classes and inline styles for typography features such as font sizes
 * 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 Typography CSS classes and inline styles.
 */
function wp_apply_typography_support($block_type, $block_attributes)
{
    if (!property_exists($block_type, 'supports')) {
        return array();
    }
    $typography_supports = _wp_array_get($block_type->supports, array('typography'), false);
    if (!$typography_supports) {
        return array();
    }
    $skip_typography_serialization = _wp_array_get($typography_supports, array('__experimentalSkipSerialization'), false);
    if ($skip_typography_serialization) {
        return array();
    }
    $attributes = array();
    $classes = array();
    $styles = array();
    $has_font_family_support = _wp_array_get($typography_supports, array('__experimentalFontFamily'), false);
    $has_font_size_support = _wp_array_get($typography_supports, array('fontSize'), false);
    $has_font_style_support = _wp_array_get($typography_supports, array('__experimentalFontStyle'), false);
    $has_font_weight_support = _wp_array_get($typography_supports, array('__experimentalFontWeight'), false);
    $has_letter_spacing_support = _wp_array_get($typography_supports, array('__experimentalLetterSpacing'), false);
    $has_line_height_support = _wp_array_get($typography_supports, array('lineHeight'), false);
    $has_text_decoration_support = _wp_array_get($typography_supports, array('__experimentalTextDecoration'), false);
    $has_text_transform_support = _wp_array_get($typography_supports, array('__experimentalTextTransform'), false);
    if ($has_font_size_support) {
        $has_named_font_size = array_key_exists('fontSize', $block_attributes);
        $has_custom_font_size = isset($block_attributes['style']['typography']['fontSize']);
        if ($has_named_font_size) {
            $classes[] = sprintf('has-%s-font-size', _wp_to_kebab_case($block_attributes['fontSize']));
        } elseif ($has_custom_font_size) {
            $styles[] = sprintf('font-size: %s;', $block_attributes['style']['typography']['fontSize']);
        }
    }
    if ($has_font_family_support) {
        $has_named_font_family = array_key_exists('fontFamily', $block_attributes);
        $has_custom_font_family = isset($block_attributes['style']['typography']['fontFamily']);
        if ($has_named_font_family) {
            $classes[] = sprintf('has-%s-font-family', _wp_to_kebab_case($block_attributes['fontFamily']));
        } elseif ($has_custom_font_family) {
            // Before using classes, the value was serialized as a CSS Custom Property.
            // We don't need this code path when it lands in core.
            $font_family_custom = $block_attributes['style']['typography']['fontFamily'];
            if (strpos($font_family_custom, 'var:preset|font-family') !== false) {
                $index_to_splice = strrpos($font_family_custom, '|') + 1;
                $font_family_slug = _wp_to_kebab_case(substr($font_family_custom, $index_to_splice));
                $font_family_custom = sprintf('var(--wp--preset--font-family--%s)', $font_family_slug);
            }
            $styles[] = sprintf('font-family: %s;', $font_family_custom);
        }
    }
    if ($has_font_style_support) {
        $font_style = wp_typography_get_css_variable_inline_style($block_attributes, 'fontStyle', 'font-style');
        if ($font_style) {
            $styles[] = $font_style;
        }
    }
    if ($has_font_weight_support) {
        $font_weight = wp_typography_get_css_variable_inline_style($block_attributes, 'fontWeight', 'font-weight');
        if ($font_weight) {
            $styles[] = $font_weight;
        }
    }
    if ($has_line_height_support) {
        $has_line_height = isset($block_attributes['style']['typography']['lineHeight']);
        if ($has_line_height) {
            $styles[] = sprintf('line-height: %s;', $block_attributes['style']['typography']['lineHeight']);
        }
    }
    if ($has_text_decoration_support) {
        $text_decoration_style = wp_typography_get_css_variable_inline_style($block_attributes, 'textDecoration', 'text-decoration');
        if ($text_decoration_style) {
            $styles[] = $text_decoration_style;
        }
    }
    if ($has_text_transform_support) {
        $text_transform_style = wp_typography_get_css_variable_inline_style($block_attributes, 'textTransform', 'text-transform');
        if ($text_transform_style) {
            $styles[] = $text_transform_style;
        }
    }
    if ($has_letter_spacing_support) {
        $letter_spacing_style = wp_typography_get_css_variable_inline_style($block_attributes, 'letterSpacing', 'letter-spacing');
        if ($letter_spacing_style) {
            $styles[] = $letter_spacing_style;
        }
    }
    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 typography features such as font sizes
 * 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 Typography CSS classes and inline styles.
 */
function wp_apply_typography_support($block_type, $block_attributes)
{
    if (!property_exists($block_type, 'supports')) {
        return array();
    }
    $typography_supports = _wp_array_get($block_type->supports, array('typography'), false);
    if (!$typography_supports) {
        return array();
    }
    $skip_typography_serialization = _wp_array_get($typography_supports, array('__experimentalSkipSerialization'), false);
    if ($skip_typography_serialization) {
        return array();
    }
    $attributes = array();
    $classes = array();
    $styles = array();
    $has_font_family_support = _wp_array_get($typography_supports, array('__experimentalFontFamily'), false);
    $has_font_size_support = _wp_array_get($typography_supports, array('fontSize'), false);
    $has_font_style_support = _wp_array_get($typography_supports, array('__experimentalFontStyle'), false);
    $has_font_weight_support = _wp_array_get($typography_supports, array('__experimentalFontWeight'), false);
    $has_line_height_support = _wp_array_get($typography_supports, array('lineHeight'), false);
    $has_text_decoration_support = _wp_array_get($typography_supports, array('__experimentalTextDecoration'), false);
    $has_text_transform_support = _wp_array_get($typography_supports, array('__experimentalTextTransform'), false);
    if ($has_font_size_support) {
        $has_named_font_size = array_key_exists('fontSize', $block_attributes);
        $has_custom_font_size = isset($block_attributes['style']['typography']['fontSize']);
        if ($has_named_font_size) {
            $classes[] = sprintf('has-%s-font-size', $block_attributes['fontSize']);
        } elseif ($has_custom_font_size) {
            $styles[] = sprintf('font-size: %s;', $block_attributes['style']['typography']['fontSize']);
        }
    }
    if ($has_font_family_support) {
        $has_font_family = isset($block_attributes['style']['typography']['fontFamily']);
        if ($has_font_family) {
            $font_family = $block_attributes['style']['typography']['fontFamily'];
            if (strpos($font_family, 'var:preset|font-family') !== false) {
                // Get the name from the string and add proper styles.
                $index_to_splice = strrpos($font_family, '|') + 1;
                $font_family_name = substr($font_family, $index_to_splice);
                $styles[] = sprintf('font-family: var(--wp--preset--font-family--%s);', $font_family_name);
            } else {
                $styles[] = sprintf('font-family: %s;', $block_attributes['style']['typography']['fontFamily']);
            }
        }
    }
    if ($has_font_style_support) {
        $font_style = wp_typography_get_css_variable_inline_style($block_attributes, 'fontStyle', 'font-style');
        if ($font_style) {
            $styles[] = $font_style;
        }
    }
    if ($has_font_weight_support) {
        $font_weight = wp_typography_get_css_variable_inline_style($block_attributes, 'fontWeight', 'font-weight');
        if ($font_weight) {
            $styles[] = $font_weight;
        }
    }
    if ($has_line_height_support) {
        $has_line_height = isset($block_attributes['style']['typography']['lineHeight']);
        if ($has_line_height) {
            $styles[] = sprintf('line-height: %s;', $block_attributes['style']['typography']['lineHeight']);
        }
    }
    if ($has_text_decoration_support) {
        $text_decoration_style = wp_typography_get_css_variable_inline_style($block_attributes, 'textDecoration', 'text-decoration');
        if ($text_decoration_style) {
            $styles[] = $text_decoration_style;
        }
    }
    if ($has_text_transform_support) {
        $text_transform_style = wp_typography_get_css_variable_inline_style($block_attributes, 'textTransform', 'text-transform');
        if ($text_transform_style) {
            $styles[] = $text_transform_style;
        }
    }
    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 font sizes 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 Font size CSS classes and inline styles.
 */
function wp_apply_typography_support($block_type, $block_attributes)
{
    $has_font_size_support = false;
    $classes = array();
    $styles = array();
    if (property_exists($block_type, 'supports')) {
        $has_font_size_support = _wp_array_get($block_type->supports, array('fontSize'), false);
    }
    $has_line_height_support = false;
    if (property_exists($block_type, 'supports')) {
        $has_line_height_support = _wp_array_get($block_type->supports, array('lineHeight'), false);
    }
    // Font Size.
    if ($has_font_size_support) {
        $has_named_font_size = array_key_exists('fontSize', $block_attributes);
        $has_custom_font_size = isset($block_attributes['style']['typography']['fontSize']);
        // Apply required class or style.
        if ($has_named_font_size) {
            $classes[] = sprintf('has-%s-font-size', $block_attributes['fontSize']);
        } elseif ($has_custom_font_size) {
            $styles[] = sprintf('font-size: %spx;', $block_attributes['style']['typography']['fontSize']);
        }
    }
    // Line Height.
    if ($has_line_height_support) {
        $has_line_height = isset($block_attributes['style']['typography']['lineHeight']);
        // Add the style (no classes for line-height).
        if ($has_line_height) {
            $styles[] = sprintf('line-height: %s;', $block_attributes['style']['typography']['lineHeight']);
        }
    }
    $attributes = array();
    if (!empty($classes)) {
        $attributes['class'] = implode(' ', $classes);
    }
    if (!empty($styles)) {
        $attributes['style'] = implode(' ', $styles);
    }
    return $attributes;
}