Skip to content
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

Fluid typography: use layout.wideSize as max viewport width #4604

Closed
wants to merge 3 commits into from
Closed

Fluid typography: use layout.wideSize as max viewport width #4604

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4a2aa50
Using `settings.layout.wideSize` as the maximum viewport width, if it…
ramonjd Jun 13, 2023
dd5a17f
Updating PHP comments
ramonjd Jun 13, 2023
d799058
Adds a guard against invalid max / min viewport widths. Such values w…
ramonjd Jun 15, 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
14 changes: 12 additions & 2 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 @@ -368,6 +368,7 @@ function wp_get_typography_value_and_unit( $raw_value, $options = array() ) {
* width and min/max font sizes.
*
* @since 6.1.0
* @since 6.3.0 Checks for unsupported min/max viewport values that cause invalid clamp values.
* @access private
*
* @param array $args {
Expand Down Expand Up @@ -433,6 +434,11 @@ function wp_get_computed_fluid_typography_value( $args = array() ) {
)
);

// Protects against unsupported units in min and max viewport widths.
if ( ! $minimum_viewport_width || ! $maximum_viewport_width ) {
return null;
}

/*
* Build CSS rule.
* Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.
Expand All @@ -454,6 +460,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.
* @since 6.3.0 Using layout.wideSize as max viewport width.
*
* @param array $preset {
* Required. fontSizes preset value as seen in theme.json.
Expand All @@ -480,7 +487,10 @@ 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' ) );
$global_settings = wp_get_global_settings();
$typography_settings = isset( $global_settings['typography'] ) ? $global_settings['typography'] : array();
$layout_settings = isset( $global_settings['layout'] ) ? $global_settings['layout'] : array();

if (
isset( $typography_settings['fluid'] ) &&
( true === $typography_settings['fluid'] || is_array( $typography_settings['fluid'] ) )
Expand All @@ -497,7 +507,7 @@ function wp_get_typography_font_size_value( $preset, $should_use_fluid_typograph
: array();

// Defaults.
$default_maximum_viewport_width = '1600px';
$default_maximum_viewport_width = isset( $layout_settings['wideSize'] ) ? $layout_settings['wideSize'] : '1600px';
$default_minimum_viewport_width = '768px';
$default_minimum_font_size_factor = 0.75;
$default_scale_factor = 1;
Expand Down
3 changes: 3 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
Expand Up @@ -2,6 +2,9 @@
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"wideSize": "1000px"
},
"typography": {
"fluid": {
"minFontSize": "16px"
Expand Down
89 changes: 88 additions & 1 deletion tests/phpunit/tests/block-supports/typography.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -568,6 +568,7 @@ public function data_generate_font_size_preset_fixtures() {
* @ticket 56467
* @ticket 57065
* @ticket 57529
* @ticket 58522
*
* @covers ::wp_register_typography_support
*
Expand Down Expand Up @@ -638,7 +639,7 @@ public function data_generate_block_supports_font_size_fixtures() {
'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);',
'expected_output' => 'font-size:clamp(16px, 1rem + ((1vw - 7.68px) * 0.431), 17px);',
),
'returns value when font size <= custom min font size bound' => array(
'font_size_value' => '15px',
Expand Down Expand Up @@ -847,4 +848,90 @@ public function data_invalid_size_wp_get_typography_value_and_unit() {
'size: array' => array( array( '10' ) ),
);
}

/**
* Tests computed font size values.
*
* @ticket 58522
*
* @covers ::wp_get_computed_fluid_typography_value
*
* @dataProvider data_wp_get_computed_fluid_typography_value
*
* @param array $args {
* Optional. An associative array of values to calculate a fluid formula for font size. Default is empty array.
*
* @type string $maximum_viewport_width Maximum size up to which type will have fluidity.
* @type string $minimum_viewport_width Minimum viewport size from which type will have fluidity.
* @type string $maximum_font_size Maximum font size for any clamp() calculation.
* @type string $minimum_font_size Minimum font size for any clamp() calculation.
* @type int $scale_factor A scale factor to determine how fast a font scales within boundaries.
* }
* @param string $expected_output Expected value of style property from gutenberg_apply_typography_support().
*/
public function test_wp_get_computed_fluid_typography_value( $args, $expected_output ) {
$actual = wp_get_computed_fluid_typography_value( $args );
$this->assertSame( $expected_output, $actual );
}

/**
* Data provider.
*
* @return array
*/
public function data_wp_get_computed_fluid_typography_value() {
return array(
'returns clamped value with valid args' => array(
'args' => array(
'minimum_viewport_width' => '320px',
'maximum_viewport_width' => '1000px',
'minimum_font_size' => '50px',
'maximum_font_size' => '100px',
'scale_factor' => 1,
),
'expected_output' => 'clamp(50px, 3.125rem + ((1vw - 3.2px) * 7.353), 100px)',
),
'returns `null` when `maximum_viewport_width` is an unsupported unit' => array(
'args' => array(
'minimum_viewport_width' => '320px',
'maximum_viewport_width' => 'calc(100% - 60px)',
'minimum_font_size' => '50px',
'maximum_font_size' => '100px',
'scale_factor' => 1,
),
'expected_output' => null,
),
'returns `null` when `minimum_viewport_width` is an unsupported unit' => array(
'args' => array(
'minimum_viewport_width' => 'calc(100% - 60px)',
'maximum_viewport_width' => '1000px',
'minimum_font_size' => '50px',
'maximum_font_size' => '100px',
'scale_factor' => 1,
),
'expected_output' => null,
),
'returns `null` when `minimum_font_size` is an unsupported unit' => array(
'args' => array(
'minimum_viewport_width' => '320em',
'maximum_viewport_width' => '1000em',
'minimum_font_size' => '10vw',
'maximum_font_size' => '100em',
'scale_factor' => 1,
),
'expected_output' => null,
),
'returns `null` when `maximum_font_size` is an unsupported unit' => array(
'args' => array(
'minimum_viewport_width' => '320em',
'maximum_viewport_width' => '1000em',
'minimum_font_size' => '50px',
'maximum_font_size' => '100%',
'scale_factor' => 1,
),
'expected_output' => null,
),
);
}
}