mirrored from git://develop.git.wordpress.org/
-
Notifications
You must be signed in to change notification settings - Fork 2.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fluid Typography: Backport PHP changes for custom font sizes #3431
Closed
andrewserong
wants to merge
11
commits into
WordPress:trunk
from
andrewserong:update/backport-fluid-typography-php-changes
Closed
Changes from 5 commits
Commits
Show all changes
11 commits
Select commit
Hold shift + click to select a range
c474c42
Fluid Typography: Backport PHP changes
andrewserong 99d49b1
Fix PHPCS issue
andrewserong 20891cb
Attempt to fix theme loading in tests
andrewserong adc6aa8
Further attempt to fix broken unit tests
andrewserong 805565d
Update list of themes to account for added test theme
andrewserong 05f8898
Add remaining PHP changes
andrewserong 31f290f
Update src/wp-includes/block-supports/typography.php
dream-encode f0eb1e7
Update tests/phpunit/tests/block-supports/typography.php
dream-encode 639f886
Update src/wp-includes/block-supports/typography.php
dream-encode 122f464
Update src/wp-includes/block-supports/typography.php
dream-encode 5daf8b5
Update tests/phpunit/tests/block-supports/typography.php
dream-encode File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
8 changes: 8 additions & 0 deletions
8
tests/phpunit/data/themedir1/block-theme-child-with-fluid-typography/style.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
/* | ||
Theme Name: Block Theme Child Theme With Fluid Typography | ||
Theme URI: https://wordpress.org/ | ||
Description: For testing purposes only. | ||
Template: block-theme | ||
Version: 1.0.0 | ||
Text Domain: block-theme-child-with-fluid-typography | ||
*/ |
9 changes: 9 additions & 0 deletions
9
tests/phpunit/data/themedir1/block-theme-child-with-fluid-typography/theme.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
{ | ||
"version": 2, | ||
"settings": { | ||
"appearanceTools": true, | ||
"typography": { | ||
"fluid": true | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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(); | ||
} | ||
|
||
|
@@ -298,6 +337,24 @@ public function data_generate_font_size_preset_fixtures() { | |
'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', | ||
|
@@ -371,4 +428,159 @@ public function data_generate_font_size_preset_fixtures() { | |
), | ||
); | ||
} | ||
|
||
/** | ||
* 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. | ||
* | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should this also be added to |
||
* @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>", | ||
), | ||
); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Missing
@since 6.1.0
for new function