Make WordPress Core

Changeset 54497


Ignore:
Timestamp:
10/11/2022 06:42:20 PM (20 months ago)
Author:
davidbaumwald
Message:

Editor: Merge latest fluid typography bugfixes for 6.1 Release Candidate 1.

Merges the following:

Follow-up to [54280].

Props andrewserong, isabel_brison, ramonopoly.
See #56467.

Location:
trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/block-supports/typography.php

    r54387 r54497  
    120120            ? $block_attributes['style']['typography']['fontSize']
    121121            : null;
    122         $typography_block_styles['fontSize'] = $preset_font_size ? $preset_font_size : $custom_font_size;
     122            $typography_block_styles['fontSize'] = $preset_font_size ? $preset_font_size : wp_get_typography_font_size_value(
     123                array(
     124                    'size' => $custom_font_size,
     125                )
     126            );
    123127    }
    124128
     
    246250
    247251/**
     252 * Renders typography styles/content to the block wrapper.
     253 *
     254 * @since 6.1.0
     255 *
     256 * @param string $block_content Rendered block content.
     257 * @param array  $block         Block object.
     258 * @return string Filtered block content.
     259 */
     260function wp_render_typography_support( $block_content, $block ) {
     261    if ( ! isset( $block['attrs']['style']['typography']['fontSize'] ) ) {
     262        return $block_content;
     263    }
     264
     265    $custom_font_size = $block['attrs']['style']['typography']['fontSize'];
     266    $fluid_font_size  = wp_get_typography_font_size_value( array( 'size' => $custom_font_size ) );
     267
     268    /*
     269     * Checks that $fluid_font_size does not match $custom_font_size,
     270     * which means it's been mutated by the fluid font size functions.
     271     */
     272    if ( ! empty( $fluid_font_size ) && $fluid_font_size !== $custom_font_size ) {
     273        // Replaces the first instance of `font-size:$custom_font_size` with `font-size:$fluid_font_size`.
     274        return preg_replace( '/font-size\s*:\s*' . preg_quote( $custom_font_size, '/' ) . '\s*;?/', 'font-size:' . esc_attr( $fluid_font_size ) . ';', $block_content, 1 );
     275    }
     276
     277    return $block_content;
     278}
     279
     280/**
    248281 * Checks a string for a unit and value and returns an array
    249  * consisting of `'value'` and `'unit'`, e.g., [ '42', 'rem' ].
     282 * consisting of `'value'` and `'unit'`, e.g. array( '42', 'rem' ).
    250283 *
    251284 * @since 6.1.0
    252  * @access private
    253  *
    254  * @param string $raw_value Raw size value from theme.json.
    255  * @param array  $options   {
     285 *
     286 * @param string|int|float $raw_value Raw size value from theme.json.
     287 * @param array            $options   {
    256288 *     Optional. An associative array of options. Default is empty array.
    257289 *
    258290 *     @type string   $coerce_to        Coerce the value to rem or px. Default `'rem'`.
    259291 *     @type int      $root_size_value  Value of root font size for rem|em <-> px conversion. Default `16`.
    260  *     @type string[] $acceptable_units An array of font size units. Default `[ 'rem', 'px', 'em' ]`;
     292 *     @type string[] $acceptable_units An array of font size units. Default `array( 'rem', 'px', 'em' )`;
    261293 * }
    262294 * @return array|null An array consisting of `'value'` and `'unit'` properties on success.
     
    264296 */
    265297function wp_get_typography_value_and_unit( $raw_value, $options = array() ) {
     298    if ( ! is_string( $raw_value ) && ! is_int( $raw_value ) && ! is_float( $raw_value ) ) {
     299        _doing_it_wrong(
     300            __FUNCTION__,
     301            __( 'Raw size value must be a string, integer, or float.' ),
     302            '6.1.0'
     303        );
     304        return null;
     305    }
     306
    266307    if ( empty( $raw_value ) ) {
    267308        return null;
     309    }
     310
     311    // Converts numbers to pixel values by default.
     312    if ( is_numeric( $raw_value ) ) {
     313        $raw_value = $raw_value . 'px';
    268314    }
    269315
     
    289335    $unit  = $matches[2];
    290336
    291     // Default browser font size. Later, possibly could inject some JS to
    292     // compute this `getComputedStyle( document.querySelector( "html" ) ).fontSize`.
     337    /*
     338     * Default browser font size. Later, possibly could inject some JS to
     339     * compute this `getComputedStyle( document.querySelector( "html" ) ).fontSize`.
     340     */
    293341    if ( 'px' === $options['coerce_to'] && ( 'em' === $unit || 'rem' === $unit ) ) {
    294342        $value = $value * $options['root_size_value'];
     
    324372 *     @type int    $scale_factor           A scale factor to determine how fast a font scales within boundaries.
    325373 * }
    326  * @return string|null A font-size value using clamp() on success. Else, null.
     374 * @return string|null A font-size value using clamp() on success, otherwise null.
    327375 */
    328376function wp_get_computed_fluid_typography_value( $args = array() ) {
     
    396444 *     Required. fontSizes preset value as seen in theme.json.
    397445 *
    398  *     @type string $name Name of the font size preset.
    399  *     @type string $slug Kebab-case unique identifier for the font size preset.
    400  *     @type string $size CSS font-size value, including units where applicable.
     446 *     @type string           $name Name of the font size preset.
     447 *     @type string           $slug Kebab-case, unique identifier for the font size preset.
     448 *     @type string|int|float $size CSS font-size value, including units if applicable.
    401449 * }
    402450 * @param bool  $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
    403  *                                           Default is `false`.
    404  * @return string Font-size value.
     451 *                                           Default is false.
     452 * @return string|null Font-size value or null if a size is not passed in $preset.
    405453 */
    406454function wp_get_typography_font_size_value( $preset, $should_use_fluid_typography = false ) {
     455    if ( ! isset( $preset['size'] ) ) {
     456        return null;
     457    }
     458
     459    /*
     460     * Catches empty values and 0/'0'.
     461     * Fluid calculations cannot be performed on 0.
     462     */
     463    if ( empty( $preset['size'] ) ) {
     464        return $preset['size'];
     465    }
     466
    407467    // Checks if fluid font sizes are activated.
    408468    $typography_settings         = wp_get_global_settings( array( 'typography' ) );
  • trunk/src/wp-includes/class-wp-theme-json.php

    r54411 r54497  
    16761676            }
    16771677
     1678            // Calculates fluid typography rules where available.
     1679            if ( 'font-size' === $css_property ) {
     1680                /*
     1681                 * wp_get_typography_font_size_value() will check
     1682                 * if fluid typography has been activated and also
     1683                 * whether the incoming value can be converted to a fluid value.
     1684                 * Values that already have a clamp() function will not pass the test,
     1685                 * and therefore the original $value will be returned.
     1686                 */
     1687                $value = wp_get_typography_font_size_value( array( 'size' => $value ) );
     1688            }
     1689
    16781690            $declarations[] = array(
    16791691                'name'  => $css_property,
  • trunk/src/wp-includes/default-filters.php

    r54358 r54497  
    688688add_action( 'wp_loaded', '_add_template_loader_filters' );
    689689
     690// Fluid typography.
     691add_filter( 'render_block', 'wp_render_typography_support', 10, 2 );
     692
    690693// User preferences.
    691694add_action( 'init', 'wp_register_persisted_preferences_meta' );
  • trunk/tests/phpunit/tests/block-supports/typography.php

    r54260 r54497  
    99    private $test_block_name;
    1010
     11    /**
     12     * Stores the current test theme root.
     13     *
     14     * @var string|null
     15     */
     16    private $theme_root;
     17
     18    /**
     19     * Caches the original theme directory global value in order
     20     * to restore it in tear_down().
     21     *
     22     * @var string|null
     23     */
     24    private $orig_theme_dir;
     25
    1126    function set_up() {
    1227        parent::set_up();
     28
    1329        $this->test_block_name = null;
     30
     31        // Sets up the `wp-content/themes/` directory to ensure consistency when running tests.
     32        $this->theme_root                = realpath( DIR_TESTDATA . '/themedir1' );
     33        $this->orig_theme_dir            = $GLOBALS['wp_theme_directories'];
     34        $GLOBALS['wp_theme_directories'] = array( WP_CONTENT_DIR . '/themes', $this->theme_root );
     35
     36        $theme_root_callback = function () {
     37            return $this->theme_root;
     38        };
     39        add_filter( 'theme_root', $theme_root_callback );
     40        add_filter( 'stylesheet_root', $theme_root_callback );
     41        add_filter( 'template_root', $theme_root_callback );
     42
     43        // Clear caches.
     44        wp_clean_themes_cache();
     45        unset( $GLOBALS['wp_themes'] );
    1446    }
    1547
     
    1850     */
    1951    function tear_down() {
     52        // Restores the original theme directory setup.
     53        $GLOBALS['wp_theme_directories'] = $this->orig_theme_dir;
     54        wp_clean_themes_cache();
     55        unset( $GLOBALS['wp_themes'] );
     56
     57        // Resets test block name.
    2058        unregister_block_type( $this->test_block_name );
    2159        $this->test_block_name = null;
     60
    2261        parent::tear_down();
    2362    }
     
    290329            ),
    291330
     331            'size: int 0'                                 => array(
     332                'font_size_preset'            => array(
     333                    'size' => 0,
     334                ),
     335                'should_use_fluid_typography' => true,
     336                'expected_output'             => 0,
     337            ),
     338
     339            'size: string 0'                              => array(
     340                'font_size_preset'            => array(
     341                    'size' => '0',
     342                ),
     343                'should_use_fluid_typography' => true,
     344                'expected_output'             => '0',
     345            ),
     346
     347            'default_return_value_when_size_is_undefined' => array(
     348                'font_size_preset'            => array(
     349                    'size' => null,
     350                ),
     351                'should_use_fluid_typography' => false,
     352                'expected_output'             => null,
     353            ),
     354
    292355            'default_return_value_when_fluid_is_false'    => array(
    293356                'font_size_preset'            => array(
     
    299362            ),
    300363
     364            'default_return_value_when_value_is_already_clamped' => array(
     365                'font_size_preset'            => array(
     366                    'size'  => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
     367                    'fluid' => false,
     368                ),
     369                'should_use_fluid_typography' => true,
     370                'expected_output'             => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
     371            ),
     372
     373            'default_return_value_with_unsupported_unit'  => array(
     374                'font_size_preset'            => array(
     375                    'size'  => '1000%',
     376                    'fluid' => false,
     377                ),
     378                'should_use_fluid_typography' => true,
     379                'expected_output'             => '1000%',
     380            ),
     381
    301382            'return_fluid_value'                          => array(
    302383                'font_size_preset'            => array(
     
    305386                'should_use_fluid_typography' => true,
    306387                'expected_output'             => 'clamp(1.3125rem, 1.3125rem + ((1vw - 0.48rem) * 2.524), 2.625rem)',
     388            ),
     389
     390            'return_fluid_value_with_floats_with_units'   => array(
     391                'font_size_preset'            => array(
     392                    'size' => '100.175px',
     393                ),
     394                'should_use_fluid_typography' => true,
     395                'expected_output'             => 'clamp(75.13125px, 4.695703125rem + ((1vw - 7.68px) * 9.03), 150.2625px)',
     396            ),
     397
     398            'return_fluid_value_with_integer_coerced_to_px' => array(
     399                'font_size_preset'            => array(
     400                    'size' => 33,
     401                ),
     402                'should_use_fluid_typography' => true,
     403                'expected_output'             => 'clamp(24.75px, 1.546875rem + ((1vw - 7.68px) * 2.975), 49.5px)',
     404            ),
     405
     406            'return_fluid_value_with_float_coerced_to_px' => array(
     407                'font_size_preset'            => array(
     408                    'size' => 100.23,
     409                ),
     410                'should_use_fluid_typography' => true,
     411                'expected_output'             => 'clamp(75.1725px, 4.69828125rem + ((1vw - 7.68px) * 9.035), 150.345px)',
    307412            ),
    308413
     
    372477        );
    373478    }
     479
     480    /**
     481     * Tests that custom font sizes are converted to fluid values
     482     * in inline block supports styles
     483     * when "settings.typography.fluid" is set to true.
     484     *
     485     * @ticket 56467
     486     *
     487     * @covers ::wp_register_typography_support
     488     *
     489     * @dataProvider data_generate_block_supports_font_size_fixtures
     490     *
     491     * @param string $font_size_value             The block supports custom font size value.
     492     * @param bool   $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
     493     * @param string $expected_output             Expected value of style property from wp_apply_typography_support().
     494     */
     495    public function test_should_covert_font_sizes_to_fluid_values( $font_size_value, $should_use_fluid_typography, $expected_output ) {
     496        if ( $should_use_fluid_typography ) {
     497            switch_theme( 'block-theme-child-with-fluid-typography' );
     498        } else {
     499            switch_theme( 'default' );
     500        }
     501
     502        $this->test_block_name = 'test/font-size-fluid-value';
     503        register_block_type(
     504            $this->test_block_name,
     505            array(
     506                'api_version' => 2,
     507                'attributes'  => array(
     508                    'style' => array(
     509                        'type' => 'object',
     510                    ),
     511                ),
     512                'supports'    => array(
     513                    'typography' => array(
     514                        'fontSize' => true,
     515                    ),
     516                ),
     517            )
     518        );
     519        $registry         = WP_Block_Type_Registry::get_instance();
     520        $block_type       = $registry->get_registered( $this->test_block_name );
     521        $block_attributes = array(
     522            'style' => array(
     523                'typography' => array(
     524                    'fontSize' => $font_size_value,
     525                ),
     526            ),
     527        );
     528
     529        $actual   = wp_apply_typography_support( $block_type, $block_attributes );
     530        $expected = array( 'style' => $expected_output );
     531
     532        $this->assertSame( $expected, $actual );
     533    }
     534
     535    /**
     536     * Data provider for test_should_covert_font_sizes_to_fluid_values().
     537     *
     538     * @return array
     539     */
     540    public function data_generate_block_supports_font_size_fixtures() {
     541        return array(
     542            'default_return_value'               => array(
     543                'font_size_value'             => '50px',
     544                'should_use_fluid_typography' => false,
     545                'expected_output'             => 'font-size:50px;',
     546            ),
     547            'return_value_with_fluid_typography' => array(
     548                'font_size_value'             => '50px',
     549                'should_use_fluid_typography' => true,
     550                'expected_output'             => 'font-size:clamp(37.5px, 2.34375rem + ((1vw - 7.68px) * 4.507), 75px);',
     551            ),
     552        );
     553    }
     554
     555    /**
     556     * Tests that a block element's custom font size in the inline style attribute
     557     * is replaced with a fluid value when "settings.typography.fluid" is set to true,
     558     * and the correct block content is generated.
     559     *
     560     * @ticket 56467
     561     *
     562     * @dataProvider data_generate_replace_inline_font_styles_with_fluid_values_fixtures
     563     *
     564     * @param string $block_content               HTML block content.
     565     * @param string $font_size_value             The block supports custom font size value.
     566     * @param bool   $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
     567     * @param string $expected_output             Expected value of style property from wp_apply_typography_support().
     568     */
     569    public function test_should_replace_inline_font_styles_with_fluid_values( $block_content, $font_size_value, $should_use_fluid_typography, $expected_output ) {
     570        if ( $should_use_fluid_typography ) {
     571            switch_theme( 'block-theme-child-with-fluid-typography' );
     572        } else {
     573            switch_theme( 'default' );
     574        }
     575
     576        $block  = array(
     577            'blockName' => 'core/image',
     578            'attrs'     => array(
     579                'style' => array(
     580                    'typography' => array(
     581                        'fontSize' => $font_size_value,
     582                    ),
     583                ),
     584            ),
     585        );
     586        $actual = wp_render_typography_support( $block_content, $block );
     587
     588        $this->assertSame( $expected_output, $actual );
     589    }
     590
     591    /**
     592     * Data provider for test_should_replace_inline_font_styles_with_fluid_values().
     593     *
     594     * @return array
     595     */
     596    public function data_generate_replace_inline_font_styles_with_fluid_values_fixtures() {
     597        return array(
     598            'default_return_content'                       => array(
     599                'block_content'               => '<h2 class="has-vivid-red-background-color has-background has-link-color" style="margin-top:var(--wp--preset--spacing--60);font-size:4rem;font-style:normal;font-weight:600;letter-spacing:29px;text-decoration:underline;text-transform:capitalize">This is a heading</h2>',
     600                'font_size_value'             => '4rem',
     601                'should_use_fluid_typography' => false,
     602                'expected_output'             => '<h2 class="has-vivid-red-background-color has-background has-link-color" style="margin-top:var(--wp--preset--spacing--60);font-size:4rem;font-style:normal;font-weight:600;letter-spacing:29px;text-decoration:underline;text-transform:capitalize">This is a heading</h2>',
     603            ),
     604            'return_content_with_replaced_fluid_font_size_inline_style' => array(
     605                'block_content'               => '<h2 class="has-vivid-red-background-color has-background has-link-color" style="margin-top:var(--wp--preset--spacing--60);font-size:4rem;font-style:normal;font-weight:600;letter-spacing:29px;text-decoration:underline;text-transform:capitalize">This is a heading</h2>',
     606                'font_size_value'             => '4rem',
     607                'should_use_fluid_typography' => true,
     608                'expected_output'             => '<h2 class="has-vivid-red-background-color has-background has-link-color" style="margin-top:var(--wp--preset--spacing--60);font-size:clamp(3rem, 3rem + ((1vw - 0.48rem) * 5.769), 6rem);font-style:normal;font-weight:600;letter-spacing:29px;text-decoration:underline;text-transform:capitalize">This is a heading</h2>',
     609            ),
     610            'return_content_if_no_inline_font_size_found'  => array(
     611                'block_content'               => '<p class="has-medium-font-size" style="font-style:normal;font-weight:600;letter-spacing:29px;">A paragraph inside a group</p>',
     612                'font_size_value'             => '20px',
     613                'should_use_fluid_typography' => true,
     614                'expected_output'             => '<p class="has-medium-font-size" style="font-style:normal;font-weight:600;letter-spacing:29px;">A paragraph inside a group</p>',
     615            ),
     616            'return_content_css_var'                       => array(
     617                'block_content'               => '<p class="has-medium-font-size" style="font-size:var(--wp--preset--font-size--x-large);">A paragraph inside a group</p>',
     618                'font_size_value'             => 'var:preset|font-size|x-large',
     619                'should_use_fluid_typography' => true,
     620                'expected_output'             => '<p class="has-medium-font-size" style="font-size:var(--wp--preset--font-size--x-large);">A paragraph inside a group</p>',
     621            ),
     622            'return_content_with_spaces'                   => array(
     623                'block_content'               => '<p class="has-medium-font-size" style="    font-size:   20px   ;    ">A paragraph inside a group</p>',
     624                'font_size_value'             => '20px',
     625                'should_use_fluid_typography' => true,
     626                'expected_output'             => '<p class="has-medium-font-size" style="    font-size:clamp(15px, 0.9375rem + ((1vw - 7.68px) * 1.803), 30px);    ">A paragraph inside a group</p>',
     627            ),
     628            'return_content_with_first_match_replace_only' => array(
     629                'block_content'               => "<div class=\"wp-block-group\" style=\"font-size:1em\"> \n \n<p style=\"font-size:1em\">A paragraph inside a group</p></div>",
     630                'font_size_value'             => '1em',
     631                'should_use_fluid_typography' => true,
     632                'expected_output'             => "<div class=\"wp-block-group\" style=\"font-size:clamp(0.75em, 0.75em + ((1vw - 0.48em) * 1.442), 1.5em);\"> \n \n<p style=\"font-size:1em\">A paragraph inside a group</p></div>",
     633            ),
     634        );
     635    }
     636
     637    /**
     638     * Tests that valid font size values are parsed.
     639     *
     640     * @ticket 56467
     641     *
     642     * @covers ::wp_get_typography_value_and_unit
     643     *
     644     * @dataProvider data_valid_size_wp_get_typography_value_and_unit
     645     *
     646     * @param mixed $raw_value Raw size value to test.
     647     * @param mixed $expected  An expected return value.
     648     */
     649    public function test_valid_size_wp_get_typography_value_and_unit( $raw_value, $expected ) {
     650        $this->assertEquals( $expected, wp_get_typography_value_and_unit( $raw_value ) );
     651    }
     652
     653    /**
     654     * Data provider for test_valid_size_wp_get_typography_value_and_unit().
     655     *
     656     * @return array
     657     */
     658    public function data_valid_size_wp_get_typography_value_and_unit() {
     659        return array(
     660            'size: 10vh with default units do not match' => array(
     661                'raw_value' => '10vh',
     662                'expected'  => null,
     663            ),
     664            'size: calc() values do not match'           => array(
     665                'raw_value' => 'calc(2 * 10px)',
     666                'expected'  => null,
     667            ),
     668            'size: clamp() values do not match'          => array(
     669                'raw_value' => 'clamp(15px, 0.9375rem + ((1vw - 7.68px) * 5.409), 60px)',
     670                'expected'  => null,
     671            ),
     672            'size: `"10"`'                               => array(
     673                'raw_value' => '10',
     674                'expected'  => array(
     675                    'value' => 10,
     676                    'unit'  => 'px',
     677                ),
     678            ),
     679            'size: `11`'                                 => array(
     680                'raw_value' => 11,
     681                'expected'  => array(
     682                    'value' => 11,
     683                    'unit'  => 'px',
     684                ),
     685            ),
     686            'size: `11.234`'                             => array(
     687                'raw_value' => '11.234',
     688                'expected'  => array(
     689                    'value' => 11.234,
     690                    'unit'  => 'px',
     691                ),
     692            ),
     693            'size: `"12rem"`'                            => array(
     694                'raw_value' => '12rem',
     695                'expected'  => array(
     696                    'value' => 12,
     697                    'unit'  => 'rem',
     698                ),
     699            ),
     700            'size: `"12px"`'                             => array(
     701                'raw_value' => '12px',
     702                'expected'  => array(
     703                    'value' => 12,
     704                    'unit'  => 'px',
     705                ),
     706            ),
     707            'size: `"12em"`'                             => array(
     708                'raw_value' => '12em',
     709                'expected'  => array(
     710                    'value' => 12,
     711                    'unit'  => 'em',
     712                ),
     713            ),
     714            'size: `"12.74em"`'                          => array(
     715                'raw_value' => '12.74em',
     716                'expected'  => array(
     717                    'value' => 12.74,
     718                    'unit'  => 'em',
     719                ),
     720            ),
     721        );
     722    }
     723
     724    /**
     725     * Tests that invalid font size values are not parsed and trigger incorrect usage.
     726     *
     727     * @ticket 56467
     728     *
     729     * @covers ::wp_get_typography_value_and_unit
     730     *
     731     * @dataProvider data_invalid_size_wp_get_typography_value_and_unit
     732     * @expectedIncorrectUsage wp_get_typography_value_and_unit
     733     *
     734     * @param mixed $raw_value Raw size value to test.
     735     */
     736    public function test_invalid_size_wp_get_typography_value_and_unit( $raw_value ) {
     737        $this->assertNull( wp_get_typography_value_and_unit( $raw_value ) );
     738    }
     739
     740    /**
     741     * Data provider for test_invalid_size_wp_get_typography_value_and_unit().
     742     *
     743     * @return array
     744     */
     745    public function data_invalid_size_wp_get_typography_value_and_unit() {
     746        return array(
     747            'size: null'  => array( null ),
     748            'size: false' => array( false ),
     749            'size: true'  => array( true ),
     750            'size: array' => array( array( '10' ) ),
     751        );
     752    }
    374753}
  • trunk/tests/phpunit/tests/theme/themeDir.php

    r53933 r54497  
    178178            'Block Theme',
    179179            'Block Theme Child Theme',
     180            'Block Theme Child Theme With Fluid Typography',
    180181            'Block Theme [0.4.0]',
    181182            'Block Theme [1.0.0] in subdirectory',
Note: See TracChangeset for help on using the changeset viewer.