[RNMobile] Add Featured Banner to Image Block (iOS Only)

packages/components/src/mobile/badge/style.scss

@@ -12,4 +12,5 @@
 	border-radius: 3px;
 	background-color: $gray-70;
 	border-color: $gray-70;
+	overflow: hidden;
 }

packages/react-native-bridge/index.js

@@ -63,12 +63,10 @@ export function subscribeUpdateHtml( callback ) {
 }
 
 export function subscribeFeaturedImageIdNativeUpdated( callback ) {
-	return isAndroid
-		? gutenbergBridgeEvents.addListener(
-				'featuredImageIdNativeUpdated',
-				callback
-		  )
-		: undefined;
+	return gutenbergBridgeEvents.addListener(
+		'featuredImageIdNativeUpdated',
+		callback
+	);
 }
 
 /**

packages/react-native-bridge/ios/Gutenberg.swift

@@ -64,6 +64,8 @@ public class Gutenberg: NSObject {
             initialProps["initialTitle"] = initialTitle
         }
 
+        initialProps["featuredImageId"] = dataSource.gutenbergFeaturedImageId()
+
         initialProps["postType"] = dataSource.gutenbergPostType()
 
         if let locale = dataSource.gutenbergLocale() {
@@ -118,6 +120,10 @@ public class Gutenberg: NSObject {
         sendEvent(.updateHtml, body: ["html": html])
     }
 
+    public func featuredImageIdNativeUpdated(mediaId: Int32) {
+        sendEvent(.featuredImageIdNativeUpdated, body: ["featuredImageId": mediaId])
+    }
+
     public func replace(block: Block) {
         sendEvent(.replaceBlock, body: ["html": block.content, "clientId": block.id])
     }

packages/react-native-bridge/ios/GutenbergBridgeDataSource.swift

@@ -13,6 +13,11 @@ public protocol GutenbergBridgeDataSource: class {
     /// - Returns: The HTML initial title or nil.
     func gutenbergInitialTitle() -> String?
 
+    /// Asks the data source for the initial featured image id to be presented by the editor.
+    ///
+    /// - Returns: The initial id of the post's featured image, zero if no featured image is set.
+    func gutenbergFeaturedImageId() -> NSNumber?
+
     /// Asks the data source for the post type to be presented by the editor.
     /// Return `nil` to assume a `post` type.
     ///

packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift

@@ -366,6 +366,7 @@ extension RNReactNativeGutenbergBridge {
         case setTitle
         case toggleHTMLMode
         case updateHtml
+        case featuredImageIdNativeUpdated
         case mediaUpload
         case setFocusOnTitle
         case mediaAppend

packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift

@@ -279,6 +279,10 @@ extension GutenbergViewController: GutenbergBridgeDataSource {
         return nil
     }
 
+    func gutenbergFeaturedImageId() -> NSNumber? {
+        return nil
+    }
+
     func gutenbergCapabilities() -> [Capabilities : Bool] {
         return [
             .mentions: true,