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

[chipsnyder]

Fixes wordpress-mobile/gutenberg-mobile#2437

To test:

To disable or enable the development version of Modal Layout Picker

• Open the app from the build that allows FeatureFlags such as a PR build or a local development build
  • By default, the modal layout picker will be disabled.
  • From the site page:
    • Click on your Gravatar.
    • Click on App Settings.
    • Click on Debug.
    • Toggle "Gutenberg Modal Layout Picker" to enable or disable the picker
      

When enabled, the Layout Picker should show when creating a new page from My Site and from the Page list.

Start by enabling the MLP (if needed) and by navigating to the Modal Layout Picker

Select a Category

1. Select a category
   • Expect to see the sections condensed to be only the selected category filter
2. Deselect the category
   • Expect to see the other categories return

Select Multiple-Categories

1. Select a category
   • Expect to see the sections condensed to be only the selected category filter
2. Select a different category
   • Expect to see the new section added to the list
3. Deselect a category
   • Expect the list to update again to be only the selected categories
4. Deselect the rest of the categories
   • Expect the all of the categories to return

Selecting a Layout then filter on the same category

1. Select a layout in a category such as Blog
2. Select the category in the filter bar that matches the category of the selected layout
   • Expect to see the section updated to only show the selected category, and for the selected layout to still be selected.
3. Deselect the category in the filter
   • Expect to see the other categories return, and for the selected layout to still be selected.

Selecting a Layout then filter on the same category deselect layout

1. Select a layout in a category such as Blog
2. Select the category in the filter bar that matches the category of the selected layout
   • Expect to see the section updated to only show the selected category, and for the selected layout to still be selected.
3. Deselect the layout
   • Expect the bottom bar to revert to "Create a Blank Page"
4. Deselect the category in the filter
   • Expect to see the other categories return, and for no layout to be selected

Selecting a Layout then filter on a different category

1. Select a layout in a category such as Blog
2. Select a category in the filter bar that does not match the category of the selected layout
   • Expect to see the section updated to only show the selected category, and for the bottom bar to remain as "Preview" and "Create Page"
3. Deselect the category in the filter
   • Expect to see the other categories return, and for the selected layout to still be selected.

Selecting a Layout then filter on a different category select a different layout

1. Select a layout in a category such as Blog
2. Select a category in the filter bar that does not match the category of the selected layout
   • Expect to see the section updated to only show the selected category, and for the bottom bar to remain as "Preview" and "Create Page"
3. Select a different layout
4. Deselect the category in the filter
   • Expect to see the other categories return, and for the selected layout from step 3 to still be selected.

Screenshots:

Additional Context:

This is a continuation of the work in #14553 and will be followed up by other tickets as part of Modal Layout Picker Project

PR submission checklist:

• I have considered adding unit tests where possible.
• I have considered adding accessibility improvements for my changes.
• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

[peril-wordpress-mobile]

You can test the changes on this Pull Request by downloading it from AppCenter here with build number: 33694. IPA is available here. If you need access to this, you can ask a maintainer to add you.

[peril-wordpress-mobile]

You can trigger optional UI/connected tests for these changes by visiting CircleCI here.

[chipsnyder]

Renamed this just to support a more generic naming structure as this might be used for Gutenboarding later.

[chipsnyder]

I thought about creating a getter for (filteredSections ?? sections) but I felt like that was clouding when I was explicitly trying to reference filteredSections or sections vs when I wanted the one that was appropriate for the current display mode

[chipsnyder]

Hey @guarani 👋 I was wondering if you'd be able to help me review this piece of the Modal Layout Picker work? I wanted to try and spread out the code reviews across the team (:

[guarani]

Sure thing @chipsnyder :) I'll try to get to this asap.

[guarani]

Tested and looking great! 💯

I tested all the scenarios on a iPhone 11 with iOS 14 in light/dark mode and in portrait/landscape modes, then did a quick check with an iPhone SE and iPad simulators. The only issues I found look minor and/or opinionated — and some are UX related — so feel free to merge this as-is:

• I think the template cards would benefit from a snap-to-center behavior: At the moment you can select a template that's partially (or almost fully) off-screen, and it doesn't scroll into view or snap to center.

• As the user selects categories one-by-one, would it be useful to scroll that most recently selected category into view? This happens naturally for the first category selected (since all others are explicitly hidden), but as more categories are selected, they are added off-screen which gives the user no visual feedback for their action. What I'm not sure about is whether anything could be done as categories are deselected.

• Since the user can select a template, then filter out the category that template belongs to, I'm not sure if we should still enable the Create Page button — since it will create a layout based on a selection that's not currently visible. (Based on the PR description, this seems to be by design, but it seems awkward to me.)

• I noticed the templates can take a while to load, not sure if a loading view will be needed here.

• On iPads, I noticed that the category filter buttons are left-centered (as a group) — not sure if by design or if this should be centered like the title above it.

• On iOS versions below 13, the category button selected color is off (also, deselecting the button doesn't return it to its original visual state)

  See screenshot

  

• The "Create Blank Page" and "Preview" buttons use a think greyish border that works well in light mode, but in dark mode can be a bit hard to distinguish in certain situations. When you scroll the list of templates so that a white template is under these buttons, the button border is hard to make out.

  See screenshot

  Looks good ✅	Hard to distinguish button border ⚠️

[guarani]

Approved, as mention in above comment all issues are minor.

[guarani]

Just noticed the modal layout picker screen is centered in landscape on iOS 12 (not sure if it should be full-width):

See screenshot

[chipsnyder]

Thanks for the review @guarani!

• I think the template cards would benefit from a snap-to-center behavior: At the moment you can select a template that's partially (or almost fully) off-screen, and it doesn't scroll into view or snap to center.

I like this idea I'll give that a try. :)

• As the user selects categories one-by-one, would it be useful to scroll that most recently selected category into view? This happens naturally for the first category selected (since all others are explicitly hidden), but as more categories are selected, they are added off-screen which gives the user no visual feedback for their action. What I'm not sure about is whether anything could be done as categories are deselected.

@iamthomasbishop Do you have any thoughts on this?

• Since the user can select a template, then filter out the category that template belongs to, I'm not sure if we should still enable the Create Page button — since it will create a layout based on a selection that's not currently visible. (Based on the PR description, this seems to be by design, but it seems awkward to me.)

Yeah, this is by design, @iamthomasbishop has a response here (wordpress-mobile/WordPress-Android#12573 (comment)) that can shine more light on what he's thinking from the UX point of view.

• I noticed the templates can take a while to load, not sure if a loading view will be needed here.

This is actually being taken on as part of the fetching live data portion which I separated out to another task. #14699. The thumbnail images will also be enhanced as a future portion as well.

• On iPads, I noticed that the category filter buttons are left-centered (as a group) — not sure if by design or if this should >be centered like the title above it.
• On iOS versions below 13, the category button selected color is off (also, deselecting the button doesn't return it to its >original visual state)
  modal layout picker screen is centered in landscape on iOS 12 (not sure if it should be full-width):

These are great catches I'll investigate these a bit more before merging and report back 👍

The "Create Blank Page" and "Preview" buttons use a think greyish border that works well in light mode...

Yeah I totally agree, @iamthomasbishop and I are exploring some other options for this.

[chipsnyder]

Hey @guarani,

I took care of the color issues and layout issues you mentioned. Also:

• I think the template cards would benefit from a snap-to-center behavior: At the moment you can select a template that's >partially (or almost fully) off-screen, and it doesn't scroll into view or snap to center.

I like this idea I'll give that a try. :)

I gave this a try it felt a bit weird to me to have it shift. I tried a few apps (mostly table views instead of collection views) and when making a selection while remaining on the same page the selected item didn't move. @iamthomasbishop @guarani If you want I can put a build together in another branch so we can try it if you'd like.

Let me know if you'd like to take another look. If not I'll move forward with this and handle the remaining design items in a future branch.

[guarani]

I gave this a try it felt a bit weird to me to have it shift. I tried a few apps (mostly table views instead of collection views) and when making a selection while remaining on the same page the selected item didn't move. @iamthomasbishop @guarani If you want I can put a build together in another branch so we can try it if you'd like.

Thanks for looking into it @chipsnyder, but not to worry, if it's worthwhile maybe it can be explored in the future from a design perspective.