WordPress.org
Get WordPress

Make WordPress Core

Changeset 54823 for trunk


Ignore:
Timestamp:
11/11/2022 05:46:05 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.
Fixes #57075.

Location:
trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed

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

    r54646 r54823  
    453453 *
    454454 * @since 6.1.0
     455 * @since 6.1.1 Adjusted rules for min and max font sizes.
    455456 *
    456457 * @param array $preset                     {
    … …  
    490491    $default_minimum_viewport_width   = '768px';
    491492    $default_minimum_font_size_factor = 0.75;
    492     $default_maximum_font_size_factor = 1.5;
    493493    $default_scale_factor             = 1;
    494494    $default_minimum_font_size_limit  = '14px';
    … …  
    509509    $preferred_size = wp_get_typography_value_and_unit( $preset['size'] );
    510510
    511     // Protect against unsupported units.
     511    // Protects against unsupported units.
    512512    if ( empty( $preferred_size['unit'] ) ) {
    513513        return $preset['size'];
    514514    }
    515515
    516     // If no fluid max font size is available, create one using max font size factor.
    517     if ( ! $maximum_font_size_raw ) {
    518         $maximum_font_size_raw = round( $preferred_size['value'] * $default_maximum_font_size_factor, 3 ) . $preferred_size['unit'];
    519     }
    520 
    521     // If no fluid min font size is available, create one using min font size factor.
    522     if ( ! $minimum_font_size_raw ) {
    523         $minimum_font_size_raw = round( $preferred_size['value'] * $default_minimum_font_size_factor, 3 ) . $preferred_size['unit'];
    524     }
    525 
    526     // Normalizes the minimum font size limit according to the incoming unit, so we can perform checks using it.
     516    /*
     517     * Normalizes the minimum font size limit according to the incoming unit,
     518     * in order to perform comparative checks.
     519     */
    527520    $minimum_font_size_limit = wp_get_typography_value_and_unit(
    528521        $default_minimum_font_size_limit,
    … …  
    532525    );
    533526
    534     if ( ! empty( $minimum_font_size_limit ) ) {
     527    // Don't enforce minimum font size if a font size has explicitly set a min and max value.
     528    if ( ! empty( $minimum_font_size_limit ) && ( ! $minimum_font_size_raw && ! $maximum_font_size_raw ) ) {
    535529        /*
    536530         * If a minimum size was not passed to this function
    537531         * and the user-defined font size is lower than $minimum_font_size_limit,
    538          * then use the user-defined font size as the minimum font-size.
     532         * do not calculate a fluid value.
    539533         */
    540         if ( ! isset( $fluid_font_size_settings['min'] ) && $preferred_size['value'] < $minimum_font_size_limit['value'] ) {
    541             $minimum_font_size_raw = implode( '', $preferred_size );
     534        if ( $preferred_size['value'] <= $minimum_font_size_limit['value'] ) {
     535            return $preset['size'];
     536        }
     537    }
     538
     539    // If no fluid max font size is available use the incoming value.
     540    if ( ! $maximum_font_size_raw ) {
     541        $maximum_font_size_raw = $preferred_size['value'] . $preferred_size['unit'];
     542    }
     543
     544    /*
     545     * If no minimumFontSize is provided, create one using
     546     * the given font size multiplied by the min font size scale factor.
     547     */
     548    if ( ! $minimum_font_size_raw ) {
     549        $calculated_minimum_font_size = round(
     550            $preferred_size['value'] * $default_minimum_font_size_factor,
     551            3
     552        );
     553
     554        // Only use calculated min font size if it's > $minimum_font_size_limit value.
     555        if ( ! empty( $minimum_font_size_limit ) && $calculated_minimum_font_size <= $minimum_font_size_limit['value'] ) {
     556            $minimum_font_size_raw = $minimum_font_size_limit['value'] . $minimum_font_size_limit['unit'];
    542557        } else {
    543             $minimum_font_size_parsed = wp_get_typography_value_and_unit(
    544                 $minimum_font_size_raw,
    545                 array(
    546                     'coerce_to' => $preferred_size['unit'],
    547                 )
    548             );
    549 
    550             /*
    551              * If the passed or calculated minimum font size is lower than $minimum_font_size_limit
    552              * use $minimum_font_size_limit instead.
    553              */
    554             if ( ! empty( $minimum_font_size_parsed ) && $minimum_font_size_parsed['value'] < $minimum_font_size_limit['value'] ) {
    555                 $minimum_font_size_raw = implode( '', $minimum_font_size_limit );
    556             }
     558            $minimum_font_size_raw = $calculated_minimum_font_size . $preferred_size['unit'];
    557559        }
    558560    }

  • trunk/tests/phpunit/tests/block-supports/typography.php

    r54646 r54823  
    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.