[Modal Layout Picker] Create Layout Picker category bar UI using static data

WordPress/Classes/Services/PageCoordinator.swift

@@ -19,7 +19,14 @@ class PageCoordinator {
             return
         }
         rootView.completion = completion
-        navigationController.modalPresentationStyle = .pageSheet
+
+        if #available(iOS 13.0, *) {
+            navigationController.modalPresentationStyle = .pageSheet
+        } else {
+            // Specifically using fullScreen instead of pageSheet to get the desired behavior on Max devices running iOS 12 and below.
+             navigationController.modalPresentationStyle = UIDevice.current.userInterfaceIdiom == .pad ? .pageSheet : .fullScreen
+        }
+
         controller.present(navigationController, animated: true, completion: nil)
     }
 }

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

@@ -0,0 +1,68 @@
+import UIKit
+
+protocol FilterBarDelegate {
+    func numberOfFilters() -> Int
+    func filter(forIndex: Int) -> GutenbergLayoutSection
+    func didSelectFilter(withIndex selectedIndex: IndexPath, withSelectedIndexes selectedIndexes: [IndexPath])
+    func didDeselectFilter(withIndex index: IndexPath, withSelectedIndexes selectedIndexes: [IndexPath])
+}
+
+class GutenbergLayoutFilterBar: UICollectionView {
+    var filterDelegate: FilterBarDelegate?
+    private let defaultCellHeight: CGFloat = 44
+    private let defaultCellWidth: CGFloat = 105
+
+    required init?(coder: NSCoder) {
+        super.init(coder: coder)
+        register(LayoutPickerFilterCollectionViewCell.nib, forCellWithReuseIdentifier: LayoutPickerFilterCollectionViewCell.cellReuseIdentifier)
+        self.delegate = self
+        self.dataSource = self
+    }
+
+    private func deselectItem(_ indexPath: IndexPath) {
+        deselectItem(at: indexPath, animated: true)
+        collectionView(self, didDeselectItemAt: indexPath)
+    }
+}
+
+extension GutenbergLayoutFilterBar: UICollectionViewDelegate {
+    func collectionView(_ collectionView: UICollectionView, shouldSelectItemAt indexPath: IndexPath) -> Bool {
+        if collectionView.cellForItem(at: indexPath)?.isSelected ?? false {
+            deselectItem(indexPath)
+            return false
+        }
+        return true
+    }
+
+    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
+        guard let indexPathsForSelectedItems = collectionView.indexPathsForSelectedItems else { return }
+        filterDelegate?.didSelectFilter(withIndex: indexPath, withSelectedIndexes: indexPathsForSelectedItems)
+    }
+
+    func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
+        filterDelegate?.didDeselectFilter(withIndex: indexPath, withSelectedIndexes: collectionView.indexPathsForSelectedItems ?? [])
+    }
+}
+
+extension GutenbergLayoutFilterBar: UICollectionViewDelegateFlowLayout {
+    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
+        guard let filter = filterDelegate?.filter(forIndex: indexPath.item) else {
+            return CGSize(width: defaultCellWidth, height: defaultCellHeight)
+        }
+
+        let width = LayoutPickerFilterCollectionViewCell.estimatedWidth(forFilter: filter)
+        return CGSize(width: width, height: defaultCellHeight)
+     }
+}
+
+extension GutenbergLayoutFilterBar: UICollectionViewDataSource {
+    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
+        return filterDelegate?.numberOfFilters() ?? 0
+    }
+
+    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
+        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: LayoutPickerFilterCollectionViewCell.cellReuseIdentifier, for: indexPath) as! LayoutPickerFilterCollectionViewCell
+        cell.filter = filterDelegate?.filter(forIndex: indexPath.item)
+        return cell
+    }
+}

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

@@ -27,7 +27,7 @@ class GutenbergLayoutPickerViewController: UIViewController {
     @IBOutlet weak var titleView: UILabel!
     @IBOutlet weak var largeTitleView: UILabel!
     @IBOutlet weak var promptView: UILabel!
-    @IBOutlet weak var categoryBar: UICollectionView!
+    @IBOutlet weak var filterBar: GutenbergLayoutFilterBar!
     @IBOutlet weak var tableView: UITableView!
     @IBOutlet weak var footerView: UIView!
     @IBOutlet weak var createBlankPageBtn: UIButton!
@@ -108,7 +108,9 @@ class GutenbergLayoutPickerViewController: UIViewController {
             layoutSelected(selectedLayout != nil)
         }
     }
-    private var sections = [GutenbergLayoutSection]()
+
+    private var filteredSections: [GutenbergLayoutSection]?
+    private var sections: [GutenbergLayoutSection] = []
     var layouts = GutenbergPageLayouts(layouts: [], categories: []) {
         didSet {
             sections = layouts.categories.map({
@@ -135,11 +137,14 @@ class GutenbergLayoutPickerViewController: UIViewController {
     override func viewDidLoad() {
         super.viewDidLoad()
         tableView.register(LayoutPickerSectionTableViewCell.nib, forCellReuseIdentifier: LayoutPickerSectionTableViewCell.cellReuseIdentifier)
+        filterBar.filterDelegate = self
+        filterBar.allowsMultipleSelection = true
         setStaticText()
         closeButton.setImage(UIImage.gridicon(.crossSmall), for: .normal)
         styleButtons()
         layoutHeader()
         layouts = GutenbergPageLayoutFactory.makeDefaultPageLayouts()
+        filterBar.reloadData()
     }
 
     override func viewWillAppear(_ animated: Bool) {
@@ -231,8 +236,8 @@ class GutenbergLayoutPickerViewController: UIViewController {
     }
 
     private func calculateHeaderSnapPoints() {
-        minHeaderHeight = categoryBar.frame.height + minHeaderBottomSpacing.constant
-        _midHeaderHeight = titleToSubtitleSpacing.constant + promptView.frame.height + subtitleToCategoryBarSpacing.constant + categoryBar.frame.height + maxHeaderBottomSpacing.constant
+        minHeaderHeight = filterBar.frame.height + minHeaderBottomSpacing.constant
+        _midHeaderHeight = titleToSubtitleSpacing.constant + promptView.frame.height + subtitleToCategoryBarSpacing.constant + filterBar.frame.height + maxHeaderBottomSpacing.constant
         _maxHeaderHeight = largeTitleView.frame.height + _midHeaderHeight
     }
 
@@ -317,15 +322,15 @@ extension GutenbergLayoutPickerViewController: UITableViewDelegate {
     }
 
     private func containsSelectedLayout(_ layout: GutenbergSelectedLayout, atIndexPath indexPath: IndexPath) -> Bool {
-        let rowSection = sections[indexPath.row]
+        let rowSection = (filteredSections ?? sections)[indexPath.row]
         return (layout.sectionSlug == rowSection.section.slug)
     }
 }
 
 extension GutenbergLayoutPickerViewController: UITableViewDataSource {
 
     func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
-        return sections.count
+        return (filteredSections ?? sections).count
     }
 
     func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
@@ -335,8 +340,9 @@ extension GutenbergLayoutPickerViewController: UITableViewDataSource {
         }
         cell.delegate = self
         cell.selectionStyle = UITableViewCell.SelectionStyle.none
-        cell.section = sections[indexPath.row]
-
+        cell.section = (filteredSections ?? sections)[indexPath.row]
+        cell.layer.masksToBounds = false
+        cell.clipsToBounds = false
         if let selectedLayout = selectedLayout, containsSelectedLayout(selectedLayout, atIndexPath: indexPath) {
             cell.selectItemAt(selectedLayout.position)
         }
@@ -374,3 +380,86 @@ extension GutenbergLayoutPickerViewController: LayoutPickerSectionTableViewCellD
         }
     }
 }
+
+extension GutenbergLayoutPickerViewController: FilterBarDelegate {
+    func numberOfFilters() -> Int {
+        return sections.count
+    }
+
+    func filter(forIndex index: Int) -> GutenbergLayoutSection {
+        return sections[index]
+    }
+
+    func didSelectFilter(withIndex selectedIndex: IndexPath, withSelectedIndexes selectedIndexes: [IndexPath]) {
+        guard filteredSections == nil else {
+            insertFilterRow(withIndex: selectedIndex, withSelectedIndexes: selectedIndexes)
+            return
+        }
+
+        let rowsToRemove = (0..<sections.count).compactMap { ($0 == selectedIndex.item) ? nil : IndexPath(row: $0, section: 0) }
+
+        filteredSections = [sections[selectedIndex.item]]
+        tableView.performBatchUpdates({
+            tableView.deleteRows(at: rowsToRemove, with: .fade)
+        }) { _ in
+            self.snapToHeight(self.tableView, height: self.maxHeaderHeight)
+        }
+    }
+
+    func insertFilterRow(withIndex selectedIndex: IndexPath, withSelectedIndexes selectedIndexes: [IndexPath]) {
+
+        var row: IndexPath? = nil
+        let sortedIndexes = selectedIndexes.sorted(by: { $0.item < $1.item })
+        for i in 0..<sortedIndexes.count {
+            if sortedIndexes[i].item == selectedIndex.item {
+                let indexPath = IndexPath(row: i, section: 0)
+                filteredSections?.insert(sections[selectedIndex.item], at: i)
+                row = indexPath
+                break
+            }
+        }
+
+        guard let rowToAdd = row else { return }
+        tableView.performBatchUpdates({
+            tableView.insertRows(at: [rowToAdd], with: .fade)
+        })
+    }
+
+    func didDeselectFilter(withIndex index: IndexPath, withSelectedIndexes selectedIndexes: [IndexPath]) {
+        guard selectedIndexes.count == 0 else {
+            removeFilterRow(withIndex: index)
+            return
+        }
+
+        let currentRowSlug = filteredSections?.first?.section.slug
+        filteredSections = nil
+        let rowsToAdd = (0..<sections.count).compactMap { (sections[$0].section.slug == currentRowSlug) ? nil : IndexPath(row: $0, section: 0) }
+        tableView.performBatchUpdates({
+            tableView.insertRows(at: rowsToAdd, with: .fade)
+        })
+    }
+
+    func removeFilterRow(withIndex index: IndexPath) {
+        guard let filteredSections = filteredSections else { return }
+
+        var row: IndexPath? = nil
+        let rowSlug = sections[index.item].section.slug
+        for i in 0..<filteredSections.count {
+            if filteredSections[i].section.slug == rowSlug {
+                let indexPath = IndexPath(row: i, section: 0)
+                self.filteredSections?.remove(at: i)
+                row = indexPath
+                break
+            }
+        }
+
+        guard let rowToRemove = row else { return }
+        tableView.performBatchUpdates({
+            tableView.deleteRows(at: [rowToRemove], with: .fade)
+        }) { _ in
+            if (self.filteredSections?.count ?? 0) < 2 {
+                self.snapToHeight(self.tableView, height: self.maxHeaderHeight)
+            }
+        }
+    }
+}

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

@@ -0,0 +1,16 @@
+import UIKit
+
+class LayoutPickerFilterCollectionViewCell: UICollectionViewCell {
+
+    static var cellReuseIdentifier: String {
+         return "LayoutPickerCategoryCollectionViewCell"
+     }
+
+    static var nib: UINib {
+        return UINib(nibName: "LayoutPickerCategoryCollectionViewCell", bundle: Bundle.main)
+    }
+
+    @IBOutlet weak var filterLabel: UILabel!
+
+    var displayCategory: GutenbergLayoutDisplayCategory? = nil
+}

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

@@ -100,12 +100,9 @@ class LayoutPickerCollectionViewCell: UICollectionViewCell {
 
     func addShadow() {
         layer.shadowColor = UIColor.black.cgColor
-
-        let scale = UIScreen.main.scale
-        let shadowRadius: CGFloat = 12 / scale
-        layer.shadowRadius = shadowRadius
+        layer.shadowRadius = 5.0
         layer.shadowOpacity = 0.16
-        layer.shadowOffset = CGSize(width: 0, height: (5/scale))
+        layer.shadowOffset = CGSize(width: 0, height: 2.0)
 
         backgroundColor = nil
     }

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

@@ -0,0 +1,105 @@
+import UIKit
+
+class LayoutPickerFilterCollectionViewCell: UICollectionViewCell {
+
+    static let cellReuseIdentifier = "LayoutPickerFilterCollectionViewCell"
+    static let nib = UINib(nibName: "LayoutPickerFilterCollectionViewCell", bundle: Bundle.main)
+
+    static var font: UIFont {
+        return WPStyleGuide.fontForTextStyle(.subheadline, fontWeight: .semibold)
+    }
+
+    private static let combinedLeftRightMargin: CGFloat = 32
+    static func estimatedWidth(forFilter filter: GutenbergLayoutSection) -> CGFloat {
+        /// The emoji below is used as a placeholder to estimate the size of the title. We don't use the actual emoji provided by the API because this could be nil
+        /// and we want to allow space for a checkmark when the cell is selected.
+        let size = "👋 \(filter.section.title)".size(withAttributes: [
+            NSAttributedString.Key.font: font
+        ])
+
+        return size.width + combinedLeftRightMargin
+    }
+
+    @IBOutlet weak var filterLabel: UILabel!
+    @IBOutlet weak var pillBackgroundView: UIView!
+    @IBOutlet weak var checkmark: UIImageView!
+
+    var filter: GutenbergLayoutSection? = nil {
+        didSet {
+            let section = filter?.section
+            filterLabel.text = filterTitle
+            filterLabel.accessibilityLabel = section?.title
+        }
+    }
+
+    var filterTitle: String {
+        let section = filter?.section
+        let emoji = isSelected ? nil : section?.emoji
+        return [emoji, section?.title].compactMap { $0 }.joined(separator: " ")
+    }
+
+    var checkmarkTintColor: UIColor {
+        if #available(iOS 13.0, *) {
+            return UIColor { (traitCollection: UITraitCollection) -> UIColor in
+                if traitCollection.userInterfaceStyle == .dark {
+                    return UIColor.darkText
+                } else {
+                    return UIColor.white
+                }
+            }
+        } else {
+            return UIColor.white
+        }
+    }
+
+    override var isSelected: Bool {
+        didSet {
+            checkmark.isHidden = !isSelected
+            filterLabel.text = filterTitle
+            updateSelectedStyle()
+        }
+    }
+
+    override func awakeFromNib() {
+        super.awakeFromNib()
+        filterLabel.font = LayoutPickerFilterCollectionViewCell.font
+        if #available(iOS 13.0, *) {
+            checkmark.image = UIImage(systemName: "checkmark")
+        } else {
+            checkmark.image = UIImage.gridicon(.checkmark)
+        }
+        checkmark.tintColor = checkmarkTintColor
+        updateSelectedStyle()
+    }
+
+    override func prepareForReuse() {
+        super.prepareForReuse()
+        filter = nil
+    }
+
+    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
+        super.traitCollectionDidChange(previousTraitCollection)
+
+        if #available(iOS 13.0, *) {
+            if traitCollection.hasDifferentColorAppearance(comparedTo: previousTraitCollection) {
+                updateSelectedStyle()
+            }
+        }
+    }
+
+    private func updateSelectedStyle() {
+        if #available(iOS 13.0, *) {
+            let oppositeInterfaceStyle: UIUserInterfaceStyle = (traitCollection.userInterfaceStyle == .dark) ? .light : .dark
+            let selectedColor: UIColor = UIColor.systemGray6.color(for: UITraitCollection(userInterfaceStyle: oppositeInterfaceStyle))
+            pillBackgroundView.backgroundColor = isSelected ? selectedColor : .quaternarySystemFill
+        } else {
+            pillBackgroundView.backgroundColor = isSelected ? .black : .gray(.shade0)
+        }
+
+        if #available(iOS 13.0, *), traitCollection.userInterfaceStyle == .dark {
+            filterLabel.textColor = isSelected ? .darkText : .white
+        } else {
+            filterLabel.textColor = isSelected ? .white : .darkText
+        }
+    }
+}