vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-08-11 12:20:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Merges the following:
* [https://github.com/WordPress/gutenberg/pull/44761 Gutenberg PR 44761] - Fluid Typography: Fix bug in global styles where fluid `clamp()` rules were not calculated for custom values
* [https://github.com/WordPress/gutenberg/pull/44762 Gutenberg PR 44762] - Fluid Typography: Convert server-side block support values
* [https://github.com/WordPress/gutenberg/pull/44764 Gutenberg PR 44764] - Fluid Typography: Convert font size inline style attributes to fluid values
* [https://github.com/WordPress/gutenberg/pull/44807 Gutenberg PR 44807] - Fluid Typography: Covert font size number values to pixels
* [https://github.com/WordPress/gutenberg/pull/44847 Gutenberg PR 44847] - Fluid Typography: ensure font sizes are strings or integers

Follow-up to [54280].

Props andrewserong, isabel_brison, ramonopoly.
See #56467.

git-svn-id: https://develop.svn.wordpress.org/trunk@54497 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
David Baumwald
2022-10-11 18:42:20 +00:00
parent aa11f4cef1
commit a874e5fe5e
5 changed files with 470 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/phpunit/tests/block-supports/typography.php
+379
View File
@@ -8,17 +8,56 @@ class Tests_Block_Supports_Typography extends WP_UnitTestCase {
*/
private $test_block_name;
/**
* Stores the current test theme root.
*
* @var string|null
*/
private $theme_root;
/**
* Caches the original theme directory global value in order
* to restore it in tear_down().
*
* @var string|null
*/
private $orig_theme_dir;
function set_up() {
parent::set_up();
$this->test_block_name = null;
// Sets up the `wp-content/themes/` directory to ensure consistency when running tests.
$this->theme_root = realpath( DIR_TESTDATA . '/themedir1' );
$this->orig_theme_dir = $GLOBALS['wp_theme_directories'];
$GLOBALS['wp_theme_directories'] = array( WP_CONTENT_DIR . '/themes', $this->theme_root );
$theme_root_callback = function () {
return $this->theme_root;
};
add_filter( 'theme_root', $theme_root_callback );
add_filter( 'stylesheet_root', $theme_root_callback );
add_filter( 'template_root', $theme_root_callback );
// Clear caches.
wp_clean_themes_cache();
unset( $GLOBALS['wp_themes'] );
}
/**
* Unregisters block type after each test.
*/
function tear_down() {
// Restores the original theme directory setup.
$GLOBALS['wp_theme_directories'] = $this->orig_theme_dir;
wp_clean_themes_cache();
unset( $GLOBALS['wp_themes'] );
// Resets test block name.
unregister_block_type( $this->test_block_name );
$this->test_block_name = null;
parent::tear_down();
}
@@ -289,6 +328,30 @@ class Tests_Block_Supports_Typography extends WP_UnitTestCase {
'expected_output' => '28px',
),
'size: int 0' => array(
'font_size_preset' => array(
'size' => 0,
),
'should_use_fluid_typography' => true,
'expected_output' => 0,
),
'size: string 0' => array(
'font_size_preset' => array(
'size' => '0',
),
'should_use_fluid_typography' => true,
'expected_output' => '0',
),
'default_return_value_when_size_is_undefined' => array(
'font_size_preset' => array(
'size' => null,
),
'should_use_fluid_typography' => false,
'expected_output' => null,
),
'default_return_value_when_fluid_is_false' => array(
'font_size_preset' => array(
'size' => '28px',
@@ -298,6 +361,24 @@ class Tests_Block_Supports_Typography extends WP_UnitTestCase {
'expected_output' => '28px',
),
'default_return_value_when_value_is_already_clamped' => array(
'font_size_preset' => array(
'size' => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
'fluid' => false,
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
),
'default_return_value_with_unsupported_unit' => array(
'font_size_preset' => array(
'size' => '1000%',
'fluid' => false,
),
'should_use_fluid_typography' => true,
'expected_output' => '1000%',
),
'return_fluid_value' => array(
'font_size_preset' => array(
'size' => '1.75rem',
@@ -306,6 +387,30 @@ class Tests_Block_Supports_Typography extends WP_UnitTestCase {
'expected_output' => 'clamp(1.3125rem, 1.3125rem + ((1vw - 0.48rem) * 2.524), 2.625rem)',
),
'return_fluid_value_with_floats_with_units' => array(
'font_size_preset' => array(
'size' => '100.175px',
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(75.13125px, 4.695703125rem + ((1vw - 7.68px) * 9.03), 150.2625px)',
),
'return_fluid_value_with_integer_coerced_to_px' => array(
'font_size_preset' => array(
'size' => 33,
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(24.75px, 1.546875rem + ((1vw - 7.68px) * 2.975), 49.5px)',
),
'return_fluid_value_with_float_coerced_to_px' => array(
'font_size_preset' => array(
'size' => 100.23,
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(75.1725px, 4.69828125rem + ((1vw - 7.68px) * 9.035), 150.345px)',
),
'return_default_fluid_values_with_empty_fluid_array' => array(
'font_size_preset' => array(
'size' => '28px',
@@ -371,4 +476,278 @@ class Tests_Block_Supports_Typography extends WP_UnitTestCase {
),
);
}
/**
* Tests that custom font sizes are converted to fluid values
* in inline block supports styles
* when "settings.typography.fluid" is set to true.
*
* @ticket 56467
*
* @covers ::wp_register_typography_support
*
* @dataProvider data_generate_block_supports_font_size_fixtures
*
* @param string $font_size_value The block supports custom font size value.
* @param bool $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
* @param string $expected_output Expected value of style property from wp_apply_typography_support().
*/
public function test_should_covert_font_sizes_to_fluid_values( $font_size_value, $should_use_fluid_typography, $expected_output ) {
if ( $should_use_fluid_typography ) {
switch_theme( 'block-theme-child-with-fluid-typography' );
} else {
switch_theme( 'default' );
}
$this->test_block_name = 'test/font-size-fluid-value';
register_block_type(
$this->test_block_name,
array(
'api_version' => 2,
'attributes' => array(
'style' => array(
'type' => 'object',
),
),
'supports' => array(
'typography' => array(
'fontSize' => true,
),
),
)
);
$registry = WP_Block_Type_Registry::get_instance();
$block_type = $registry->get_registered( $this->test_block_name );
$block_attributes = array(
'style' => array(
'typography' => array(
'fontSize' => $font_size_value,
),
),
);
$actual = wp_apply_typography_support( $block_type, $block_attributes );
$expected = array( 'style' => $expected_output );
$this->assertSame( $expected, $actual );
}
/**
* Data provider for test_should_covert_font_sizes_to_fluid_values().
*
* @return array
*/
public function data_generate_block_supports_font_size_fixtures() {
return array(
'default_return_value' => array(
'font_size_value' => '50px',
'should_use_fluid_typography' => false,
'expected_output' => 'font-size:50px;',
),
'return_value_with_fluid_typography' => array(
'font_size_value' => '50px',
'should_use_fluid_typography' => true,
'expected_output' => 'font-size:clamp(37.5px, 2.34375rem + ((1vw - 7.68px) * 4.507), 75px);',
),
);
}
/**
* Tests that a block element's custom font size in the inline style attribute
* is replaced with a fluid value when "settings.typography.fluid" is set to true,
* and the correct block content is generated.
*
* @ticket 56467
*
* @dataProvider data_generate_replace_inline_font_styles_with_fluid_values_fixtures
*
* @param string $block_content HTML block content.
* @param string $font_size_value The block supports custom font size value.
* @param bool $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
* @param string $expected_output Expected value of style property from wp_apply_typography_support().
*/
public function test_should_replace_inline_font_styles_with_fluid_values( $block_content, $font_size_value, $should_use_fluid_typography, $expected_output ) {
if ( $should_use_fluid_typography ) {
switch_theme( 'block-theme-child-with-fluid-typography' );
} else {
switch_theme( 'default' );
}
$block = array(
'blockName' => 'core/image',
'attrs' => array(
'style' => array(
'typography' => array(
'fontSize' => $font_size_value,
),
),
),
);
$actual = wp_render_typography_support( $block_content, $block );
$this->assertSame( $expected_output, $actual );
}
/**
* Data provider for test_should_replace_inline_font_styles_with_fluid_values().
*
* @return array
*/
public function data_generate_replace_inline_font_styles_with_fluid_values_fixtures() {
return array(
'default_return_content' => array(
'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>',
'font_size_value' => '4rem',
'should_use_fluid_typography' => false,
'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>',
),
'return_content_with_replaced_fluid_font_size_inline_style' => array(
'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>',
'font_size_value' => '4rem',
'should_use_fluid_typography' => true,
'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>',
),
'return_content_if_no_inline_font_size_found' => array(
'block_content' => '<p class="has-medium-font-size" style="font-style:normal;font-weight:600;letter-spacing:29px;">A paragraph inside a group</p>',
'font_size_value' => '20px',
'should_use_fluid_typography' => true,
'expected_output' => '<p class="has-medium-font-size" style="font-style:normal;font-weight:600;letter-spacing:29px;">A paragraph inside a group</p>',
),
'return_content_css_var' => array(
'block_content' => '<p class="has-medium-font-size" style="font-size:var(--wp--preset--font-size--x-large);">A paragraph inside a group</p>',
'font_size_value' => 'var:preset|font-size|x-large',
'should_use_fluid_typography' => true,
'expected_output' => '<p class="has-medium-font-size" style="font-size:var(--wp--preset--font-size--x-large);">A paragraph inside a group</p>',
),
'return_content_with_spaces' => array(
'block_content' => '<p class="has-medium-font-size" style=" font-size: 20px ; ">A paragraph inside a group</p>',
'font_size_value' => '20px',
'should_use_fluid_typography' => true,
'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>',
),
'return_content_with_first_match_replace_only' => array(
'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>",
'font_size_value' => '1em',
'should_use_fluid_typography' => true,
'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>",
),
);
}
/**
* Tests that valid font size values are parsed.
*
* @ticket 56467
*
* @covers ::wp_get_typography_value_and_unit
*
* @dataProvider data_valid_size_wp_get_typography_value_and_unit
*
* @param mixed $raw_value Raw size value to test.
* @param mixed $expected An expected return value.
*/
public function test_valid_size_wp_get_typography_value_and_unit( $raw_value, $expected ) {
$this->assertEquals( $expected, wp_get_typography_value_and_unit( $raw_value ) );
}
/**
* Data provider for test_valid_size_wp_get_typography_value_and_unit().
*
* @return array
*/
public function data_valid_size_wp_get_typography_value_and_unit() {
return array(
'size: 10vh with default units do not match' => array(
'raw_value' => '10vh',
'expected' => null,
),
'size: calc() values do not match' => array(
'raw_value' => 'calc(2 * 10px)',
'expected' => null,
),
'size: clamp() values do not match' => array(
'raw_value' => 'clamp(15px, 0.9375rem + ((1vw - 7.68px) * 5.409), 60px)',
'expected' => null,
),
'size: `"10"`' => array(
'raw_value' => '10',
'expected' => array(
'value' => 10,
'unit' => 'px',
),
),
'size: `11`' => array(
'raw_value' => 11,
'expected' => array(
'value' => 11,
'unit' => 'px',
),
),
'size: `11.234`' => array(
'raw_value' => '11.234',
'expected' => array(
'value' => 11.234,
'unit' => 'px',
),
),
'size: `"12rem"`' => array(
'raw_value' => '12rem',
'expected' => array(
'value' => 12,
'unit' => 'rem',
),
),
'size: `"12px"`' => array(
'raw_value' => '12px',
'expected' => array(
'value' => 12,
'unit' => 'px',
),
),
'size: `"12em"`' => array(
'raw_value' => '12em',
'expected' => array(
'value' => 12,
'unit' => 'em',
),
),
'size: `"12.74em"`' => array(
'raw_value' => '12.74em',
'expected' => array(
'value' => 12.74,
'unit' => 'em',
),
),
);
}
/**
* Tests that invalid font size values are not parsed and trigger incorrect usage.
*
* @ticket 56467
*
* @covers ::wp_get_typography_value_and_unit
*
* @dataProvider data_invalid_size_wp_get_typography_value_and_unit
* @expectedIncorrectUsage wp_get_typography_value_and_unit
*
* @param mixed $raw_value Raw size value to test.
*/
public function test_invalid_size_wp_get_typography_value_and_unit( $raw_value ) {
$this->assertNull( wp_get_typography_value_and_unit( $raw_value ) );
}
/**
* Data provider for test_invalid_size_wp_get_typography_value_and_unit().
*
* @return array
*/
public function data_invalid_size_wp_get_typography_value_and_unit() {
return array(
'size: null' => array( null ),
'size: false' => array( false ),
'size: true' => array( true ),
'size: array' => array( array( '10' ) ),
);
}
}
tests/phpunit/tests/theme/themeDir.php
+1
View File
@@ -177,6 +177,7 @@ class Tests_Theme_ThemeDir extends WP_UnitTestCase {
'REST Theme',
'Block Theme',
'Block Theme Child Theme',
'Block Theme Child Theme With Fluid Typography',
'Block Theme [0.4.0]',
'Block Theme [1.0.0] in subdirectory',
'Block Theme Deprecated Path',