Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Mobile] Generate static data to be used to develop Modal Layout picker #24027

Merged
merged 5 commits into from
Jul 27, 2020
Merged

[Mobile] Generate static data to be used to develop Modal Layout picker #24027

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
17da8fa
Adds helper method and data for creating base layouts for Gutenberg M…
chipsnyder Jul 13, 2020
fce015d
Move Gutenberg Layout file to match existing folder structure
chipsnyder Jul 13, 2020
6ef9a46
Expose methods in the iOS Gutenberg pod
chipsnyder Jul 14, 2020
5cca029
Merge remote-tracking branch 'origin/master' into mobile/issue/2455-l…
chipsnyder Jul 17, 2020
04aba7b
Merge remote-tracking branch 'origin/master' into mobile/issue/2455-l…
chipsnyder Jul 20, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
140 changes: 140 additions & 0 deletions packages/react-native-bridge/ios/GutenbergLayouts.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
import Foundation

public struct GutenbergPageLayouts {
public let layouts: [GutenbergLayout]
public let categories: [GutenbergLayoutCategory]

/// Contains a map of layouts based on their Category slug
private let groupedLayouts: [String: [GutenbergLayout]]


public init(layouts: [GutenbergLayout], categories: [GutenbergLayoutCategory]) {
self.layouts = layouts
self.categories = categories
groupedLayouts = GutenbergPageLayouts.groupLayouts(layouts)
}

static func groupLayouts(_ layouts: [GutenbergLayout]) -> [String:[GutenbergLayout]] {

var groupedLayouts = [String:[GutenbergLayout]]()

layouts.forEach { (layout) in
var group = groupedLayouts[layout.slug] ?? [GutenbergLayout]()
group.append(layout)
groupedLayouts.updateValue(group, forKey: layout.slug)
}

return groupedLayouts
}

public func layouts(forCategory slug: String) -> [GutenbergLayout] {
return groupedLayouts[slug] ?? []
}
}

public struct GutenbergLayout {
public let slug: String
public let title: String
public let preview: String
public let categories: [GutenbergLayoutCategory]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure why this is an array 🤔 Are we aware of any use case where a layout appears under different categories?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure if we would expect multiple categories for a layout or not. My goal with the structs GutenbergPageLayouts, GutenbergLayout, and GutenbergLayoutCategory was to mirror the syntax of the response that comes from the API to make parsing those a bit easier and to prevent having one struct for the API and another for the UI.

Otherwise we'll need to search in GutenbergLayout instances to get layouts for a specific category.

To prevent having to do this I added groupedLayouts to so that we only need to organize the layouts into categories once. Since it's a small n I figured there wouldn't be a noticeable performance hit.

Sample API Response 
{
    "layouts": [
        {
            "slug": "about-2",
            "title": "About",
            "content": "...",
            "categories": [
                {
                    "slug": "about",
                    "title": "About",
                    "description": "About pages",
                    "emoji": "👋"
                }
            ],
            "preview": "https://headstartdata.files.wordpress.com/2020/01/about-2.png?w=200&zoom=1"
        },
        ...
    ],
    "categories": [
        {
            "slug": "about",
            "title": "About",
            "description": "About pages",
            "emoji": "👋"
        }
        ...
    ]
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mirror the syntax of the response that comes from the API

OK thanks, LGTM then!

}

public struct GutenbergLayoutCategory {
public let slug: String
public let title: String
public let description: String
public let emoji: String
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just thinking out loud, would it not be simpler if we had array of GutenbergLayout here instead? Otherwise we'll need to search in GutenbergLayout instances to get layouts for a specific category.

}

public class GutenbergPageLayoutFactory {

//MARK: - Factory Method

/// Creates a a default set of Page Layout templates to be used on for creating starter pages layouts.
/// - Returns: A default `GutenbergPageLayouts` object that contains a default set of layouts and categories
public static func makeDefaultPageLayouts() -> GutenbergPageLayouts {
let defaultLayouts = makeDefaultLayouts()
let defaultCategories = makeDefaultCategories()
return GutenbergPageLayouts(layouts: defaultLayouts, categories: defaultCategories)
}


//MARK: - Define Categories
private static var aboutCategory: GutenbergLayoutCategory {
GutenbergLayoutCategory(slug: "about",
title: NSLocalizedString("About", comment: "Category name for page templates"),
description: NSLocalizedString("About pages", comment: "Category description for page templates"),
emoji: "👋")
}

private static var blogCategory: GutenbergLayoutCategory {
GutenbergLayoutCategory(slug: "blog",
title: NSLocalizedString("Blog", comment: "Category name for page templates"),
description: NSLocalizedString("Blog pages", comment: "Category description for page templates"),
emoji: "📰")
}

private static var contactCategory: GutenbergLayoutCategory {
GutenbergLayoutCategory(slug: "contact",
title: NSLocalizedString("Contact", comment: "Category name for page templates"),
description: NSLocalizedString("Contact pages", comment: "Category description for page templates"),
emoji: "📫")
}

private static var portfolioCategory: GutenbergLayoutCategory {
GutenbergLayoutCategory(slug: "portfolio",
title: NSLocalizedString("Portfolio", comment: "Category name for page templates"),
description: NSLocalizedString("Portfolio pages", comment: "Category description for page templates"),
emoji: "🎨")
}

private static var servicesCategory: GutenbergLayoutCategory {
GutenbergLayoutCategory(slug: "services",
title: NSLocalizedString("Services", comment: "Category name for page templates"),
description: NSLocalizedString("Services pages", comment: "Category description for page templates"),
emoji: "🔧")
}

private static var teamCategory: GutenbergLayoutCategory {
GutenbergLayoutCategory(slug: "team",
title: NSLocalizedString("Team", comment: "Category name for page templates"),
description: NSLocalizedString("Team pages", comment: "Category description for page templates"),
emoji: "👥")
}

/// Creates a a default set of Categories templates to be used on for creating starter pages layouts.
private static func makeDefaultCategories() -> [GutenbergLayoutCategory] {
return [aboutCategory, blogCategory, contactCategory, portfolioCategory, servicesCategory, teamCategory]
}

//MARK: - Define layouts
/// Creates a a default set of Layout meta data to be used on for creating starter pages layouts.
private static func makeDefaultLayouts() -> [GutenbergLayout] {
return [
GutenbergLayout(slug: "about",
title: NSLocalizedString("About", comment: "About page type template title"),
preview: "https://headstartdata.files.wordpress.com/2020/01/about-2.png",
categories: [aboutCategory]),
GutenbergLayout(slug: "blog",
title: NSLocalizedString("Blog", comment: "Blog page type template title"),
preview: "https://headstartdata.files.wordpress.com/2019/06/blog-4.png",
categories: [blogCategory]),
GutenbergLayout(slug: "contact",
title: NSLocalizedString("Contact", comment: "Contact page type template title"),
preview: "https://headstartdata.files.wordpress.com/2019/06/contact-2.png",
categories: [contactCategory]),
GutenbergLayout(slug: "portfolio",
title: NSLocalizedString("Portfolio", comment: "Portfolio page type template title"),
preview: "https://headstartdata.files.wordpress.com/2019/06/portfolio-2.png",
categories: [portfolioCategory]),
GutenbergLayout(slug: "services",
title: NSLocalizedString("Services", comment: "Services page type template title"),
preview: "https://headstartdata.files.wordpress.com/2019/06/services-2.png",
categories: [servicesCategory]),
GutenbergLayout(slug: "team",
title: NSLocalizedString("Team", comment: "Team page type template title"),
preview: "https://headstartdata.files.wordpress.com/2020/03/team.png",
categories: [teamCategory])
]
}
}