Skip to content

Commit

Permalink
Editor: Adds 'settings.typography.fluid.minFontSize' support to wp_ge…
Browse files Browse the repository at this point in the history
…t_typography_font_size_value().

In `wp_get_typography_font_size_value()`, adds support for using a minimum font size for fluid typography when defined in a theme's `theme.json` file.

Reference:
* Part of [WordPress/gutenberg#42489 Gutenberg PR 42489]

Follow-up to [54497], [54260].

Props andrewserong, ramonopoly, hellofromTonya, joen.
Fixes #57529.

git-svn-id: https://develop.svn.wordpress.org/trunk@55133 602fd350-edb4-49c9-b593-d223f7449a82
  • Loading branch information
hellofromtonya committed Jan 24, 2023
1 parent 119ec32 commit e4ccebf
Show file tree
Hide file tree
Showing 5 changed files with 64 additions and 21 deletions.
17 changes: 14 additions & 3 deletions src/wp-includes/block-supports/typography.php
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
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
*/
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
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
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

0 comments on commit e4ccebf

Please sign in to comment.