Make WordPress Core


Ignore:
Timestamp:
09/20/2022 03:41:44 PM (22 months ago)
Author:
hellofromTonya
Message:

Editor: Introduces fluid typography and uses Style Engine.

This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.

The motivation for fluid typography block supports:

"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.

Font sizes can smoothly scale between minimum and maximum viewport widths.

Typography changes introduced from Gutenberg:

  • Uses the Style Engine to generate the CSS and classnames in wp_apply_typography_support().
  • Introduces wp_typography_get_preset_inline_style_value() for backwards-compatibility.
  • Introduces a private internal function called wp_get_typography_value_and_unit(), for checking and getting typography unit and value.
  • Introduces a private internal function called wp_get_computed_fluid_typography_value(), for an internal implementation of CSS clamp().
  • Deprecates wp_typography_get_css_variable_inline_style().

References:

Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].

Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.

File:
1 edited

Legend:

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

    r53680 r54260  
    22/**
    33 * @group block-supports
    4  *
    5  * @covers ::wp_apply_typography_support
    64 */
    75class Tests_Block_Supports_Typography extends WP_UnitTestCase {
     
    1614    }
    1715
     16    /**
     17     * Unregisters block type after each test.
     18     */
    1819    function tear_down() {
    1920        unregister_block_type( $this->test_block_name );
    2021        $this->test_block_name = null;
    21         parent::set_up();
    22     }
    23 
    24     /**
     22        parent::tear_down();
     23    }
     24
     25    /**
     26     * Tests whether slugs with numbers are kebab cased.
     27     *
    2528     * @ticket 54337
    26      */
    27     function test_font_size_slug_with_numbers_is_kebab_cased_properly() {
     29     *
     30     * @covers ::wp_apply_typography_support
     31     */
     32    function test_should_kebab_case_font_size_slug_with_numbers() {
    2833        $this->test_block_name = 'test/font-size-slug-with-numbers';
    2934        register_block_type(
     
    5358        $this->assertSame( $expected, $actual );
    5459    }
    55     /**
     60
     61    /**
     62     * Tests legacy inline styles for font family.
     63     *
    5664     * @ticket 54337
    57      */
    58     function test_font_family_with_legacy_inline_styles_using_a_value() {
     65     *
     66     * @covers ::wp_apply_typography_support
     67     */
     68    function test_should_generate_font_family_with_legacy_inline_styles_using_a_value() {
    5969        $this->test_block_name = 'test/font-family-with-inline-styles-using-value';
    6070        register_block_type(
     
    7989
    8090        $actual   = wp_apply_typography_support( $block_type, $block_atts );
    81         $expected = array( 'style' => 'font-family: serif;' );
    82 
    83         $this->assertSame( $expected, $actual );
    84     }
    85 
    86     /**
     91        $expected = array( 'style' => 'font-family:serif;' );
     92
     93        $this->assertSame( $expected, $actual );
     94    }
     95
     96    /**
     97     * Tests skipping serialization.
     98     *
    8799     * @ticket 55505
    88      */
    89     function test_typography_with_skipped_serialization_block_supports() {
     100     *
     101     * @covers ::wp_apply_typography_support
     102     */
     103    function test_should_skip_serialization_for_typography_block_supports() {
    90104        $this->test_block_name = 'test/typography-with-skipped-serialization-block-supports';
    91105        register_block_type(
     
    129143
    130144    /**
     145     * Tests skipping serialization of individual block supports properties.
     146     *
    131147     * @ticket 55505
    132      */
    133     function test_letter_spacing_with_individual_skipped_serialization_block_supports() {
    134         $this->test_block_name = 'test/letter-spacing-with-individua-skipped-serialization-block-supports';
     148     *
     149     * @covers ::wp_apply_typography_support
     150     */
     151    function test_should_skip_serialization_for_letter_spacing_block_supports() {
     152        $this->test_block_name = 'test/letter-spacing-with-individual-skipped-serialization-block-supports';
    135153        register_block_type(
    136154            $this->test_block_name,
     
    161179        $this->assertSame( $expected, $actual );
    162180    }
    163     /**
     181
     182    /**
     183     * Tests legacy css var inline styles for font family.
     184     *
    164185     * @ticket 54337
    165      */
    166     function test_font_family_with_legacy_inline_styles_using_a_css_var() {
     186     *
     187     * @covers ::wp_apply_typography_support
     188     */
     189    function test_should_generate_css_var_for_font_family_with_legacy_inline_styles() {
    167190        $this->test_block_name = 'test/font-family-with-inline-styles-using-css-var';
    168191        register_block_type(
     
    187210
    188211        $actual   = wp_apply_typography_support( $block_type, $block_atts );
    189         $expected = array( 'style' => 'font-family: var(--wp--preset--font-family--h-1);' );
    190 
    191         $this->assertSame( $expected, $actual );
    192     }
    193     /**
     212        $expected = array( 'style' => 'font-family:var(--wp--preset--font-family--h-1);' );
     213
     214        $this->assertSame( $expected, $actual );
     215    }
     216
     217    /**
     218     * Tests that a classname is generated for font family.
     219     *
    194220     * @ticket 54337
    195      */
    196     function test_font_family_with_class() {
     221     *
     222     * @covers ::wp_apply_typography_support
     223     */
     224    function test_should_generate_classname_for_font_family() {
    197225        $this->test_block_name = 'test/font-family-with-class';
    198226        register_block_type(
     
    222250    }
    223251
     252    /**
     253     * Tests generating font size values, including fluid formulae, from fontSizes preset.
     254     *
     255     * @ticket 56467
     256     *
     257     * @covers ::wp_get_typography_font_size_value
     258     *
     259     * @dataProvider data_generate_font_size_preset_fixtures
     260     *
     261     * @param array  $font_size_preset            {
     262     *      Required. fontSizes preset value as seen in theme.json.
     263     *
     264     *     @type string $name Name of the font size preset.
     265     *     @type string $slug Kebab-case unique identifier for the font size preset.
     266     *     @type string $size CSS font-size value, including units where applicable.
     267     * }
     268     * @param bool   $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
     269     * @param string $expected_output             Expected output.
     270     */
     271    function test_wp_get_typography_font_size_value( $font_size_preset, $should_use_fluid_typography, $expected_output ) {
     272        $actual = wp_get_typography_font_size_value( $font_size_preset, $should_use_fluid_typography );
     273
     274        $this->assertSame( $expected_output, $actual );
     275    }
     276
     277    /**
     278     * Data provider.
     279     *
     280     * @return array
     281     */
     282    public function data_generate_font_size_preset_fixtures() {
     283        return array(
     284            'default_return_value'                        => array(
     285                'font_size_preset'            => array(
     286                    'size' => '28px',
     287                ),
     288                'should_use_fluid_typography' => false,
     289                'expected_output'             => '28px',
     290            ),
     291
     292            'default_return_value_when_fluid_is_false'    => array(
     293                'font_size_preset'            => array(
     294                    'size'  => '28px',
     295                    'fluid' => false,
     296                ),
     297                'should_use_fluid_typography' => true,
     298                'expected_output'             => '28px',
     299            ),
     300
     301            'return_fluid_value'                          => array(
     302                'font_size_preset'            => array(
     303                    'size' => '1.75rem',
     304                ),
     305                'should_use_fluid_typography' => true,
     306                'expected_output'             => 'clamp(1.3125rem, 1.3125rem + ((1vw - 0.48rem) * 2.524), 2.625rem)',
     307            ),
     308
     309            'return_default_fluid_values_with_empty_fluid_array' => array(
     310                'font_size_preset'            => array(
     311                    'size'  => '28px',
     312                    'fluid' => array(),
     313                ),
     314                'should_use_fluid_typography' => true,
     315                'expected_output'             => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
     316            ),
     317
     318            'return_default_fluid_values_with_null_value' => array(
     319                'font_size_preset'            => array(
     320                    'size'  => '28px',
     321                    'fluid' => null,
     322                ),
     323                'should_use_fluid_typography' => true,
     324                'expected_output'             => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
     325            ),
     326
     327            'return_size_with_invalid_fluid_units'        => array(
     328                'font_size_preset'            => array(
     329                    'size'  => '10em',
     330                    'fluid' => array(
     331                        'min' => '20vw',
     332                        'max' => '50%',
     333                    ),
     334                ),
     335                'should_use_fluid_typography' => true,
     336                'expected_output'             => '10em',
     337            ),
     338
     339            'return_fluid_clamp_value'                    => array(
     340                'font_size_preset'            => array(
     341                    'size'  => '28px',
     342                    'fluid' => array(
     343                        'min' => '20px',
     344                        'max' => '50rem',
     345                    ),
     346                ),
     347                'should_use_fluid_typography' => true,
     348                'expected_output'             => 'clamp(20px, 1.25rem + ((1vw - 7.68px) * 93.75), 50rem)',
     349            ),
     350
     351            'return_clamp_value_with_default_fluid_max_value' => array(
     352                'font_size_preset'            => array(
     353                    'size'  => '28px',
     354                    'fluid' => array(
     355                        'min' => '2.6rem',
     356                    ),
     357                ),
     358                'should_use_fluid_typography' => true,
     359                'expected_output'             => 'clamp(2.6rem, 2.6rem + ((1vw - 0.48rem) * 0.048), 42px)',
     360            ),
     361
     362            'default_return_clamp_value_with_default_fluid_min_value' => array(
     363                'font_size_preset'            => array(
     364                    'size'  => '28px',
     365                    'fluid' => array(
     366                        'max' => '80px',
     367                    ),
     368                ),
     369                'should_use_fluid_typography' => true,
     370                'expected_output'             => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 7.091), 80px)',
     371            ),
     372        );
     373    }
    224374}
Note: See TracChangeset for help on using the changeset viewer.