Gutenberg/free media library

Podfile

@@ -140,7 +140,7 @@ target 'WordPress' do
     ## Gutenberg (React Native)
     ## =====================
     ##
-    gutenberg :tag => 'v1.16.0'
+    gutenberg :commit => 'b987decc0810e14118441e9590770aa8dc75b200'
 
     ## Third party libraries
     ## =====================

WordPress/Classes/ViewRelated/Gutenberg/GutenbergMediaInserterHelper.swift

@@ -4,13 +4,9 @@ import WPMediaPicker
 import Gutenberg
 
 class GutenbergMediaInserterHelper: NSObject {
-
     fileprivate let post: AbstractPost
-
     fileprivate let gutenberg: Gutenberg
-
     fileprivate let mediaCoordinator = MediaCoordinator.shared
-
     fileprivate var mediaObserverReceipt: UUID?
 
     /// Method of selecting media for upload, used for analytics
@@ -81,7 +77,6 @@ class GutenbergMediaInserterHelper: NSObject {
                 return
             }
         }
-
     }
 
     func insertFromDevice(url: URL, callback: @escaping MediaPickerDidPickMediaCallback) {
@@ -132,19 +127,9 @@ class GutenbergMediaInserterHelper: NSObject {
         return mediaCoordinator.hasFailedMedia(for: post)
     }
 
-    private func insert(exportableAsset: ExportableAsset, source: MediaSource) -> Media {
-        switch exportableAsset.assetMediaType {
-        case .image:
-            break
-        case .video:
-            break
-        default:
-            break
-        }
-
+    func insert(exportableAsset: ExportableAsset, source: MediaSource) -> Media {
         let info = MediaAnalyticsInfo(origin: .editor(source), selectionMethod: mediaSelectionMethod)
-        let media = mediaCoordinator.addMedia(from: exportableAsset, to: self.post, analyticsInfo: info)
-        return media
+        return mediaCoordinator.addMedia(from: exportableAsset, to: self.post, analyticsInfo: info)
     }
 
     private func registerMediaObserver() {

WordPress/Classes/ViewRelated/Gutenberg/GutenbergViewController.swift

@@ -16,6 +16,10 @@ class GutenbergViewController: UIViewController, PostEditor {
         case autoSave
     }
 
+    private lazy var stockPhotos: GutenbergStockPhotos = {
+        return GutenbergStockPhotos(gutenberg: gutenberg, mediaInserter: mediaInserterHelper)
+    }()
+
     // MARK: - Aztec
 
     internal let replaceEditor: (EditorViewController, EditorViewController) -> ()
@@ -345,7 +349,7 @@ extension GutenbergViewController: GutenbergBridgeDelegate {
         autosaver.contentDidChange()
     }
 
-    func gutenbergDidRequestMedia(from source: MediaPickerSource, filter: [MediaFilter]?, allowMultipleSelection: Bool, with callback: @escaping MediaPickerDidPickMediaCallback) {
+    func gutenbergDidRequestMedia(from source: Gutenberg.MediaSource, filter: [Gutenberg.MediaType], allowMultipleSelection: Bool, with callback: @escaping MediaPickerDidPickMediaCallback) {
         let flags = mediaFilterFlags(using: filter)
         switch source {
         case .mediaLibrary:
@@ -354,31 +358,31 @@ extension GutenbergViewController: GutenbergBridgeDelegate {
             gutenbergDidRequestMediaFromDevicePicker(filter: flags, allowMultipleSelection: allowMultipleSelection, with: callback)
         case .deviceCamera:
             gutenbergDidRequestMediaFromCameraPicker(filter: flags, with: callback)
+        case .freeMediaLibrary:
+            stockPhotos.presentPicker(origin: self, post: post, multipleSelection: allowMultipleSelection, callback: callback)
+        default: break;
         }
     }
 
-    func mediaFilterFlags(using filterArray: [MediaFilter]?) -> WPMediaType {
-        if let filterArray = filterArray {
-            var mediaType: Int = 0
-            for filter in filterArray {
-                switch filter {
-                case .image:
-                    mediaType = mediaType | WPMediaType.image.rawValue
-                case .video:
-                    mediaType = mediaType | WPMediaType.video.rawValue
-                case .audio:
-                    mediaType = mediaType | WPMediaType.audio.rawValue
-                case .other:
-                    mediaType = mediaType | WPMediaType.other.rawValue
-                }
-            }
-            if mediaType == 0 {
-                return WPMediaType.all
-            } else {
-                return WPMediaType(rawValue: mediaType)
+    func mediaFilterFlags(using filterArray: [Gutenberg.MediaType]) -> WPMediaType {
+        var mediaType: Int = 0
+        for filter in filterArray {
+            switch filter {
+            case .image:
+                mediaType = mediaType | WPMediaType.image.rawValue
+            case .video:
+                mediaType = mediaType | WPMediaType.video.rawValue
+            case .audio:
+                mediaType = mediaType | WPMediaType.audio.rawValue
+            case .other:
+                mediaType = mediaType | WPMediaType.other.rawValue
             }
         }
-        return WPMediaType.all
+        if mediaType == 0 {
+            return WPMediaType.all
+        } else {
+            return WPMediaType(rawValue: mediaType)
+        }
     }
 
     func gutenbergDidRequestMediaFromSiteMediaLibrary(filter: WPMediaType, allowMultipleSelection: Bool, with callback: @escaping MediaPickerDidPickMediaCallback) {
@@ -557,6 +561,10 @@ extension GutenbergViewController: GutenbergBridgeDataSource {
     func aztecAttachmentDelegate() -> TextViewAttachmentDelegate {
         return attachmentDelegate
     }
+
+    func gutenbergMediaSources() -> [Gutenberg.MediaSource] {
+        return [.freeMediaLibrary]
+    }
 }
 
 // MARK: - PostEditorStateContextDelegate
@@ -652,8 +660,11 @@ extension GutenbergViewController: PostEditorNavigationBarManagerDelegate {
 
 // MARK: - Constants
 
-private extension GutenbergViewController {
+extension Gutenberg.MediaSource {
+    static let freeMediaLibrary = Gutenberg.MediaSource(id: "free-photo-library", label: .freePhotosLibrary, types: [.image])
+}
 
+private extension GutenbergViewController {
     enum Analytics {
         static let editorSource = "gutenberg"
     }

WordPress/Classes/ViewRelated/Gutenberg/Utils/GutenbergStockPhotos.swift

@@ -0,0 +1,66 @@
+import Gutenberg
+
+class GutenbergStockPhotos {
+    private var stockPhotos: StockPhotosPicker?
+    private var mediaPickerCallback: MediaPickerDidPickMediaCallback?
+    private let mediaInserter: GutenbergMediaInserterHelper
+    private unowned var gutenberg: Gutenberg
+
+    init(gutenberg: Gutenberg, mediaInserter: GutenbergMediaInserterHelper) {
+        self.mediaInserter = mediaInserter
+        self.gutenberg = gutenberg
+    }
+
+    func presentPicker(origin: UIViewController, post: AbstractPost, multipleSelection: Bool, callback: @escaping MediaPickerDidPickMediaCallback) {
+        let picker = StockPhotosPicker()
+        stockPhotos = picker
+        // Forcing multiple selection while multipleSelection == false in JS side.
+        picker.allowMultipleSelection = true //multipleSelection
+        picker.delegate = self
+        mediaPickerCallback = callback
+        picker.presentPicker(origin: origin, blog: post.blog)
+    }
+}
+
+extension GutenbergStockPhotos: StockPhotosPickerDelegate {
+    func stockPhotosPicker(_ picker: StockPhotosPicker, didFinishPicking assets: [StockPhotosMedia]) {
+        defer {
+            mediaPickerCallback = nil
+            stockPhotos = nil
+        }
+        guard assets.isEmpty == false else {
+            mediaPickerCallback?(nil)
+            return
+        }
+
+        // Append the first item via callback given by Gutenberg.
+        if let firstItem = assets.first {
+            insertOnBlock(with: firstItem)
+        }
+        // Append the rest of images via `.appendMedia` event.
+        // Ideally we would send all picked images via the given callback, but that seems to not be possible yet.
+        appendOnNewBlocks(assets: assets.dropFirst())
+    }
+
+    /// Adds the given image object to the requesting Image Block
+    /// - Parameter asset: Stock Media object to add.
+    func insertOnBlock(with asset: StockPhotosMedia) {
+        guard let callback = mediaPickerCallback else {
+            return assertionFailure("Image picked without callback")
+        }
+
+        let media = self.mediaInserter.insert(exportableAsset: asset, source: .giphy)
+        let mediaUploadID = media.gutenbergUploadID
+        callback([MediaInfo(id: mediaUploadID, url: asset.URL.absoluteString, type: media.mediaTypeString)])
+    }
+
+
+    /// Create a new image block for each of the image objects in the slice.
+    /// - Parameter assets: Stock Media objects to append.
+    func appendOnNewBlocks(assets: ArraySlice<StockPhotosMedia>) {
+        assets.forEach {
+            let media = self.mediaInserter.insert(exportableAsset: $0, source: .giphy)
+            self.gutenberg.appendMedia(id: media.gutenbergUploadID, url: $0.URL, type: .image)
+        }
+    }
+}

WordPress/Classes/ViewRelated/Media/StockPhotos/StockPhotosPicker.swift

@@ -6,6 +6,8 @@ protocol StockPhotosPickerDelegate: AnyObject {
 
 /// Presents the Stock Photos main interface
 final class StockPhotosPicker: NSObject {
+    var allowMultipleSelection = true
+
     private lazy var dataSource: StockPhotosDataSource = {
         return StockPhotosDataSource(service: stockPhotosService)
     }()
@@ -26,13 +28,14 @@ final class StockPhotosPicker: NSObject {
 
     private let searchHint = NoResultsViewController.controller()
 
-    private var pickerOptions: WPMediaPickerOptions = {
+    private lazy var pickerOptions: WPMediaPickerOptions = {
         let options = WPMediaPickerOptions()
         options.showMostRecentFirst = true
         options.filter = [.all]
         options.allowCaptureOfMedia = false
         options.showSearchBar = true
         options.preferredStatusBarStyle = .lightContent
+        options.allowMultipleSelection = allowMultipleSelection
         return options
     }()
 

WordPress/WordPress.xcodeproj/project.pbxproj

@@ -891,6 +891,7 @@
 		7E3E7A6420E44ED60075D159 /* SubjectContentGroup.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7E3E7A6320E44ED60075D159 /* SubjectContentGroup.swift */; };
 		7E3E7A6620E44F200075D159 /* HeaderContentGroup.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7E3E7A6520E44F200075D159 /* HeaderContentGroup.swift */; };
 		7E3E9B702177C9DC00FD5797 /* GutenbergViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7E3E9B6F2177C9DC00FD5797 /* GutenbergViewController.swift */; };
+		7E407121237163B8003627FA /* GutenbergStockPhotos.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7E407120237163B8003627FA /* GutenbergStockPhotos.swift */; };
 		7E4123B920F4097B00DF8486 /* FormattableContentFactory.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7E4123AC20F4097900DF8486 /* FormattableContentFactory.swift */; };
 		7E4123BA20F4097B00DF8486 /* FormattableContentGroup.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7E4123AD20F4097900DF8486 /* FormattableContentGroup.swift */; };
 		7E4123BC20F4097B00DF8486 /* DefaultFormattableContentAction.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7E4123AF20F4097A00DF8486 /* DefaultFormattableContentAction.swift */; };
@@ -3022,6 +3023,7 @@
 		7E3E7A6320E44ED60075D159 /* SubjectContentGroup.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SubjectContentGroup.swift; sourceTree = "<group>"; };
 		7E3E7A6520E44F200075D159 /* HeaderContentGroup.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HeaderContentGroup.swift; sourceTree = "<group>"; };
 		7E3E9B6F2177C9DC00FD5797 /* GutenbergViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GutenbergViewController.swift; sourceTree = "<group>"; };
+		7E407120237163B8003627FA /* GutenbergStockPhotos.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GutenbergStockPhotos.swift; sourceTree = "<group>"; };
 		7E4123AC20F4097900DF8486 /* FormattableContentFactory.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = FormattableContentFactory.swift; sourceTree = "<group>"; };
 		7E4123AD20F4097900DF8486 /* FormattableContentGroup.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = FormattableContentGroup.swift; sourceTree = "<group>"; };
 		7E4123AF20F4097A00DF8486 /* DefaultFormattableContentAction.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = DefaultFormattableContentAction.swift; sourceTree = "<group>"; };
@@ -6408,10 +6410,19 @@
 				912347182213484300BD9F97 /* GutenbergViewController+InformativeDialog.swift */,
 				912347752216E27200BD9F97 /* GutenbergViewController+Localization.swift */,
 				FFC02B82222687BF00E64FDE /* GutenbergImageLoader.swift */,
+				7E407122237163C3003627FA /* Utils */,
 			);
 			path = Gutenberg;
 			sourceTree = "<group>";
 		};
+		7E407122237163C3003627FA /* Utils */ = {
+			isa = PBXGroup;
+			children = (
+				7E407120237163B8003627FA /* GutenbergStockPhotos.swift */,
+			);
+			path = Utils;
+			sourceTree = "<group>";
+		};
 		7E4123AB20F4096200DF8486 /* FormattableContent */ = {
 			isa = PBXGroup;
 			children = (
@@ -11025,6 +11036,7 @@
 				436D55D9210F85DD00CEAA33 /* NibLoadable.swift in Sources */,
 				D8D7DF5A20AD18A400B40A2D /* ImgUploadProcessor.swift in Sources */,
 				436D56222117312700CEAA33 /* RegisterDomainDetailsViewModel.swift in Sources */,
+				7E407121237163B8003627FA /* GutenbergStockPhotos.swift in Sources */,
 				E15644ED1CE0E4FE00D96E64 /* PlanListRow.swift in Sources */,
 				738B9A4E21B85CF20005062B /* SiteCreationWizard.swift in Sources */,
 				4054F4432213635000D261AB /* TopCommentsAuthorStatsRecordValue+CoreDataProperties.swift in Sources */,