Make WordPress Core

Changeset 56535


Ignore:
Timestamp:
09/07/2023 04:28:45 AM (9 months ago)
Author:
isabel_brison
Message:

Editor: add configurable viewport sizes for fluid typography.

Adds options to configure min and max viewport sizes for fluid typography in theme.json settings.

Props ramonopoly.
Fixes #59048.

Location:
trunk
Files:
3 edited

Legend:

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

    r56503 r56535  
    472472 * @since 6.2.0 Added 'settings.typography.fluid.minFontSize' support.
    473473 * @since 6.3.0 Using layout.wideSize as max viewport width, and logarithmic scale factor to calculate minimum font scale.
     474 * @since 6.4.0 Added configurable min and max viewport width values to the typography.fluid theme.json schema.
    474475 *
    475476 * @param array $preset                     {
     
    518519
    519520    // Defaults.
    520     $default_maximum_viewport_width       = isset( $layout_settings['wideSize'] ) && ! empty( wp_get_typography_value_and_unit( $layout_settings['wideSize'] ) ) ? $layout_settings['wideSize'] : '1600px';
     521    $default_maximum_viewport_width       = '1600px';
    521522    $default_minimum_viewport_width       = '320px';
    522523    $default_minimum_font_size_factor_max = 0.75;
    523524    $default_minimum_font_size_factor_min = 0.25;
    524525    $default_scale_factor                 = 1;
    525     $has_min_font_size                    = isset( $fluid_settings['minFontSize'] ) &&
    526         ! empty( wp_get_typography_value_and_unit( $fluid_settings['minFontSize'] ) );
    527     $default_minimum_font_size_limit      = $has_min_font_size ? $fluid_settings['minFontSize'] : '14px';
     526    $default_minimum_font_size_limit      = '14px';
     527
     528    // Defaults overrides.
     529    $minimum_viewport_width = isset( $fluid_settings['minViewportWidth'] ) ? $fluid_settings['minViewportWidth'] : $default_minimum_viewport_width;
     530    $maximum_viewport_width = isset( $layout_settings['wideSize'] ) && ! empty( wp_get_typography_value_and_unit( $layout_settings['wideSize'] ) ) ? $layout_settings['wideSize'] : $default_maximum_viewport_width;
     531    if ( isset( $fluid_settings['maxViewportWidth'] ) ) {
     532        $maximum_viewport_width = $fluid_settings['maxViewportWidth'];
     533    }
     534    $has_min_font_size       = isset( $fluid_settings['minFontSize'] ) && ! empty( wp_get_typography_value_and_unit( $fluid_settings['minFontSize'] ) );
     535    $minimum_font_size_limit = $has_min_font_size ? $fluid_settings['minFontSize'] : $default_minimum_font_size_limit;
    528536
    529537    // Font sizes.
     
    552560     */
    553561    $minimum_font_size_limit = wp_get_typography_value_and_unit(
    554         $default_minimum_font_size_limit,
     562        $minimum_font_size_limit,
    555563        array(
    556564            'coerce_to' => $preferred_size['unit'],
     
    601609    $fluid_font_size_value = wp_get_computed_fluid_typography_value(
    602610        array(
    603             'minimum_viewport_width' => $default_minimum_viewport_width,
    604             'maximum_viewport_width' => $default_maximum_viewport_width,
     611            'minimum_viewport_width' => $minimum_viewport_width,
     612            'maximum_viewport_width' => $maximum_viewport_width,
    605613            'minimum_font_size'      => $minimum_font_size_raw,
    606614            'maximum_font_size'      => $maximum_font_size_raw,
  • trunk/tests/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json

    r55946 r56535  
    88        "typography": {
    99            "fluid": {
    10                 "minFontSize": "16px"
     10                "minFontSize": "16px",
     11                "maxViewportWidth": "1200px",
     12                "minViewportWidth": "640px"
    1113            }
    1214        }
  • trunk/tests/phpunit/tests/block-supports/typography.php

    r56503 r56535  
    623623     * @ticket 58522
    624624     * @ticket 58523
     625     * @ticket 59048
    625626     *
    626627     * @covers ::wp_register_typography_support
     
    693694                'font_size_value' => '17px',
    694695                'theme_slug'      => 'block-theme-child-with-fluid-typography-config',
    695                 'expected_output' => 'font-size:clamp(16px, 1rem + ((1vw - 3.2px) * 0.147), 17px);',
     696                'expected_output' => 'font-size:clamp(16px, 1rem + ((1vw - 6.4px) * 0.179), 17px);',
    696697            ),
    697698            'returns value when font size <= custom min font size bound' => array(
Note: See TracChangeset for help on using the changeset viewer.