diff --git a/src/wp-includes/block-supports/typography.php b/src/wp-includes/block-supports/typography.php index 9d947088e2d2..c54c740e58b0 100644 --- a/src/wp-includes/block-supports/typography.php +++ b/src/wp-includes/block-supports/typography.php @@ -119,7 +119,11 @@ function wp_apply_typography_support( $block_type, $block_attributes ) { $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 : $custom_font_size; + $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 ) { @@ -244,29 +248,71 @@ function wp_typography_get_preset_inline_style_value( $style_value, $css_propert return sprintf( 'var(--wp--preset--%s--%s);', $css_property, $slug ); } +/** + * Renders typography styles/content to the block wrapper. + * + * @since 6.1.0 + * + * @param string $block_content Rendered block content. + * @param array $block Block object. + * @return string Filtered block content. + */ +function wp_render_typography_support( $block_content, $block ) { + if ( ! isset( $block['attrs']['style']['typography']['fontSize'] ) ) { + return $block_content; + } + + $custom_font_size = $block['attrs']['style']['typography']['fontSize']; + $fluid_font_size = wp_get_typography_font_size_value( array( 'size' => $custom_font_size ) ); + + /* + * Checks that $fluid_font_size does not match $custom_font_size, + * which means it's been mutated by the fluid font size functions. + */ + if ( ! empty( $fluid_font_size ) && $fluid_font_size !== $custom_font_size ) { + // Replaces the first instance of `font-size:$custom_font_size` with `font-size:$fluid_font_size`. + return preg_replace( '/font-size\s*:\s*' . preg_quote( $custom_font_size, '/' ) . '\s*;?/', 'font-size:' . esc_attr( $fluid_font_size ) . ';', $block_content, 1 ); + } + + return $block_content; +} + /** * Checks a string for a unit and value and returns an array - * consisting of `'value'` and `'unit'`, e.g., [ '42', 'rem' ]. + * consisting of `'value'` and `'unit'`, e.g. array( '42', 'rem' ). * * @since 6.1.0 - * @access private * - * @param string $raw_value Raw size value from theme.json. - * @param array $options { + * @param string|int|float $raw_value Raw size value from theme.json. + * @param array $options { * Optional. An associative array of options. Default is empty array. * * @type string $coerce_to Coerce the value to rem or px. Default `'rem'`. * @type int $root_size_value Value of root font size for rem|em <-> px conversion. Default `16`. - * @type string[] $acceptable_units An array of font size units. Default `[ 'rem', 'px', 'em' ]`; + * @type string[] $acceptable_units An array of font size units. Default `array( 'rem', 'px', 'em' )`; * } * @return array|null An array consisting of `'value'` and `'unit'` properties on success. * `null` on failure. */ function wp_get_typography_value_and_unit( $raw_value, $options = array() ) { + if ( ! is_string( $raw_value ) && ! is_int( $raw_value ) && ! is_float( $raw_value ) ) { + _doing_it_wrong( + __FUNCTION__, + __( 'Raw size value must be a string, integer, or float.' ), + '6.1.0' + ); + return null; + } + if ( empty( $raw_value ) ) { return null; } + // Converts numbers to pixel values by default. + if ( is_numeric( $raw_value ) ) { + $raw_value = $raw_value . 'px'; + } + $defaults = array( 'coerce_to' => '', 'root_size_value' => 16, @@ -288,8 +334,10 @@ function wp_get_typography_value_and_unit( $raw_value, $options = array() ) { $value = $matches[1]; $unit = $matches[2]; - // Default browser font size. Later, possibly could inject some JS to - // compute this `getComputedStyle( document.querySelector( "html" ) ).fontSize`. + /* + * Default browser font size. Later, possibly could inject some JS to + * compute this `getComputedStyle( document.querySelector( "html" ) ).fontSize`. + */ if ( 'px' === $options['coerce_to'] && ( 'em' === $unit || 'rem' === $unit ) ) { $value = $value * $options['root_size_value']; $unit = $options['coerce_to']; @@ -323,7 +371,7 @@ function wp_get_typography_value_and_unit( $raw_value, $options = array() ) { * @type string $minimum_font_size Minimum font size for any clamp() calculation. * @type int $scale_factor A scale factor to determine how fast a font scales within boundaries. * } - * @return string|null A font-size value using clamp() on success. Else, null. + * @return string|null A font-size value using clamp() on success, otherwise null. */ function wp_get_computed_fluid_typography_value( $args = array() ) { $maximum_viewport_width_raw = isset( $args['maximum_viewport_width'] ) ? $args['maximum_viewport_width'] : null; @@ -395,15 +443,27 @@ function wp_get_computed_fluid_typography_value( $args = array() ) { * @param array $preset { * Required. fontSizes preset value as seen in theme.json. * - * @type string $name Name of the font size preset. - * @type string $slug Kebab-case unique identifier for the font size preset. - * @type string $size CSS font-size value, including units where applicable. + * @type string $name Name of the font size preset. + * @type string $slug Kebab-case, unique identifier for the font size preset. + * @type string|int|float $size CSS font-size value, including units if applicable. * } * @param bool $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing. - * Default is `false`. - * @return string Font-size value. + * Default is false. + * @return string|null Font-size value or null if a size is not passed in $preset. */ function wp_get_typography_font_size_value( $preset, $should_use_fluid_typography = false ) { + if ( ! isset( $preset['size'] ) ) { + return null; + } + + /* + * Catches empty values and 0/'0'. + * Fluid calculations cannot be performed on 0. + */ + if ( empty( $preset['size'] ) ) { + return $preset['size']; + } + // Checks if fluid font sizes are activated. $typography_settings = wp_get_global_settings( array( 'typography' ) ); $should_use_fluid_typography = isset( $typography_settings['fluid'] ) && true === $typography_settings['fluid'] ? true : $should_use_fluid_typography; diff --git a/src/wp-includes/class-wp-theme-json.php b/src/wp-includes/class-wp-theme-json.php index 550d83a2af12..81d471b5d452 100644 --- a/src/wp-includes/class-wp-theme-json.php +++ b/src/wp-includes/class-wp-theme-json.php @@ -1675,6 +1675,18 @@ protected static function compute_style_properties( $styles, $settings = array() continue; } + // Calculates fluid typography rules where available. + if ( 'font-size' === $css_property ) { + /* + * wp_get_typography_font_size_value() will check + * if fluid typography has been activated and also + * whether the incoming value can be converted to a fluid value. + * Values that already have a clamp() function will not pass the test, + * and therefore the original $value will be returned. + */ + $value = wp_get_typography_font_size_value( array( 'size' => $value ) ); + } + $declarations[] = array( 'name' => $css_property, 'value' => $value, diff --git a/src/wp-includes/default-filters.php b/src/wp-includes/default-filters.php index 725f5ef3cbce..1d69c809e0ce 100644 --- a/src/wp-includes/default-filters.php +++ b/src/wp-includes/default-filters.php @@ -687,6 +687,9 @@ add_action( 'setup_theme', 'wp_enable_block_templates' ); add_action( 'wp_loaded', '_add_template_loader_filters' ); +// Fluid typography. +add_filter( 'render_block', 'wp_render_typography_support', 10, 2 ); + // User preferences. add_action( 'init', 'wp_register_persisted_preferences_meta' ); diff --git a/tests/phpunit/tests/block-supports/typography.php b/tests/phpunit/tests/block-supports/typography.php index a7e6a225678f..e2e5a6976644 100644 --- a/tests/phpunit/tests/block-supports/typography.php +++ b/tests/phpunit/tests/block-supports/typography.php @@ -8,17 +8,56 @@ class Tests_Block_Supports_Typography extends WP_UnitTestCase { */ private $test_block_name; + /** + * Stores the current test theme root. + * + * @var string|null + */ + private $theme_root; + + /** + * Caches the original theme directory global value in order + * to restore it in tear_down(). + * + * @var string|null + */ + private $orig_theme_dir; + function set_up() { parent::set_up(); + $this->test_block_name = null; + + // Sets up the `wp-content/themes/` directory to ensure consistency when running tests. + $this->theme_root = realpath( DIR_TESTDATA . '/themedir1' ); + $this->orig_theme_dir = $GLOBALS['wp_theme_directories']; + $GLOBALS['wp_theme_directories'] = array( WP_CONTENT_DIR . '/themes', $this->theme_root ); + + $theme_root_callback = function () { + return $this->theme_root; + }; + add_filter( 'theme_root', $theme_root_callback ); + add_filter( 'stylesheet_root', $theme_root_callback ); + add_filter( 'template_root', $theme_root_callback ); + + // Clear caches. + wp_clean_themes_cache(); + unset( $GLOBALS['wp_themes'] ); } /** * Unregisters block type after each test. */ function tear_down() { + // Restores the original theme directory setup. + $GLOBALS['wp_theme_directories'] = $this->orig_theme_dir; + wp_clean_themes_cache(); + unset( $GLOBALS['wp_themes'] ); + + // Resets test block name. unregister_block_type( $this->test_block_name ); $this->test_block_name = null; + parent::tear_down(); } @@ -289,6 +328,30 @@ public function data_generate_font_size_preset_fixtures() { 'expected_output' => '28px', ), + 'size: int 0' => array( + 'font_size_preset' => array( + 'size' => 0, + ), + 'should_use_fluid_typography' => true, + 'expected_output' => 0, + ), + + 'size: string 0' => array( + 'font_size_preset' => array( + 'size' => '0', + ), + 'should_use_fluid_typography' => true, + 'expected_output' => '0', + ), + + 'default_return_value_when_size_is_undefined' => array( + 'font_size_preset' => array( + 'size' => null, + ), + 'should_use_fluid_typography' => false, + 'expected_output' => null, + ), + 'default_return_value_when_fluid_is_false' => array( 'font_size_preset' => array( 'size' => '28px', @@ -298,6 +361,24 @@ public function data_generate_font_size_preset_fixtures() { 'expected_output' => '28px', ), + 'default_return_value_when_value_is_already_clamped' => array( + 'font_size_preset' => array( + 'size' => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)', + 'fluid' => false, + ), + 'should_use_fluid_typography' => true, + 'expected_output' => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)', + ), + + 'default_return_value_with_unsupported_unit' => array( + 'font_size_preset' => array( + 'size' => '1000%', + 'fluid' => false, + ), + 'should_use_fluid_typography' => true, + 'expected_output' => '1000%', + ), + 'return_fluid_value' => array( 'font_size_preset' => array( 'size' => '1.75rem', @@ -306,6 +387,30 @@ public function data_generate_font_size_preset_fixtures() { 'expected_output' => 'clamp(1.3125rem, 1.3125rem + ((1vw - 0.48rem) * 2.524), 2.625rem)', ), + 'return_fluid_value_with_floats_with_units' => array( + 'font_size_preset' => array( + 'size' => '100.175px', + ), + 'should_use_fluid_typography' => true, + 'expected_output' => 'clamp(75.13125px, 4.695703125rem + ((1vw - 7.68px) * 9.03), 150.2625px)', + ), + + 'return_fluid_value_with_integer_coerced_to_px' => array( + 'font_size_preset' => array( + 'size' => 33, + ), + 'should_use_fluid_typography' => true, + 'expected_output' => 'clamp(24.75px, 1.546875rem + ((1vw - 7.68px) * 2.975), 49.5px)', + ), + + 'return_fluid_value_with_float_coerced_to_px' => array( + 'font_size_preset' => array( + 'size' => 100.23, + ), + 'should_use_fluid_typography' => true, + 'expected_output' => 'clamp(75.1725px, 4.69828125rem + ((1vw - 7.68px) * 9.035), 150.345px)', + ), + 'return_default_fluid_values_with_empty_fluid_array' => array( 'font_size_preset' => array( 'size' => '28px', @@ -371,4 +476,278 @@ public function data_generate_font_size_preset_fixtures() { ), ); } + + /** + * Tests that custom font sizes are converted to fluid values + * in inline block supports styles + * when "settings.typography.fluid" is set to true. + * + * @ticket 56467 + * + * @covers ::wp_register_typography_support + * + * @dataProvider data_generate_block_supports_font_size_fixtures + * + * @param string $font_size_value The block supports custom font size value. + * @param bool $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing. + * @param string $expected_output Expected value of style property from wp_apply_typography_support(). + */ + public function test_should_covert_font_sizes_to_fluid_values( $font_size_value, $should_use_fluid_typography, $expected_output ) { + if ( $should_use_fluid_typography ) { + switch_theme( 'block-theme-child-with-fluid-typography' ); + } else { + switch_theme( 'default' ); + } + + $this->test_block_name = 'test/font-size-fluid-value'; + register_block_type( + $this->test_block_name, + array( + 'api_version' => 2, + 'attributes' => array( + 'style' => array( + 'type' => 'object', + ), + ), + 'supports' => array( + 'typography' => array( + 'fontSize' => true, + ), + ), + ) + ); + $registry = WP_Block_Type_Registry::get_instance(); + $block_type = $registry->get_registered( $this->test_block_name ); + $block_attributes = array( + 'style' => array( + 'typography' => array( + 'fontSize' => $font_size_value, + ), + ), + ); + + $actual = wp_apply_typography_support( $block_type, $block_attributes ); + $expected = array( 'style' => $expected_output ); + + $this->assertSame( $expected, $actual ); + } + + /** + * Data provider for test_should_covert_font_sizes_to_fluid_values(). + * + * @return array + */ + public function data_generate_block_supports_font_size_fixtures() { + return array( + 'default_return_value' => array( + 'font_size_value' => '50px', + 'should_use_fluid_typography' => false, + 'expected_output' => 'font-size:50px;', + ), + 'return_value_with_fluid_typography' => array( + 'font_size_value' => '50px', + 'should_use_fluid_typography' => true, + 'expected_output' => 'font-size:clamp(37.5px, 2.34375rem + ((1vw - 7.68px) * 4.507), 75px);', + ), + ); + } + + /** + * Tests that a block element's custom font size in the inline style attribute + * is replaced with a fluid value when "settings.typography.fluid" is set to true, + * and the correct block content is generated. + * + * @ticket 56467 + * + * @dataProvider data_generate_replace_inline_font_styles_with_fluid_values_fixtures + * + * @param string $block_content HTML block content. + * @param string $font_size_value The block supports custom font size value. + * @param bool $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing. + * @param string $expected_output Expected value of style property from wp_apply_typography_support(). + */ + public function test_should_replace_inline_font_styles_with_fluid_values( $block_content, $font_size_value, $should_use_fluid_typography, $expected_output ) { + if ( $should_use_fluid_typography ) { + switch_theme( 'block-theme-child-with-fluid-typography' ); + } else { + switch_theme( 'default' ); + } + + $block = array( + 'blockName' => 'core/image', + 'attrs' => array( + 'style' => array( + 'typography' => array( + 'fontSize' => $font_size_value, + ), + ), + ), + ); + $actual = wp_render_typography_support( $block_content, $block ); + + $this->assertSame( $expected_output, $actual ); + } + + /** + * Data provider for test_should_replace_inline_font_styles_with_fluid_values(). + * + * @return array + */ + public function data_generate_replace_inline_font_styles_with_fluid_values_fixtures() { + return array( + 'default_return_content' => array( + 'block_content' => '

This is a heading

', + 'font_size_value' => '4rem', + 'should_use_fluid_typography' => false, + 'expected_output' => '

This is a heading

', + ), + 'return_content_with_replaced_fluid_font_size_inline_style' => array( + 'block_content' => '

This is a heading

', + 'font_size_value' => '4rem', + 'should_use_fluid_typography' => true, + 'expected_output' => '

This is a heading

', + ), + 'return_content_if_no_inline_font_size_found' => array( + 'block_content' => '

A paragraph inside a group

', + 'font_size_value' => '20px', + 'should_use_fluid_typography' => true, + 'expected_output' => '

A paragraph inside a group

', + ), + 'return_content_css_var' => array( + 'block_content' => '

A paragraph inside a group

', + 'font_size_value' => 'var:preset|font-size|x-large', + 'should_use_fluid_typography' => true, + 'expected_output' => '

A paragraph inside a group

', + ), + 'return_content_with_spaces' => array( + 'block_content' => '

A paragraph inside a group

', + 'font_size_value' => '20px', + 'should_use_fluid_typography' => true, + 'expected_output' => '

A paragraph inside a group

', + ), + 'return_content_with_first_match_replace_only' => array( + 'block_content' => "
\n \n

A paragraph inside a group

", + 'font_size_value' => '1em', + 'should_use_fluid_typography' => true, + 'expected_output' => "
\n \n

A paragraph inside a group

", + ), + ); + } + + /** + * Tests that valid font size values are parsed. + * + * @ticket 56467 + * + * @covers ::wp_get_typography_value_and_unit + * + * @dataProvider data_valid_size_wp_get_typography_value_and_unit + * + * @param mixed $raw_value Raw size value to test. + * @param mixed $expected An expected return value. + */ + public function test_valid_size_wp_get_typography_value_and_unit( $raw_value, $expected ) { + $this->assertEquals( $expected, wp_get_typography_value_and_unit( $raw_value ) ); + } + + /** + * Data provider for test_valid_size_wp_get_typography_value_and_unit(). + * + * @return array + */ + public function data_valid_size_wp_get_typography_value_and_unit() { + return array( + 'size: 10vh with default units do not match' => array( + 'raw_value' => '10vh', + 'expected' => null, + ), + 'size: calc() values do not match' => array( + 'raw_value' => 'calc(2 * 10px)', + 'expected' => null, + ), + 'size: clamp() values do not match' => array( + 'raw_value' => 'clamp(15px, 0.9375rem + ((1vw - 7.68px) * 5.409), 60px)', + 'expected' => null, + ), + 'size: `"10"`' => array( + 'raw_value' => '10', + 'expected' => array( + 'value' => 10, + 'unit' => 'px', + ), + ), + 'size: `11`' => array( + 'raw_value' => 11, + 'expected' => array( + 'value' => 11, + 'unit' => 'px', + ), + ), + 'size: `11.234`' => array( + 'raw_value' => '11.234', + 'expected' => array( + 'value' => 11.234, + 'unit' => 'px', + ), + ), + 'size: `"12rem"`' => array( + 'raw_value' => '12rem', + 'expected' => array( + 'value' => 12, + 'unit' => 'rem', + ), + ), + 'size: `"12px"`' => array( + 'raw_value' => '12px', + 'expected' => array( + 'value' => 12, + 'unit' => 'px', + ), + ), + 'size: `"12em"`' => array( + 'raw_value' => '12em', + 'expected' => array( + 'value' => 12, + 'unit' => 'em', + ), + ), + 'size: `"12.74em"`' => array( + 'raw_value' => '12.74em', + 'expected' => array( + 'value' => 12.74, + 'unit' => 'em', + ), + ), + ); + } + + /** + * Tests that invalid font size values are not parsed and trigger incorrect usage. + * + * @ticket 56467 + * + * @covers ::wp_get_typography_value_and_unit + * + * @dataProvider data_invalid_size_wp_get_typography_value_and_unit + * @expectedIncorrectUsage wp_get_typography_value_and_unit + * + * @param mixed $raw_value Raw size value to test. + */ + public function test_invalid_size_wp_get_typography_value_and_unit( $raw_value ) { + $this->assertNull( wp_get_typography_value_and_unit( $raw_value ) ); + } + + /** + * Data provider for test_invalid_size_wp_get_typography_value_and_unit(). + * + * @return array + */ + public function data_invalid_size_wp_get_typography_value_and_unit() { + return array( + 'size: null' => array( null ), + 'size: false' => array( false ), + 'size: true' => array( true ), + 'size: array' => array( array( '10' ) ), + ); + } } diff --git a/tests/phpunit/tests/theme/themeDir.php b/tests/phpunit/tests/theme/themeDir.php index 8de4f4189dd8..29fbbd392f05 100644 --- a/tests/phpunit/tests/theme/themeDir.php +++ b/tests/phpunit/tests/theme/themeDir.php @@ -177,6 +177,7 @@ public function test_theme_list() { 'REST Theme', 'Block Theme', 'Block Theme Child Theme', + 'Block Theme Child Theme With Fluid Typography', 'Block Theme [0.4.0]', 'Block Theme [1.0.0] in subdirectory', 'Block Theme Deprecated Path',