diff --git a/WordPress/Classes/ViewRelated/Gutenberg/Layout Picker/CategorySectionTableViewCell.swift b/WordPress/Classes/ViewRelated/Gutenberg/Layout Picker/CategorySectionTableViewCell.swift
index f8e415c59fe0..0660d17488f5 100644
--- a/WordPress/Classes/ViewRelated/Gutenberg/Layout Picker/CategorySectionTableViewCell.swift
+++ b/WordPress/Classes/ViewRelated/Gutenberg/Layout Picker/CategorySectionTableViewCell.swift
@@ -17,6 +17,7 @@ protocol Thumbnail {
protocol CategorySection {
var categorySlug: String { get }
+ var caption: String? { get }
var title: String { get }
var emoji: String? { get }
var description: String? { get }
@@ -35,6 +36,7 @@ class CategorySectionTableViewCell: UITableViewCell {
@IBOutlet weak var categoryTitle: UILabel!
@IBOutlet weak var collectionView: UICollectionView!
@IBOutlet weak var collectionViewHeight: NSLayoutConstraint!
+ @IBOutlet weak var categoryCaptionLabel: UILabel!
weak var delegate: CategorySectionTableViewCellDelegate?
@@ -49,6 +51,7 @@ 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
@@ -63,6 +66,16 @@ class CategorySectionTableViewCell: UITableViewCell {
}
}
+ 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 {
@@ -86,6 +99,8 @@ class CategorySectionTableViewCell: UITableViewCell {
categoryTitle.font = categoryTitleFont ?? WPStyleGuide.serifFontForTextStyle(UIFont.TextStyle.headline, fontWeight: .semibold)
categoryTitle.layer.masksToBounds = true
categoryTitle.layer.cornerRadius = 4
+ categoryCaptionLabel.font = WPStyleGuide.fontForTextStyle(.subheadline, fontWeight: .semibold)
+ setCaption()
}
private func deselectItem(_ indexPath: IndexPath) {
diff --git a/WordPress/Classes/ViewRelated/Gutenberg/Layout Picker/CategorySectionTableViewCell.xib b/WordPress/Classes/ViewRelated/Gutenberg/Layout Picker/CategorySectionTableViewCell.xib
index 0654da40fdb6..b9d196274157 100644
--- a/WordPress/Classes/ViewRelated/Gutenberg/Layout Picker/CategorySectionTableViewCell.xib
+++ b/WordPress/Classes/ViewRelated/Gutenberg/Layout Picker/CategorySectionTableViewCell.xib
@@ -14,12 +14,12 @@
-
+
-
+
@@ -35,37 +35,52 @@
-
+
+
+
+
+
+
+
-
-
-
+
+
+
+
-
+
+
+
+
diff --git a/WordPress/Classes/ViewRelated/Gutenberg/Layout Picker/GutenbergLayoutPickerViewController.swift b/WordPress/Classes/ViewRelated/Gutenberg/Layout Picker/GutenbergLayoutPickerViewController.swift
index 974713b0b5fc..2d65fc455ebe 100644
--- a/WordPress/Classes/ViewRelated/Gutenberg/Layout Picker/GutenbergLayoutPickerViewController.swift
+++ b/WordPress/Classes/ViewRelated/Gutenberg/Layout Picker/GutenbergLayoutPickerViewController.swift
@@ -9,6 +9,8 @@ extension PageTemplateLayout: Thumbnail {
}
class GutenbergLayoutSection: CategorySection {
+ var caption: String?
+
var section: PageTemplateCategory
var layouts: [PageTemplateLayout]
var scrollOffset: CGPoint
diff --git a/WordPress/Classes/ViewRelated/Site Creation/Design Selection/SiteDesignSection.swift b/WordPress/Classes/ViewRelated/Site Creation/Design Selection/SiteDesignSection.swift
index f245e47f4d3b..99c7f9d8f135 100644
--- a/WordPress/Classes/ViewRelated/Site Creation/Design Selection/SiteDesignSection.swift
+++ b/WordPress/Classes/ViewRelated/Site Creation/Design Selection/SiteDesignSection.swift
@@ -4,6 +4,7 @@ struct SiteDesignSection: CategorySection {
var designs: [RemoteSiteDesign]
var thumbnailSize: CGSize
+ var caption: String?
var categorySlug: String
var title: String
var emoji: String?
@@ -13,13 +14,14 @@ struct SiteDesignSection: CategorySection {
}
extension SiteDesignSection {
- init(category: RemoteSiteDesignCategory, designs: [RemoteSiteDesign], thumbnailSize: CGSize) {
+ init(category: RemoteSiteDesignCategory, designs: [RemoteSiteDesign], thumbnailSize: CGSize, caption: String? = nil) {
self.designs = designs
self.thumbnailSize = thumbnailSize
self.categorySlug = category.slug
self.title = category.title
self.emoji = category.emoji
self.description = category.description
+ self.caption = caption
}
}
diff --git a/WordPress/Classes/ViewRelated/Site Creation/Design Selection/SiteDesignSectionLoader.swift b/WordPress/Classes/ViewRelated/Site Creation/Design Selection/SiteDesignSectionLoader.swift
index f91f47bd50c0..8c95fdb42e15 100644
--- a/WordPress/Classes/ViewRelated/Site Creation/Design Selection/SiteDesignSectionLoader.swift
+++ b/WordPress/Classes/ViewRelated/Site Creation/Design Selection/SiteDesignSectionLoader.swift
@@ -2,7 +2,6 @@ import Foundation
import WordPressKit
struct SiteDesignSectionLoader {
- static let recommendedTitle = NSLocalizedString("Best for %@", comment: "Title for a section of recommended site designs. The %@ will be replaced with the related site intent topic, such as Food or Blogging.")
static func fetchSections(vertical: SiteIntentVertical?, completion: @escaping (Result<[SiteDesignSection], Error>) -> Void) {
typealias TemplateGroup = SiteDesignRequest.TemplateGroup
@@ -48,8 +47,9 @@ struct SiteDesignSectionLoader {
return SiteDesignSection(
designs: designsForVertical,
thumbnailSize: SiteDesignCategoryThumbnailSize.recommended.value,
+ caption: TextContent.recommendedCaption,
categorySlug: "recommended_" + vertical.slug,
- title: String(format: recommendedTitle, vertical.localizedTitle)
+ title: String(format: TextContent.recommendedTitle, vertical.localizedTitle)
)
}
@@ -81,8 +81,9 @@ struct SiteDesignSectionLoader {
if var recommendedFallback = categorySections.first(where: { $0.categorySlug.lowercased() == "blog" }) {
// Recommended designs for the vertical weren't found, so we used the fallback category
- recommendedFallback.title = String(format: recommendedTitle, "Blogging")
+ recommendedFallback.title = String(format: TextContent.recommendedTitle, "Blogging")
recommendedFallback.thumbnailSize = SiteDesignCategoryThumbnailSize.recommended.value
+ recommendedFallback.caption = TextContent.recommendedCaption
return [recommendedFallback] + categorySections.filter { $0 != recommendedFallback }
}
@@ -90,3 +91,13 @@ struct SiteDesignSectionLoader {
return categorySections
}
}
+
+private extension SiteDesignSectionLoader {
+
+ enum TextContent {
+ static let recommendedTitle = NSLocalizedString("Best for %@",
+ comment: "Title for a section of recommended site designs. The %@ will be replaced with the related site intent topic, such as Food or Blogging.")
+ static let recommendedCaption = NSLocalizedString("PICKED FOR YOU",
+ comment: "Caption for the recommended sections in site designs.")
+ }
+}