WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
10/11/2022 06:42:20 PM (3 years ago)
Author:
davidbaumwald
Message:

Editor: Merge latest fluid typography bugfixes for 6.1 Release Candidate 1.

Merges the following:

Follow-up to [54280].

Props andrewserong, isabel_brison, ramonopoly.
See #56467.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/tests/phpunit/tests/block-supports/typography.php

    r54260 r54497  
    99    private $test_block_name;
    1010
     11    /**
     12     * Stores the current test theme root.
     13     *
     14     * @var string|null
     15     */
     16    private $theme_root;
     17
     18    /**
     19     * Caches the original theme directory global value in order
     20     * to restore it in tear_down().
     21     *
     22     * @var string|null
     23     */
     24    private $orig_theme_dir;
     25
    1126    function set_up() {
    1227        parent::set_up();
     28
    1329        $this->test_block_name = null;
     30
     31        // Sets up the `wp-content/themes/` directory to ensure consistency when running tests.
     32        $this->theme_root                = realpath( DIR_TESTDATA . '/themedir1' );
     33        $this->orig_theme_dir            = $GLOBALS['wp_theme_directories'];
     34        $GLOBALS['wp_theme_directories'] = array( WP_CONTENT_DIR . '/themes', $this->theme_root );
     35
     36        $theme_root_callback = function () {
     37            return $this->theme_root;
     38        };
     39        add_filter( 'theme_root', $theme_root_callback );
     40        add_filter( 'stylesheet_root', $theme_root_callback );
     41        add_filter( 'template_root', $theme_root_callback );
     42
     43        // Clear caches.
     44        wp_clean_themes_cache();
     45        unset( $GLOBALS['wp_themes'] );
    1446    }
    1547
    … …  
    1850     */
    1951    function tear_down() {
     52        // Restores the original theme directory setup.
     53        $GLOBALS['wp_theme_directories'] = $this->orig_theme_dir;
     54        wp_clean_themes_cache();
     55        unset( $GLOBALS['wp_themes'] );
     56
     57        // Resets test block name.
    2058        unregister_block_type( $this->test_block_name );
    2159        $this->test_block_name = null;
     60
    2261        parent::tear_down();
    2362    }
    … …  
    290329            ),
    291330
     331            'size: int 0'                                 => array(
     332                'font_size_preset'            => array(
     333                    'size' => 0,
     334                ),
     335                'should_use_fluid_typography' => true,
     336                'expected_output'             => 0,
     337            ),
     338
     339            'size: string 0'                              => array(
     340                'font_size_preset'            => array(
     341                    'size' => '0',
     342                ),
     343                'should_use_fluid_typography' => true,
     344                'expected_output'             => '0',
     345            ),
     346
     347            'default_return_value_when_size_is_undefined' => array(
     348                'font_size_preset'            => array(
     349                    'size' => null,
     350                ),
     351                'should_use_fluid_typography' => false,
     352                'expected_output'             => null,
     353            ),
     354
    292355            'default_return_value_when_fluid_is_false'    => array(
    293356                'font_size_preset'            => array(
    … …  
    299362            ),
    300363
     364            'default_return_value_when_value_is_already_clamped' => array(
     365                'font_size_preset'            => array(
     366                    'size'  => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
     367                    'fluid' => false,
     368                ),
     369                'should_use_fluid_typography' => true,
     370                'expected_output'             => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
     371            ),
     372
     373            'default_return_value_with_unsupported_unit'  => array(
     374                'font_size_preset'            => array(
     375                    'size'  => '1000%',
     376                    'fluid' => false,
     377                ),
     378                'should_use_fluid_typography' => true,
     379                'expected_output'             => '1000%',
     380            ),
     381
    301382            'return_fluid_value'                          => array(
    302383                'font_size_preset'            => array(
    … …  
    305386                'should_use_fluid_typography' => true,
    306387                'expected_output'             => 'clamp(1.3125rem, 1.3125rem + ((1vw - 0.48rem) * 2.524), 2.625rem)',
     388            ),
     389
     390            'return_fluid_value_with_floats_with_units'   => array(
     391                'font_size_preset'            => array(
     392                    'size' => '100.175px',
     393                ),
     394                'should_use_fluid_typography' => true,
     395                'expected_output'             => 'clamp(75.13125px, 4.695703125rem + ((1vw - 7.68px) * 9.03), 150.2625px)',
     396            ),
     397
     398            'return_fluid_value_with_integer_coerced_to_px' => array(
     399                'font_size_preset'            => array(
     400                    'size' => 33,
     401                ),
     402                'should_use_fluid_typography' => true,
     403                'expected_output'             => 'clamp(24.75px, 1.546875rem + ((1vw - 7.68px) * 2.975), 49.5px)',
     404            ),
     405
     406            'return_fluid_value_with_float_coerced_to_px' => array(
     407                'font_size_preset'            => array(
     408                    'size' => 100.23,
     409                ),
     410                'should_use_fluid_typography' => true,
     411                'expected_output'             => 'clamp(75.1725px, 4.69828125rem + ((1vw - 7.68px) * 9.035), 150.345px)',
    307412            ),
    308413
    … …  
    372477        );
    373478    }
     479
     480    /**
     481     * Tests that custom font sizes are converted to fluid values
     482     * in inline block supports styles
     483     * when "settings.typography.fluid" is set to true.
     484     *
     485     * @ticket 56467
     486     *
     487     * @covers ::wp_register_typography_support
     488     *
     489     * @dataProvider data_generate_block_supports_font_size_fixtures
     490     *
     491     * @param string $font_size_value             The block supports custom font size value.
     492     * @param bool   $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
     493     * @param string $expected_output             Expected value of style property from wp_apply_typography_support().
     494     */
     495    public function test_should_covert_font_sizes_to_fluid_values( $font_size_value, $should_use_fluid_typography, $expected_output ) {
     496        if ( $should_use_fluid_typography ) {
     497            switch_theme( 'block-theme-child-with-fluid-typography' );
     498        } else {
     499            switch_theme( 'default' );
     500        }
     501
     502        $this->test_block_name = 'test/font-size-fluid-value';
     503        register_block_type(
     504            $this->test_block_name,
     505            array(
     506                'api_version' => 2,
     507                'attributes'  => array(
     508                    'style' => array(
     509                        'type' => 'object',
     510                    ),
     511                ),
     512                'supports'    => array(
     513                    'typography' => array(
     514                        'fontSize' => true,
     515                    ),
     516                ),
     517            )
     518        );
     519        $registry         = WP_Block_Type_Registry::get_instance();
     520        $block_type       = $registry->get_registered( $this->test_block_name );
     521        $block_attributes = array(
     522            'style' => array(
     523                'typography' => array(
     524                    'fontSize' => $font_size_value,
     525                ),
     526            ),
     527        );
     528
     529        $actual   = wp_apply_typography_support( $block_type, $block_attributes );
     530        $expected = array( 'style' => $expected_output );
     531
     532        $this->assertSame( $expected, $actual );
     533    }
     534
     535    /**
     536     * Data provider for test_should_covert_font_sizes_to_fluid_values().
     537     *
     538     * @return array
     539     */
     540    public function data_generate_block_supports_font_size_fixtures() {
     541        return array(
     542            'default_return_value'               => array(
     543                'font_size_value'             => '50px',
     544                'should_use_fluid_typography' => false,
     545                'expected_output'             => 'font-size:50px;',
     546            ),
     547            'return_value_with_fluid_typography' => array(
     548                'font_size_value'             => '50px',
     549                'should_use_fluid_typography' => true,
     550                'expected_output'             => 'font-size:clamp(37.5px, 2.34375rem + ((1vw - 7.68px) * 4.507), 75px);',
     551            ),
     552        );
     553    }
     554
     555    /**
     556     * Tests that a block element's custom font size in the inline style attribute
     557     * is replaced with a fluid value when "settings.typography.fluid" is set to true,
     558     * and the correct block content is generated.
     559     *
     560     * @ticket 56467
     561     *
     562     * @dataProvider data_generate_replace_inline_font_styles_with_fluid_values_fixtures
     563     *
     564     * @param string $block_content               HTML block content.
     565     * @param string $font_size_value             The block supports custom font size value.
     566     * @param bool   $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
     567     * @param string $expected_output             Expected value of style property from wp_apply_typography_support().
     568     */
     569    public function test_should_replace_inline_font_styles_with_fluid_values( $block_content, $font_size_value, $should_use_fluid_typography, $expected_output ) {
     570        if ( $should_use_fluid_typography ) {
     571            switch_theme( 'block-theme-child-with-fluid-typography' );
     572        } else {
     573            switch_theme( 'default' );
     574        }
     575
     576        $block  = array(
     577            'blockName' => 'core/image',
     578            'attrs'     => array(
     579                'style' => array(
     580                    'typography' => array(
     581                        'fontSize' => $font_size_value,
     582                    ),
     583                ),
     584            ),
     585        );
     586        $actual = wp_render_typography_support( $block_content, $block );
     587
     588        $this->assertSame( $expected_output, $actual );
     589    }
     590
     591    /**
     592     * Data provider for test_should_replace_inline_font_styles_with_fluid_values().
     593     *
     594     * @return array
     595     */
     596    public function data_generate_replace_inline_font_styles_with_fluid_values_fixtures() {
     597        return array(
     598            'default_return_content'                       => array(
     599                'block_content'               => '<h2 class="has-vivid-red-background-color has-background has-link-color" style="margin-top:var(--wp--preset--spacing--60);font-size:4rem;font-style:normal;font-weight:600;letter-spacing:29px;text-decoration:underline;text-transform:capitalize">This is a heading</h2>',
     600                'font_size_value'             => '4rem',
     601                'should_use_fluid_typography' => false,
     602                'expected_output'             => '<h2 class="has-vivid-red-background-color has-background has-link-color" style="margin-top:var(--wp--preset--spacing--60);font-size:4rem;font-style:normal;font-weight:600;letter-spacing:29px;text-decoration:underline;text-transform:capitalize">This is a heading</h2>',
     603            ),
     604            'return_content_with_replaced_fluid_font_size_inline_style' => array(
     605                'block_content'               => '<h2 class="has-vivid-red-background-color has-background has-link-color" style="margin-top:var(--wp--preset--spacing--60);font-size:4rem;font-style:normal;font-weight:600;letter-spacing:29px;text-decoration:underline;text-transform:capitalize">This is a heading</h2>',
     606                'font_size_value'             => '4rem',
     607                'should_use_fluid_typography' => true,
     608                '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) * 5.769), 6rem);font-style:normal;font-weight:600;letter-spacing:29px;text-decoration:underline;text-transform:capitalize">This is a heading</h2>',
     609            ),
     610            'return_content_if_no_inline_font_size_found'  => array(
     611                'block_content'               => '<p class="has-medium-font-size" style="font-style:normal;font-weight:600;letter-spacing:29px;">A paragraph inside a group</p>',
     612                'font_size_value'             => '20px',
     613                'should_use_fluid_typography' => true,
     614                'expected_output'             => '<p class="has-medium-font-size" style="font-style:normal;font-weight:600;letter-spacing:29px;">A paragraph inside a group</p>',
     615            ),
     616            'return_content_css_var'                       => array(
     617                'block_content'               => '<p class="has-medium-font-size" style="font-size:var(--wp--preset--font-size--x-large);">A paragraph inside a group</p>',
     618                'font_size_value'             => 'var:preset|font-size|x-large',
     619                'should_use_fluid_typography' => true,
     620                'expected_output'             => '<p class="has-medium-font-size" style="font-size:var(--wp--preset--font-size--x-large);">A paragraph inside a group</p>',
     621            ),
     622            'return_content_with_spaces'                   => array(
     623                'block_content'               => '<p class="has-medium-font-size" style="    font-size:   20px   ;    ">A paragraph inside a group</p>',
     624                'font_size_value'             => '20px',
     625                'should_use_fluid_typography' => true,
     626                'expected_output'             => '<p class="has-medium-font-size" style="    font-size:clamp(15px, 0.9375rem + ((1vw - 7.68px) * 1.803), 30px);    ">A paragraph inside a group</p>',
     627            ),
     628            'return_content_with_first_match_replace_only' => array(
     629                'block_content'               => "<div class=\"wp-block-group\" style=\"font-size:1em\"> \n \n<p style=\"font-size:1em\">A paragraph inside a group</p></div>",
     630                'font_size_value'             => '1em',
     631                'should_use_fluid_typography' => true,
     632                'expected_output'             => "<div class=\"wp-block-group\" style=\"font-size:clamp(0.75em, 0.75em + ((1vw - 0.48em) * 1.442), 1.5em);\"> \n \n<p style=\"font-size:1em\">A paragraph inside a group</p></div>",
     633            ),
     634        );
     635    }
     636
     637    /**
     638     * Tests that valid font size values are parsed.
     639     *
     640     * @ticket 56467
     641     *
     642     * @covers ::wp_get_typography_value_and_unit
     643     *
     644     * @dataProvider data_valid_size_wp_get_typography_value_and_unit
     645     *
     646     * @param mixed $raw_value Raw size value to test.
     647     * @param mixed $expected  An expected return value.
     648     */
     649    public function test_valid_size_wp_get_typography_value_and_unit( $raw_value, $expected ) {
     650        $this->assertEquals( $expected, wp_get_typography_value_and_unit( $raw_value ) );
     651    }
     652
     653    /**
     654     * Data provider for test_valid_size_wp_get_typography_value_and_unit().
     655     *
     656     * @return array
     657     */
     658    public function data_valid_size_wp_get_typography_value_and_unit() {
     659        return array(
     660            'size: 10vh with default units do not match' => array(
     661                'raw_value' => '10vh',
     662                'expected'  => null,
     663            ),
     664            'size: calc() values do not match'           => array(
     665                'raw_value' => 'calc(2 * 10px)',
     666                'expected'  => null,
     667            ),
     668            'size: clamp() values do not match'          => array(
     669                'raw_value' => 'clamp(15px, 0.9375rem + ((1vw - 7.68px) * 5.409), 60px)',
     670                'expected'  => null,
     671            ),
     672            'size: `"10"`'                               => array(
     673                'raw_value' => '10',
     674                'expected'  => array(
     675                    'value' => 10,
     676                    'unit'  => 'px',
     677                ),
     678            ),
     679            'size: `11`'                                 => array(
     680                'raw_value' => 11,
     681                'expected'  => array(
     682                    'value' => 11,
     683                    'unit'  => 'px',
     684                ),
     685            ),
     686            'size: `11.234`'                             => array(
     687                'raw_value' => '11.234',
     688                'expected'  => array(
     689                    'value' => 11.234,
     690                    'unit'  => 'px',
     691                ),
     692            ),
     693            'size: `"12rem"`'                            => array(
     694                'raw_value' => '12rem',
     695                'expected'  => array(
     696                    'value' => 12,
     697                    'unit'  => 'rem',
     698                ),
     699            ),
     700            'size: `"12px"`'                             => array(
     701                'raw_value' => '12px',
     702                'expected'  => array(
     703                    'value' => 12,
     704                    'unit'  => 'px',
     705                ),
     706            ),
     707            'size: `"12em"`'                             => array(
     708                'raw_value' => '12em',
     709                'expected'  => array(
     710                    'value' => 12,
     711                    'unit'  => 'em',
     712                ),
     713            ),
     714            'size: `"12.74em"`'                          => array(
     715                'raw_value' => '12.74em',
     716                'expected'  => array(
     717                    'value' => 12.74,
     718                    'unit'  => 'em',
     719                ),
     720            ),
     721        );
     722    }
     723
     724    /**
     725     * Tests that invalid font size values are not parsed and trigger incorrect usage.
     726     *
     727     * @ticket 56467
     728     *
     729     * @covers ::wp_get_typography_value_and_unit
     730     *
     731     * @dataProvider data_invalid_size_wp_get_typography_value_and_unit
     732     * @expectedIncorrectUsage wp_get_typography_value_and_unit
     733     *
     734     * @param mixed $raw_value Raw size value to test.
     735     */
     736    public function test_invalid_size_wp_get_typography_value_and_unit( $raw_value ) {
     737        $this->assertNull( wp_get_typography_value_and_unit( $raw_value ) );
     738    }
     739
     740    /**
     741     * Data provider for test_invalid_size_wp_get_typography_value_and_unit().
     742     *
     743     * @return array
     744     */
     745    public function data_invalid_size_wp_get_typography_value_and_unit() {
     746        return array(
     747            'size: null'  => array( null ),
     748            'size: false' => array( false ),
     749            'size: true'  => array( true ),
     750            'size: array' => array( array( '10' ) ),
     751        );
     752    }
    374753}
Note: See TracChangeset for help on using the changeset viewer.