Make WordPress Core

Changeset 55946


Ignore:
Timestamp:
06/20/2023 05:26:47 AM (2 years ago)
Author:
isabel_brison
Message:

Editor: use layout.wideSize as max viewport width.

Use the value of layout.wideSize as the maximum viewport width for fluid font size calculations.

Props ramonopoly.

Fixes #58522.

Location:
trunk
Files:
3 edited

Legend:

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

    r55133 r55946  
    369369 *
    370370 * @since 6.1.0
     371 * @since 6.3.0 Checks for unsupported min/max viewport values that cause invalid clamp values.
    371372 * @access private
    372373 *
     
    434435    );
    435436
     437    // Protects against unsupported units in min and max viewport widths.
     438    if ( ! $minimum_viewport_width || ! $maximum_viewport_width ) {
     439        return null;
     440    }
     441
    436442    /*
    437443     * Build CSS rule.
     
    455461 * @since 6.1.1 Adjusted rules for min and max font sizes.
    456462 * @since 6.2.0 Added 'settings.typography.fluid.minFontSize' support.
     463 * @since 6.3.0 Using layout.wideSize as max viewport width.
    457464 *
    458465 * @param array $preset                     {
     
    481488
    482489    // Checks if fluid font sizes are activated.
    483     $typography_settings = wp_get_global_settings( array( 'typography' ) );
     490    $global_settings     = wp_get_global_settings();
     491    $typography_settings = isset( $global_settings['typography'] ) ? $global_settings['typography'] : array();
     492    $layout_settings     = isset( $global_settings['layout'] ) ? $global_settings['layout'] : array();
     493
    484494    if (
    485495        isset( $typography_settings['fluid'] ) &&
     
    498508
    499509    // Defaults.
    500     $default_maximum_viewport_width   = '1600px';
     510    $default_maximum_viewport_width   = isset( $layout_settings['wideSize'] ) ? $layout_settings['wideSize'] : '1600px';
    501511    $default_minimum_viewport_width   = '768px';
    502512    $default_minimum_font_size_factor = 0.75;
  • trunk/tests/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json

    r55133 r55946  
    33    "settings": {
    44        "appearanceTools": true,
     5        "layout": {
     6            "wideSize": "1000px"
     7        },
    58        "typography": {
    69            "fluid": {
  • trunk/tests/phpunit/tests/block-supports/typography.php

    r55133 r55946  
    569569     * @ticket 57065
    570570     * @ticket 57529
     571     * @ticket 58522
    571572     *
    572573     * @covers ::wp_register_typography_support
     
    639640                'font_size_value' => '17px',
    640641                'theme_slug'      => 'block-theme-child-with-fluid-typography-config',
    641                 'expected_output' => 'font-size:clamp(16px, 1rem + ((1vw - 7.68px) * 0.12), 17px);',
     642                'expected_output' => 'font-size:clamp(16px, 1rem + ((1vw - 7.68px) * 0.431), 17px);',
    642643            ),
    643644            'returns value when font size <= custom min font size bound' => array(
     
    848849        );
    849850    }
     851
     852    /**
     853     * Tests computed font size values.
     854     *
     855     * @ticket 58522
     856     *
     857     * @covers ::wp_get_computed_fluid_typography_value
     858     *
     859     * @dataProvider data_wp_get_computed_fluid_typography_value
     860     *
     861     * @param array  $args {
     862     *      Optional. An associative array of values to calculate a fluid formula for font size. Default is empty array.
     863     *
     864     *     @type string $maximum_viewport_width Maximum size up to which type will have fluidity.
     865     *     @type string $minimum_viewport_width Minimum viewport size from which type will have fluidity.
     866     *     @type string $maximum_font_size      Maximum font size for any clamp() calculation.
     867     *     @type string $minimum_font_size      Minimum font size for any clamp() calculation.
     868     *     @type int    $scale_factor           A scale factor to determine how fast a font scales within boundaries.
     869     * }
     870     * @param string $expected_output             Expected value of style property from gutenberg_apply_typography_support().
     871     */
     872    public function test_wp_get_computed_fluid_typography_value( $args, $expected_output ) {
     873        $actual = wp_get_computed_fluid_typography_value( $args );
     874        $this->assertSame( $expected_output, $actual );
     875    }
     876
     877    /**
     878     * Data provider.
     879     *
     880     * @return array
     881     */
     882    public function data_wp_get_computed_fluid_typography_value() {
     883        return array(
     884            'returns clamped value with valid args' => array(
     885                'args'            => array(
     886                    'minimum_viewport_width' => '320px',
     887                    'maximum_viewport_width' => '1000px',
     888                    'minimum_font_size'      => '50px',
     889                    'maximum_font_size'      => '100px',
     890                    'scale_factor'           => 1,
     891                ),
     892                'expected_output' => 'clamp(50px, 3.125rem + ((1vw - 3.2px) * 7.353), 100px)',
     893            ),
     894            'returns `null` when `maximum_viewport_width` is an unsupported unit' => array(
     895                'args'            => array(
     896                    'minimum_viewport_width' => '320px',
     897                    'maximum_viewport_width' => 'calc(100% - 60px)',
     898                    'minimum_font_size'      => '50px',
     899                    'maximum_font_size'      => '100px',
     900                    'scale_factor'           => 1,
     901                ),
     902                'expected_output' => null,
     903            ),
     904            'returns `null` when `minimum_viewport_width` is an unsupported unit' => array(
     905                'args'            => array(
     906                    'minimum_viewport_width' => 'calc(100% - 60px)',
     907                    'maximum_viewport_width' => '1000px',
     908                    'minimum_font_size'      => '50px',
     909                    'maximum_font_size'      => '100px',
     910                    'scale_factor'           => 1,
     911                ),
     912                'expected_output' => null,
     913            ),
     914            'returns `null` when `minimum_font_size` is an unsupported unit' => array(
     915                'args'            => array(
     916                    'minimum_viewport_width' => '320em',
     917                    'maximum_viewport_width' => '1000em',
     918                    'minimum_font_size'      => '10vw',
     919                    'maximum_font_size'      => '100em',
     920                    'scale_factor'           => 1,
     921                ),
     922                'expected_output' => null,
     923            ),
     924            'returns `null` when `maximum_font_size` is an unsupported unit' => array(
     925                'args'            => array(
     926                    'minimum_viewport_width' => '320em',
     927                    'maximum_viewport_width' => '1000em',
     928                    'minimum_font_size'      => '50px',
     929                    'maximum_font_size'      => '100%',
     930                    'scale_factor'           => 1,
     931                ),
     932                'expected_output' => null,
     933            ),
     934        );
     935    }
    850936}
     937
Note: See TracChangeset for help on using the changeset viewer.