Mobile - RichText - Fix issue with font sizes with decimal values (#3…

…7027) * Utils - getPxFromCssUnit: Update regex to support decimals, e.g: 1.125rem * Mobile - Rich Text - Add fallback for null values if it fails to parse it * Mobile - Rich Text - Update tests * Mobile - RichText tests - Add more units with decimal values
WordPress · Dec 9, 2021 · 5531530 · 5531530
1 parent 6fbf3b9
commit 5531530
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 2 deletions.
diff --git a/packages/block-editor/src/utils/parse-css-unit-to-px.js b/packages/block-editor/src/utils/parse-css-unit-to-px.js
@@ -8,7 +8,7 @@ function parseUnit( cssUnit ) {
 	const match = cssUnit
 		?.trim()
 		.match(
-			/^(0?[-.]?\d+)(r?e[m|x]|v[h|w|min|max]+|p[x|t|c]|[c|m]m|%|in|ch|Q|lh)$/
+			/^(0?[-.]?\d*\.?\d+)(r?e[m|x]|v[h|w|min|max]+|p[x|t|c]|[c|m]m|%|in|ch|Q|lh)$/
 		);
 	if ( ! isNaN( cssUnit ) && ! isNaN( parseFloat( cssUnit ) ) ) {
 		return { value: parseFloat( cssUnit ), unit: 'px' };

diff --git a/packages/block-editor/src/utils/test/parse-css-unit-to-px.js b/packages/block-editor/src/utils/test/parse-css-unit-to-px.js
@@ -52,6 +52,7 @@ describe( 'getPxFromCssUnit', () => {
 		const testData = [
 			[ '2em', '20px' ],
 			[ '2rem', '20px' ],
+			[ '1.125rem', '11px' ],
 			[ '20vw', '20px' ],
 			[ '20vh', '40px' ],
 			[ '20vmin', '20px' ],

diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js
@@ -900,7 +900,9 @@ export class RichText extends Component {
 		const cssUnitOptions = { height, width, fontSize: DEFAULT_FONT_SIZE };
 		// We need to always convert to px units because the selected value
 		// could be coming from the web where it could be stored as a different unit.
-		const selectedPxValue = getPxFromCssUnit( newFontSize, cssUnitOptions );
+		const selectedPxValue =
+			getPxFromCssUnit( newFontSize, cssUnitOptions ) ??
+			DEFAULT_FONT_SIZE;
 
 		return parseFloat( selectedPxValue );
 	}

diff --git a/packages/rich-text/src/test/index.native.js b/packages/rich-text/src/test/index.native.js
@@ -44,6 +44,13 @@ describe( '<RichText/>', () => {
 	 */
 	const window = Dimensions.get( 'window' );
 
+	const decimalUnitsData = [
+		[ '1.125rem', 18 ],
+		[ '10.52px', 11 ],
+		[ '2.3136em', 37 ],
+		[ '1.42vh', 19 ],
+	];
+
 	beforeEach( () => {
 		mockGlobalSettings( {} );
 	} );
@@ -109,6 +116,23 @@ describe( '<RichText/>', () => {
 			expect( actualFontSize ).toBe( expectedFontSize );
 		} );
 
+		test.each( decimalUnitsData )(
+			`should display rich text at the PROVIDED font size computed from the selected GLOBAL
+		\`__experimentalGlobalStylesBaseStyles.typography.fontSize\` CSS with decimal value: %s`,
+			( unit, expected ) => {
+				// Arrange
+				mockGlobalSettings( { fontSize: unit } );
+				// Act
+				const { getByA11yLabel } = render(
+					<RichText accessibilityLabel={ 'editor' } />
+				);
+				// Assert
+				const actualFontSize = getByA11yLabel( 'editor' ).props
+					.fontSize;
+				expect( actualFontSize ).toBe( expected );
+			}
+		);
+
 		it( `should display rich text at the font size computed from the LOCAL \`fontSize\` CSS with HIGHEST PRIORITY
 		when CSS is provided ambiguously from ALL possible sources.`, () => {
 			// Arrange