WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
11/11/2022 05:54:23 PM (2 years ago)
Author:
desrosj
Message:

Editor: Improve how min/max font sizes are calculated for fluid typography.

  • Where no fluid max values are set (e.g., single or custom font size values), the "size" value will act as the maximum value in a clamp() function.
  • In the absence of any fluid min/max values, the lower bound rule of >16px will be enforced. This applies to custom values from the editor or single-value theme.json styles. Font sizes below this will not be clamped.
  • In a preset, if a fluid.min value has been specified, the lower bound rule of >16px won't be enforced on this value. Presets with a fluid object therefore, give precedence to theme author's values.
  • In a preset, if there is NOT a fluid.max but there is fluid.min, use the incoming "size" value as the max.
  • In a preset, if there is NOT a fluid.min but there is a fluid.max, use size * min_size_factor as the min. The lower bound rule of >16px is enforced here, because the block editor is computing the min value. This is consistent with the way minimum sizes are calculated for single or custom values.

Props ramonopoly, mamaduka, andrewserong, aristath, joen, desrosj.
Merges [54823] to the 6.1 branch.
Fixes #57075.

Location:
branches/6.1
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • branches/6.1

  • branches/6.1/tests/phpunit/tests/block-supports/typography.php

    r54647 r54825  
    293293     *
    294294     * @ticket 56467
     295     * @ticket 57065
    295296     *
    296297     * @covers ::wp_get_typography_font_size_value
    … …  
    321322    public function data_generate_font_size_preset_fixtures() {
    322323        return array(
    323             'default_return_value'                        => array(
     324            'returns value when fluid typography is deactivated' => array(
    324325                'font_size_preset'            => array(
    325326                    'size' => '28px',
    … …  
    329330            ),
    330331
    331             'size: int 0'                                 => array(
     332            'returns value where font size is 0'         => array(
    332333                'font_size_preset'            => array(
    333334                    'size' => 0,
    … …  
    337338            ),
    338339
    339             'size: string 0'                              => array(
     340            "returns value where font size is '0'"       => array(
    340341                'font_size_preset'            => array(
    341342                    'size' => '0',
    … …  
    345346            ),
    346347
    347             'default_return_value_when_size_is_undefined' => array(
     348            'returns value where `size` is `null`'      => array(
    348349                'font_size_preset'            => array(
    349350                    'size' => null,
    … …  
    353354            ),
    354355
    355             'default_return_value_when_fluid_is_false'    => array(
     356            'returns value when fluid is `false`'        => array(
    356357                'font_size_preset'            => array(
    357358                    'size'  => '28px',
    … …  
    362363            ),
    363364
    364             'default_return_value_when_value_is_already_clamped' => array(
     365            'returns already clamped value'              => array(
    365366                'font_size_preset'            => array(
    366367                    'size'  => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
    … …  
    371372            ),
    372373
    373             'default_return_value_with_unsupported_unit'  => array(
     374            'returns value with unsupported unit'        => array(
    374375                'font_size_preset'            => array(
    375376                    'size'  => '1000%',
    … …  
    380381            ),
    381382
    382             'return_fluid_value'                          => array(
     383            'returns clamp value with rem min and max units' => array(
    383384                'font_size_preset'            => array(
    384385                    'size' => '1.75rem',
    385386                ),
    386387                'should_use_fluid_typography' => true,
    387                 'expected_output'             => 'clamp(1.313rem, 1.313rem + ((1vw - 0.48rem) * 2.523), 2.625rem)',
    388             ),
    389 
    390             'return_fluid_value_with_floats_with_units'   => array(
    391                 'font_size_preset'            => array(
     388                'expected_output'             => 'clamp(1.313rem, 1.313rem + ((1vw - 0.48rem) * 0.84), 1.75rem)',
     389            ),
     390
     391            'returns clamp value with em min and max units' => array(
     392                'font_size'                   => array(
     393                    'size' => '1.75em',
     394                ),
     395                'should_use_fluid_typography' => true,
     396                'expected_output'             => 'clamp(1.313em, 1.313rem + ((1vw - 0.48em) * 0.84), 1.75em)',
     397            ),
     398
     399            'returns clamp value for floats'             => array(
     400                'font_size'                   => array(
    392401                    'size' => '100.175px',
    393402                ),
    394403                'should_use_fluid_typography' => true,
    395                 'expected_output'             => 'clamp(75.131px, 4.696rem + ((1vw - 7.68px) * 9.03), 150.263px)',
    396             ),
    397 
    398             'return_fluid_value_with_integer_coerced_to_px' => array(
     404                'expected_output'             => 'clamp(75.131px, 4.696rem + ((1vw - 7.68px) * 3.01), 100.175px)',
     405            ),
     406
     407            'coerces integer to `px` and returns clamp value' => array(
    399408                'font_size_preset'            => array(
    400409                    'size' => 33,
    401410                ),
    402411                'should_use_fluid_typography' => true,
    403                 'expected_output'             => 'clamp(24.75px, 1.547rem + ((1vw - 7.68px) * 2.975), 49.5px)',
    404             ),
    405 
    406             'return_fluid_value_with_float_coerced_to_px' => array(
     412                'expected_output'             => 'clamp(24.75px, 1.547rem + ((1vw - 7.68px) * 0.992), 33px)',
     413            ),
     414
     415            'coerces float to `px` and returns clamp value' => array(
    407416                'font_size_preset'            => array(
    408417                    'size' => 100.23,
    409418                ),
    410419                'should_use_fluid_typography' => true,
    411                 'expected_output'             => 'clamp(75.173px, 4.698rem + ((1vw - 7.68px) * 9.035), 150.345px)',
    412             ),
    413 
    414             'return_default_fluid_values_with_empty_fluid_array' => array(
     420                'expected_output'             => 'clamp(75.173px, 4.698rem + ((1vw - 7.68px) * 3.012), 100.23px)',
     421            ),
     422
     423            'returns clamp value when `fluid` is empty array' => array(
    415424                'font_size_preset'            => array(
    416425                    'size'  => '28px',
    … …  
    418427                ),
    419428                'should_use_fluid_typography' => true,
    420                 'expected_output'             => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
    421             ),
    422 
    423             'return_default_fluid_values_with_null_value' => array(
     429                'expected_output'             => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 0.841), 28px)',
     430            ),
     431
     432            'returns clamp value when `fluid` is `null`' => array(
    424433                'font_size_preset'            => array(
    425434                    'size'  => '28px',
    … …  
    427436                ),
    428437                'should_use_fluid_typography' => true,
    429                 'expected_output'             => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
    430             ),
    431 
    432             'return_clamped_value_if_min_font_size_is_greater_than_max' => array(
     438                'expected_output'             => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 0.841), 28px)',
     439            ),
     440
     441            'returns clamp value if min font size is greater than max' => array(
    433442                'font_size_preset'            => array(
    434443                    'size'  => '3rem',
    … …  
    442451            ),
    443452
    444             'return_size_with_invalid_fluid_units'        => array(
     453            'returns value with invalid min/max fluid units' => array(
    445454                'font_size_preset'            => array(
    446455                    'size'  => '10em',
    … …  
    454463            ),
    455464
    456             'return_clamped_size_where_no_min_is_given_and_less_than_default_min_size' => array(
     465            'returns value when size is < lower bounds and no fluid min/max set' => array(
    457466                'font_size_preset'            => array(
    458467                    'size' => '3px',
    459468                ),
    460469                'should_use_fluid_typography' => true,
    461                 'expected_output'             => 'clamp(3px, 0.188rem + ((1vw - 7.68px) * 0.18), 4.5px)',
    462             ),
    463 
    464             'return_fluid_clamp_value_with_different_min_max_units' => array(
     470                'expected_output'             => '3px',
     471            ),
     472
     473            'returns value when size is equal to lower bounds and no fluid min/max set' => array(
     474                'font_size'                   => array(
     475                    'size' => '14px',
     476                ),
     477                'should_use_fluid_typography' => true,
     478                'expected_output'             => '14px',
     479            ),
     480
     481            'returns clamp value with different min max units' => array(
    465482                'font_size_preset'            => array(
    466483                    'size'  => '28px',
    … …  
    474491            ),
    475492
    476             'return_clamp_value_with_default_fluid_max_value' => array(
     493            'returns clamp value where no fluid max size is set' => array(
    477494                'font_size_preset'            => array(
    478495                    'size'  => '28px',
    … …  
    482499                ),
    483500                'should_use_fluid_typography' => true,
    484                 'expected_output'             => 'clamp(2.6rem, 2.6rem + ((1vw - 0.48rem) * 0.048), 42px)',
    485             ),
    486 
    487             'default_return_clamp_value_with_default_fluid_min_value' => array(
     501                'expected_output'             => 'clamp(2.6rem, 2.6rem + ((1vw - 0.48rem) * -1.635), 28px)',
     502            ),
     503
     504            'returns clamp value where no fluid min size is set' => array(
    488505                'font_size_preset'            => array(
    489506                    'size'  => '28px',
    … …  
    496513            ),
    497514
    498             'should_adjust_computed_min_in_px_to_min_limit' => array(
    499                 'font_size_preset'            => array(
    500                     'size' => '14px',
    501                 ),
    502                 'should_use_fluid_typography' => true,
    503                 'expected_output'             => 'clamp(14px, 0.875rem + ((1vw - 7.68px) * 0.841), 21px)',
    504             ),
    505 
    506             'should_adjust_computed_min_in_rem_to_min_limit' => array(
    507                 'font_size_preset'            => array(
    508                     'size' => '1.1rem',
    509                 ),
    510                 'should_use_fluid_typography' => true,
    511                 'expected_output'             => 'clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 1.49), 1.65rem)',
    512             ),
    513 
    514             'default_return_clamp_value_with_replaced_fluid_min_value_in_em' => array(
    515                 'font_size_preset'            => array(
    516                     'size' => '1.1em',
    517                 ),
    518                 'should_use_fluid_typography' => true,
    519                 'expected_output'             => 'clamp(0.875em, 0.875rem + ((1vw - 0.48em) * 1.49), 1.65em)',
    520             ),
    521 
    522             'should_adjust_fluid_min_value_in_px_to_min_limit' => array(
    523                 'font_size_preset'            => array(
    524                     'size'  => '20px',
    525                     'fluid' => array(
    526                         'min' => '12px',
    527                     ),
    528                 ),
    529                 'should_use_fluid_typography' => true,
    530                 'expected_output'             => 'clamp(14px, 0.875rem + ((1vw - 7.68px) * 1.923), 30px)',
    531             ),
    532 
    533             'should_adjust_fluid_min_value_in_rem_to_min_limit' => array(
    534                 'font_size_preset'            => array(
    535                     'size'  => '1.5rem',
    536                     'fluid' => array(
    537                         'min' => '0.5rem',
    538                     ),
    539                 ),
    540                 'should_use_fluid_typography' => true,
    541                 'expected_output'             => 'clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 2.644), 2.25rem)',
    542             ),
    543 
    544             'should_adjust_fluid_min_value_but_honor_max_value' => array(
     515            'should not apply lower bound test when fluid values are set' => array(
    545516                'font_size_preset'            => array(
    546517                    'size'  => '1.5rem',
    … …  
    551522                ),
    552523                'should_use_fluid_typography' => true,
    553                 'expected_output'             => 'clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 7.933), 5rem)',
    554             ),
    555 
    556             'should_return_fluid_value_when_min_and_max_font_sizes_are_equal' => array(
     524                'expected_output'             => 'clamp(0.5rem, 0.5rem + ((1vw - 0.48rem) * 8.654), 5rem)',
     525            ),
     526
     527            'should not apply lower bound test when only fluid min is set' => array(
     528                'font_size'                   => array(
     529                    'size'  => '20px',
     530                    'fluid' => array(
     531                        'min' => '12px',
     532                    ),
     533                ),
     534                'should_use_fluid_typography' => true,
     535                'expected_output'             => 'clamp(12px, 0.75rem + ((1vw - 7.68px) * 0.962), 20px)',
     536            ),
     537
     538            'should not apply lower bound test when only fluid max is set' => array(
     539                'font_size'                   => array(
     540                    'size'  => '0.875rem',
     541                    'fluid' => array(
     542                        'max' => '20rem',
     543                    ),
     544                ),
     545                'should_use_fluid_typography' => true,
     546                'expected_output'             => 'clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 36.779), 20rem)',
     547            ),
     548
     549            'returns clamp value when min and max font sizes are equal' => array(
    557550                'font_size_preset'            => array(
    558551                    'size'  => '4rem',
    … …  
    574567     *
    575568     * @ticket 56467
     569     * @ticket 57065
    576570     *
    577571     * @covers ::wp_register_typography_support
    … …  
    638632                'font_size_value'             => '50px',
    639633                'should_use_fluid_typography' => true,
    640                 'expected_output'             => 'font-size:clamp(37.5px, 2.344rem + ((1vw - 7.68px) * 4.507), 75px);',
     634                'expected_output'             => 'font-size:clamp(37.5px, 2.344rem + ((1vw - 7.68px) * 1.502), 50px);',
    641635            ),
    642636        );
    … …  
    649643     *
    650644     * @ticket 56467
     645     * @ticket 57065
    651646     *
    652647     * @dataProvider data_generate_replace_inline_font_styles_with_fluid_values_fixtures
    … …  
    696691                'font_size_value'             => '4rem',
    697692                'should_use_fluid_typography' => true,
    698                 '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>',
     693                '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) * 1.923), 4rem);font-style:normal;font-weight:600;letter-spacing:29px;text-decoration:underline;text-transform:capitalize">This is a heading</h2>',
    699694            ),
    700695            'return_content_if_no_inline_font_size_found'  => array(
    … …  
    714709                'font_size_value'             => '20px',
    715710                'should_use_fluid_typography' => true,
    716                 'expected_output'             => '<p class="has-medium-font-size" style="    font-size:clamp(15px, 0.938rem + ((1vw - 7.68px) * 1.803), 30px);    ">A paragraph inside a group</p>',
     711                'expected_output'             => '<p class="has-medium-font-size" style="    font-size:clamp(15px, 0.938rem + ((1vw - 7.68px) * 0.601), 20px);    ">A paragraph inside a group</p>',
    717712            ),
    718713            'return_content_with_first_match_replace_only' => array(
    … …  
    720715                'font_size_value'             => '1.5em',
    721716                'should_use_fluid_typography' => true,
    722                 'expected_output'             => "<div class=\"wp-block-group\" style=\"font-size:clamp(1.125em, 1.125rem + ((1vw - 0.48em) * 2.163), 2.25em);\"> \n \n<p style=\"font-size:1.5em\">A paragraph inside a group</p></div>",
     717                'expected_output'             => "<div class=\"wp-block-group\" style=\"font-size:clamp(1.125em, 1.125rem + ((1vw - 0.48em) * 0.721), 1.5em);\"> \n \n<p style=\"font-size:1.5em\">A paragraph inside a group</p></div>",
    723718            ),
    724719        );
Note: See TracChangeset for help on using the changeset viewer.