[Mobile] - Font size support for the blocks: Button, Preformatted and Heading levels.

packages/block-library/src/button/edit.native.js

@@ -510,6 +510,7 @@ class ButtonEdit extends Component {
 								? 0
 								: richTextStyle.richText.paddingRight,
 							color: textColor,
+							fontSize: style?.fontSize,
 						} }
 						textAlign={ align }
 						placeholderTextColor={

packages/block-library/src/code/edit.native.js

@@ -8,7 +8,7 @@ import { View } from 'react-native';
  */
 import { PlainText } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { withPreferredColorScheme } from '@wordpress/compose';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -22,18 +22,13 @@ import styles from './theme.scss';
 // Note: styling is applied directly to the (nested) PlainText component. Web-side components
 // apply it to the container 'div' but we don't have a proper proposal for cascading styling yet.
 export function CodeEdit( props ) {
-	const {
-		attributes,
-		setAttributes,
-		onFocus,
-		onBlur,
-		getStylesFromColorScheme,
-	} = props;
-	const codeStyle = getStylesFromColorScheme(
-		styles.blockCode,
-		styles.blockCodeDark
-	);
-	const placeholderStyle = getStylesFromColorScheme(
+	const { attributes, setAttributes, onFocus, onBlur, style } = props;
+	const codeStyle = [
+		usePreferredColorSchemeStyle( styles.blockCode, styles.blockCodeDark ),
+		style?.fontSize && { fontSize: parseFloat( style.fontSize ) },
+	];
+
+	const placeholderStyle = usePreferredColorSchemeStyle(
 		styles.placeholder,
 		styles.placeholderDark
 	);
@@ -57,4 +52,4 @@ export function CodeEdit( props ) {
 	);
 }
 
-export default withPreferredColorScheme( CodeEdit );
+export default CodeEdit;

packages/block-library/src/preformatted/edit.js

@@ -9,9 +9,10 @@ export default function PreformattedEdit( {
 	mergeBlocks,
 	setAttributes,
 	onRemove,
+	style,
 } ) {
 	const { content } = attributes;
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( { style } );
 
 	return (
 		<RichText

packages/block-library/src/preformatted/edit.native.js

@@ -5,32 +5,46 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { withPreferredColorScheme } from '@wordpress/compose';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
 import WebPreformattedEdit from './edit.js';
 import styles from './styles.scss';
 
 export function PreformattedEdit( props ) {
-	const { getStylesFromColorScheme } = props;
-	const richTextStyle = getStylesFromColorScheme(
+	const { style } = props;
+
+	const textBaseStyle = usePreferredColorSchemeStyle(
 		styles.wpRichTextLight,
 		styles.wpRichTextDark
 	);
-	const wpBlockPreformatted = getStylesFromColorScheme(
+	const wpBlockPreformatted = usePreferredColorSchemeStyle(
 		styles.wpBlockPreformattedLight,
 		styles.wpBlockPreformattedDark
 	);
+	const richTextStyle = {
+		...( ! style?.baseColors && textBaseStyle ),
+		...( style?.fontSize && { fontSize: style.fontSize } ),
+		...( style?.color && { color: style.color } ),
+	};
+	const containerStyles = [
+		wpBlockPreformatted,
+		style?.backgroundColor && { backgroundColor: style.backgroundColor },
+		style?.baseColors &&
+			! style?.backgroundColor &&
+			styles[ 'wp-block-preformatted__no-background' ],
+	];
+
 	const propsWithStyle = {
 		...props,
 		style: richTextStyle,
 	};
 	return (
-		<View style={ wpBlockPreformatted }>
+		<View style={ containerStyles }>
 			<WebPreformattedEdit { ...propsWithStyle } />
 		</View>
 	);
 }
 
-export default withPreferredColorScheme( PreformattedEdit );
+export default PreformattedEdit;

packages/block-library/src/preformatted/styles.native.scss

@@ -23,3 +23,8 @@
 .wpRichTextDark {
 	@extend %wpBlockPreformattedDarkColor;
 }
+
+.wp-block-preformatted__no-background {
+	background: transparent;
+	padding: 0;
+}

packages/block-library/src/preformatted/test/__snapshots__/edit.native.js.snap

@@ -1,16 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`core/more/edit/native should match snapshot when content is empty 1`] = `
-<View>
+<View
+  style={
+    Array [
+      undefined,
+      undefined,
+      undefined,
+    ]
+  }
+>
   <PreformattedEdit
     getStylesFromColorScheme={[Function]}
     setAttributes={[MockFunction]}
+    style={Object {}}
   />
 </View>
 `;
 
 exports[`core/more/edit/native should match snapshot when content is not empty 1`] = `
-<View>
+<View
+  style={
+    Array [
+      undefined,
+      undefined,
+      undefined,
+    ]
+  }
+>
   <PreformattedEdit
     attributes={
       Object {
@@ -19,6 +36,7 @@ exports[`core/more/edit/native should match snapshot when content is not empty 1
     }
     getStylesFromColorScheme={[Function]}
     setAttributes={[MockFunction]}
+    style={Object {}}
   />
 </View>
 `;

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

@@ -854,19 +854,25 @@ export class RichText extends Component {
 	}
 
 	getFontSize() {
-		const { baseGlobalStyles } = this.props;
+		const { baseGlobalStyles, tagName } = this.props;
+		const tagNameFontSize =
+			baseGlobalStyles?.elements?.[ tagName ]?.typography?.fontSize;
 
 		let fontSize = DEFAULT_FONT_SIZE;
 
 		if ( baseGlobalStyles?.typography?.fontSize ) {
 			fontSize = baseGlobalStyles?.typography?.fontSize;
 		}
 
+		if ( tagNameFontSize ) {
+			fontSize = tagNameFontSize;
+		}
+
 		if ( this.props.style?.fontSize ) {
 			fontSize = this.props.style.fontSize;
 		}
 
-		if ( this.props.fontSize ) {
+		if ( this.props.fontSize && ! tagNameFontSize ) {
 			fontSize = this.props.fontSize;
 		}
 		const { height, width } = this.state.dimensions;
@@ -879,7 +885,9 @@ export class RichText extends Component {
 	}
 
 	getLineHeight() {
-		const { baseGlobalStyles } = this.props;
+		const { baseGlobalStyles, tagName } = this.props;
+		const tagNameLineHeight =
+			baseGlobalStyles?.elements?.[ tagName ]?.typography?.lineHeight;
 		let lineHeight;
 
 		// eslint-disable-next-line no-undef
@@ -891,6 +899,10 @@ export class RichText extends Component {
 			lineHeight = parseFloat( baseGlobalStyles?.typography?.lineHeight );
 		}
 
+		if ( tagNameLineHeight ) {
+			lineHeight = parseFloat( tagNameLineHeight );
+		}
+
 		if ( this.props.style?.lineHeight ) {
 			lineHeight = parseFloat( this.props.style.lineHeight );
 		}