[Mobile] - RichText - Use parsed font size values when comparing new changes

packages/rich-text/src/component/index.native.js

@@ -836,8 +836,14 @@ export class RichText extends Component {
 			this._editor.blur();
 		}
 
-		const currentFontSizeStyle = parseFloat( style?.fontSize );
-		const prevFontSizeStyle = parseFloat( prevProps?.style?.fontSize );
+		// For font size values changes from the font size picker
+		// we compare previous values to refresh the selected font size,
+		// this is also used when the tag name changes
+		// e.g Heading block and a level change like h1->h2.
+		const currentFontSizeStyle = this.getParsedFontSize( style?.fontSize );
+		const prevFontSizeStyle = this.getParsedFontSize(
+			prevProps?.style?.fontSize
+		);
 		const isDifferentTag = prevProps.tagName !== tagName;
 		if (
 			( currentFontSize &&
@@ -891,37 +897,55 @@ export class RichText extends Component {
 		};
 	}
 
+	getParsedFontSize( fontSize ) {
+		const { height, width } = Dimensions.get( 'window' );
+		const cssUnitOptions = { height, width, fontSize: DEFAULT_FONT_SIZE };
+
+		if ( ! fontSize ) {
+			return fontSize;
+		}
+
+		const selectedPxValue =
+			getPxFromCssUnit( fontSize, cssUnitOptions ) ?? DEFAULT_FONT_SIZE;
+
+		return parseFloat( selectedPxValue );
+	}
+
 	getFontSize( props ) {
 		const { baseGlobalStyles, tagName, fontSize, style } = props;
 		const tagNameFontSize =
 			baseGlobalStyles?.elements?.[ tagName ]?.typography?.fontSize;
 
 		let newFontSize = DEFAULT_FONT_SIZE;
 
+		// For block-based themes, get the default editor font size.
 		if ( baseGlobalStyles?.typography?.fontSize ) {
 			newFontSize = baseGlobalStyles?.typography?.fontSize;
 		}
 
+		// For block-based themes, get the default element font size
+		// e.g h1, h2.
 		if ( tagNameFontSize ) {
 			newFontSize = tagNameFontSize;
 		}
 
+		// For font size values provided from the styles,
+		// usually from values set from the font size picker.
 		if ( style?.fontSize ) {
 			newFontSize = style.fontSize;
 		}
 
-		if ( fontSize && ! tagNameFontSize ) {
+		// Fall-back to a font size provided from its props (if there's any)
+		// and there are no other default values to use.
+		if ( fontSize && ! tagNameFontSize && ! style?.fontSize ) {
 			newFontSize = fontSize;
 		}
-		const { height, width } = Dimensions.get( 'window' );
-		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 ) ??
-			DEFAULT_FONT_SIZE;
+		const selectedPxValue = this.getParsedFontSize( newFontSize );
 
-		return parseFloat( selectedPxValue );
+		return selectedPxValue;
 	}
 
 	getLineHeight() {

packages/rich-text/src/test/__snapshots__/index.native.js.snap

@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RichText/> Font Size renders component with style and font size 1`] = `
+"<!-- wp:paragraph {\\"style\\":{\\"color\\":{\\"text\\":\\"#fcb900\\"},\\"typography\\":{\\"fontSize\\":35.56}}} -->
+<p class=\\"has-text-color\\" style=\\"color:#fcb900;font-size:35.56px\\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet ut nibh vitae ornare. Sed auctor nec augue at blandit.</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`<RichText/> Font Size should update the font size when style prop with font size property is provided 1`] = `
+<View>
+  <TextInput
+    accessibilityLabel="Text input. Empty"
+    activeFormats={Array []}
+    blockType={
+      Object {
+        "tag": "div",
+      }
+    }
+    disableEditingMenu={false}
+    fontFamily="serif"
+    fontSize={12}
+    isMultiline={false}
+    maxImagesWidth={200}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onContentSizeChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onPaste={[Function]}
+    onSelectionChange={[Function]}
+    placeholderTextColor="gray"
+    triggerKeyCodes={Array []}
+    value=""
+  />
+</View>
+`;
+
+exports[`<RichText/> Font Size should update the font size with decimals when style prop with font size property is provided 1`] = `
+<View>
+  <TextInput
+    accessibilityLabel="Text input. Empty"
+    activeFormats={Array []}
+    blockType={
+      Object {
+        "tag": "div",
+      }
+    }
+    disableEditingMenu={false}
+    fontFamily="serif"
+    fontSize={13}
+    isMultiline={false}
+    maxImagesWidth={200}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onContentSizeChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onPaste={[Function]}
+    onSelectionChange={[Function]}
+    placeholderTextColor="gray"
+    triggerKeyCodes={Array []}
+    value=""
+  />
+</View>
+`;

packages/rich-text/src/test/index.native.js

@@ -1,16 +1,26 @@
-jest.mock( '@wordpress/data/src/components/use-select' );
 /**
  * External dependencies
  */
 import { Dimensions } from 'react-native';
-import { render } from 'test/helpers';
+import { getEditorHtml, render, initializeEditor } from 'test/helpers';
+
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { select } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { coreBlocks, registerBlock } from '@wordpress/block-library';
+import {
+	getBlockTypes,
+	setDefaultBlockName,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+import '@wordpress/jest-console';
+
 /**
  * Internal dependencies
  */
+import { store as richTextStore } from '../store';
 import RichText from '../component/index.native';
 
 /**
@@ -25,16 +35,12 @@ const mockGlobalSettings = (
 	const DEFAULT_GLOBAL_STYLES = {
 		__experimentalGlobalStylesBaseStyles: { typography: { fontSize } },
 	};
-	const selectMock = {
-		getFormatTypes: jest.fn().mockReturnValue( [] ),
-		getBlockParents: jest.fn(),
-		getBlock: jest.fn(),
-		getSettings: jest.fn().mockReturnValue( DEFAULT_GLOBAL_STYLES ),
-	};
-
-	useSelect.mockImplementation( ( callback ) => {
-		return callback( () => selectMock );
-	} );
+	jest.spyOn( select( blockEditorStore ), 'getSettings' ).mockReturnValue(
+		DEFAULT_GLOBAL_STYLES
+	);
+	jest.spyOn( select( richTextStore ), 'getFormatTypes' ).mockReturnValue(
+		[]
+	);
 };
 
 describe( '<RichText/>', () => {
@@ -51,6 +57,13 @@ describe( '<RichText/>', () => {
 		[ '1.42vh', 19 ],
 	];
 
+	beforeAll( () => {
+		// Register Paragraph block
+		const paragraph = coreBlocks[ 'core/paragraph' ];
+		registerBlock( paragraph );
+		setDefaultBlockName( paragraph.name );
+	} );
+
 	beforeEach( () => {
 		mockGlobalSettings( {} );
 	} );
@@ -59,6 +72,13 @@ describe( '<RichText/>', () => {
 		Dimensions.set( { window } );
 	} );
 
+	afterAll( () => {
+		// Clean up registered blocks
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+	} );
+
 	describe( 'Font Size', () => {
 		it( 'should display rich text at the DEFAULT font size.', () => {
 			// Arrange
@@ -133,10 +153,10 @@ describe( '<RichText/>', () => {
 			}
 		);
 
-		it( `should display rich text at the font size computed from the LOCAL \`fontSize\` CSS with HIGHEST PRIORITY
+		it( `should display rich text at the font size computed from the LOCAL \`style.fontSize\` CSS with HIGHEST PRIORITY
 		when CSS is provided ambiguously from ALL possible sources.`, () => {
 			// Arrange
-			const expectedFontSize = 2;
+			const expectedFontSize = 1;
 			mockGlobalSettings( { fontSize: '0' } );
 			// Act
 			const { getByA11yLabel } = render(
@@ -193,5 +213,38 @@ describe( '<RichText/>', () => {
 			const actualFontSize = getByA11yLabel( 'editor' ).props.fontSize;
 			expect( actualFontSize ).toBe( expectedFontSize );
 		} );
+
+		it( 'should update the font size when style prop with font size property is provided', () => {
+			// Arrange
+			const fontSize = '10';
+			const style = { fontSize: '12' };
+			// Act
+			const screen = render( <RichText fontSize={ fontSize } /> );
+			screen.update( <RichText fontSize={ fontSize } style={ style } /> );
+			// Assert
+			expect( screen.toJSON() ).toMatchSnapshot();
+		} );
+
+		it( 'renders component with style and font size', async () => {
+			// Arrange
+			const initialHtml = `<!-- wp:paragraph {"style":{"color":{"text":"#fcb900"},"typography":{"fontSize":35.56}}} -->
+					<p class="has-text-color" style="color:#fcb900;font-size:35.56px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet ut nibh vitae ornare. Sed auctor nec augue at blandit.</p>
+					<!-- /wp:paragraph -->`;
+			// Act
+			await initializeEditor( { initialHtml } );
+			// Assert
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'should update the font size with decimals when style prop with font size property is provided', () => {
+			// Arrange
+			const fontSize = '10';
+			const style = { fontSize: '12.56px' };
+			// Act
+			const screen = render( <RichText fontSize={ fontSize } /> );
+			screen.update( <RichText fontSize={ fontSize } style={ style } /> );
+			// Assert
+			expect( screen.toJSON() ).toMatchSnapshot();
+		} );
 	} );
 } );