Merge pull request #18740 from wordpress-mobile/feature/site-design-r…

…evamp Site Design Screen Improvements
wordpress-mobile · Jun 3, 2022 · 0ad4c83 · 0ad4c83
2 parents aeae5a3 + 3fad74a
commit 0ad4c83
Show file tree

Hide file tree

Showing 23 changed files with 834 additions and 228 deletions.
diff --git a/Podfile b/Podfile
@@ -20,7 +20,7 @@ workspace 'WordPress.xcworkspace'
 ## ===================================
 ##
 def wordpress_shared
-    pod 'WordPressShared', '~> 1.17.1'
+    pod 'WordPressShared', '~> 1.18.0-beta.1'
     #pod 'WordPressShared', :git => 'https://github.com/wordpress-mobile/WordPress-iOS-Shared.git', :tag => ''
     #pod 'WordPressShared', :git => 'https://github.com/wordpress-mobile/WordPress-iOS-Shared.git', :branch => ''
     #pod 'WordPressShared', :git => 'https://github.com/wordpress-mobile/WordPress-iOS-Shared.git', :commit  => ''
@@ -47,7 +47,7 @@ def wordpress_ui
 end
 
 def wordpress_kit
-    pod 'WordPressKit', '~> 4.53.0'
+    pod 'WordPressKit', '~> 4.54.0-beta.1'
     # pod 'WordPressKit', :git => 'https://github.com/wordpress-mobile/WordPressKit-iOS.git', :tag => ''
     # pod 'WordPressKit', :git => 'https://github.com/wordpress-mobile/WordPressKit-iOS.git', :branch => ''
     # pod 'WordPressKit', :git => 'https://github.com/wordpress-mobile/WordPressKit-iOS.git', :commit => ''

diff --git a/Podfile.lock b/Podfile.lock
@@ -487,15 +487,15 @@ PODS:
     - WordPressKit (~> 4.18-beta)
     - WordPressShared (~> 1.12-beta)
     - WordPressUI (~> 1.7-beta)
-  - WordPressKit (4.53.0):
+  - WordPressKit (4.54.0-beta.1):
     - Alamofire (~> 4.8.0)
     - CocoaLumberjack (~> 3.4)
     - NSObject-SafeExpectations (= 0.0.4)
     - UIDeviceIdentifier (~> 2.0)
     - WordPressShared (~> 1.15-beta)
     - wpxmlrpc (~> 0.9)
   - WordPressMocks (0.0.15)
-  - WordPressShared (1.17.1):
+  - WordPressShared (1.18.0-beta.1):
     - CocoaLumberjack (~> 3.4)
     - FormatterKit/TimeIntervalFormatter (~> 1.8)
   - WordPressUI (1.12.5)
@@ -591,9 +591,9 @@ DEPENDENCIES:
   - SVProgressHUD (= 2.2.5)
   - WordPress-Editor-iOS (~> 1.19.8)
   - WordPressAuthenticator (~> 2.0.0)
-  - WordPressKit (~> 4.53.0)
+  - WordPressKit (~> 4.54.0-beta.1)
   - WordPressMocks (~> 0.0.15)
-  - WordPressShared (~> 1.17.1)
+  - WordPressShared (~> 1.18.0-beta.1)
   - WordPressUI (~> 1.12.5)
   - WPMediaPicker (~> 1.8.4)
   - Yoga (from `https://raw.githubusercontent.com/wordpress-mobile/gutenberg-mobile/v1.78.0-alpha1/third-party-podspecs/Yoga.podspec.json`)
@@ -853,9 +853,9 @@ SPEC CHECKSUMS:
   WordPress-Aztec-iOS: 7d11d598f14c82c727c08b56bd35fbeb7dafb504
   WordPress-Editor-iOS: 9eb9f12f21a5209cb837908d81ffe1e31cb27345
   WordPressAuthenticator: 5163f732e4e529781f931f158f54b1a1545bc536
-  WordPressKit: bbc91d9adc03aa6fdb9e4683abdd84638ca199d8
+  WordPressKit: 006b9b06439dae2e8ab69dbd65c01199672bd72d
   WordPressMocks: 6b52b0764d9939408151367dd9c6e8a910877f4d
-  WordPressShared: 0c4bc5e25765732fcf5d07f28c81970ab28493fb
+  WordPressShared: c0f1fe75e45e6f396bd325b45243bd9805b2cc56
   WordPressUI: c5be816f6c7b3392224ac21de9e521e89fa108ac
   WPMediaPicker: 9533160e5587939876aeeb1461a441a4e5dc4c4d
   wpxmlrpc: bf55a43a7e710bd2a4fb8c02dfe83b1246f14f13
@@ -869,6 +869,6 @@ SPEC CHECKSUMS:
   ZendeskSupportSDK: 3a8e508ab1d9dd22dc038df6c694466414e037ba
   ZIPFoundation: ae5b4b813d216d3bf0a148773267fff14bd51d37
 
-PODFILE CHECKSUM: 3fa125d225132d439d1350e25f90c59512dd2f83
+PODFILE CHECKSUM: 31275a63a0b7f87ee165f412045b34cc5d110006
 
 COCOAPODS: 1.11.2
diff --git a/RELEASE-NOTES.txt b/RELEASE-NOTES.txt
@@ -1,6 +1,6 @@
 20.1
 -----
-
+* [*] Site Creation: Enhances the design selection screen with recommended designs. [#18740]
 
 20.0
 -----

diff --git a/WordPress/Classes/Utility/Analytics/WPAnalyticsTrackerAutomatticTracks.m b/WordPress/Classes/Utility/Analytics/WPAnalyticsTrackerAutomatticTracks.m
@@ -702,9 +702,6 @@ + (TracksEventPair *)eventPairForStat:(WPAnalyticsStat)stat
         case WPAnalyticsStatEnhancedSiteCreationSiteDesignPreviewLoaded:
             eventName = @"enhanced_site_creation_site_design_preview_loaded";
             break;
-        case     WPAnalyticsStatEnhancedSiteCreationSiteDesignThumbnailModeButtonTapped:
-            eventName = @"enhanced_site_creation_site_design_thumbnail_mode_button_tapped";
-            break;
         case WPAnalyticsStatEnhancedSiteCreationSiteDesignPreviewModeButtonTapped:
             eventName = @"enhanced_site_creation_site_design_preview_mode_button_tapped";
             break;

diff --git a/... Header/Collapsable Header Collection View Cell/CollapsableHeaderCollectionViewCell.swift b/... Header/Collapsable Header Collection View Cell/CollapsableHeaderCollectionViewCell.swift
@@ -25,6 +25,8 @@ class CollapsableHeaderCollectionViewCell: UICollectionViewCell {
         }
     }
 
+    var showsCheckMarkWhenSelected = true
+
     override func prepareForReuse() {
         super.prepareForReuse()
         imageView.cancelImageDownload()
@@ -117,6 +119,11 @@ class CollapsableHeaderCollectionViewCell: UICollectionViewCell {
     }
 
     private func checkmarkHidden(_ isHidden: Bool, animated: Bool = false) {
+        guard showsCheckMarkWhenSelected else {
+            checkmarkContainerView.isHidden = true
+            return
+        }
+
         guard animated else {
             checkmarkContainerView.isHidden = isHidden
             return

diff --git a/...ss/Classes/ViewRelated/Gutenberg/Collapsable Header/CollapsableHeaderViewController.swift b/...ss/Classes/ViewRelated/Gutenberg/Collapsable Header/CollapsableHeaderViewController.swift
@@ -12,7 +12,7 @@ class CollapsableHeaderViewController: UIViewController, NoResultsViewHost {
     let accessoryView: UIView?
     let mainTitle: String
     let navigationBarTitle: String?
-    let prompt: String
+    let prompt: String?
     let primaryActionTitle: String
     let secondaryActionTitle: String?
     let defaultActionTitle: String?
@@ -37,6 +37,11 @@ class CollapsableHeaderViewController: UIViewController, NoResultsViewHost {
         false
     }
 
+    // Set this property to true to add a custom footerView with custom sizing when scrollableView is UITableView.
+    var allowCustomTableFooterView: Bool {
+        false
+    }
+
     private let hasDefaultAction: Bool
     private var notificationObservers: [NSObjectProtocol] = []
     @IBOutlet weak var containerView: UIView!
@@ -197,7 +202,7 @@ class CollapsableHeaderViewController: UIViewController, NoResultsViewHost {
          mainTitle: String,
          navigationBarTitle: String? = nil,
          headerImage: UIImage? = nil,
-         prompt: String,
+         prompt: String? = nil,
          primaryActionTitle: String,
          secondaryActionTitle: String? = nil,
          defaultActionTitle: String? = nil,
@@ -224,6 +229,7 @@ class CollapsableHeaderViewController: UIViewController, NoResultsViewHost {
         super.viewDidLoad()
         insertChildView()
         insertAccessoryView()
+        configureSubtitleToCategoryBarSpacing()
         configureHeaderImageView()
         navigationItem.titleView = titleView
         largeTitleView.font = WPStyleGuide.serifFontForTextStyle(UIFont.TextStyle.largeTitle, fontWeight: .semibold)
@@ -336,6 +342,7 @@ class CollapsableHeaderViewController: UIViewController, NoResultsViewHost {
         titleView.text = navigationBarTitle ?? mainTitle
         titleView.sizeToFit()
         largeTitleView.text = mainTitle
+        promptView.isHidden = prompt == nil
         promptView.text = prompt
         primaryActionButton.setTitle(primaryActionTitle, for: .normal)
 
@@ -385,6 +392,12 @@ class CollapsableHeaderViewController: UIViewController, NoResultsViewHost {
         headerImageView.image = headerImage
     }
 
+    private func configureSubtitleToCategoryBarSpacing() {
+        if prompt?.isEmpty ?? true {
+            subtitleToCategoryBarSpacing.constant = 0
+        }
+    }
+
     func configureHeaderTitleVisibility() {
         largeTitleView.isHidden = shouldUseCompactLayout
         promptView.isHidden = shouldUseCompactLayout
@@ -465,6 +478,11 @@ class CollapsableHeaderViewController: UIViewController, NoResultsViewHost {
         let distanceToBottom = scrollableView.frame.height - minHeaderHeight - estimatedContentSize().height
         let newHeight: CGFloat = max(footerHeight, distanceToBottom)
         if let tableView = scrollableView as? UITableView {
+
+            guard !allowCustomTableFooterView else {
+                return
+            }
+
             tableView.tableFooterView = UIView(frame: CGRect(x: 0, y: 0, width: tableView.frame.width, height: newHeight))
             tableView.tableFooterView?.isGhostableDisabled = true
             tableView.tableFooterView?.backgroundColor = .clear

diff --git a/...ress/Classes/ViewRelated/Gutenberg/Collapsable Header/CollapsableHeaderViewController.xib b/...ress/Classes/ViewRelated/Gutenberg/Collapsable Header/CollapsableHeaderViewController.xib
@@ -42,7 +42,7 @@
             </connections>
         </placeholder>
         <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
-        <view contentMode="scaleToFill" id="U3M-sT-nKQ">
+        <view clipsSubviews="YES" contentMode="scaleToFill" id="U3M-sT-nKQ">
             <rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
             <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
             <subviews>

diff --git a/WordPress/Classes/ViewRelated/Gutenberg/Layout Picker/CategorySectionTableViewCell.swift b/WordPress/Classes/ViewRelated/Gutenberg/Layout Picker/CategorySectionTableViewCell.swift
@@ -17,22 +17,26 @@ protocol Thumbnail {
 
 protocol CategorySection {
     var categorySlug: String { get }
+    var caption: String? { get }
     var title: String { get }
     var emoji: String? { get }
     var description: String? { get }
     var thumbnails: [Thumbnail] { get }
     var scrollOffset: CGPoint { get set }
+    var thumbnailSize: CGSize { get }
 }
 
 class CategorySectionTableViewCell: UITableViewCell {
 
     static let cellReuseIdentifier = "\(CategorySectionTableViewCell.self)"
     static let nib = UINib(nibName: "\(CategorySectionTableViewCell.self)", bundle: Bundle.main)
-    static let expectedThumbnailSize = CGSize(width: 160.0, height: 240)
-    static let estimatedCellHeight: CGFloat = 310.0
+    static let defaultThumbnailSize = CGSize(width: 160, height: 240)
+    static let cellVerticalPadding: CGFloat = 70
 
     @IBOutlet weak var categoryTitle: UILabel!
     @IBOutlet weak var collectionView: UICollectionView!
+    @IBOutlet weak var collectionViewHeight: NSLayoutConstraint!
+    @IBOutlet weak var categoryCaptionLabel: UILabel!
 
     weak var delegate: CategorySectionTableViewCellDelegate?
 
@@ -47,24 +51,56 @@ class CategorySectionTableViewCell: UITableViewCell {
             thumbnails = section?.thumbnails ?? []
             categoryTitle.text = section?.title
             collectionView.contentOffset = section?.scrollOffset ?? .zero
+            setCaption()
+
+            if let section = section {
+                collectionViewHeight.constant = section.thumbnailSize.height
+                setNeedsUpdateConstraints()
+            }
         }
     }
 
+    var categoryTitleFont: UIFont? {
+        didSet {
+            categoryTitle.font = categoryTitleFont ?? WPStyleGuide.serifFontForTextStyle(UIFont.TextStyle.headline, fontWeight: .semibold)
+        }
+    }
+
+    private func setCaption() {
+        guard let caption = section?.caption else {
+            categoryCaptionLabel.isHidden = true
+            return
+        }
+
+        categoryCaptionLabel.isHidden = false
+        categoryCaptionLabel.setText(caption)
+    }
+
     var isGhostCell: Bool = false
+    var ghostThumbnailSize: CGSize = defaultThumbnailSize {
+        didSet {
+            collectionViewHeight.constant = ghostThumbnailSize.height
+            setNeedsUpdateConstraints()
+        }
+    }
+    var showsCheckMarkWhenSelected = true
 
     override func prepareForReuse() {
         section?.scrollOffset = collectionView.contentOffset
         delegate = nil
         super.prepareForReuse()
         collectionView.contentOffset.x = 0
+        categoryTitleFont = nil
     }
 
     override func awakeFromNib() {
         super.awakeFromNib()
         collectionView.register(CollapsableHeaderCollectionViewCell.nib, forCellWithReuseIdentifier: CollapsableHeaderCollectionViewCell.cellReuseIdentifier)
-        categoryTitle.font = WPStyleGuide.serifFontForTextStyle(UIFont.TextStyle.headline, fontWeight: .semibold)
+        categoryTitle.font = categoryTitleFont ?? WPStyleGuide.serifFontForTextStyle(UIFont.TextStyle.headline, fontWeight: .semibold)
         categoryTitle.layer.masksToBounds = true
         categoryTitle.layer.cornerRadius = 4
+        categoryCaptionLabel.font = WPStyleGuide.fontForTextStyle(.footnote, fontWeight: .regular)
+        setCaption()
     }
 
     private func deselectItem(_ indexPath: IndexPath) {
@@ -90,6 +126,7 @@ extension CategorySectionTableViewCell: UICollectionViewDelegate {
             deselectItem(indexPath)
             return false
         }
+
         return true
     }
 
@@ -105,7 +142,7 @@ extension CategorySectionTableViewCell: UICollectionViewDelegate {
 
 extension CategorySectionTableViewCell: UICollectionViewDelegateFlowLayout {
     func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
-        return CategorySectionTableViewCell.expectedThumbnailSize
+        return section?.thumbnailSize ?? ghostThumbnailSize
      }
 }
 
@@ -126,6 +163,7 @@ extension CategorySectionTableViewCell: UICollectionViewDataSource {
 
         let thumbnail = thumbnails[indexPath.row]
         cell.previewURL = thumbnailUrl(forThumbnail: thumbnail)
+        cell.showsCheckMarkWhenSelected = showsCheckMarkWhenSelected
         cell.isAccessibilityElement = true
         cell.accessibilityLabel = thumbnail.slug
         return cell
-Original file line number
+Diff line change
@@ -1,6 +1,6 @@
 .1
     -----
+    * [*] Site Creation: Enhances the design selection screen with recommended designs. [#18740]
 .0
     -----
@@ Expand Down @@