[RNMobile] Unsupported block fallback send block title and name (#23450)

* Unsupported block fallback: Sending both block title and block name to native * Lint fixes * [iOS]: Adding documentation to Block struct
WordPress · Jun 30, 2020 · de041fd · de041fd
1 parent 3e5af66
commit de041fd
Show file tree

Hide file tree

Showing 11 changed files with 42 additions and 20 deletions.
diff --git a/packages/block-library/src/missing/edit.native.js b/packages/block-library/src/missing/edit.native.js
@@ -70,7 +70,7 @@ export class UnsupportedBlockEdit extends Component {
 		this.setState( { sendFallbackMessage: true } );
 	}
 
-	renderSheet( title ) {
+	renderSheet( blockTitle, blockName ) {
 		const { getStylesFromColorScheme, attributes, clientId } = this.props;
 		const infoTextStyle = getStylesFromColorScheme(
 			styles.infoText,
@@ -95,7 +95,7 @@ export class UnsupportedBlockEdit extends Component {
 				  __( "'%s' isn't yet supported on WordPress for Android" )
 				: // translators: %s: Name of the block
 				  __( "'%s' isn't yet supported on WordPress for iOS" );
-		const infoTitle = sprintf( titleFormat, title );
+		const infoTitle = sprintf( titleFormat, blockTitle );
 
 		const actionButtonStyle = getStylesFromColorScheme(
 			styles.actionButton,
@@ -115,7 +115,8 @@ export class UnsupportedBlockEdit extends Component {
 							requestUnsupportedBlockFallback(
 								attributes.originalContent,
 								clientId,
-								title
+								blockName,
+								blockTitle
 							);
 						}, 100 );
 						this.setState( { sendFallbackMessage: false } );
@@ -209,7 +210,7 @@ export class UnsupportedBlockEdit extends Component {
 				/>
 				<Text style={ titleStyle }>{ title }</Text>
 				{ subtitle }
-				{ this.renderSheet( title ) }
+				{ this.renderSheet( title, originalName ) }
 			</View>
 		);
 	}

diff --git a/...c/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java b/...c/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java
@@ -145,7 +145,8 @@ public static GutenbergUserEvent getEnum(String eventName) {
     void gutenbergDidRequestUnsupportedBlockFallback(ReplaceUnsupportedBlockCallback replaceUnsupportedBlockCallback,
                                                      String content,
                                                      String blockId,
-                                                     String blockName);
+                                                     String blockName,
+                                                     String blockTitle);
 
     void onAddMention(Consumer<String> onSuccess);
 

diff --git a/...a/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java b/...a/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java
@@ -258,9 +258,9 @@ public void logUserEvent(String eventName, ReadableMap eventProperties) {
     }
 
     @ReactMethod
-    public void requestUnsupportedBlockFallback(String content, String blockId, String blockName) {
+    public void requestUnsupportedBlockFallback(String content, String blockId, String blockName, String blockTitle) {
         mGutenbergBridgeJS2Parent.gutenbergDidRequestUnsupportedBlockFallback((savedContent, savedBlockId) ->
-                replaceBlock(savedContent, savedBlockId), content, blockId, blockName);
+                replaceBlock(savedContent, savedBlockId), content, blockId, blockName, blockTitle);
     }
 
     private void replaceBlock(String content, String blockId) {

diff --git a/...ive-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/UnsupportedBlock.java b/...ive-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/UnsupportedBlock.java
@@ -4,11 +4,13 @@ public class UnsupportedBlock {
 
     private String mId;
     private String mName;
+    private String mTitle;
     private String mContent;
 
-    public UnsupportedBlock(String id, String name, String content) {
+    public UnsupportedBlock(String id, String name, String title, String content) {
         mId = id;
         mName = name;
+        mTitle = title;
         mContent = content;
     }
 
@@ -20,6 +22,10 @@ public String getName() {
         return mName;
     }
 
+    public String getTitle() {
+        return mTitle;
+    }
+
     public String getContent() {
         return mContent;
     }

diff --git a/...ve-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java b/...ve-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java
@@ -373,10 +373,11 @@ public void logUserEvent(GutenbergUserEvent event, ReadableMap eventProperties)
             public void gutenbergDidRequestUnsupportedBlockFallback(ReplaceUnsupportedBlockCallback replaceUnsupportedBlockCallback,
                                                                     String content,
                                                                     String blockId,
-                                                                    String blockName) {
+                                                                    String blockName,
+                                                                    String blockTitle) {
                 mReplaceUnsupportedBlockCallback = replaceUnsupportedBlockCallback;
                 mOnGutenbergDidRequestUnsupportedBlockFallbackListener.
-                        gutenbergDidRequestUnsupportedBlockFallback(new UnsupportedBlock(blockId, blockName, content));
+                        gutenbergDidRequestUnsupportedBlockFallback(new UnsupportedBlock(blockId, blockName, blockTitle, content));
             }
 
             @Override 

diff --git a/packages/react-native-bridge/index.js b/packages/react-native-bridge/index.js
@@ -129,17 +129,20 @@ export function requestMediaPicker( source, filter, multiple, callback ) {
  *
  * @param {string} htmlContent Raw html content of the block.
  * @param {string} blockClientId the clientId of the block.
- * @param {string} blockName the user-facing, localized block name.
+ * @param {string} blockName the internal system block name.
+ * @param {string} blockTitle the user-facing, localized block name.
  */
 export function requestUnsupportedBlockFallback(
 	htmlContent,
 	blockClientId,
-	blockName
+	blockName,
+	blockTitle
 ) {
 	RNReactNativeGutenbergBridge.requestUnsupportedBlockFallback(
 		htmlContent,
 		blockClientId,
-		blockName
+		blockName,
+		blockTitle
 	);
 }
 

diff --git a/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift b/packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift
@@ -12,13 +12,22 @@ public struct MediaInfo {
     }
 }
 
+/// Wrapper for single block data
 public struct Block {
+    /// Gutenberg internal block ID
     public let id: String
+    /// Gutenberg internal block name
     public let name: String
+    /// User facing block name string (localized)
+    public let title: String
+    /// Block HTML content
     public let content: String
 
+    /// Creates a copy of the receiver modifying only its content field.
+    /// - Parameter newContent: The content for the new block instance.
+    /// - Returns: A new block instance with copied fields and new content.
     public func replacingContent(with newContent: String) -> Block {
-        Block(id: id, name: name, content: newContent)
+        Block(id: id, name: name, title: title, content: newContent)
     }
 }
 

diff --git a/.../react-native-bridge/ios/GutenbergWebFallback/GutenbergWebSingleBlockViewController.swift b/.../react-native-bridge/ios/GutenbergWebFallback/GutenbergWebSingleBlockViewController.swift
@@ -82,7 +82,7 @@ open class GutenbergWebSingleBlockViewController: UIViewController {
         navigationItem.rightBarButtonItem = saveButton
         navigationItem.leftBarButtonItem = cancelButton
         let localizedTitle = NSLocalizedString("Edit %@ block", comment: "Title of Gutenberg WEB editor running on a Web View. %@ is the localized block name.")
-        title = String(format: localizedTitle, block.name)
+        title = String(format: localizedTitle, block.title)
     }
 
     func addCoverView() {

diff --git a/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.m b/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.m
@@ -19,7 +19,7 @@ @interface RCT_EXTERN_MODULE(RNReactNativeGutenbergBridge, NSObject)
 RCT_EXTERN_METHOD(requestImageFullscreenPreview:(NSString *)currentImageUrlString originalImageUrlString:(NSString *)originalImageUrlString)
 RCT_EXTERN_METHOD(requestMediaEditor:(NSString *)mediaUrl callback:(RCTResponseSenderBlock)callback)
 RCT_EXTERN_METHOD(logUserEvent:(NSString *)event properties:(NSDictionary *)properties)
-RCT_EXTERN_METHOD(requestUnsupportedBlockFallback:(NSString *)content blockId:(NSString *)blockId blockName:(NSString *)blockName)
+RCT_EXTERN_METHOD(requestUnsupportedBlockFallback:(NSString *)content blockId:(NSString *)blockId blockName:(NSString *)blockName blockTitle:(NSString *)blockTitle)
 RCT_EXTERN_METHOD(addMention:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)rejecter)
 RCT_EXTERN_METHOD(requestStarterPageTemplatesTooltipShown:(RCTResponseSenderBlock)callback)
 RCT_EXTERN_METHOD(setStarterPageTemplatesTooltipShown:(BOOL)tooltipShown)

diff --git a/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift b/packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift
@@ -60,9 +60,9 @@ public class RNReactNativeGutenbergBridge: RCTEventEmitter {
     }
 
     @objc
-    func requestUnsupportedBlockFallback(_ content: String, blockId: String, blockName: String) {
+    func requestUnsupportedBlockFallback(_ content: String, blockId: String, blockName: String, blockTitle: String) {
         DispatchQueue.main.async {
-            let block = Block(id: blockId, name: blockName, content: content)
+            let block = Block(id: blockId, name: blockName, title: blockTitle, content: content)
             self.delegate?.gutenbergDidRequestUnsupportedBlockFallback(for: block)
         }
     }

diff --git a/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java b/packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java
@@ -155,9 +155,10 @@ public void performRequest(String path, Consumer<String> onSuccess, Consumer<Bun
             public void gutenbergDidRequestUnsupportedBlockFallback(ReplaceUnsupportedBlockCallback replaceUnsupportedBlockCallback,
                                                                     String content,
                                                                     String blockId,
-                                                                    String blockName) {
+                                                                    String blockName,
+                                                                    String blockTitle) {
                 mReplaceUnsupportedBlockCallback = replaceUnsupportedBlockCallback;
-                openGutenbergWebView(content, blockId, blockName);
+                openGutenbergWebView(content, blockId, blockTitle);
             }
 
             @Override