Skip to content

Backport Fluid Typography settings for minimum font size #3866

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.

Sign up for GitHub

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

Closed
andrewserong wants to merge 7 commits into from
Closed

Backport Fluid Typography settings for minimum font size #3866

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0b8639e
Backport Fluid Typography settings for minimum font size
andrewserong Jan 19, 2023
a69f892
Update list of expected test themes
andrewserong Jan 23, 2023
7353274
Revert change to inline comment
andrewserong Jan 23, 2023
259efc6
Revert formatting change
andrewserong Jan 23, 2023
d56e8a8
Formatting for readability
hellofromtonya Jan 24, 2023
e29bf72
Fix missing )
hellofromtonya Jan 24, 2023
74588c3
Updates annotations for changes
hellofromtonya Jan 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 14 additions & 3 deletions src/wp-includes/block-supports/typography.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -453,6 +453,7 @@ function wp_get_computed_fluid_typography_value( $args = array() ) {
*
* @since 6.1.0
* @since 6.1.1 Adjusted rules for min and max font sizes.
* @since 6.2.0 Added 'settings.typography.fluid.minFontSize' support.
*
* @param array $preset {
* Required. fontSizes preset value as seen in theme.json.
Expand All @@ -479,19 +480,29 @@ function wp_get_typography_font_size_value( $preset, $should_use_fluid_typograph
}

// Checks if fluid font sizes are activated.
$typography_settings = wp_get_global_settings( array( 'typography' ) );
$should_use_fluid_typography = isset( $typography_settings['fluid'] ) && true === $typography_settings['fluid'] ? true : $should_use_fluid_typography;
$typography_settings = wp_get_global_settings( array( 'typography' ) );
if (
isset( $typography_settings['fluid'] ) &&
( true === $typography_settings['fluid'] || is_array( $typography_settings['fluid'] ) )
) {
$should_use_fluid_typography = true;
}

if ( ! $should_use_fluid_typography ) {
return $preset['size'];
}

$fluid_settings = isset( $typography_settings['fluid'] ) && is_array( $typography_settings['fluid'] )
? $typography_settings['fluid']
: array();

// Defaults.
$default_maximum_viewport_width = '1600px';
$default_minimum_viewport_width = '768px';
$default_minimum_font_size_factor = 0.75;
$default_scale_factor = 1;
$default_minimum_font_size_limit = '14px';
$has_min_font_size = isset( $fluid_settings['minFontSize'] ) && ! empty( wp_get_typography_value_and_unit( $fluid_settings['minFontSize'] ) );
$default_minimum_font_size_limit = $has_min_font_size ? $fluid_settings['minFontSize'] : '14px';

// Font sizes.
$fluid_font_size_settings = isset( $preset['fluid'] ) ? $preset['fluid'] : null;
Expand Down
8 changes: 8 additions & 0 deletions tests/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/*
Theme Name: Block Theme Child Theme With Fluid Typography Config
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
*/
11 changes: 11 additions & 0 deletions tests/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"version": 2,
"settings": {
"appearanceTools": true,
"typography": {
"fluid": {
"minFontSize": "16px"
}
}
}
}
48 changes: 30 additions & 18 deletions tests/phpunit/tests/block-supports/typography.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -567,21 +567,18 @@ public function data_generate_font_size_preset_fixtures() {
*
* @ticket 56467
* @ticket 57065
* @ticket 57529
*
* @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().
* @param string $font_size_value The block supports custom font size value.
* @param string $theme_slug A theme slug corresponding to an available test theme.
* @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' );
}
public function test_should_covert_font_sizes_to_fluid_values( $font_size_value, $theme_slug, $expected_output ) {
switch_theme( $theme_slug );

$this->test_block_name = 'test/font-size-fluid-value';
register_block_type(
Expand Down Expand Up @@ -623,15 +620,30 @@ public function test_should_covert_font_sizes_to_fluid_values( $font_size_value,
*/
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.344rem + ((1vw - 7.68px) * 1.502), 50px);',
'returns value when fluid typography is not active' => array(
'font_size_value' => '15px',
'theme_slug' => 'default',
'expected_output' => 'font-size:15px;',
),
'returns clamp value using default config' => array(
'font_size_value' => '15px',
'theme_slug' => 'block-theme-child-with-fluid-typography',
'expected_output' => 'font-size:clamp(14px, 0.875rem + ((1vw - 7.68px) * 0.12), 15px);',
),
'returns value when font size <= default min font size bound' => array(
'font_size_value' => '13px',
'theme_slug' => 'block-theme-child-with-fluid-typography',
'expected_output' => 'font-size:13px;',
),
'returns clamp value using custom fluid config' => array(
'font_size_value' => '17px',
'theme_slug' => 'block-theme-child-with-fluid-typography-config',
'expected_output' => 'font-size:clamp(16px, 1rem + ((1vw - 7.68px) * 0.12), 17px);',
),
'returns value when font size <= custom min font size bound' => array(
'font_size_value' => '15px',
'theme_slug' => 'block-theme-child-with-fluid-typography-config',
'expected_output' => 'font-size:15px;',
),
);
}
Expand Down
1 change: 1 addition & 0 deletions tests/phpunit/tests/theme/themeDir.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,7 @@ public function test_theme_list() {
'Block Theme Child Theme',
'Block Theme Child with no theme.json',
'Block Theme Child Theme With Fluid Typography',
'Block Theme Child Theme With Fluid Typography Config',
'Block Theme [0.4.0]',
'Block Theme [1.0.0] in subdirectory',
'Block Theme Deprecated Path',
Expand Down