Make WordPress Core


Ignore:
Timestamp:
06/20/2023 07:58:03 AM (15 months ago)
Author:
isabel_brison
Message:

Editor: use logarithmic scale for fluid typography.

Introduces logarithmic scale factor to calculate a minimum font scale that tapers out as the font size increases.

Props ramonopoly.
Fixes #58523.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/tests/phpunit/tests/block-supports/typography.php

    r55946 r55947  
    294294     * @ticket 56467
    295295     * @ticket 57065
     296     * @ticket 58523
    296297     *
    297298     * @covers ::wp_get_typography_font_size_value
     
    386387                ),
    387388                'should_use_fluid_typography' => true,
    388                 'expected_output'             => 'clamp(1.313rem, 1.313rem + ((1vw - 0.48rem) * 0.84), 1.75rem)',
     389                'expected_output'             => 'clamp(1.119rem, 1.119rem + ((1vw - 0.2rem) * 0.789), 1.75rem)',
    389390            ),
    390391
     
    394395                ),
    395396                'should_use_fluid_typography' => true,
    396                 'expected_output'             => 'clamp(1.313em, 1.313rem + ((1vw - 0.48em) * 0.84), 1.75em)',
     397                'expected_output'             => 'clamp(1.119em, 1.119rem + ((1vw - 0.2em) * 0.789), 1.75em)',
    397398            ),
    398399
    399400            'returns clamp value for floats'             => array(
    400401                'font_size'                   => array(
    401                     'size' => '100.175px',
    402                 ),
    403                 'should_use_fluid_typography' => true,
    404                 'expected_output'             => 'clamp(75.131px, 4.696rem + ((1vw - 7.68px) * 3.01), 100.175px)',
     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)',
    405406            ),
    406407
     
    410411                ),
    411412                'should_use_fluid_typography' => true,
    412                 'expected_output'             => 'clamp(24.75px, 1.547rem + ((1vw - 7.68px) * 0.992), 33px)',
     413                'expected_output'             => 'clamp(20.515px, 1.282rem + ((1vw - 3.2px) * 0.975), 33px)',
    413414            ),
    414415
    415416            'coerces float to `px` and returns clamp value' => array(
    416417                'font_size_preset'            => array(
    417                     'size' => 100.23,
    418                 ),
    419                 'should_use_fluid_typography' => true,
    420                 'expected_output'             => 'clamp(75.173px, 4.698rem + ((1vw - 7.68px) * 3.012), 100.23px)',
     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)',
    421422            ),
    422423
     
    427428                ),
    428429                'should_use_fluid_typography' => true,
    429                 'expected_output'             => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 0.841), 28px)',
     430                'expected_output'             => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
    430431            ),
    431432
     
    436437                ),
    437438                'should_use_fluid_typography' => true,
    438                 'expected_output'             => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 0.841), 28px)',
     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)',
    439464            ),
    440465
     
    448473                ),
    449474                'should_use_fluid_typography' => true,
    450                 'expected_output'             => 'clamp(5rem, 5rem + ((1vw - 0.48rem) * -5.769), 32px)',
     475                'expected_output'             => 'clamp(5rem, 5rem + ((1vw - 0.2rem) * -3.75), 32px)',
    451476            ),
    452477
     
    488513                ),
    489514                'should_use_fluid_typography' => true,
    490                 'expected_output'             => 'clamp(20px, 1.25rem + ((1vw - 7.68px) * 93.75), 50rem)',
     515                'expected_output'             => 'clamp(20px, 1.25rem + ((1vw - 3.2px) * 60.938), 50rem)',
    491516            ),
    492517
    493518            'returns clamp value where no fluid max size is set' => array(
    494519                '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(
    495531                    'size'  => '28px',
    496532                    'fluid' => array(
    497                         'min' => '2.6rem',
    498                     ),
    499                 ),
    500                 'should_use_fluid_typography' => true,
    501                 'expected_output'             => 'clamp(2.6rem, 2.6rem + ((1vw - 0.48rem) * -1.635), 28px)',
    502             ),
    503 
    504             'returns clamp value where no fluid min size is set' => array(
    505                 'font_size_preset'            => array(
    506                     'size'  => '28px',
    507                     'fluid' => array(
    508533                        'max' => '80px',
    509534                    ),
    510535                ),
    511536                'should_use_fluid_typography' => true,
    512                 'expected_output'             => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 7.091), 80px)',
     537                'expected_output'             => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 4.851), 80px)',
    513538            ),
    514539
     
    522547                ),
    523548                'should_use_fluid_typography' => true,
    524                 'expected_output'             => 'clamp(0.5rem, 0.5rem + ((1vw - 0.48rem) * 8.654), 5rem)',
     549                'expected_output'             => 'clamp(0.5rem, 0.5rem + ((1vw - 0.2rem) * 5.625), 5rem)',
    525550            ),
    526551
     
    533558                ),
    534559                'should_use_fluid_typography' => true,
    535                 'expected_output'             => 'clamp(12px, 0.75rem + ((1vw - 7.68px) * 0.962), 20px)',
     560                'expected_output'             => 'clamp(12px, 0.75rem + ((1vw - 3.2px) * 0.625), 20px)',
    536561            ),
    537562
     
    544569                ),
    545570                'should_use_fluid_typography' => true,
    546                 'expected_output'             => 'clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 36.779), 20rem)',
     571                'expected_output'             => 'clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 23.906), 20rem)',
    547572            ),
    548573
     
    556581                ),
    557582                'should_use_fluid_typography' => true,
    558                 'expected_output'             => 'clamp(30px, 1.875rem + ((1vw - 7.68px) * 1), 30px)',
     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)',
    559611            ),
    560612        );
     
    570622     * @ticket 57529
    571623     * @ticket 58522
     624     * @ticket 58523
    572625     *
    573626     * @covers ::wp_register_typography_support
     
    630683                'font_size_value' => '15px',
    631684                'theme_slug'      => 'block-theme-child-with-fluid-typography',
    632                 'expected_output' => 'font-size:clamp(14px, 0.875rem + ((1vw - 7.68px) * 0.12), 15px);',
     685                'expected_output' => 'font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.078), 15px);',
    633686            ),
    634687            'returns value when font size <= default min font size bound' => array(
     
    640693                'font_size_value' => '17px',
    641694                'theme_slug'      => 'block-theme-child-with-fluid-typography-config',
    642                 'expected_output' => 'font-size:clamp(16px, 1rem + ((1vw - 7.68px) * 0.431), 17px);',
     695                'expected_output' => 'font-size:clamp(16px, 1rem + ((1vw - 3.2px) * 0.147), 17px);',
    643696            ),
    644697            'returns value when font size <= custom min font size bound' => array(
     
    657710     * @ticket 56467
    658711     * @ticket 57065
     712     * @ticket 58523
    659713     *
    660714     * @dataProvider data_generate_replace_inline_font_styles_with_fluid_values_fixtures
     
    704758                'font_size_value'             => '4rem',
    705759                'should_use_fluid_typography' => true,
    706                 'expected_output'             => '<h2 class="has-vivid-red-background-color has-background has-link-color" style="margin-top:var(--wp--preset--spacing--60);font-size:clamp(3rem, 3rem + ((1vw - 0.48rem) * 1.923), 4rem);font-style:normal;font-weight:600;letter-spacing:29px;text-decoration:underline;text-transform:capitalize">This is a heading</h2>',
     760                'expected_output'             => '<h2 class="has-vivid-red-background-color has-background has-link-color" style="margin-top:var(--wp--preset--spacing--60);font-size:clamp(2.2rem, 2.2rem + ((1vw - 0.2rem) * 2.25), 4rem);font-style:normal;font-weight:600;letter-spacing:29px;text-decoration:underline;text-transform:capitalize">This is a heading</h2>',
    707761            ),
    708762            'return_content_if_no_inline_font_size_found'  => array(
     
    722776                'font_size_value'             => '20px',
    723777                'should_use_fluid_typography' => true,
    724                 'expected_output'             => '<p class="has-medium-font-size" style="    font-size:clamp(15px, 0.938rem + ((1vw - 7.68px) * 0.601), 20px);    ">A paragraph inside a group</p>',
     778                'expected_output'             => '<p class="has-medium-font-size" style="    font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.469), 20px);    ">A paragraph inside a group</p>',
    725779            ),
    726780            'return_content_with_first_match_replace_only' => array(
     
    728782                'font_size_value'             => '1.5em',
    729783                'should_use_fluid_typography' => true,
    730                 'expected_output'             => "<div class=\"wp-block-group\" style=\"font-size:clamp(1.125em, 1.125rem + ((1vw - 0.48em) * 0.721), 1.5em);\"> \n \n<p style=\"font-size:1.5em\">A paragraph inside a group</p></div>",
     784                'expected_output'             => "<div class=\"wp-block-group\" style=\"font-size:clamp(0.984em, 0.984rem + ((1vw - 0.2em) * 0.645), 1.5em);\"> \n \n<p style=\"font-size:1.5em\">A paragraph inside a group</p></div>",
    731785            ),
    732786        );
Note: See TracChangeset for help on using the changeset viewer.