[Mobile] - Enable font size and line height support and addresses Android issues

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

@@ -14,7 +14,8 @@ export default function LineHeightControl( { value: lineHeight, onChange } ) {
 	return (
 		<UnitControl
 			label={ __( 'Line Height' ) }
-			min={ 0 }
+			// Set minimun value of 1 since lower values break on Android
+			min={ 1 }
 			max={ 5 }
 			step={ STEP }
 			value={ value }

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

@@ -34,9 +34,7 @@ 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;
+	if ( isDisabled || ! isSupported ) return null;
 
 	return (
 		<InspectorControls>

packages/editor/src/components/post-title/index.native.js

@@ -147,6 +147,7 @@ class PostTitle extends Component {
 					style={ titleStyles }
 					styles={ styles }
 					fontSize={ 24 }
+					lineHeight={ 1 }
 					fontWeight={ 'bold' }
 					deleteEnter={ true }
 					onChange={ ( value ) => {

packages/react-native-aztec/android/build.gradle

@@ -9,7 +9,7 @@ buildscript {
         jSoupVersion = '1.10.3'
         wordpressUtilsVersion = '1.22'
         espressoVersion = '3.0.1'
-        aztecVersion = 'v1.5.3'
+        aztecVersion = 'v1.5.4'
         willPublishReactNativeAztecBinary = properties["willPublishReactNativeAztecBinary"]?.toBoolean() ?: false
     }
 }

packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java

@@ -60,6 +60,8 @@
 import java.util.Map;
 import java.util.ArrayList;
 import java.util.Arrays;
+import java.util.regex.Matcher;
+import java.util.regex.Pattern;
 
 public class ReactAztecManager extends BaseViewManager<ReactAztecText, LayoutShadowNode> {
 
@@ -80,6 +82,7 @@ public class ReactAztecManager extends BaseViewManager<ReactAztecText, LayoutSha
     private static final String BLOCK_TYPE_TAG_KEY = "tag";
     private static final String LINK_TEXT_COLOR_KEY = "linkTextColor";
 
+    private float mCurrentFontSize = 0;
     private float mCurrentLineHeight = 0;
 
     @Nullable private final Consumer<Exception> exceptionLogger;
@@ -267,6 +270,35 @@ private void updateSelectionIfNeeded(ReactAztecText view, @Nullable ReadableMap
         }
     }
 
+    private boolean isHeadingBlock(ReactAztecText view) {
+        String tag = view.getTagName();
+        final String regex = "h([1-6])";
+        final Pattern pattern = Pattern.compile(regex);
+        final Matcher matcher = pattern.matcher(tag);
+
+        return matcher.find();
+    }
+
+    private float getHeadingScale(String scale) {
+        // Values from https://github.com/wordpress-mobile/AztecEditor-Android/blob/trunk/aztec/src/main/kotlin/org/wordpress/aztec/spans/AztecHeadingSpan.kt#L94-L100
+        switch (scale) {
+            case "h1":
+                return 1.73f;
+            case "h2":
+                return 1.32f;
+            case "h3":
+                return 1.02f;
+            case "h4":
+                return 0.87f;
+            case "h5":
+                return 0.72f;
+            case "h6":
+                return 0.60f;
+        }
+
+        return 1.0f;
+    }
+
     @ReactProp(name = "activeFormats", defaultBoolean = false)
     public void setActiveFormats(final ReactAztecText view, @Nullable ReadableArray activeFormats) {
         if (activeFormats != null) {
@@ -285,19 +317,35 @@ public void setActiveFormats(final ReactAztecText view, @Nullable ReadableArray
      */
     @ReactProp(name = ViewProps.FONT_SIZE, defaultFloat = ViewDefaults.FONT_SIZE_SP)
     public void setFontSize(ReactAztecText view, float fontSize) {
+        float scale = 1;
+        boolean isLineHeightSet = mCurrentLineHeight != 0;
+        mCurrentFontSize = fontSize;
+
+        // Since Aztec applies a scale to the heading's font size
+        // we subtract it before applying the new font size.
+        if (isHeadingBlock(view) && isLineHeightSet) {
+            scale = getHeadingScale(view.getTagName());
+        }
+
         view.setTextSize(
                 TypedValue.COMPLEX_UNIT_PX,
-                (int) Math.ceil(PixelUtil.toPixelFromSP(fontSize)));
+                (int) Math.ceil(PixelUtil.toPixelFromSP(fontSize / scale)));
 
-        if (mCurrentLineHeight != 0) {
+        if (isLineHeightSet) {
             setLineHeight(view, mCurrentLineHeight);
         }
     }
 
     @ReactProp(name = ViewProps.LINE_HEIGHT)
     public void setLineHeight(ReactAztecText view, float lineHeight) {
         mCurrentLineHeight = lineHeight;
-        float textSize = view.getTextSize();
+        float scale = 1;
+
+        if (isHeadingBlock(view)) {
+            scale = getHeadingScale(view.getTagName());
+        }
+
+        float textSize = view.getTextSize() * scale;
         view.setLineSpacing(textSize * lineHeight, (float) (lineHeight / textSize));
     }
 
@@ -464,6 +512,12 @@ public void setSelectionColor(ReactAztecText view, @Nullable Integer color) {
     public void setBlockType(ReactAztecText view, ReadableMap inputMap) {
         if (inputMap.hasKey(BLOCK_TYPE_TAG_KEY)) {
             view.setTagName(inputMap.getString(BLOCK_TYPE_TAG_KEY));
+
+            // Check if it's a heading block, this is needed to set the
+            // right font size scale.
+            if (isHeadingBlock(view)) {
+                setFontSize(view, mCurrentFontSize);
+            }
         }
     }
 

packages/react-native-editor/CHANGELOG.md

@@ -12,6 +12,7 @@ For each user feature we should also add a importance categorization label  to i
 ## Unreleased
 
 -   [**] [Gallery block] Fix crash when adding images and selecting a gallery item [#38238]
+-   [***] Font size and line-height support for text-based blocks used in block-based themes [#38205]
 
 ## 1.70.0
 

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

@@ -59,6 +59,7 @@ const gutenbergFormatNamesToAztec = {
 
 const EMPTY_PARAGRAPH_TAGS = '<p></p>';
 const DEFAULT_FONT_SIZE = 16;
+const MIN_LINE_HEIGHT = 1;
 
 export class RichText extends Component {
 	constructor( {
@@ -919,7 +920,7 @@ export class RichText extends Component {
 		let newFontSize = DEFAULT_FONT_SIZE;
 
 		// For block-based themes, get the default editor font size.
-		if ( baseGlobalStyles?.typography?.fontSize ) {
+		if ( baseGlobalStyles?.typography?.fontSize && tagName === 'p' ) {
 			newFontSize = baseGlobalStyles?.typography?.fontSize;
 		}
 
@@ -949,29 +950,54 @@ export class RichText extends Component {
 	}
 
 	getLineHeight() {
-		const { baseGlobalStyles, tagName } = this.props;
+		const { baseGlobalStyles, tagName, lineHeight, style } = this.props;
 		const tagNameLineHeight =
 			baseGlobalStyles?.elements?.[ tagName ]?.typography?.lineHeight;
-		let lineHeight;
+		let newLineHeight;
 
-		// eslint-disable-next-line no-undef
-		if ( ! __DEV__ ) {
+		if ( ! this.getIsBlockBasedTheme() ) {
 			return;
 		}
 
-		if ( baseGlobalStyles?.typography?.lineHeight ) {
-			lineHeight = parseFloat( baseGlobalStyles?.typography?.lineHeight );
+		// For block-based themes, get the default editor line height.
+		if ( baseGlobalStyles?.typography?.lineHeight && tagName === 'p' ) {
+			newLineHeight = parseFloat(
+				baseGlobalStyles?.typography?.lineHeight
+			);
 		}
 
+		// For block-based themes, get the default element line height
+		// e.g h1, h2.
 		if ( tagNameLineHeight ) {
-			lineHeight = parseFloat( tagNameLineHeight );
+			newLineHeight = parseFloat( tagNameLineHeight );
+		}
+
+		// For line height values provided from the styles,
+		// usually from values set from the line height picker.
+		if ( style?.lineHeight ) {
+			newLineHeight = parseFloat( style.lineHeight );
+		}
+
+		// Fall-back to a line height provided from its props (if there's any)
+		// and there are no other default values to use.
+		if ( lineHeight && ! tagNameLineHeight && ! style?.lineHeight ) {
+			newLineHeight = lineHeight;
 		}
 
-		if ( this.props.style?.lineHeight ) {
-			lineHeight = parseFloat( this.props.style.lineHeight );
+		// Check the final value is not over the minimum supported value.
+		if ( newLineHeight && newLineHeight < MIN_LINE_HEIGHT ) {
+			newLineHeight = MIN_LINE_HEIGHT;
 		}
 
-		return lineHeight;
+		return newLineHeight;
+	}
+
+	getIsBlockBasedTheme() {
+		const { baseGlobalStyles } = this.props;
+
+		return (
+			baseGlobalStyles && Object.entries( baseGlobalStyles ).length !== 0
+		);
 	}
 
 	getBlockUseDefaultFont() {
@@ -982,9 +1008,8 @@ export class RichText extends Component {
 			return;
 		}
 
-		const { baseGlobalStyles, tagName } = this.props;
-		const isBlockBasedTheme =
-			baseGlobalStyles && Object.entries( baseGlobalStyles ).length !== 0;
+		const { tagName } = this.props;
+		const isBlockBasedTheme = this.getIsBlockBasedTheme();
 		const tagsToMatch = /pre|h([1-6])$/gm;
 
 		return isBlockBasedTheme && tagsToMatch.test( tagName );

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

@@ -122,14 +122,28 @@ describe( '<RichText/>', () => {
 			expect( actualFontSize ).toBe( expectedFontSize );
 		} );
 
+		it( `should display rich text with the default editor font size value and not use the
+		\`default font size value from the global styles for a tag different than (p)`, () => {
+			// Arrange
+			const defaultFontSize = 16;
+			mockGlobalSettings( { fontSize: 'min(2em, 3em)' } );
+			// Act
+			const { getByA11yLabel } = render(
+				<RichText accessibilityLabel={ 'editor' } tagName="div" />
+			);
+			// Assert
+			const actualFontSize = getByA11yLabel( 'editor' ).props.fontSize;
+			expect( actualFontSize ).toBe( defaultFontSize );
+		} );
+
 		it( `should display rich text at the PROVIDED font size computed from the selected GLOBAL
 		\`__experimentalGlobalStylesBaseStyles.typography.fontSize\` CSS.`, () => {
 			// Arrange
 			const expectedFontSize = 32;
 			mockGlobalSettings( { fontSize: 'min(2em, 3em)' } );
 			// Act
 			const { getByA11yLabel } = render(
-				<RichText accessibilityLabel={ 'editor' } />
+				<RichText accessibilityLabel={ 'editor' } tagName="p" />
 			);
 			// Assert
 			const actualFontSize = getByA11yLabel( 'editor' ).props.fontSize;
@@ -144,7 +158,7 @@ describe( '<RichText/>', () => {
 				mockGlobalSettings( { fontSize: unit } );
 				// Act
 				const { getByA11yLabel } = render(
-					<RichText accessibilityLabel={ 'editor' } />
+					<RichText accessibilityLabel={ 'editor' } tagName="p" />
 				);
 				// Assert
 				const actualFontSize = getByA11yLabel( 'editor' ).props
@@ -164,6 +178,7 @@ describe( '<RichText/>', () => {
 					accessibilityLabel={ 'editor' }
 					style={ { fontSize: '1' } }
 					fontSize={ '2' }
+					tagName="p"
 				/>
 			);
 			// Assert
@@ -181,6 +196,7 @@ describe( '<RichText/>', () => {
 				<RichText
 					accessibilityLabel={ 'editor' }
 					style={ { fontSize: '1' } }
+					tagName="p"
 				/>
 			);
 			// Assert
@@ -246,5 +262,18 @@ describe( '<RichText/>', () => {
 			// Assert
 			expect( screen.toJSON() ).toMatchSnapshot();
 		} );
+
+		it( 'should set the default minimum line height value if the provided value from the styles is lower', () => {
+			// Arrange
+			const expectedLineHeight = 1;
+			const style = { lineHeight: 0.2 };
+			// Act
+			const { getByA11yLabel } = render(
+				<RichText accessibilityLabel={ 'editor' } style={ style } />
+			);
+			// Assert
+			const actualFontSize = getByA11yLabel( 'editor' ).props.lineHeight;
+			expect( actualFontSize ).toBe( expectedLineHeight );
+		} );
 	} );
 } );