Create Modal Layout Picker Container for new Gutenberg pages and feature flag for development

Podfile

@@ -29,7 +29,7 @@ def aztec
     ## pod 'WordPress-Editor-iOS', :git => 'https://github.com/wordpress-mobile/AztecEditor-iOS.git', :commit => 'ba8524aba1332550efb05cad583a85ed3511beb5'
     ## pod 'WordPress-Editor-iOS', :git => 'https://github.com/wordpress-mobile/AztecEditor-iOS.git', :tag => '1.5.0.beta.1'
     ## pod 'WordPress-Editor-iOS', :path => '../AztecEditor-iOS'
-    pod 'WordPress-Editor-iOS', '~> 1.19.2'
+    pod 'WordPress-Editor-iOS', '~> 1.19.3'
 end
 
 def wordpress_ui
@@ -149,7 +149,7 @@ target 'WordPress' do
     ## Gutenberg (React Native)
     ## =====================
     ##
-    gutenberg :commit => 'aa59dbf65aa670134892db07738071e2a19baba2'
+    gutenberg :commit => '99eee8de7cf15d50cf9c6071e0f7ebc963a6e3f2'
 
     ## Third party libraries
     ## =====================

WordPress/Classes/Extensions/Colors and Styles/WPStyleGuide+ApplicationStyles.swift

@@ -34,7 +34,6 @@ extension WPStyleGuide {
             appearance.backgroundColor = .appBar
             appearance.titleTextAttributes = [.foregroundColor: UIColor.white]
             navigationAppearance.standardAppearance = appearance
-            navigationAppearance.scrollEdgeAppearance = navigationAppearance.standardAppearance
         }
 
         // Makes bar buttons visible in "Other Apps" media source picker.
@@ -83,6 +82,7 @@ extension WPStyleGuide {
             appearance.backgroundColor = .systemBackground
             appearance.shadowColor = separatorColor
             navigationBarAppearanceProxy.standardAppearance = appearance
+            navigationBarAppearanceProxy.scrollEdgeAppearance = navigationBarAppearanceProxy.standardAppearance
         }
 
         let tintColor = UIColor(light: .brand, dark: .white)

WordPress/Classes/Services/PageCoordinator.swift

@@ -0,0 +1,26 @@
+import Foundation
+
+class PageCoordinator {
+    typealias TemplateSelectionCompletion = (String?) -> Void
+
+    static func showLayoutPickerIfNeeded(from controller: UIViewController, forBlog blog: Blog, completion: @escaping TemplateSelectionCompletion) {
+        if FeatureFlag.gutenbergModalLayoutPicker.enabled && blog.isGutenbergEnabled {
+            showLayoutPicker(from: controller, completion)
+        } else {
+            completion(nil)
+        }
+    }
+
+    private static func showLayoutPicker(from controller: UIViewController, _ completion: @escaping TemplateSelectionCompletion) {
+        let storyboard = UIStoryboard(name: "LayoutPickerStoryboard", bundle: Bundle.main)
+        guard let navigationController = storyboard.instantiateInitialViewController() as? UINavigationController,
+            let rootView = navigationController.topViewController as? GutenbergLayoutPickerViewController  else {
+                completion(nil)
+                return
+        }
+        rootView.completion = completion
+
+        navigationController.modalPresentationStyle = .pageSheet
+        controller.present(navigationController, animated: true, completion: nil)
+    }
+}

WordPress/Classes/Services/PageService.swift

@@ -0,0 +1,16 @@
+import Foundation
+
+class PageCoordinator {
+
+    static func showLayoutPickerIfNeeded(forBlog blog: Blog, completion:(()->Void)) {
+        if Feature.enabled(.gutenbergModalLayoutPicker) && blog.isGutenbergEnabled {
+            showLayoutPicker(completion)
+        } else {
+            completion()
+        }
+    }
+
+    private static func showLayoutPicker(_ completion:(()->Void)) {
+        completion()
+    }
+}

WordPress/Classes/Utility/BuildInformation/FeatureFlag.swift

@@ -16,6 +16,7 @@ enum FeatureFlag: Int, CaseIterable {
     case homepageSettings
     case readerImprovementsPhase2
     case gutenbergMentions
+    case gutenbergModalLayoutPicker
 
     /// Returns a boolean indicating if the feature is enabled
     var enabled: Bool {
@@ -52,6 +53,8 @@ enum FeatureFlag: Int, CaseIterable {
             return false
         case .gutenbergMentions:
             return BuildConfiguration.current ~= [.localDeveloper, .a8cBranchTest, .a8cPrereleaseTesting]
+        case .gutenbergModalLayoutPicker:
+            return BuildConfiguration.current ~= [.localDeveloper, .a8cBranchTest]
         }
     }
 }
@@ -98,6 +101,8 @@ extension FeatureFlag: OverrideableFlag {
             return "Reader Improvements Phase 2"
         case .gutenbergMentions:
             return "Mentions in Gutenberg"
+        case .gutenbergModalLayoutPicker:
+            return "Gutenberg Modal Layout Picker"
         }
     }
 

WordPress/Classes/ViewRelated/Gutenberg/GutenbergViewController.swift

@@ -871,6 +871,7 @@ extension GutenbergViewController: GutenbergBridgeDataSource {
         return [
             "mentions": post.blog.isAccessibleThroughWPCom() && FeatureFlag.gutenbergMentions.enabled,
             "unsupportedBlockEditor": isUnsupportedBlockEditorEnabled,
+            "modalLayoutPicker": FeatureFlag.gutenbergModalLayoutPicker.enabled,
         ]
     }
 

WordPress/Classes/ViewRelated/Gutenberg/Layout Picker/GutenbergLayoutPickerViewController.swift

@@ -0,0 +1,119 @@
+import UIKit
+import Gridicons
+
+class GutenbergLayoutPickerViewController: UIViewController {
+
+    @IBOutlet weak var headerView: UIView!
+    @IBOutlet weak var closeButton: UIButton!
+    @IBOutlet weak var headerHeight: NSLayoutConstraint!
+    @IBOutlet weak var categoryBar: UICollectionView!
+
+    @IBOutlet weak var tableView: UITableView!
+
+    @IBOutlet weak var footerView: UIView!
+    @IBOutlet weak var createBlankPageBtn: UIButton!
+
+    var completion: PageCoordinator.TemplateSelectionCompletion? = nil
+    let minTitleFontSize: CGFloat = 22
+    let maxTitleFontSize: CGFloat = 34
+    var maxHeaderHeight: CGFloat = 161
+    var minHeaderHeight: CGFloat {
+        return categoryBar.frame.height + 9
+    }
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        styleButtons()
+
+        let tableFooterFrame = footerView.frame
+        let bottomInset = tableFooterFrame.size.height - (UIApplication.shared.keyWindow?.safeAreaInsets.bottom ?? 44)
+        tableView.tableHeaderView = UIView(frame: CGRect(x: 0, y: 0, width: tableView.frame.width, height: maxHeaderHeight))
+        tableView.tableFooterView = UIView(frame: CGRect(x: 0, y: 0, width: tableView.frame.width, height: bottomInset))
+        closeButton.setImage(UIImage.gridicon(.crossSmall), for: .normal)
+    }
+
+    override func viewWillAppear(_ animated: Bool) {
+        (navigationController as? GutenbergLightNavigationController)?.shadowIsHidden = true
+        super.viewWillAppear(animated)
+    }
+
+    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
+        super.traitCollectionDidChange(previousTraitCollection)
+        if #available(iOS 13.0, *) {
+            if traitCollection.hasDifferentColorAppearance(comparedTo: previousTraitCollection) {
+                styleButtons()
+            }
+        }
+    }
+
+    @IBAction func closeModal(_ sender: Any) {
+        dismiss(animated: true, completion: nil)
+    }
+
+    @IBAction func createBlankPage(_ sender: Any) {
+        createPage(nil)
+    }
+
+    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
+        (navigationController as? GutenbergLightNavigationController)?.shadowIsHidden = false
+        super.prepare(for: segue, sender: sender)
+    }
+
+    private func createPage(_ template: String?) {
+        dismiss(animated: true) {
+            self.completion?(template)
+        }
+    }
+
+    private func styleButtons() {
+        let seperator: UIColor
+        if #available(iOS 13.0, *) {
+            seperator = UIColor.separator
+        } else {
+            seperator = UIColor.lightGray
+        }
+
+        [createBlankPageBtn].forEach { (button) in
+            button?.layer.borderColor = seperator.cgColor
+            button?.layer.borderWidth = 1
+            button?.layer.cornerRadius = 8
+        }
+
+        if #available(iOS 13.0, *) {
+            closeButton.backgroundColor = UIColor { (traitCollection: UITraitCollection) -> UIColor in
+                if traitCollection.userInterfaceStyle == .dark {
+                    return UIColor.systemFill
+                } else {
+                    return UIColor.quaternarySystemFill
+                }
+            }
+        }
+    }
+}
+
+extension GutenbergLayoutPickerViewController: UITableViewDelegate {
+
+    func scrollViewDidScroll(_ scrollView: UIScrollView) {
+        let newHeaderViewHeight = maxHeaderHeight - scrollView.contentOffset.y
+
+        if newHeaderViewHeight > maxHeaderHeight {
+            headerHeight.constant = maxHeaderHeight
+        } else if newHeaderViewHeight < minHeaderHeight {
+            headerHeight.constant = minHeaderHeight
+        } else {
+            headerHeight.constant = newHeaderViewHeight
+        }
+    }
+}
+
+extension GutenbergLayoutPickerViewController: UITableViewDataSource {
+
+    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
+        return 20
+    }
+
+    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
+        let cell = UITableViewCell(style: .default, reuseIdentifier: nil)
+        return cell
+    }
+}

WordPress/Classes/ViewRelated/Gutenberg/Layout Picker/GutenbergLightNavigationController.swift

@@ -0,0 +1,67 @@
+import UIKit
+
+class GutenbergLightNavigationController: UINavigationController {
+
+    var separatorColor: UIColor {
+        if #available(iOS 13.0, *) {
+            return .separator
+        } else {
+            return .lightGray
+        }
+    }
+
+    var shadowIsHidden: Bool = false {
+        didSet {
+            if shadowIsHidden {
+                if #available(iOS 13.0, *) {
+                    navigationBar.standardAppearance.shadowColor = UIColor.clear
+                    navigationBar.scrollEdgeAppearance?.shadowColor = UIColor.clear
+                } else {
+                    navigationBar.shadowImage = UIImage()
+                }
+            } else {
+                if #available(iOS 13.0, *) {
+                    navigationBar.standardAppearance.shadowColor = separatorColor
+                    navigationBar.scrollEdgeAppearance?.shadowColor = separatorColor
+                } else {
+                    navigationBar.shadowImage = UIImage(color: .lightGray)
+                }
+            }
+        }
+    }
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        let font = WPStyleGuide.serifFontForTextStyle(UIFont.TextStyle.largeTitle, fontWeight: .semibold)
+        let tintColor = UIColor(light: .black, dark: .white)
+
+        let titleTextAttributes = [
+            NSAttributedString.Key.font: font.withSize(17),
+            NSAttributedString.Key.foregroundColor: tintColor
+        ]
+
+        let largeTitleTextAttributes = [
+            NSAttributedString.Key.font: font.withSize(34),
+            NSAttributedString.Key.foregroundColor: tintColor
+        ]
+
+        if #available(iOS 13.0, *) {
+
+            let appearance = UINavigationBarAppearance()
+            appearance.backgroundColor = .systemBackground
+            appearance.shadowColor = separatorColor
+            appearance.titleTextAttributes = titleTextAttributes
+            appearance.largeTitleTextAttributes = largeTitleTextAttributes
+
+            navigationBar.scrollEdgeAppearance = appearance
+            navigationBar.standardAppearance = appearance
+        } else {
+            navigationBar.backgroundColor = .white
+            navigationBar.titleTextAttributes = titleTextAttributes
+            navigationBar.largeTitleTextAttributes = largeTitleTextAttributes
+        }
+
+        navigationBar.barStyle = .default
+        navigationBar.barTintColor = .white
+    }
+}