Make WordPress Core

Changeset 55946


Ignore:
Timestamp:
06/20/2023 05:26:47 AM (3 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.