Rnmobile/add/typography controls

packages/base-styles/_colors.native.scss

@@ -53,6 +53,7 @@ $gray-text-min: darken($gray, 18%); //#537994
 $gray-lighten-10: lighten($gray, 10%); // #a8bece
 $gray-lighten-20: lighten($gray, 20%); // #c8d7e1
 $gray-lighten-30: lighten($gray, 30%); // #e9eff3
+$gray-darken-10: darken($gray, 10%);
 $gray-darken-20: darken($gray, 20%); // #4f748e
 $gray-darken-30: darken($gray, 30%); // #3d596d
 
@@ -102,6 +103,8 @@ $app-background-dark-alt: $background-dark-elevated;
 $modal-background: $white;
 $modal-background-dark: $background-dark-elevated;
 
+$sub-heading: $gray-text-min;
+$sub-heading-dark: $white;
 /**
  * Deprecated colors.
  * Please avoid using these.

packages/block-editor/src/components/font-sizes/index.native.js

@@ -1 +1,7 @@
-export { getFontSize, getFontSizeClass } from './utils';
+export {
+	getFontSize,
+	getFontSizeClass,
+	getFontSizeObjectByValue,
+} from './utils';
+export { default as FontSizePicker } from './font-size-picker';
+export { default as withFontSizes } from './with-font-sizes';

packages/block-editor/src/components/line-height-control/index.native.js

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { UnitControl } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import { BASE_DEFAULT_VALUE, STEP, isLineHeightDefined } from './utils';
+
+export default function LineHeightControl( { value: lineHeight, onChange } ) {
+	const isDefined = isLineHeightDefined( lineHeight );
+	const value = isDefined ? lineHeight : BASE_DEFAULT_VALUE;
+	return (
+		<UnitControl
+			label={ __( 'Line Height' ) }
+			min={ 0 }
+			max={ 5 }
+			step={ STEP }
+			value={ value }
+			onChange={ onChange }
+			units={ false }
+		/>
+	);
+}

packages/block-editor/src/hooks/typography.js

@@ -6,7 +6,6 @@ import { hasBlockSupport } from '@wordpress/blocks';
  * External dependencies
  */
 import { PanelBody } from '@wordpress/components';
-import { Platform } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -83,11 +82,8 @@ export function TypographyPanel( props ) {
 }
 
 const hasTypographySupport = ( blockName ) => {
-	return (
-		Platform.OS === 'web' &&
-		TYPOGRAPHY_SUPPORT_KEYS.some( ( key ) =>
-			hasBlockSupport( blockName, key )
-		)
+	return TYPOGRAPHY_SUPPORT_KEYS.some( ( key ) =>
+		hasBlockSupport( blockName, key )
 	);
 };
 

packages/block-editor/src/hooks/typography.native.js

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { hasBlockSupport } from '@wordpress/blocks';
+/**
+ * External dependencies
+ */
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import InspectorControls from '../components/inspector-controls';
+
+import {
+	LINE_HEIGHT_SUPPORT_KEY,
+	LineHeightEdit,
+	useIsLineHeightDisabled,
+} from './line-height';
+import {
+	FONT_SIZE_SUPPORT_KEY,
+	FontSizeEdit,
+	useIsFontSizeDisabled,
+} from './font-size';
+
+export const TYPOGRAPHY_SUPPORT_KEY = 'typography';
+export const TYPOGRAPHY_SUPPORT_KEYS = [
+	LINE_HEIGHT_SUPPORT_KEY,
+	FONT_SIZE_SUPPORT_KEY,
+];
+
+export function TypographyPanel( props ) {
+	const isDisabled = useIsTypographyDisabled( props );
+	const isSupported = hasTypographySupport( props.name );
+
+	// only enable TypographyPanel for development
+	// eslint-disable-next-line no-undef
+	if ( isDisabled || ! isSupported || ! __DEV__ ) return null;
+
+	return (
+		<InspectorControls>
+			<PanelBody title={ __( 'Typography' ) }>
+				<FontSizeEdit { ...props } />
+				<LineHeightEdit { ...props } />
+			</PanelBody>
+		</InspectorControls>
+	);
+}
+
+const hasTypographySupport = ( blockName ) => {
+	return TYPOGRAPHY_SUPPORT_KEYS.some( ( key ) =>
+		hasBlockSupport( blockName, key )
+	);
+};
+
+function useIsTypographyDisabled( props = {} ) {
+	const configs = [
+		useIsFontSizeDisabled( props ),
+		useIsLineHeightDisabled( props ),
+	];
+
+	return configs.filter( Boolean ).length === configs.length;
+}

packages/components/src/font-size-picker/index.native.js

@@ -0,0 +1,173 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { useNavigation } from '@react-navigation/native';
+import { useState } from '@wordpress/element';
+import { Icon, chevronRight, check } from '@wordpress/icons';
+import { __, sprintf } from '@wordpress/i18n';
+import { BottomSheet } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { default as UnitControl, useCustomUnits } from '../unit-control';
+import styles from './style.scss';
+
+function FontSizePicker( {
+	fontSizes = [],
+	disableCustomFontSizes = false,
+	onChange,
+	value: selectedValue,
+} ) {
+	const [ showSubSheet, setShowSubSheet ] = useState( false );
+	const navigation = useNavigation();
+
+	const onChangeValue = ( value ) => {
+		return () => {
+			goBack();
+			onChange( value );
+		};
+	};
+
+	const selectedOption = fontSizes.find(
+		( option ) => option.size === selectedValue
+	) ?? { name: 'Custom' };
+
+	const goBack = () => {
+		setShowSubSheet( false );
+		navigation.goBack();
+	};
+
+	const openSubSheet = () => {
+		navigation.navigate( BottomSheet.SubSheet.screenName );
+		setShowSubSheet( true );
+	};
+	const label = __( 'Font Size' );
+
+	const units = useCustomUnits( {
+		availableUnits: [ 'px', 'em', 'rem' ],
+	} );
+
+	return (
+		<BottomSheet.SubSheet
+			navigationButton={
+				<BottomSheet.Cell
+					label={ label }
+					separatorType="none"
+					value={
+						selectedValue
+							? sprintf(
+									// 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
+							  )
+							: __( 'Default' )
+					}
+					onPress={ openSubSheet }
+					accessibilityRole={ 'button' }
+					accessibilityLabel={ selectedOption.name }
+					accessibilityHint={ sprintf(
+						// translators: %s: Select control button label e.g. Small
+						__( 'Navigates to select %s' ),
+						selectedOption.name
+					) }
+				>
+					<Icon icon={ chevronRight }></Icon>
+				</BottomSheet.Cell>
+			}
+			showSheet={ showSubSheet }
+		>
+			<>
+				<BottomSheet.NavigationHeader
+					screen={ label }
+					leftButtonOnPress={ goBack }
+				/>
+				<View style={ styles[ 'components-font-size-picker' ] }>
+					<BottomSheet.Cell
+						customActionButton
+						separatorType="none"
+						label={ __( 'Default' ) }
+						onPress={ onChangeValue( undefined ) }
+						leftAlign={ true }
+						key={ 'default' }
+						accessibilityRole={ 'button' }
+						accessibilityLabel={ __( 'Selected: Default' ) }
+						accessibilityHint={ __(
+							'Double tap to select default font size'
+						) }
+					>
+						<View>
+							{ selectedValue === undefined && (
+								<Icon icon={ check }></Icon>
+							) }
+						</View>
+					</BottomSheet.Cell>
+					{ fontSizes.map( ( item, index ) => {
+						// Only display a choice that we can currenly select.
+						if ( ! parseFloat( item.size ) ) {
+							return null;
+						}
+						return (
+							<BottomSheet.Cell
+								customActionButton
+								separatorType="none"
+								label={ item.name }
+								subLabel={ item.size }
+								onPress={ onChangeValue( item.size ) }
+								leftAlign={ true }
+								key={ index }
+								accessibilityRole={ 'button' }
+								accessibilityLabel={
+									item.size === selectedValue
+										? sprintf(
+												// translators: %s: Select font size option value e.g: "Selected: Large".
+												__( 'Selected: %s' ),
+												item.name
+										  )
+										: item.name
+								}
+								accessibilityHint={ __(
+									'Double tap to select font size'
+								) }
+							>
+								<View>
+									{ item.size === selectedValue && (
+										<Icon icon={ check }></Icon>
+									) }
+								</View>
+							</BottomSheet.Cell>
+						);
+					} ) }
+					{ ! disableCustomFontSizes && (
+						<UnitControl
+							label={ __( 'Custom' ) }
+							min={ 0 }
+							max={ 200 }
+							step={ 1 }
+							value={ selectedValue }
+							onChange={ ( nextSize ) => {
+								if (
+									0 === parseFloat( nextSize ) ||
+									! nextSize
+								) {
+									onChange( undefined );
+								} else {
+									onChange( nextSize );
+								}
+							} }
+							units={ units }
+						/>
+					) }
+				</View>
+			</>
+		</BottomSheet.SubSheet>
+	);
+}
+
+export default FontSizePicker;

packages/components/src/font-size-picker/style.native.scss

@@ -0,0 +1,6 @@
+.components-font-size-picker {
+	padding: 0 $block-edge-to-content;
+}
+.components-font-size-picker__font-size {
+	font-size: 11px;
+}

packages/components/src/index.native.js

@@ -30,6 +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';

packages/components/src/mobile/bottom-sheet/cell.native.js

@@ -101,6 +101,7 @@ class BottomSheetCell extends Component {
 			onPress,
 			onLongPress,
 			label,
+			subLabel,
 			value,
 			valuePlaceholder = '',
 			icon,
@@ -147,6 +148,11 @@ class BottomSheetCell extends Component {
 				? cellLabelStyle
 				: defaultMissingIconAndValue;
 
+		const defaultSubLabelStyleText = getStylesFromColorScheme(
+			styles.cellSubLabelText,
+			styles.cellSubLabelTextDark
+		);
+
 		const drawSeparator =
 			( separatorType && separatorType !== 'none' ) ||
 			separatorStyle === undefined;
@@ -366,7 +372,22 @@ class BottomSheetCell extends Component {
 									/>
 								</View>
 							) }
-							{ label && (
+							{ subLabel && label && (
+								<View>
+									<Text
+										style={ [
+											defaultLabelStyle,
+											labelStyle,
+										] }
+									>
+										{ label }
+									</Text>
+									<Text style={ defaultSubLabelStyleText }>
+										{ subLabel }
+									</Text>
+								</View>
+							) }
+							{ ! subLabel && label && (
 								<Text
 									style={ [ defaultLabelStyle, labelStyle ] }
 								>

packages/components/src/mobile/bottom-sheet/range-text-input.native.js

@@ -194,6 +194,7 @@ class RangeTextInput extends Component {
 			} ),
 			{
 				width: 50 * fontScale,
+				borderRightWidth: children ? 1 : 0,
 			},
 		];
 

packages/components/src/mobile/bottom-sheet/styles.native.scss

@@ -295,3 +295,12 @@
 .cellHelpLabelIOS {
 	padding-bottom: $grid-unit-10;
 }
+
+.cellSubLabelText {
+	font-size: 12px;
+	color: $sub-heading;
+}
+
+.cellSubLabelTextDark {
+	color: $sub-heading-dark;
+}