Mobile - RichText/AztecView - Enable customizing the font size for th…

…e Heading and Preformatted block. (#37663) * Mobile - Default values - Remove the default font sizes for standard themes * Mobile - RichText/AztecView: - Update the font size if the tag changes, e.g changing the level of a Heading block. - Send a new flag to AztecView: blockUseDefaultFont, to enable using the defaultFont for the Heading and Preformatted block to be able to customize the font size for block-based themes. * Mobile - Update snapshots (Audio, File, and Search) to include the new attribute tag within the text object in RichText. * Mobile - RichText - Global styles check * Mobile - AztecView - Remove optional definition for blockUseDefaultFont * Mobile - Update Aztec version
WordPress · Jan 5, 2022 · 3200d91 · 3200d91
1 parent 5f61e2d
commit 3200d91
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 12 deletions.
diff --git a/packages/block-editor/src/store/defaults.native.js b/packages/block-editor/src/store/defaults.native.js
@@ -6,14 +6,10 @@ 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,
+	// Don't add the default font sizes for standard themes
+	fontSizes: undefined,
 	// FOR TESTING ONLY - Later, this will come from a REST API
 	// eslint-disable-next-line no-undef
 	__unstableGalleryWithImageBlocks: __DEV__,

diff --git a/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/audio/test/__snapshots__/edit.native.js.snap
@@ -144,6 +144,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
               "eventCount": undefined,
               "linkTextColor": undefined,
               "selection": null,
+              "tag": "p",
               "text": "",
             }
           }
@@ -323,6 +324,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
               "eventCount": undefined,
               "linkTextColor": undefined,
               "selection": null,
+              "tag": "p",
               "text": "",
             }
           }

diff --git a/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/file/test/__snapshots__/edit.native.js.snap
@@ -100,6 +100,7 @@ exports[`File block renders file error state without crashing 1`] = `
               "eventCount": undefined,
               "linkTextColor": undefined,
               "selection": null,
+              "tag": "p",
               "text": "<p>File name</p>",
             }
           }
@@ -193,6 +194,7 @@ exports[`File block renders file error state without crashing 1`] = `
               "eventCount": undefined,
               "linkTextColor": undefined,
               "selection": null,
+              "tag": "p",
               "text": "<p>Download</p>",
             }
           }
@@ -305,6 +307,7 @@ exports[`File block renders file without crashing 1`] = `
               "eventCount": undefined,
               "linkTextColor": undefined,
               "selection": null,
+              "tag": "p",
               "text": "<p>File name</p>",
             }
           }
@@ -380,6 +383,7 @@ exports[`File block renders file without crashing 1`] = `
               "eventCount": undefined,
               "linkTextColor": undefined,
               "selection": null,
+              "tag": "p",
               "text": "<p>Download</p>",
             }
           }

diff --git a/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/search/test/__snapshots__/edit.native.js.snap
@@ -57,6 +57,7 @@ exports[`Search Block renders block with button inside option 1`] = `
             "eventCount": undefined,
             "linkTextColor": undefined,
             "selection": null,
+            "tag": "p",
             "text": "<p>Search</p>",
           }
         }
@@ -165,6 +166,7 @@ exports[`Search Block renders block with button inside option 1`] = `
                 "eventCount": undefined,
                 "linkTextColor": undefined,
                 "selection": null,
+                "tag": "p",
                 "text": "<p>Search Button</p>",
               }
             }
@@ -235,6 +237,7 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
             "eventCount": undefined,
             "linkTextColor": undefined,
             "selection": null,
+            "tag": "p",
             "text": "<p>Search</p>",
           }
         }
@@ -403,6 +406,7 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
                 "eventCount": undefined,
                 "linkTextColor": undefined,
                 "selection": null,
+                "tag": "p",
                 "text": "<p>Search Button</p>",
               }
             }
@@ -473,6 +477,7 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
             "eventCount": undefined,
             "linkTextColor": undefined,
             "selection": null,
+            "tag": "p",
             "text": "<p>Search</p>",
           }
         }
@@ -581,6 +586,7 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
                 "eventCount": undefined,
                 "linkTextColor": undefined,
                 "selection": null,
+                "tag": "p",
                 "text": "<p>Search Button</p>",
               }
             }
@@ -651,6 +657,7 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
             "eventCount": undefined,
             "linkTextColor": undefined,
             "selection": null,
+            "tag": "p",
             "text": "<p>Search</p>",
           }
         }

diff --git a/packages/react-native-aztec/ios/RNTAztecView/RCTAztecView.swift b/packages/react-native-aztec/ios/RNTAztecView/RCTAztecView.swift
@@ -98,6 +98,10 @@ class RCTAztecView: Aztec.TextView {
 
     // MARK: - Font
 
+    /// Flag to enable using the defaultFont in Aztec for specific blocks
+    /// Like the Preformatted and Heading blocks.
+    private var blockUseDefaultFont: Bool = false
+
     /// Font family for all contents  Once this is set, it will always override the font family for all of its
     /// contents, regardless of what HTML is provided to Aztec.
     private var fontFamily: String? = nil
@@ -490,6 +494,21 @@ class RCTAztecView: Aztec.TextView {
 
     // MARK: - RN Properties
 
+    @objc func setBlockUseDefaultFont(_ useDefaultFont: Bool) {
+        guard blockUseDefaultFont != useDefaultFont else {
+            return
+        }
+
+        if useDefaultFont {
+            // Enable using the defaultFont in Aztec
+            // For the PreFormatter and HeadingFormatter
+            Configuration.useDefaultFont = true
+        }
+
+        blockUseDefaultFont = useDefaultFont
+        refreshFont()
+    }
+
     @objc
     func setContents(_ contents: NSDictionary) {
 
@@ -503,6 +522,9 @@ class RCTAztecView: Aztec.TextView {
 
         let html = contents["text"] as? String ?? ""
 
+        let tag = contents["tag"] as? String ?? ""
+        checkDefaultFontFamily(tag: tag)
+
         setHTML(html)
         updatePlaceholderVisibility()
         refreshTypingAttributesAndPlaceholderFont()
@@ -683,6 +705,16 @@ class RCTAztecView: Aztec.TextView {
             textStorage.addAttribute(NSAttributedString.Key.paragraphStyle, value: style, range: NSMakeRange(0, textStorage.length))
         }
     }
+
+    /// This method sets the desired font family
+    /// for specific tags.
+    private func checkDefaultFontFamily(tag: String) {
+        // Since we are using the defaultFont to customize
+        // the font size, we need to set the monospace font.
+        if (blockUseDefaultFont && tag == "pre") {
+            setFontFamily(FontProvider.shared.monospaceFont.fontName)
+        }
+    }
 
     // MARK: - Formatting interface
 

diff --git a/packages/react-native-aztec/ios/RNTAztecView/RCTAztecViewManager.m b/packages/react-native-aztec/ios/RNTAztecView/RCTAztecViewManager.m
@@ -2,6 +2,7 @@
 
 @interface RCT_EXTERN_MODULE(RCTAztecViewManager, NSObject)
 
+RCT_EXPORT_VIEW_PROPERTY(blockUseDefaultFont, BOOL)
 RCT_REMAP_VIEW_PROPERTY(text, contents, NSDictionary)
 RCT_EXPORT_VIEW_PROPERTY(onContentSizeChange, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onBackspace, RCTBubblingEventBlock)

diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js
@@ -718,7 +718,7 @@ export class RichText extends Component {
 		//   see https://github.com/WordPress/gutenberg/blob/82e578dcc75e67891c750a41a04c1e31994192fc/packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java#L213-L215
 	}
 
-	shouldComponentUpdate( nextProps ) {
+	shouldComponentUpdate( nextProps, nextState ) {
 		if (
 			nextProps.tagName !== this.props.tagName ||
 			nextProps.reversed !== this.props.reversed ||
@@ -776,7 +776,10 @@ export class RichText extends Component {
 			}
 
 			if (
-				nextProps?.style?.fontSize !== this.props?.style?.fontSize ||
+				( nextProps?.style?.fontSize !== this.props?.style?.fontSize &&
+					nextState.currentFontSize !==
+						this.state.currentFontSize ) ||
+				nextState.currentFontSize !== this.state.currentFontSize ||
 				nextProps?.style?.lineHeight !== this.props?.style?.lineHeight
 			) {
 				this.needsSelectionUpdate = true;
@@ -811,7 +814,7 @@ export class RichText extends Component {
 	}
 
 	componentDidUpdate( prevProps ) {
-		const { style } = this.props;
+		const { style, tagName } = this.props;
 		const { currentFontSize } = this.state;
 
 		if ( this.props.value !== this.value ) {
@@ -835,10 +838,12 @@ export class RichText extends Component {
 
 		const currentFontSizeStyle = parseFloat( style?.fontSize );
 		const prevFontSizeStyle = parseFloat( prevProps?.style?.fontSize );
+		const isDifferentTag = prevProps.tagName !== tagName;
 		if (
-			currentFontSize &&
-			( currentFontSizeStyle || prevFontSizeStyle ) &&
-			currentFontSizeStyle !== currentFontSize
+			( currentFontSize &&
+				( currentFontSizeStyle || prevFontSizeStyle ) &&
+				currentFontSizeStyle !== currentFontSize ) ||
+			isDifferentTag
 		) {
 			this.setState( {
 				currentFontSize: this.getFontSize( this.props ),
@@ -945,6 +950,22 @@ export class RichText extends Component {
 		return lineHeight;
 	}
 
+	getBlockUseDefaultFont() {
+		// For block-based themes it enables using the defaultFont
+		// in Aztec for iOS so it allows customizing the font size
+		// for the Preformatted/Code and Heading blocks.
+		if ( ! this.isIOS ) {
+			return;
+		}
+
+		const { baseGlobalStyles, tagName } = this.props;
+		const isBlockBasedTheme =
+			baseGlobalStyles && Object.entries( baseGlobalStyles ).length !== 0;
+		const tagsToMatch = /pre|h([1-6])$/gm;
+
+		return isBlockBasedTheme && tagsToMatch.test( tagName );
+	}
+
 	render() {
 		const {
 			tagName,
@@ -965,6 +986,7 @@ export class RichText extends Component {
 		const record = this.getRecord();
 		const html = this.getHtmlToRender( record, tagName );
 		const editableProps = this.getEditableProps();
+		const blockUseDefaultFont = this.getBlockUseDefaultFont();
 
 		const placeholderStyle = getStylesFromColorScheme(
 			styles.richTextPlaceholder,
@@ -1070,12 +1092,14 @@ export class RichText extends Component {
 							: { maxWidth } ),
 						minHeight: this.state.height,
 					} }
+					blockUseDefaultFont={ blockUseDefaultFont }
 					text={ {
 						text: html,
 						eventCount: this.lastEventCount,
 						selection,
 						linkTextColor:
 							style?.linkColor || defaultTextDecorationColor,
+						tag: tagName,
 					} }
 					placeholder={ this.props.placeholder }
 					placeholderTextColor={