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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Backport fix for fluid typography/convert font size number to pixels GB PR 44807 #3428

Closed
wants to merge 3 commits into from
Closed

Backport fix for fluid typography/convert font size number to pixels GB PR 44807 #3428

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
41448bd
Backport of GB PR 44807 PHP code
hellofromtonya Oct 10, 2022
a7e1f21
Add invalid data type checks
hellofromtonya Oct 10, 2022
77175b1
Add missing dataset
hellofromtonya Oct 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
24 changes: 19 additions & 5 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 @@ -251,8 +251,8 @@ function wp_typography_get_preset_inline_style_value( $style_value, $css_propert
* @since 6.1.0
* @access private
*
* @param string $raw_value Raw size value from theme.json.
* @param array $options {
* @param string|int $raw_value Raw size value from theme.json.
* @param array $options {
* Optional. An associative array of options. Default is empty array.
*
* @type string $coerce_to Coerce the value to rem or px. Default `'rem'`.
Expand All @@ -263,10 +263,24 @@ function wp_typography_get_preset_inline_style_value( $style_value, $css_propert
* `null` on failure.
*/
function wp_get_typography_value_and_unit( $raw_value, $options = array() ) {
if ( ! is_string( $raw_value ) && ! is_int( $raw_value ) ) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For backwards compatibility think we need to support numbers here, that is, 10 and 10.2

_doing_it_wrong(
__FUNCTION__,
__( 'Raw size value must be a string or integer.' ),
'6.1.0'
);
return null;
}

if ( empty( $raw_value ) ) {
return null;
}

// Converts numbers to pixel values by default.
if ( is_numeric( $raw_value ) ) {
$raw_value = $raw_value . 'px';
}

$defaults = array(
'coerce_to' => '',
'root_size_value' => 16,
Expand Down Expand Up @@ -395,9 +409,9 @@ function wp_get_computed_fluid_typography_value( $args = array() ) {
* @param array $preset {
* Required. fontSizes preset value as seen in theme.json.
*
* @type string $name Name of the font size preset.
* @type string $slug Kebab-case unique identifier for the font size preset.
* @type string $size CSS font-size value, including units where applicable.
* @type string $name Name of the font size preset.
* @type string $slug Kebab-case unique identifier for the font size preset.
* @type string|int $size CSS font-size value, including units where applicable.
* }
* @param bool $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
* Default is `false`.
Expand Down
67 changes: 61 additions & 6 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 @@ -281,15 +281,31 @@ function test_wp_get_typography_font_size_value( $font_size_preset, $should_use_
*/
public function data_generate_font_size_preset_fixtures() {
return array(
'default_return_value' => array(
'default_return_value' => array(
'font_size_preset' => array(
'size' => '28px',
),
'should_use_fluid_typography' => false,
'expected_output' => '28px',
),

'default_return_value_when_fluid_is_false' => array(
'size: int 0' => array(
'font_size_preset' => array(
'size' => 0,
),
'should_use_fluid_typography' => false,
'expected_output' => 0,
),

'size: string 0' => array(
'font_size_preset' => array(
'size' => '0',
),
'should_use_fluid_typography' => false,
'expected_output' => '0',
),

'default_return_value_when_fluid_is_false' => array(
'font_size_preset' => array(
'size' => '28px',
'fluid' => false,
Expand All @@ -298,14 +314,22 @@ public function data_generate_font_size_preset_fixtures() {
'expected_output' => '28px',
),

'return_fluid_value' => array(
'return_fluid_value' => array(
'font_size_preset' => array(
'size' => '1.75rem',
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(1.3125rem, 1.3125rem + ((1vw - 0.48rem) * 2.524), 2.625rem)',
),

'return_fluid_value_with_number_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_default_fluid_values_with_empty_fluid_array' => array(
'font_size_preset' => array(
'size' => '28px',
Expand All @@ -315,7 +339,7 @@ public function data_generate_font_size_preset_fixtures() {
'expected_output' => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
),

'return_default_fluid_values_with_null_value' => array(
'return_default_fluid_values_with_null_value' => array(
'font_size_preset' => array(
'size' => '28px',
'fluid' => null,
Expand All @@ -324,7 +348,7 @@ public function data_generate_font_size_preset_fixtures() {
'expected_output' => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
),

'return_size_with_invalid_fluid_units' => array(
'return_size_with_invalid_fluid_units' => array(
'font_size_preset' => array(
'size' => '10em',
'fluid' => array(
Expand All @@ -336,7 +360,7 @@ public function data_generate_font_size_preset_fixtures() {
'expected_output' => '10em',
),

'return_fluid_clamp_value' => array(
'return_fluid_clamp_value' => array(
'font_size_preset' => array(
'size' => '28px',
'fluid' => array(
Expand Down Expand Up @@ -371,4 +395,35 @@ public function data_generate_font_size_preset_fixtures() {
),
);
}

/**
* Tests generating font size values, including fluid formulae, from fontSizes preset.
*
* @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.
*/
function test_invalid_size_wp_get_typography_value_and_unit( $raw_value ) {
$this->assertNull( wp_get_typography_value_and_unit( $raw_value ) );
}

/**
* Data provider.
*
* @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: float' => array( 10.1234 ),
'size: array' => array( array( '10' ) ),
);
}
}