Skip to content

Fluid typography: ensure fontsizes are strings or integers #44847

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

Merged
andrewserong merged 4 commits into from
Oct 11, 2022
Merged

Fluid typography: ensure fontsizes are strings or integers #44847

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0c09375
Updating PHP doc to describe incoming type of $raw_value (string|int)
ramonjd Oct 10, 2022
0ab24b5
Update changelog
ramonjd Oct 11, 2022
95103ae
Font sizes can be string|int|float
ramonjd Oct 11, 2022
f10d15b
Expand tests for gutenberg_get_typography_value_and_unit
ramonjd Oct 11, 2022
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
Prev Previous commit
Expand tests for gutenberg_get_typography_value_and_unit 
Fix typo in CHANGELOG.md
  • Loading branch information
@ramonjd
ramonjd committed Oct 11, 2022
commit f10d15b1310f705c420e40c950e750e44e00157a
1 change: 1 addition & 0 deletions lib/block-supports/typography.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,6 +282,7 @@ function gutenberg_get_typography_value_and_unit( $raw_value, $options = array()
return null;
}

// Converts numeric values to pixel values by default.
if ( empty( $raw_value ) ) {
return null;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

### Bug Fix

- `FontSizePicker`: Update fluid utils so that only string, floats integers are treated as valid font sizes for the purposes of fluid typography.([#44847](https://github.com/WordPress/gutenberg/pull/44847))
- `FontSizePicker`: Update fluid utils so that only string, floats and integers are treated as valid font sizes for the purposes of fluid typography.([#44847](https://github.com/WordPress/gutenberg/pull/44847))

## 10.2.0 (2022-10-05)

Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/font-sizes/fluid-utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,8 +160,8 @@ export function getTypographyValueAndUnit( rawValue, options = {} ) {
return null;
}

// Converts numbers to pixel values by default.
if ( typeof rawValue === 'number' ) {
// Converts numeric values to pixel values by default.
if ( isFinite( rawValue ) ) {
rawValue = `${ rawValue }px`;
}

Expand Down
65 changes: 64 additions & 1 deletion packages/block-editor/src/components/font-sizes/test/fluid-utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,8 +97,71 @@ describe( 'getComputedFluidTypographyValue()', () => {
value: [ '10' ],
expected: null,
},
{
value: '10vh',
expected: null,
},
{
value: 'calc(2 * 10px)',
expected: null,
},
{
value: 'clamp(15px, 0.9375rem + ((1vw - 7.68px) * 5.409), 60px)',
expected: null,
},
{
value: '10',
expected: {
value: 10,
unit: 'px',
},
},
{
value: 11,
expected: {
value: 11,
unit: 'px',
},
},
{
value: 11.234,
expected: {
value: 11.234,
unit: 'px',
},
},
{
value: '12rem',
expected: {
value: 12,
unit: 'rem',
},
},
{
value: '12px',
expected: {
value: 12,
unit: 'px',
},
},
{
value: '12em',
expected: {
value: 12,
unit: 'em',
},
},
{
value: '12.74em',
expected: {
value: 12.74,
unit: 'em',
},
},
].forEach( ( { value, expected } ) => {
expect( getTypographyValueAndUnit( value ) ).toBe( expected );
expect( getTypographyValueAndUnit( value ) ).toEqual(
expected
);
} );
} );
} );
Expand Down
89 changes: 88 additions & 1 deletion phpunit/block-supports/typography-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -555,7 +555,94 @@ public function data_generate_replace_inline_font_styles_with_fluid_values_fixtu
}

/**
* Tests that invalid font size values are not parsed.
* Tests that valid font size values are parsed.
*
* @ticket 56467
*
* @covers ::gutenberg_get_typography_value_and_unit
*
* @dataProvider data_valid_size_wp_get_typography_value_and_unit
*
* @param mixed $raw_value Raw size value to test.
* @param mixed $expected An expected return value.
*/
public function test_valid_size_wp_get_typography_value_and_unit( $raw_value, $expected ) {
$this->assertEquals( $expected, gutenberg_get_typography_value_and_unit( $raw_value ) );
}

/**
* Data provider.
*
* @return array
*/
public function data_valid_size_wp_get_typography_value_and_unit() {
return array(
'size: 10vh with default units do not match' => array(
'raw_value' => '10vh',
'expected' => null,
),
'size: calc() values do not match' => array(
'raw_value' => 'calc(2 * 10px)',
'expected' => null,
),
'size: clamp() values do not match' => array(
'raw_value' => 'clamp(15px, 0.9375rem + ((1vw - 7.68px) * 5.409), 60px)',
'expected' => null,
),
'size: `"10"`' => array(
'raw_value' => '10',
'expected' => array(
'value' => 10,
'unit' => 'px',
),
),
'size: `11`' => array(
'raw_value' => 11,
'expected' => array(
'value' => 11,
'unit' => 'px',
),
),
'size: `11.234`' => array(
'raw_value' => '11.234',
'expected' => array(
'value' => 11.234,
'unit' => 'px',
),
),
'size: `"12rem"`' => array(
'raw_value' => '12rem',
'expected' => array(
'value' => 12,
'unit' => 'rem',
),
),
'size: `"12px"`' => array(
'raw_value' => '12px',
'expected' => array(
'value' => 12,
'unit' => 'px',
),
),
'size: `"12em"`' => array(
'raw_value' => '12em',
'expected' => array(
'value' => 12,
'unit' => 'em',
),
),
'size: `"12.74em"`' => array(
'raw_value' => '12.74em',
'expected' => array(
'value' => 12.74,
'unit' => 'em',
),
),
);
}

/**
* Tests that invalid font size values are not parsed and trigger incorrect usage.
*
* @ticket 56467
*
Expand Down