WordPress.org
Get WordPress

Make WordPress Core

Changeset 54646


Ignore:
Timestamp:
10/19/2022 12:25:21 PM (2 years ago)
Author:
SergeyBiryukov
Message:

Editor: Add font size constraints for fluid typography.

This commit:

  • Adds default minimum font size limits so that min font size, where provided, does not become smaller than 14px/0.875rem/0.875em.
  • For font sizes of < 14px that have no defined minimum sizes, uses the font size to set the floor of the clamp() value.

This bugfix prevents converting existing small font sizes to clamp values that will reduce their font size even further in narrow widths. It therefore improves backward compatibility and accessibility.

Original PR from Gutenberg repository:

Follow-up to [54260], [54360], [54497], [54500].

Props ramonopoly, andrewserong, isabel_brison, Joen, bernhard-reiter.
See #56467.

Location:
trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed

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

    r54497 r54646  
    120120            ? $block_attributes['style']['typography']['fontSize']
    121121            : null;
    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             );
     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        );
    127127    }
    128128
    … …  
    349349    }
    350350
     351    /*
     352     * No calculation is required if swapping between em and rem yet,
     353     * since we assume a root size value. Later we might like to differentiate between
     354     * :root font size (rem) and parent element font size (em) relativity.
     355     */
     356    if ( ( 'em' === $options['coerce_to'] || 'rem' === $options['coerce_to'] ) && ( 'em' === $unit || 'rem' === $unit ) ) {
     357        $unit = $options['coerce_to'];
     358    }
     359
    351360    return array(
    352         'value' => $value,
     361        'value' => round( $value, 3 ),
    353362        'unit'  => $unit,
    354363    );
    … …  
    381390    $scale_factor               = isset( $args['scale_factor'] ) ? $args['scale_factor'] : null;
    382391
    383     // Grab the minimum font size and normalize it in order to use the value for calculations.
     392    // Normalizes the minimum font size in order to use the value for calculations.
    384393    $minimum_font_size = wp_get_typography_value_and_unit( $minimum_font_size_raw );
    385394
    386     // We get a 'preferred' unit to keep units consistent when calculating, otherwise the result will not be accurate.
     395    /*
     396     * We get a 'preferred' unit to keep units consistent when calculating,
     397     * otherwise the result will not be accurate.
     398     */
    387399    $font_size_unit = isset( $minimum_font_size['unit'] ) ? $minimum_font_size['unit'] : 'rem';
    388400
    389     // Grab the maximum font size and normalize it in order to use the value for calculations.
     401    // Normalizes the maximum font size in order to use the value for calculations.
    390402    $maximum_font_size = wp_get_typography_value_and_unit(
    391403        $maximum_font_size_raw,
    … …  
    395407    );
    396408
    397     // Protect against unsupported units.
     409    // Checks for mandatory min and max sizes, and protects against unsupported units.
    398410    if ( ! $maximum_font_size || ! $minimum_font_size ) {
    399411        return null;
    400412    }
    401413
    402     // Use rem for accessible fluid target font scaling.
     414    // Uses rem for accessible fluid target font scaling.
    403415    $minimum_font_size_rem = wp_get_typography_value_and_unit(
    404416        $minimum_font_size_raw,
    … …  
    428440    $view_port_width_offset = round( $minimum_viewport_width['value'] / 100, 3 ) . $font_size_unit;
    429441    $linear_factor          = 100 * ( ( $maximum_font_size['value'] - $minimum_font_size['value'] ) / ( $maximum_viewport_width['value'] - $minimum_viewport_width['value'] ) );
    430     $linear_factor          = round( $linear_factor, 3 ) * $scale_factor;
    431     $fluid_target_font_size = implode( '', $minimum_font_size_rem ) . " + ((1vw - $view_port_width_offset) * $linear_factor)";
     442    $linear_factor_scaled   = round( $linear_factor * $scale_factor, 3 );
     443    $linear_factor_scaled   = empty( $linear_factor_scaled ) ? 1 : $linear_factor_scaled;
     444    $fluid_target_font_size = implode( '', $minimum_font_size_rem ) . " + ((1vw - $view_port_width_offset) * $linear_factor_scaled)";
    432445
    433446    return "clamp($minimum_font_size_raw, $fluid_target_font_size, $maximum_font_size_raw)";
    … …  
    479492    $default_maximum_font_size_factor = 1.5;
    480493    $default_scale_factor             = 1;
     494    $default_minimum_font_size_limit  = '14px';
    481495
    482496    // Font sizes.
    … …  
    500514    }
    501515
    502     // If no fluid min or max font sizes are available, create some using min/max font size factors.
     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.
    503522    if ( ! $minimum_font_size_raw ) {
    504         $minimum_font_size_raw = ( $preferred_size['value'] * $default_minimum_font_size_factor ) . $preferred_size['unit'];
    505     }
    506 
    507     if ( ! $maximum_font_size_raw ) {
    508         $maximum_font_size_raw = ( $preferred_size['value'] * $default_maximum_font_size_factor ) . $preferred_size['unit'];
     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.
     527    $minimum_font_size_limit = wp_get_typography_value_and_unit(
     528        $default_minimum_font_size_limit,
     529        array(
     530            'coerce_to' => $preferred_size['unit'],
     531        )
     532    );
     533
     534    if ( ! empty( $minimum_font_size_limit ) ) {
     535        /*
     536         * If a minimum size was not passed to this function
     537         * 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.
     539         */
     540        if ( ! isset( $fluid_font_size_settings['min'] ) && $preferred_size['value'] < $minimum_font_size_limit['value'] ) {
     541            $minimum_font_size_raw = implode( '', $preferred_size );
     542        } 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            }
     557        }
    509558    }
    510559

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

    r54497 r54646  
    364364            'default_return_value_when_value_is_already_clamped' => array(
    365365                'font_size_preset'            => array(
    366                     'size'  => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
     366                    'size'  => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
    367367                    'fluid' => false,
    368368                ),
    369369                'should_use_fluid_typography' => true,
    370                 'expected_output'             => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
     370                'expected_output'             => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
    371371            ),
    372372
    … …  
    385385                ),
    386386                'should_use_fluid_typography' => true,
    387                 'expected_output'             => 'clamp(1.3125rem, 1.3125rem + ((1vw - 0.48rem) * 2.524), 2.625rem)',
     387                'expected_output'             => 'clamp(1.313rem, 1.313rem + ((1vw - 0.48rem) * 2.523), 2.625rem)',
    388388            ),
    389389
    … …  
    393393                ),
    394394                'should_use_fluid_typography' => true,
    395                 'expected_output'             => 'clamp(75.13125px, 4.695703125rem + ((1vw - 7.68px) * 9.03), 150.2625px)',
     395                'expected_output'             => 'clamp(75.131px, 4.696rem + ((1vw - 7.68px) * 9.03), 150.263px)',
    396396            ),
    397397
    … …  
    401401                ),
    402402                'should_use_fluid_typography' => true,
    403                 'expected_output'             => 'clamp(24.75px, 1.546875rem + ((1vw - 7.68px) * 2.975), 49.5px)',
     403                'expected_output'             => 'clamp(24.75px, 1.547rem + ((1vw - 7.68px) * 2.975), 49.5px)',
    404404            ),
    405405
    … …  
    409409                ),
    410410                'should_use_fluid_typography' => true,
    411                 'expected_output'             => 'clamp(75.1725px, 4.69828125rem + ((1vw - 7.68px) * 9.035), 150.345px)',
     411                'expected_output'             => 'clamp(75.173px, 4.698rem + ((1vw - 7.68px) * 9.035), 150.345px)',
    412412            ),
    413413
    … …  
    418418                ),
    419419                'should_use_fluid_typography' => true,
    420                 'expected_output'             => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
     420                'expected_output'             => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
    421421            ),
    422422
    … …  
    427427                ),
    428428                'should_use_fluid_typography' => true,
    429                 'expected_output'             => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
     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(
     433                'font_size_preset'            => array(
     434                    'size'  => '3rem',
     435                    'fluid' => array(
     436                        'min' => '5rem',
     437                        'max' => '32px',
     438                    ),
     439                ),
     440                'should_use_fluid_typography' => true,
     441                'expected_output'             => 'clamp(5rem, 5rem + ((1vw - 0.48rem) * -5.769), 32px)',
    430442            ),
    431443
    … …  
    442454            ),
    443455
    444             'return_fluid_clamp_value'                    => array(
     456            'return_clamped_size_where_no_min_is_given_and_less_than_default_min_size' => array(
     457                'font_size_preset'            => array(
     458                    'size' => '3px',
     459                ),
     460                '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(
    445465                'font_size_preset'            => array(
    446466                    'size'  => '28px',
    … …  
    473493                ),
    474494                'should_use_fluid_typography' => true,
    475                 'expected_output'             => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 7.091), 80px)',
     495                'expected_output'             => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 7.091), 80px)',
     496            ),
     497
     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(
     545                'font_size_preset'            => array(
     546                    'size'  => '1.5rem',
     547                    'fluid' => array(
     548                        'min' => '0.5rem',
     549                        'max' => '5rem',
     550                    ),
     551                ),
     552                '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(
     557                'font_size_preset'            => array(
     558                    'size'  => '4rem',
     559                    'fluid' => array(
     560                        'min' => '30px',
     561                        'max' => '30px',
     562                    ),
     563                ),
     564                'should_use_fluid_typography' => true,
     565                'expected_output'             => 'clamp(30px, 1.875rem + ((1vw - 7.68px) * 1), 30px)',
    476566            ),
    477567        );
    … …  
    548638                'font_size_value'             => '50px',
    549639                'should_use_fluid_typography' => true,
    550                 'expected_output'             => 'font-size:clamp(37.5px, 2.34375rem + ((1vw - 7.68px) * 4.507), 75px);',
     640                'expected_output'             => 'font-size:clamp(37.5px, 2.344rem + ((1vw - 7.68px) * 4.507), 75px);',
    551641            ),
    552642        );
    … …  
    624714                'font_size_value'             => '20px',
    625715                '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>',
     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>',
    627717            ),
    628718            '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>",
     719                'block_content'               => "<div class=\"wp-block-group\" style=\"font-size:1.5em\"> \n \n<p style=\"font-size:1.5em\">A paragraph inside a group</p></div>",
     720                'font_size_value'             => '1.5em',
     721                '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>",
    633723            ),
    634724        );
Note: See TracChangeset for help on using the changeset viewer.