Make WordPress Core

Changeset 58171


Ignore:
Timestamp:
05/18/2024 11:16:09 PM (8 weeks ago)
Author:
isabel_brison
Message:

Editor: pass fluid typography theme.json settings to wp_get_typography_font_size_value.

Updates wp_get_typography_font_size_value to accept an array of theme.json settings instead of a boolean derived from global state.

Props ramonopoly, audrasjb.
Fixes #61118.

Location:
trunk
Files:
4 edited

Legend:

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

    r57329 r58171  
    499499 * @since 6.3.0 Using layout.wideSize as max viewport width, and logarithmic scale factor to calculate minimum font scale.
    500500 * @since 6.4.0 Added configurable min and max viewport width values to the typography.fluid theme.json schema.
    501  *
    502  * @param array $preset                     {
     501 * @since 6.6.0 Deprecated bool argument $should_use_fluid_typography.
     502 *
     503 * @param array      $preset   {
    503504 *     Required. fontSizes preset value as seen in theme.json.
    504505 *
     
    507508 *     @type string|int|float $size CSS font-size value, including units if applicable.
    508509 * }
    509  * @param bool  $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
    510  *                                           Default is false.
     510 * @param bool|array $settings Optional Theme JSON settings array that overrides any global theme settings.
     511 *                             Default is false.
    511512 * @return string|null Font-size value or null if a size is not passed in $preset.
    512513 */
    513 function wp_get_typography_font_size_value( $preset, $should_use_fluid_typography = false ) {
     514
     515
     516function wp_get_typography_font_size_value( $preset, $settings = array() ) {
    514517    if ( ! isset( $preset['size'] ) ) {
    515518        return null;
     
    524527    }
    525528
    526     // Checks if fluid font sizes are activated.
    527     $global_settings     = wp_get_global_settings();
    528     $typography_settings = isset( $global_settings['typography'] ) ? $global_settings['typography'] : array();
    529     $layout_settings     = isset( $global_settings['layout'] ) ? $global_settings['layout'] : array();
    530 
    531     if (
    532         isset( $typography_settings['fluid'] ) &&
    533         ( true === $typography_settings['fluid'] || is_array( $typography_settings['fluid'] ) )
    534     ) {
    535         $should_use_fluid_typography = true;
    536     }
     529    /*
     530     * As a boolean (deprecated since 6.6), $settings acts as an override to switch fluid typography "on" (`true`) or "off" (`false`).
     531     */
     532    if ( is_bool( $settings ) ) {
     533        _deprecated_argument( __FUNCTION__, '6.6.0', __( '`boolean` type for second argument `$settings` is deprecated. Use `array()` instead.' ) );
     534        $settings = array(
     535            'typography' => array(
     536                'fluid' => $settings,
     537            ),
     538        );
     539    }
     540
     541    // Fallback to global settings as default.
     542    $global_settings             = wp_get_global_settings();
     543    $settings                    = wp_parse_args(
     544        $settings,
     545        $global_settings
     546    );
     547
     548    $typography_settings         = isset( $settings['typography'] ) ? $settings['typography'] : array();
     549    $should_use_fluid_typography = ! empty( $typography_settings['fluid'] );
    537550
    538551    if ( ! $should_use_fluid_typography ) {
     
    540553    }
    541554
    542     $fluid_settings = isset( $typography_settings['fluid'] ) && is_array( $typography_settings['fluid'] )
    543         ? $typography_settings['fluid']
    544         : array();
     555    // $typography_settings['fluid'] can be a bool or an array. Normalize to array.
     556    $fluid_settings  = is_array( $typography_settings['fluid'] ) ? $typography_settings['fluid'] : array();
     557    $layout_settings = isset( $settings['layout'] ) ? $settings['layout'] : array();
    545558
    546559    // Defaults.
  • trunk/src/wp-includes/class-wp-theme-json.php

    r58123 r58171  
    18321832     *
    18331833     * @since 5.9.0
     1834     * @since 6.6.0 Passing $settings to the callbacks defined in static::PRESETS_METADATA.
    18341835     *
    18351836     * @param array    $settings        Settings to process.
     
    18581859                ) {
    18591860                    $value_func = $preset_metadata['value_func'];
    1860                     $value      = call_user_func( $value_func, $preset );
     1861                    $value      = call_user_func( $value_func, $preset, $settings );
    18611862                } else {
    18621863                    // If we don't have a value, then don't add it to the result.
     
    20512052     * @since 6.1.0 Added `$theme_json`, `$selector`, and `$use_root_padding` parameters.
    20522053     * @since 6.5.0 Output a `min-height: unset` rule when `aspect-ratio` is set.
     2054     * @since 6.6.0 Passing current theme JSON settings to wp_get_typography_font_size_value().
    20532055     *
    20542056     * @param array   $styles Styles to process.
     
    21182120                 * Values that already have a clamp() function will not pass the test,
    21192121                 * and therefore the original $value will be returned.
     2122                 * Pass the current theme_json settings to override any global settings.
    21202123                 */
    2121                 $value = wp_get_typography_font_size_value( array( 'size' => $value ) );
     2124                $value = wp_get_typography_font_size_value( array( 'size' => $value ), $settings );
    21222125            }
    21232126
  • trunk/tests/phpunit/tests/block-supports/typography.php

    r57329 r58171  
    295295     * @ticket 57065
    296296     * @ticket 58523
     297     * @ticket 61118
    297298     *
    298299     * @covers ::wp_get_typography_font_size_value
     
    300301     * @dataProvider data_generate_font_size_preset_fixtures
    301302     *
    302      * @param array  $font_size_preset            {
     303     * @param array  $font_size_preset {
    303304     *      Required. fontSizes preset value as seen in theme.json.
     305     *
     306     *     @type string $name Name of the font size preset.
     307     *     @type string $slug Kebab-case unique identifier for the font size preset.
     308     *     @type string $size CSS font-size value, including units where applicable.
     309     * }
     310     * @param bool   $settings         Theme JSON settings array that overrides any global theme settings.
     311     * @param string $expected_output Expected output.
     312     */
     313    public function test_wp_get_typography_font_size_value( $font_size_preset, $settings, $expected_output ) {
     314        $actual = wp_get_typography_font_size_value( $font_size_preset, $settings );
     315
     316        $this->assertSame( $expected_output, $actual );
     317    }
     318
     319    /**
     320     * Data provider.
     321     *
     322     * @return array
     323     */
     324    public function data_generate_font_size_preset_fixtures() {
     325        return array(
     326            'returns value when fluid typography is deactivated' => array(
     327                'font_size_preset' => array(
     328                    'size' => '28px',
     329                ),
     330                'settings'         => null,
     331                'expected_output'  => '28px',
     332            ),
     333
     334            'returns value where font size is 0'         => array(
     335                'font_size_preset' => array(
     336                    'size' => 0,
     337                ),
     338                'settings'         => array(
     339                    'typography' => array(
     340                        'fluid' => true,
     341                    ),
     342                ),
     343                'expected_output'  => 0,
     344            ),
     345
     346            "returns value where font size is '0'"       => array(
     347                'font_size_preset' => array(
     348                    'size' => '0',
     349                ),
     350                'settings'         => array(
     351                    'typography' => array(
     352                        'fluid' => true,
     353                    ),
     354                ),
     355                'expected_output'  => '0',
     356            ),
     357
     358            'returns value where `size` is `null`'       => array(
     359                'font_size_preset' => array(
     360                    'size' => null,
     361                ),
     362                'settings'         => null,
     363                'expected_output'  => null,
     364            ),
     365
     366            'returns value when fluid is `false`'        => array(
     367                'font_size_preset' => array(
     368                    'size'  => '28px',
     369                    'fluid' => false,
     370                ),
     371                'settings'         => array(
     372                    'typography' => array(
     373                        'fluid' => false,
     374                    ),
     375                ),
     376                'expected_output'  => '28px',
     377            ),
     378            'returns value when fluid is empty array'    => array(
     379                'font_size'       => array(
     380                    'size' => '28px',
     381                ),
     382                'settings'        => array(
     383                    'typography' => array(
     384                        'fluid' => array(),
     385                    ),
     386                ),
     387                'expected_output' => '28px',
     388            ),
     389            'returns clamp value with minViewportWidth override' => array(
     390                'font_size'       => array(
     391                    'size' => '28px',
     392                ),
     393                'settings'        => array(
     394                    'typography' => array(
     395                        'fluid' => array(
     396                            'minViewportWidth' => '500px',
     397                        ),
     398                    ),
     399                ),
     400                'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 5px) * 0.918), 28px)',
     401            ),
     402            'returns clamp value with maxViewportWidth override' => array(
     403                'font_size'       => array(
     404                    'size' => '28px',
     405                ),
     406                'settings'        => array(
     407                    'typography' => array(
     408                        'fluid' => array(
     409                            'maxViewportWidth' => '500px',
     410                        ),
     411                    ),
     412                ),
     413                'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 5.608), 28px)',
     414            ),
     415
     416            'returns clamp value with layout.wideSize override' => array(
     417                'font_size'       => array(
     418                    'size' => '28px',
     419                ),
     420                'settings'        => array(
     421                    'typography' => array(
     422                        'fluid' => true,
     423                    ),
     424                    'layout'     => array(
     425                        'wideSize' => '500px',
     426                    ),
     427                ),
     428                'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 5.608), 28px)',
     429            ),
     430            'returns already clamped value'              => array(
     431                'font_size_preset' => array(
     432                    'size'  => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
     433                    'fluid' => false,
     434                ),
     435                'settings'         => array(
     436                    'typography' => array(
     437                        'fluid' => true,
     438                    ),
     439                ),
     440                'expected_output'  => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
     441            ),
     442
     443            'returns value with unsupported unit'        => array(
     444                'font_size_preset' => array(
     445                    'size'  => '1000%',
     446                    'fluid' => false,
     447                ),
     448                'settings'         => array(
     449                    'typography' => array(
     450                        'fluid' => true,
     451                    ),
     452                ),
     453                'expected_output'  => '1000%',
     454            ),
     455
     456            'returns clamp value with rem min and max units' => array(
     457                'font_size_preset' => array(
     458                    'size' => '1.75rem',
     459                ),
     460                'settings'         => array(
     461                    'typography' => array(
     462                        'fluid' => true,
     463                    ),
     464                ),
     465                'expected_output'  => 'clamp(1.119rem, 1.119rem + ((1vw - 0.2rem) * 0.789), 1.75rem)',
     466            ),
     467
     468            'returns clamp value with em min and max units' => array(
     469                'font_size'       => array(
     470                    'size' => '1.75em',
     471                ),
     472                'settings'        => array(
     473                    'typography' => array(
     474                        'fluid' => true,
     475                    ),
     476                ),
     477                'expected_output' => 'clamp(1.119em, 1.119rem + ((1vw - 0.2em) * 0.789), 1.75em)',
     478            ),
     479
     480            'returns clamp value for floats'             => array(
     481                'font_size'       => array(
     482                    'size' => '70.175px',
     483                ),
     484                'settings'        => array(
     485                    'typography' => array(
     486                        'fluid' => true,
     487                    ),
     488                ),
     489                'expected_output' => 'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)',
     490            ),
     491
     492            'coerces integer to `px` and returns clamp value' => array(
     493                'font_size_preset' => array(
     494                    'size' => 33,
     495                ),
     496                'settings'         => array(
     497                    'typography' => array(
     498                        'fluid' => true,
     499                    ),
     500                ),
     501                'expected_output'  => 'clamp(20.515px, 1.282rem + ((1vw - 3.2px) * 0.975), 33px)',
     502            ),
     503
     504            'coerces float to `px` and returns clamp value' => array(
     505                'font_size_preset' => array(
     506                    'size' => 70.175,
     507                ),
     508                'settings'         => array(
     509                    'typography' => array(
     510                        'fluid' => true,
     511                    ),
     512                ),
     513                'expected_output'  => 'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)',
     514            ),
     515
     516            'returns clamp value when `fluid` is empty array' => array(
     517                'font_size_preset' => array(
     518                    'size'  => '28px',
     519                    'fluid' => array(),
     520                ),
     521                'settings'         => array(
     522                    'typography' => array(
     523                        'fluid' => true,
     524                    ),
     525                ),
     526                'expected_output'  => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
     527            ),
     528
     529            'returns clamp value when `fluid` is `null`' => array(
     530                'font_size_preset' => array(
     531                    'size'  => '28px',
     532                    'fluid' => null,
     533                ),
     534                'settings'         => array(
     535                    'typography' => array(
     536                        'fluid' => true,
     537                    ),
     538                ),
     539                'expected_output'  => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
     540            ),
     541
     542            'returns clamp value where min and max fluid values defined' => array(
     543                'font_size'       => array(
     544                    'size'  => '80px',
     545                    'fluid' => array(
     546                        'min' => '70px',
     547                        'max' => '125px',
     548                    ),
     549                ),
     550                'settings'        => array(
     551                    'typography' => array(
     552                        'fluid' => true,
     553                    ),
     554                ),
     555                'expected_output' => 'clamp(70px, 4.375rem + ((1vw - 3.2px) * 4.297), 125px)',
     556            ),
     557
     558            'returns clamp value where max is equal to size' => array(
     559                'font_size'       => array(
     560                    'size'  => '7.8125rem',
     561                    'fluid' => array(
     562                        'min' => '4.375rem',
     563                        'max' => '7.8125rem',
     564                    ),
     565                ),
     566                'settings'        => array(
     567                    'typography' => array(
     568                        'fluid' => true,
     569                    ),
     570                ),
     571                'expected_output' => 'clamp(4.375rem, 4.375rem + ((1vw - 0.2rem) * 4.298), 7.8125rem)',
     572            ),
     573
     574            'returns clamp value if min font size is greater than max' => array(
     575                'font_size_preset' => array(
     576                    'size'  => '3rem',
     577                    'fluid' => array(
     578                        'min' => '5rem',
     579                        'max' => '32px',
     580                    ),
     581                ),
     582                'settings'         => array(
     583                    'typography' => array(
     584                        'fluid' => true,
     585                    ),
     586                ),
     587                'expected_output'  => 'clamp(5rem, 5rem + ((1vw - 0.2rem) * -3.75), 32px)',
     588            ),
     589
     590            'returns value with invalid min/max fluid units' => array(
     591                'font_size_preset' => array(
     592                    'size'  => '10em',
     593                    'fluid' => array(
     594                        'min' => '20vw',
     595                        'max' => '50%',
     596                    ),
     597                ),
     598                'settings'         => array(
     599                    'typography' => array(
     600                        'fluid' => true,
     601                    ),
     602                ),
     603                'expected_output'  => '10em',
     604            ),
     605
     606            'returns value when size is < lower bounds and no fluid min/max set' => array(
     607                'font_size_preset' => array(
     608                    'size' => '3px',
     609                ),
     610                'settings'         => array(
     611                    'typography' => array(
     612                        'fluid' => true,
     613                    ),
     614                ),
     615                'expected_output'  => '3px',
     616            ),
     617
     618            'returns value when size is equal to lower bounds and no fluid min/max set' => array(
     619                'font_size'       => array(
     620                    'size' => '14px',
     621                ),
     622                'settings'        => array(
     623                    'typography' => array(
     624                        'fluid' => true,
     625                    ),
     626                ),
     627                'expected_output' => '14px',
     628            ),
     629
     630            'returns clamp value with different min max units' => array(
     631                'font_size_preset' => array(
     632                    'size'  => '28px',
     633                    'fluid' => array(
     634                        'min' => '20px',
     635                        'max' => '50rem',
     636                    ),
     637                ),
     638                'settings'         => array(
     639                    'typography' => array(
     640                        'fluid' => true,
     641                    ),
     642                ),
     643                'expected_output'  => 'clamp(20px, 1.25rem + ((1vw - 3.2px) * 60.938), 50rem)',
     644            ),
     645
     646            'returns clamp value where no fluid max size is set' => array(
     647                'font_size_preset' => array(
     648                    'size'  => '50px',
     649                    'fluid' => array(
     650                        'min' => '2.6rem',
     651                    ),
     652                ),
     653                'settings'         => array(
     654                    'typography' => array(
     655                        'fluid' => true,
     656                    ),
     657                ),
     658                'expected_output'  => 'clamp(2.6rem, 2.6rem + ((1vw - 0.2rem) * 0.656), 50px)',
     659            ),
     660
     661            'returns clamp value where no fluid min size is set' => array(
     662                'font_size_preset' => array(
     663                    'size'  => '28px',
     664                    'fluid' => array(
     665                        'max' => '80px',
     666                    ),
     667                ),
     668                'settings'         => array(
     669                    'typography' => array(
     670                        'fluid' => true,
     671                    ),
     672                ),
     673                'expected_output'  => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 4.851), 80px)',
     674            ),
     675
     676            'should not apply lower bound test when fluid values are set' => array(
     677                'font_size_preset' => array(
     678                    'size'  => '1.5rem',
     679                    'fluid' => array(
     680                        'min' => '0.5rem',
     681                        'max' => '5rem',
     682                    ),
     683                ),
     684                'settings'         => array(
     685                    'typography' => array(
     686                        'fluid' => true,
     687                    ),
     688                ),
     689                'expected_output'  => 'clamp(0.5rem, 0.5rem + ((1vw - 0.2rem) * 5.625), 5rem)',
     690            ),
     691
     692            'should not apply lower bound test when only fluid min is set' => array(
     693                'font_size'       => array(
     694                    'size'  => '20px',
     695                    'fluid' => array(
     696                        'min' => '12px',
     697                    ),
     698                ),
     699                'settings'        => array(
     700                    'typography' => array(
     701                        'fluid' => true,
     702                    ),
     703                ),
     704                'expected_output' => 'clamp(12px, 0.75rem + ((1vw - 3.2px) * 0.625), 20px)',
     705            ),
     706
     707            'should not apply lower bound test when only fluid max is set' => array(
     708                'font_size'       => array(
     709                    'size'  => '0.875rem',
     710                    'fluid' => array(
     711                        'max' => '20rem',
     712                    ),
     713                ),
     714                'settings'        => array(
     715                    'typography' => array(
     716                        'fluid' => true,
     717                    ),
     718                ),
     719                'expected_output' => 'clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 23.906), 20rem)',
     720            ),
     721
     722            'returns clamp value when min and max font sizes are equal' => array(
     723                'font_size_preset' => array(
     724                    'size'  => '4rem',
     725                    'fluid' => array(
     726                        'min' => '30px',
     727                        'max' => '30px',
     728                    ),
     729                ),
     730                'settings'         => array(
     731                    'typography' => array(
     732                        'fluid' => true,
     733                    ),
     734                ),
     735                'expected_output'  => 'clamp(30px, 1.875rem + ((1vw - 3.2px) * 1), 30px)',
     736            ),
     737
     738            'should apply scaled min font size for em values when custom min font size is not set' => array(
     739                'font_size'       => array(
     740                    'size' => '12rem',
     741                ),
     742                'settings'        => array(
     743                    'typography' => array(
     744                        'fluid' => true,
     745                    ),
     746                ),
     747                'expected_output' => 'clamp(5.174rem, 5.174rem + ((1vw - 0.2rem) * 8.533), 12rem)',
     748            ),
     749
     750            'should apply scaled min font size for px values when custom min font size is not set' => array(
     751                'font_size'       => array(
     752                    'size' => '200px',
     753                ),
     754                'settings'        => array(
     755                    'typography' => array(
     756                        'fluid' => true,
     757                    ),
     758                ),
     759                'expected_output' => 'clamp(85.342px, 5.334rem + ((1vw - 3.2px) * 8.958), 200px)',
     760            ),
     761
     762            'should not apply scaled min font size for minimum font size when custom min font size is set' => array(
     763                'font_size'       => array(
     764                    'size'  => '200px',
     765                    'fluid' => array(
     766                        'min' => '100px',
     767                    ),
     768                ),
     769                'settings'        => array(
     770                    'typography' => array(
     771                        'fluid' => true,
     772                    ),
     773                ),
     774                'expected_output' => 'clamp(100px, 6.25rem + ((1vw - 3.2px) * 7.813), 200px)',
     775            ),
     776        );
     777    }
     778
     779    /**
     780     * Tests backwards compatibility for deprecated second argument $should_use_fluid_typography.
     781     *
     782     * @ticket 61118
     783     *
     784     * @covers ::wp_get_typography_font_size_value
     785     *
     786     * @expectedDeprecated wp_get_typography_font_size_value
     787     *
     788     * @dataProvider data_generate_font_size_preset_should_use_fluid_typography_deprecated_fixtures
     789     *
     790     * @param array  $font_size                     {
     791     *     Required. A font size as represented in the fontSizes preset format as seen in theme.json.
    304792     *
    305793     *     @type string $name Name of the font size preset.
     
    308796     * }
    309797     * @param bool   $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
    310      * @param string $expected_output             Expected output.
    311      */
    312     public function test_wp_get_typography_font_size_value( $font_size_preset, $should_use_fluid_typography, $expected_output ) {
    313         $actual = wp_get_typography_font_size_value( $font_size_preset, $should_use_fluid_typography );
     798     * @param string $expected_output Expected output of wp_get_typography_font_size_value().
     799     */
     800    public function test_wp_get_typography_font_size_value_should_use_fluid_typography_deprecated( $font_size, $should_use_fluid_typography, $expected_output ) {
     801        $actual = wp_get_typography_font_size_value( $font_size, $should_use_fluid_typography );
    314802
    315803        $this->assertSame( $expected_output, $actual );
     
    317805
    318806    /**
    319      * Data provider.
     807     * Data provider for test_wp_get_typography_font_size_value_should_use_fluid_typography_deprecated.
    320808     *
    321809     * @return array
    322810     */
    323     public function data_generate_font_size_preset_fixtures() {
     811    public function data_generate_font_size_preset_should_use_fluid_typography_deprecated_fixtures() {
    324812        return array(
    325813            'returns value when fluid typography is deactivated' => array(
    326                 'font_size_preset'            => array(
     814                'font_size'                   => array(
    327815                    'size' => '28px',
    328816                ),
     
    330818                'expected_output'             => '28px',
    331819            ),
    332 
    333             'returns value where font size is 0'         => array(
    334                 'font_size_preset'            => array(
    335                     'size' => 0,
    336                 ),
    337                 'should_use_fluid_typography' => true,
    338                 'expected_output'             => 0,
    339             ),
    340 
    341             "returns value where font size is '0'"       => array(
    342                 'font_size_preset'            => array(
    343                     'size' => '0',
    344                 ),
    345                 'should_use_fluid_typography' => true,
    346                 'expected_output'             => '0',
    347             ),
    348 
    349             'returns value where `size` is `null`'       => array(
    350                 'font_size_preset'            => array(
    351                     'size' => null,
    352                 ),
    353                 'should_use_fluid_typography' => false,
    354                 'expected_output'             => null,
    355             ),
    356 
    357             'returns value when fluid is `false`'        => array(
    358                 'font_size_preset'            => array(
    359                     'size'  => '28px',
    360                     'fluid' => false,
    361                 ),
    362                 'should_use_fluid_typography' => true,
    363                 'expected_output'             => '28px',
    364             ),
    365 
    366             'returns already clamped value'              => array(
    367                 'font_size_preset'            => array(
    368                     'size'  => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
    369                     'fluid' => false,
    370                 ),
    371                 'should_use_fluid_typography' => true,
    372                 'expected_output'             => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
    373             ),
    374 
    375             'returns value with unsupported unit'        => array(
    376                 'font_size_preset'            => array(
    377                     'size'  => '1000%',
    378                     'fluid' => false,
    379                 ),
    380                 'should_use_fluid_typography' => true,
    381                 'expected_output'             => '1000%',
    382             ),
    383 
    384             'returns clamp value with rem min and max units' => array(
    385                 'font_size_preset'            => array(
    386                     'size' => '1.75rem',
    387                 ),
    388                 'should_use_fluid_typography' => true,
    389                 'expected_output'             => 'clamp(1.119rem, 1.119rem + ((1vw - 0.2rem) * 0.789), 1.75rem)',
    390             ),
    391 
    392             'returns clamp value with em min and max units' => array(
     820            'returns clamp value when fluid typography is activated' => array(
    393821                'font_size'                   => array(
    394                     'size' => '1.75em',
    395                 ),
    396                 'should_use_fluid_typography' => true,
    397                 'expected_output'             => 'clamp(1.119em, 1.119rem + ((1vw - 0.2em) * 0.789), 1.75em)',
    398             ),
    399 
    400             'returns clamp value for floats'             => array(
    401                 'font_size'                   => array(
    402                     'size' => '70.175px',
    403                 ),
    404                 'should_use_fluid_typography' => true,
    405                 'expected_output'             => 'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)',
    406             ),
    407 
    408             'coerces integer to `px` and returns clamp value' => array(
    409                 'font_size_preset'            => array(
    410                     'size' => 33,
    411                 ),
    412                 'should_use_fluid_typography' => true,
    413                 'expected_output'             => 'clamp(20.515px, 1.282rem + ((1vw - 3.2px) * 0.975), 33px)',
    414             ),
    415 
    416             'coerces float to `px` and returns clamp value' => array(
    417                 'font_size_preset'            => array(
    418                     'size' => 70.175,
    419                 ),
    420                 'should_use_fluid_typography' => true,
    421                 'expected_output'             => 'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)',
    422             ),
    423 
    424             'returns clamp value when `fluid` is empty array' => array(
    425                 'font_size_preset'            => array(
    426                     'size'  => '28px',
    427                     'fluid' => array(),
     822                    'size' => '28px',
    428823                ),
    429824                'should_use_fluid_typography' => true,
    430825                'expected_output'             => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
    431826            ),
    432 
    433             'returns clamp value when `fluid` is `null`' => array(
    434                 'font_size_preset'            => array(
    435                     'size'  => '28px',
    436                     'fluid' => null,
    437                 ),
    438                 'should_use_fluid_typography' => true,
    439                 'expected_output'             => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
    440             ),
    441 
    442             'returns clamp value where min and max fluid values defined' => array(
    443                 'font_size'                   => array(
    444                     'size'  => '80px',
    445                     'fluid' => array(
    446                         'min' => '70px',
    447                         'max' => '125px',
    448                     ),
    449                 ),
    450                 'should_use_fluid_typography' => true,
    451                 'expected_output'             => 'clamp(70px, 4.375rem + ((1vw - 3.2px) * 4.297), 125px)',
    452             ),
    453 
    454             'returns clamp value where max is equal to size' => array(
    455                 'font_size'                   => array(
    456                     'size'  => '7.8125rem',
    457                     'fluid' => array(
    458                         'min' => '4.375rem',
    459                         'max' => '7.8125rem',
    460                     ),
    461                 ),
    462                 'should_use_fluid_typography' => true,
    463                 'expected_output'             => 'clamp(4.375rem, 4.375rem + ((1vw - 0.2rem) * 4.298), 7.8125rem)',
    464             ),
    465 
    466             'returns clamp value if min font size is greater than max' => array(
    467                 'font_size_preset'            => array(
    468                     'size'  => '3rem',
    469                     'fluid' => array(
    470                         'min' => '5rem',
    471                         'max' => '32px',
    472                     ),
    473                 ),
    474                 'should_use_fluid_typography' => true,
    475                 'expected_output'             => 'clamp(5rem, 5rem + ((1vw - 0.2rem) * -3.75), 32px)',
    476             ),
    477 
    478             'returns value with invalid min/max fluid units' => array(
    479                 'font_size_preset'            => array(
    480                     'size'  => '10em',
    481                     'fluid' => array(
    482                         'min' => '20vw',
    483                         'max' => '50%',
    484                     ),
    485                 ),
    486                 'should_use_fluid_typography' => true,
    487                 'expected_output'             => '10em',
    488             ),
    489 
    490             'returns value when size is < lower bounds and no fluid min/max set' => array(
    491                 'font_size_preset'            => array(
    492                     'size' => '3px',
    493                 ),
    494                 'should_use_fluid_typography' => true,
    495                 'expected_output'             => '3px',
    496             ),
    497 
    498             'returns value when size is equal to lower bounds and no fluid min/max set' => array(
    499                 'font_size'                   => array(
    500                     'size' => '14px',
    501                 ),
    502                 'should_use_fluid_typography' => true,
    503                 'expected_output'             => '14px',
    504             ),
    505 
    506             'returns clamp value with different min max units' => array(
    507                 'font_size_preset'            => array(
    508                     'size'  => '28px',
    509                     'fluid' => array(
    510                         'min' => '20px',
    511                         'max' => '50rem',
    512                     ),
    513                 ),
    514                 'should_use_fluid_typography' => true,
    515                 'expected_output'             => 'clamp(20px, 1.25rem + ((1vw - 3.2px) * 60.938), 50rem)',
    516             ),
    517 
    518             'returns clamp value where no fluid max size is set' => array(
    519                 'font_size_preset'            => array(
    520                     'size'  => '50px',
    521                     'fluid' => array(
    522                         'min' => '2.6rem',
    523                     ),
    524                 ),
    525                 'should_use_fluid_typography' => true,
    526                 'expected_output'             => 'clamp(2.6rem, 2.6rem + ((1vw - 0.2rem) * 0.656), 50px)',
    527             ),
    528 
    529             'returns clamp value where no fluid min size is set' => array(
    530                 'font_size_preset'            => array(
    531                     'size'  => '28px',
    532                     'fluid' => array(
    533                         'max' => '80px',
    534                     ),
    535                 ),
    536                 'should_use_fluid_typography' => true,
    537                 'expected_output'             => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 4.851), 80px)',
    538             ),
    539 
    540             'should not apply lower bound test when fluid values are set' => array(
    541                 'font_size_preset'            => array(
    542                     'size'  => '1.5rem',
    543                     'fluid' => array(
    544                         'min' => '0.5rem',
    545                         'max' => '5rem',
    546                     ),
    547                 ),
    548                 'should_use_fluid_typography' => true,
    549                 'expected_output'             => 'clamp(0.5rem, 0.5rem + ((1vw - 0.2rem) * 5.625), 5rem)',
    550             ),
    551 
    552             'should not apply lower bound test when only fluid min is set' => array(
    553                 'font_size'                   => array(
    554                     'size'  => '20px',
    555                     'fluid' => array(
    556                         'min' => '12px',
    557                     ),
    558                 ),
    559                 'should_use_fluid_typography' => true,
    560                 'expected_output'             => 'clamp(12px, 0.75rem + ((1vw - 3.2px) * 0.625), 20px)',
    561             ),
    562 
    563             'should not apply lower bound test when only fluid max is set' => array(
    564                 'font_size'                   => array(
    565                     'size'  => '0.875rem',
    566                     'fluid' => array(
    567                         'max' => '20rem',
    568                     ),
    569                 ),
    570                 'should_use_fluid_typography' => true,
    571                 'expected_output'             => 'clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 23.906), 20rem)',
    572             ),
    573 
    574             'returns clamp value when min and max font sizes are equal' => array(
    575                 'font_size_preset'            => array(
    576                     'size'  => '4rem',
    577                     'fluid' => array(
    578                         'min' => '30px',
    579                         'max' => '30px',
    580                     ),
    581                 ),
    582                 'should_use_fluid_typography' => true,
    583                 'expected_output'             => 'clamp(30px, 1.875rem + ((1vw - 3.2px) * 1), 30px)',
    584             ),
    585 
    586             'should apply scaled min font size for em values when custom min font size is not set' => array(
    587                 'font_size'                   => array(
    588                     'size' => '12rem',
    589                 ),
    590                 'should_use_fluid_typography' => true,
    591                 'expected_output'             => 'clamp(5.174rem, 5.174rem + ((1vw - 0.2rem) * 8.533), 12rem)',
    592             ),
    593 
    594             'should apply scaled min font size for px values when custom min font size is not set' => array(
    595                 'font_size'                   => array(
    596                     'size' => '200px',
    597                 ),
    598                 'should_use_fluid_typography' => true,
    599                 'expected_output'             => 'clamp(85.342px, 5.334rem + ((1vw - 3.2px) * 8.958), 200px)',
    600             ),
    601 
    602             'should not apply scaled min font size for minimum font size when custom min font size is set' => array(
    603                 'font_size'                   => array(
    604                     'size'  => '200px',
    605                     'fluid' => array(
    606                         'min' => '100px',
    607                     ),
    608                 ),
    609                 'should_use_fluid_typography' => true,
    610                 'expected_output'             => 'clamp(100px, 6.25rem + ((1vw - 3.2px) * 7.813), 200px)',
     827        );
     828    }
     829
     830    /**
     831     * Tests that theme json settings passed to wp_get_typography_font_size_value
     832     * override global theme settings.
     833     *
     834     * @ticket 61118
     835     *
     836     * @covers ::wp_get_typography_font_size_value
     837     *
     838     * @dataProvider data_generate_should_override_theme_settings_fixtures
     839     *
     840     * @param array  $font_size                     {
     841     *     Required. A font size as represented in the fontSizes preset format as seen in theme.json.
     842     *
     843     *     @type string $name Name of the font size preset.
     844     *     @type string $slug Kebab-case unique identifier for the font size preset.
     845     *     @type string $size CSS font-size value, including units where applicable.
     846     * }
     847     * @param bool   $settings        Theme JSON settings array that overrides any global theme settings.
     848     * @param string $expected_output Expected output of wp_get_typography_font_size_value().
     849     */
     850    public function test_should_override_theme_settings( $font_size, $settings, $expected_output ) {
     851        switch_theme( 'block-theme-child-with-fluid-typography' );
     852        $actual = wp_get_typography_font_size_value( $font_size, $settings );
     853
     854        $this->assertSame( $expected_output, $actual );
     855    }
     856
     857    /**
     858     * Data provider for test_wp_get_typography_font_size_value_should_use_fluid_typography_deprecated.
     859     *
     860     * @return array
     861     */
     862    public function data_generate_should_override_theme_settings_fixtures() {
     863        return array(
     864            'returns clamp value when theme activates fluid typography' => array(
     865                'font_size'       => array(
     866                    'size' => '28px',
     867                ),
     868                'settings'        => null,
     869                'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
     870            ),
     871            'returns value when settings argument deactivates fluid typography' => array(
     872                'font_size'       => array(
     873                    'size' => '28px',
     874                ),
     875                'settings'        => array(
     876                    'typography' => array(
     877                        'fluid' => false,
     878                    ),
     879                ),
     880                'expected_output' => '28px',
     881            ),
     882
     883            'returns clamp value when settings argument sets a fluid.minViewportWidth value' => array(
     884                'font_size'       => array(
     885                    'size' => '28px',
     886                ),
     887                'settings'        => array(
     888                    'typography' => array(
     889                        'fluid' => array(
     890                            'minViewportWidth' => '500px',
     891                        ),
     892                    ),
     893                ),
     894                'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 5px) * 0.918), 28px)',
     895            ),
     896
     897            'returns clamp value when settings argument sets a layout.wideSize value' => array(
     898                'font_size'       => array(
     899                    'size' => '28px',
     900                ),
     901                'settings'        => array(
     902                    'layout' => array(
     903                        'wideSize' => '500px',
     904                    ),
     905                ),
     906                'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 5.608), 28px)',
     907            ),
     908
     909            'returns clamp value with maxViewportWidth preferred over fallback layout.wideSize value' => array(
     910                'font_size'       => array(
     911                    'size' => '28px',
     912                ),
     913                'settings'        => array(
     914                    'typography' => array(
     915                        'fluid' => array(
     916                            'maxViewportWidth' => '1000px',
     917                        ),
     918                    ),
     919                    'layout'     => array(
     920                        'wideSize' => '500px',
     921                    ),
     922                ),
     923                'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 1.485), 28px)',
    611924            ),
    612925        );
  • trunk/tests/phpunit/tests/theme/wpThemeJson.php

    r58123 r58171  
    14181418    }
    14191419
     1420    /*
     1421     *  Tests that settings passed to WP_Theme_JSON override merged theme data.
     1422     *
     1423     * @ticket 61118
     1424     */
     1425    public function test_get_stylesheet_generates_fluid_typography_values() {
     1426        register_block_type(
     1427            'test/clamp-me',
     1428            array(
     1429                'api_version' => 3,
     1430            )
     1431        );
     1432        $theme_json = new WP_Theme_JSON(
     1433            array(
     1434                'version'  => WP_Theme_JSON::LATEST_SCHEMA,
     1435                'settings' => array(
     1436                    'typography' => array(
     1437                        'fluid'     => true,
     1438                        'fontSizes' => array(
     1439                            array(
     1440                                'size' => '16px',
     1441                                'slug' => 'pickles',
     1442                                'name' => 'Pickles',
     1443                            ),
     1444                            array(
     1445                                'size' => '22px',
     1446                                'slug' => 'toast',
     1447                                'name' => 'Toast',
     1448                            ),
     1449                        ),
     1450                    ),
     1451                ),
     1452                'styles'   => array(
     1453                    'typography' => array(
     1454                        'fontSize' => '1em',
     1455                    ),
     1456                    'elements'   => array(
     1457                        'h1' => array(
     1458                            'typography' => array(
     1459                                'fontSize' => '100px',
     1460                            ),
     1461                        ),
     1462                    ),
     1463                    'blocks'     => array(
     1464                        'test/clamp-me' => array(
     1465                            'typography' => array(
     1466                                'fontSize' => '48px',
     1467                            ),
     1468                        ),
     1469                    ),
     1470                ),
     1471            ),
     1472            'default'
     1473        );
     1474
     1475        unregister_block_type( 'test/clamp-me' );
     1476
     1477        // Results also include root site blocks styles.
     1478        $this->assertSame(
     1479            'body{--wp--preset--font-size--pickles: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.156), 16px);--wp--preset--font-size--toast: clamp(14.642px, 0.915rem + ((1vw - 3.2px) * 0.575), 22px);}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}body{font-size: clamp(0.875em, 0.875rem + ((1vw - 0.2em) * 0.156), 1em);}h1{font-size: clamp(50.171px, 3.136rem + ((1vw - 3.2px) * 3.893), 100px);}.wp-block-test-clamp-me{font-size: clamp(27.894px, 1.743rem + ((1vw - 3.2px) * 1.571), 48px);}.has-pickles-font-size{font-size: var(--wp--preset--font-size--pickles) !important;}.has-toast-font-size{font-size: var(--wp--preset--font-size--toast) !important;}',
     1480            $theme_json->get_stylesheet()
     1481        );
     1482    }
     1483
    14201484    public function test_allow_indirect_properties() {
    14211485        $actual = WP_Theme_JSON::remove_insecure_properties(
Note: See TracChangeset for help on using the changeset viewer.