[Rnmobile] update font size picker to use css unit normalization (#34720

) * Export the getPxFromCssUnit function. and expose it in the packege * Normalize the FontSize to px in the global array * Use the new px in the font size picker * Add Default px size units * Set Default fontSize value for relative size units. * fix test: use default import in unit test * Update the test fixtures * Update the export of FontSizePicker to be called after withFilters so that the tests pass as expected. * Remove comment that doesn't belong there * Only add sizePx to the native default store * Add normalizeFontSizes function to global styles
WordPress · Sep 27, 2021 · 9c3c53b · 9c3c53b
1 parent 8eadcb6
commit 9c3c53b
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 12 deletions.
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
@@ -426,6 +426,19 @@ _Returns_
 
 -   `string`: Gradient value.
 
+### getPxFromCssUnit
+
+Returns the px value of a cssUnit.
+
+_Parameters_
+
+-   _cssUnit_ `string`:
+-   _options_ `string`:
+
+_Returns_
+
+-   `string`: returns the cssUnit value in a simple px format.
+
 ### InnerBlocks
 
 _Related_

diff --git a/packages/block-editor/src/store/defaults.native.js b/packages/block-editor/src/store/defaults.native.js
@@ -6,8 +6,14 @@ import {
 	SETTINGS_DEFAULTS as SETTINGS,
 } from './defaults.js';
 
+const fontSizes = SETTINGS.fontSizes.map( ( fontSize ) => {
+	fontSize.sizePx = fontSize.size + 'px';
+	return fontSize;
+} );
+
 const SETTINGS_DEFAULTS = {
 	...SETTINGS,
+	fontSizes,
 	// FOR TESTING ONLY - Later, this will come from a REST API
 	// eslint-disable-next-line no-undef
 	__unstableGalleryWithImageBlocks: __DEV__,

diff --git a/packages/block-editor/src/utils/index.js b/packages/block-editor/src/utils/index.js
@@ -1,3 +1,4 @@
 export { default as transformStyles } from './transform-styles';
 export * from './theme';
 export * from './block-variation-transforms';
+export { default as getPxFromCssUnit } from './parse-css-unit-to-px';
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
@@ -209,7 +209,7 @@ function convertParsedUnitToPx( parsedUnit, options ) {
  * @param {string} options
  * @return {string} returns the cssUnit value in a simple px format.
  */
-export function getPxFromCssUnit( cssUnit, options = {} ) {
+function getPxFromCssUnit( cssUnit, options = {} ) {
 	if ( Number.isFinite( cssUnit ) ) {
 		return cssUnit.toFixed( 0 ) + 'px';
 	}
@@ -228,3 +228,5 @@ export function getPxFromCssUnit( cssUnit, options = {} ) {
 
 	return convertParsedUnitToPx( parsedUnit, options );
 }
+
+export default getPxFromCssUnit;
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
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { getPxFromCssUnit } from '../parse-css-unit-to-px';
+import { default as getPxFromCssUnit } from '../parse-css-unit-to-px';
 
 describe( 'getPxFromCssUnit', () => {
 	// Absolute units

diff --git a/packages/components/src/font-size-picker/index.native.js b/packages/components/src/font-size-picker/index.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { View } from 'react-native';
+import { View, useWindowDimensions } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -11,13 +11,16 @@ import { useState } from '@wordpress/element';
 import { Icon, chevronRight, check } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { BottomSheet } from '@wordpress/components';
+import { getPxFromCssUnit } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { default as UnitControl, useCustomUnits } from '../unit-control';
 import styles from './style.scss';
 
+const DEFAULT_FONT_SIZE = 16;
+
 function FontSizePicker( {
 	fontSizes = [],
 	disableCustomFontSizes = false,
@@ -27,6 +30,12 @@ function FontSizePicker( {
 	const [ showSubSheet, setShowSubSheet ] = useState( false );
 	const navigation = useNavigation();
 
+	const { height, width } = useWindowDimensions();
+	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( selectedValue, cssUnitOptions );
+
 	const onChangeValue = ( value ) => {
 		return () => {
 			goBack();
@@ -35,7 +44,7 @@ function FontSizePicker( {
 	};
 
 	const selectedOption = fontSizes.find(
-		( option ) => option.size === selectedValue
+		( option ) => option.sizePx === selectedPxValue
 	) ?? { name: 'Custom' };
 
 	const goBack = () => {
@@ -65,7 +74,7 @@ function FontSizePicker( {
 									// translators: %1$s: Select control font size name e.g. Small, %2$s: Select control font size e.g. 12px
 									__( '%1$s (%2$s)' ),
 									selectedOption.name,
-									selectedValue
+									selectedPxValue
 							  )
 							: __( 'Default' )
 					}
@@ -112,21 +121,21 @@ function FontSizePicker( {
 					</BottomSheet.Cell>
 					{ fontSizes.map( ( item, index ) => {
 						// Only display a choice that we can currenly select.
-						if ( ! parseFloat( item.size ) ) {
+						if ( ! parseFloat( item.sizePx ) ) {
 							return null;
 						}
 						return (
 							<BottomSheet.Cell
 								customActionButton
 								separatorType="none"
 								label={ item.name }
-								subLabel={ item.size }
-								onPress={ onChangeValue( item.size ) }
+								subLabel={ item.sizePx }
+								onPress={ onChangeValue( item.sizePx ) }
 								leftAlign={ true }
 								key={ index }
 								accessibilityRole={ 'button' }
 								accessibilityLabel={
-									item.size === selectedValue
+									item.sizePx === selectedValue
 										? sprintf(
 												// translators: %s: Select font size option value e.g: "Selected: Large".
 												__( 'Selected: %s' ),
@@ -139,7 +148,7 @@ function FontSizePicker( {
 								) }
 							>
 								<View>
-									{ item.size === selectedValue && (
+									{ item.sizePx === selectedPxValue && (
 										<Icon icon={ check }></Icon>
 									) }
 								</View>

diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
@@ -30,7 +30,7 @@ export {
 	Fill,
 	Provider as SlotFillProvider,
 } from './slot-fill';
-export { default as FontSizePicker } from './font-size-picker'; // Intentionally called after slot-fill.
+
 export { default as __experimentalStyleProvider } from './style-provider';
 export { default as BaseControl } from './base-control';
 export { default as TextareaControl } from './textarea-control';
@@ -66,6 +66,7 @@ export { default as Disabled } from './disabled';
 export { default as withConstrainedTabbing } from './higher-order/with-constrained-tabbing';
 export { default as withFallbackStyles } from './higher-order/with-fallback-styles';
 export { default as withFilters } from './higher-order/with-filters';
+export { default as FontSizePicker } from './font-size-picker'; // Intentionally called after slot-fill and withFilters.
 export { default as withFocusOutside } from './higher-order/with-focus-outside';
 export { default as withFocusReturn } from './higher-order/with-focus-return';
 export { default as withNotices } from './higher-order/with-notices';

diff --git a/packages/components/src/mobile/global-styles-context/test/fixtures/theme.native.js b/packages/components/src/mobile/global-styles-context/test/fixtures/theme.native.js
@@ -209,32 +209,38 @@ export const RAW_FEATURES = {
 					name: 'Small',
 					slug: 'small',
 					size: '13px',
+					sizePx: '13px',
 				},
 				{
 					name: 'Normal',
 					slug: 'normal',
 					size: '16px',
+					sizePx: '16px',
 				},
 				{
 					name: 'Huge',
 					slug: 'huge',
 					size: '42px',
+					sizePx: '42px',
 				},
 			],
 			theme: [
 				{
 					name: 'Normal',
 					slug: 'normal',
 					size: '18px',
+					sizePx: '18px',
 				},
 				{
 					slug: 'extra-large',
 					size: '40px',
+					sizePx: '40px',
 					name: 'Extra large',
 				},
 				{
 					slug: 'gigantic',
 					size: '144px',
+					sizePx: '144px',
 					name: 'Gigantic',
 				},
 			],

diff --git a/packages/components/src/mobile/global-styles-context/utils.native.js b/packages/components/src/mobile/global-styles-context/utils.native.js
@@ -2,6 +2,12 @@
  * External dependencies
  */
 import { find, startsWith, get, camelCase, has } from 'lodash';
+import { Dimensions } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { getPxFromCssUnit } from '@wordpress/block-editor';
 
 export const BLOCK_STYLE_ATTRIBUTES = [
 	'textColor',
@@ -245,6 +251,41 @@ export function getMappedValues( features, palette ) {
 	return mappedValues;
 }
 
+/**
+ * Returns the normalized fontSizes to include the sizePx value for each of the different sizes.
+ *
+ * @param {Object} fontSizes found in global styles.
+ * @return {Object} normalized sizes.
+ */
+function normalizeFontSizes( fontSizes ) {
+	// Adds normalized PX values for each of the different keys
+	if ( ! fontSizes ) {
+		return fontSizes;
+	}
+	const normalizedFontSizes = {};
+	const dimensions = Dimensions.get( 'window' );
+
+	[ 'core', 'theme', 'user' ].forEach( ( key ) => {
+		if ( fontSizes[ key ] ) {
+			normalizedFontSizes[ key ] = fontSizes[ key ]?.map(
+				( fontSizeObject ) => {
+					fontSizeObject.sizePx = getPxFromCssUnit(
+						fontSizeObject.size,
+						{
+							width: dimensions.width,
+							height: dimensions.height,
+							fontSize: 16,
+						}
+					);
+					return fontSizeObject;
+				}
+			);
+		}
+	} );
+
+	return normalizedFontSizes;
+}
+
 export function getGlobalStyles( rawStyles, rawFeatures ) {
 	const features = rawFeatures ? JSON.parse( rawFeatures ) : {};
 	const mappedValues = getMappedValues( features, features?.color?.palette );
@@ -266,6 +307,8 @@ export function getGlobalStyles( rawStyles, rawFeatures ) {
 		customValues
 	);
 
+	const fontSizes = normalizeFontSizes( features?.typography?.fontSizes );
+
 	return {
 		colors,
 		gradients,
@@ -277,7 +320,7 @@ export function getGlobalStyles( rawStyles, rawFeatures ) {
 				background: features?.color?.background ?? true,
 			},
 			typography: {
-				fontSizes: features?.typography?.fontSizes,
+				fontSizes,
 				customLineHeight: features?.custom?.[ 'line-height' ],
 			},
 		},