Skip to content

Typography: Add font-stretch and font-variation-settings support to Theme JSON styles. #13789

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Jiwoon-Kim wants to merge 4 commits into
base: trunk
Choose a base branch
from
Open

Typography: Add font-stretch and font-variation-settings support to Theme JSON styles. #13789

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cd54c91
Typography: Accept a font width and font variation settings as styles.
Jiwoon-Kim Sep 27, 2026
7e4e549
Typography: Reference the ticket from the new tests.
Jiwoon-Kim Sep 27, 2026
78adfab
Typography: Leave theme.json to the plugin it is copied from.
Jiwoon-Kim Sep 27, 2026
8c63a53
Typography: Hold the axis tag syntax, not a count of four characters.
Jiwoon-Kim Sep 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 60 additions & 36 deletions src/wp-includes/block-supports/typography.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,22 +26,26 @@ function wp_register_typography_support( $block_type ) {
return;
}

$has_font_family_support = $typography_supports['__experimentalFontFamily'] ?? false;
$has_font_size_support = $typography_supports['fontSize'] ?? false;
$has_font_style_support = $typography_supports['__experimentalFontStyle'] ?? false;
$has_font_weight_support = $typography_supports['__experimentalFontWeight'] ?? false;
$has_letter_spacing_support = $typography_supports['__experimentalLetterSpacing'] ?? false;
$has_line_height_support = $typography_supports['lineHeight'] ?? false;
$has_text_align_support = $typography_supports['textAlign'] ?? false;
$has_text_columns_support = $typography_supports['textColumns'] ?? false;
$has_text_decoration_support = $typography_supports['__experimentalTextDecoration'] ?? false;
$has_text_transform_support = $typography_supports['__experimentalTextTransform'] ?? false;
$has_text_indent_support = $typography_supports['textIndent'] ?? false;
$has_writing_mode_support = $typography_supports['__experimentalWritingMode'] ?? false;
$has_font_family_support = $typography_supports['__experimentalFontFamily'] ?? false;
$has_font_size_support = $typography_supports['fontSize'] ?? false;
$has_font_stretch_support = $typography_supports['fontStretch'] ?? false;
$has_font_style_support = $typography_supports['__experimentalFontStyle'] ?? false;
$has_font_variation_settings_support = $typography_supports['fontVariationSettings'] ?? false;
$has_font_weight_support = $typography_supports['__experimentalFontWeight'] ?? false;
$has_letter_spacing_support = $typography_supports['__experimentalLetterSpacing'] ?? false;
$has_line_height_support = $typography_supports['lineHeight'] ?? false;
$has_text_align_support = $typography_supports['textAlign'] ?? false;
$has_text_columns_support = $typography_supports['textColumns'] ?? false;
$has_text_decoration_support = $typography_supports['__experimentalTextDecoration'] ?? false;
$has_text_transform_support = $typography_supports['__experimentalTextTransform'] ?? false;
$has_text_indent_support = $typography_supports['textIndent'] ?? false;
$has_writing_mode_support = $typography_supports['__experimentalWritingMode'] ?? false;

$has_typography_support = $has_font_family_support
|| $has_font_size_support
|| $has_font_stretch_support
|| $has_font_style_support
|| $has_font_variation_settings_support
|| $has_font_weight_support
|| $has_letter_spacing_support
|| $has_line_height_support
Expand Down Expand Up @@ -104,32 +108,36 @@ function wp_apply_typography_support( $block_type, $block_attributes ) {
return array();
}

$has_font_family_support = $typography_supports['__experimentalFontFamily'] ?? false;
$has_font_size_support = $typography_supports['fontSize'] ?? false;
$has_font_style_support = $typography_supports['__experimentalFontStyle'] ?? false;
$has_font_weight_support = $typography_supports['__experimentalFontWeight'] ?? false;
$has_letter_spacing_support = $typography_supports['__experimentalLetterSpacing'] ?? false;
$has_line_height_support = $typography_supports['lineHeight'] ?? false;
$has_text_align_support = $typography_supports['textAlign'] ?? false;
$has_text_columns_support = $typography_supports['textColumns'] ?? false;
$has_text_decoration_support = $typography_supports['__experimentalTextDecoration'] ?? false;
$has_text_transform_support = $typography_supports['__experimentalTextTransform'] ?? false;
$has_text_indent_support = $typography_supports['textIndent'] ?? false;
$has_writing_mode_support = $typography_supports['__experimentalWritingMode'] ?? false;
$has_font_family_support = $typography_supports['__experimentalFontFamily'] ?? false;
$has_font_size_support = $typography_supports['fontSize'] ?? false;
$has_font_stretch_support = $typography_supports['fontStretch'] ?? false;
$has_font_style_support = $typography_supports['__experimentalFontStyle'] ?? false;
$has_font_variation_settings_support = $typography_supports['fontVariationSettings'] ?? false;
$has_font_weight_support = $typography_supports['__experimentalFontWeight'] ?? false;
$has_letter_spacing_support = $typography_supports['__experimentalLetterSpacing'] ?? false;
$has_line_height_support = $typography_supports['lineHeight'] ?? false;
$has_text_align_support = $typography_supports['textAlign'] ?? false;
$has_text_columns_support = $typography_supports['textColumns'] ?? false;
$has_text_decoration_support = $typography_supports['__experimentalTextDecoration'] ?? false;
$has_text_transform_support = $typography_supports['__experimentalTextTransform'] ?? false;
$has_text_indent_support = $typography_supports['textIndent'] ?? false;
$has_writing_mode_support = $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_align = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textAlign' );
$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_text_indent = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textIndent' );
$should_skip_writing_mode = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'writingMode' );
$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_stretch = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontStretch' );
$should_skip_font_style = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontStyle' );
$should_skip_font_variation_settings = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontVariationSettings' );
$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_align = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textAlign' );
$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_text_indent = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textIndent' );
$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 ) {
Expand All @@ -154,6 +162,14 @@ function wp_apply_typography_support( $block_type, $block_attributes ) {
$typography_block_styles['fontFamily'] = $preset_font_family ? $preset_font_family : $custom_font_family;
}

if (
$has_font_stretch_support &&
! $should_skip_font_stretch &&
isset( $block_attributes['style']['typography']['fontStretch'] )
) {
$typography_block_styles['fontStretch'] = $block_attributes['style']['typography']['fontStretch'];
}

if (
$has_font_style_support &&
! $should_skip_font_style &&
Expand Down Expand Up @@ -232,6 +248,14 @@ function wp_apply_typography_support( $block_type, $block_attributes ) {
$typography_block_styles['textIndent'] = $block_attributes['style']['typography']['textIndent'] ?? null;
}

if (
$has_font_variation_settings_support &&
! $should_skip_font_variation_settings &&
isset( $block_attributes['style']['typography']['fontVariationSettings'] )
) {
$typography_block_styles['fontVariationSettings'] = $block_attributes['style']['typography']['fontVariationSettings'];
}

$attributes = array();
$classnames = array();
$styles = wp_style_engine_get_styles(
Expand Down
86 changes: 72 additions & 14 deletions src/wp-includes/class-wp-theme-json.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -285,7 +285,9 @@ class WP_Theme_JSON {
'column-count' => array( 'typography', 'textColumns' ),
'font-family' => array( 'typography', 'fontFamily' ),
'font-size' => array( 'typography', 'fontSize' ),
'font-stretch' => array( 'typography', 'fontStretch' ),
'font-style' => array( 'typography', 'fontStyle' ),
'font-variation-settings' => array( 'typography', 'fontVariationSettings' ),
'font-weight' => array( 'typography', 'fontWeight' ),
'letter-spacing' => array( 'typography', 'letterSpacing' ),
'line-height' => array( 'typography', 'lineHeight' ),
Expand Down Expand Up @@ -502,7 +504,9 @@ class WP_Theme_JSON {
'dropCap' => null,
'fontFamilies' => null,
'fontSizes' => null,
'fontStretch' => null,
'fontStyle' => null,
'fontVariations' => null,
'fontWeight' => null,
'letterSpacing' => null,
'lineHeight' => null,
Expand Down Expand Up @@ -533,6 +537,7 @@ class WP_Theme_JSON {
'fontFace' => array(
array(
'ascentOverride' => null,
'axes' => null,
'descentOverride' => null,
'fontDisplay' => null,
'fontFamily' => null,
Expand Down Expand Up @@ -616,19 +621,21 @@ class WP_Theme_JSON {
'blockGap' => null,
),
'typography' => array(
'fontFamily' => null,
'fontSize' => null,
'fontStyle' => null,
'fontWeight' => null,
'letterSpacing' => null,
'lineHeight' => null,
'textAlign' => null,
'textColumns' => null,
'textDecoration' => null,
'textIndent' => null,
'textShadow' => null,
'textTransform' => null,
'writingMode' => null,
'fontFamily' => null,
'fontSize' => null,
'fontStretch' => null,
'fontStyle' => null,
'fontVariationSettings' => null,
'fontWeight' => null,
'letterSpacing' => null,
'lineHeight' => null,
'textAlign' => null,
'textColumns' => null,
'textDecoration' => null,
'textIndent' => null,
'textShadow' => null,
'textTransform' => null,
'writingMode' => null,
),
'css' => null,
);
Expand Down Expand Up @@ -3130,6 +3137,19 @@ protected static function compute_style_properties( $styles, $settings = array()
}
}

/*
* Variation settings are stored as an object keyed by axis tag rather
* than as a string, so the style engine serializes them here. It is
* also what decides which axes may be written, so this is the one
* place that rule is read.
*/
if ( 'font-variation-settings' === $css_property && is_array( $value ) ) {
$variation_styles = wp_style_engine_get_styles(
array( 'typography' => array( 'fontVariationSettings' => $value ) )
);
$value = $variation_styles['declarations'][ $css_property ] ?? null;
}

// Skip if empty and not "0" or value represents array of longhand values.
$has_missing_value = empty( $value ) && ! is_numeric( $value );
if ( $has_missing_value || is_array( $value ) ) {
Expand Down Expand Up @@ -4713,6 +4733,38 @@ protected static function filter_slugs( $node, $slugs ) {
return $new_node;
}

/**
* Keeps the font variation settings a style engine would write.
*
* The value is an object keyed by OpenType axis tag. Which tags and values may
* be written is the style engine's rule, documented where it serializes them,
* so each entry is offered to the engine on its own rather than read a second
* time here: an axis that has a CSS property of its own, a tag that is not four
* letters or digits, and a value that is not a number are all left out.
*
* @since 7.2.0
*
* @param array $settings Axis values keyed by tag.
* @return array The entries that may be written.
*/
protected static function filter_font_variation_settings( $settings ) {
if ( ! is_array( $settings ) ) {
return array();
}

$filtered = array();
foreach ( $settings as $tag => $value ) {
$styles = wp_style_engine_get_styles(
array( 'typography' => array( 'fontVariationSettings' => array( $tag => $value ) ) )
);
if ( ! empty( $styles['declarations']['font-variation-settings'] ) ) {
$filtered[ $tag ] = $value;
}
}

return $filtered;
}

/**
* Removes insecure data from theme.json.
*
Expand Down Expand Up @@ -5112,9 +5164,15 @@ protected static function remove_insecure_styles( $input ) {
/*
* Check the value isn't an array before adding so as to not
* double up shorthand and longhand styles.
*
* Font variation settings are an exception: the value is an object
* keyed by axis tag rather than a shorthand, so dropping it here
* would drop the style.
*/
$value = _wp_array_get( $input, $path, array() );
if ( ! is_array( $value ) ) {
if ( 'font-variation-settings' === $declaration['name'] ) {
_wp_array_set( $output, $path, static::filter_font_variation_settings( $value ) );
} elseif ( ! is_array( $value ) ) {
_wp_array_set( $output, $path, $value );
}
}
Expand Down
1 change: 1 addition & 0 deletions src/wp-includes/kses.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2729,6 +2729,7 @@ function safecss_filter_attr( $css, $deprecated = '' ) {
'font-size',
'font-style',
'font-variant',
'font-variation-settings',
'font-weight',
'letter-spacing',
'line-height',
Expand Down
Loading
Loading