Make WordPress Core


Ignore:
Timestamp:
11/11/2022 05:46:05 PM (20 months 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.

File:
1 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    }
Note: See TracChangeset for help on using the changeset viewer.