-
Notifications
You must be signed in to change notification settings - Fork 57
[Modal Layout Picker] Create Layout Picker sections and thumbnail UI using static data #2436
Copy link
Copy link
Closed
wordpress-mobile/WordPress-iOS
#14553Labels
Page Templates[Type] EnhancementImproves a current area of the editorImproves a current area of the editor
Description
Is your feature request related to a problem? Please describe.
This task is part of the effort to rework the Starter Page Template Picker for new pages. This part of the initiative will focus on filling in the layout with static data covering the UI for the layout pickers sections, thumbnail cells, and selected state. (The category bar will be handled separately).
The result should look something like:
| iOS | Android | |
|---|---|---|
| Not Selected | ![]() |
![]() |
| Selected | ![]() |
![]() |
| Scrolled | ![]() |
![]() |
- Note these Sample images contain space for where the Category bar will eventually be. Categories will be handled by [Modal Layout Picker] Create Layout Picker category bar UI using static data #2437.
Goals
- Layouts should be grouped into sections based on their category
- Layouts should be horizontally scrollable within their category rows.
- Layout cells should contain a preview image.
- Selecting a Layout should:
- Update the border-color
- Display the checkmark
- Change the bottom display to have buttons for "Preview" and "Create Page"
- Adding the functionality for these buttons will be handled by [Modal Layout Picker] "Preview" button functionality #2452 and [Modal Layout Picker] "Create Page" button functionality #2446
- Deselect any currently selected cells
- Deselecting a Layout should:
- Revert the border-color.
- Hide the checkmark.
- Revert the bottom Buttons to be "Create Blank Page"
- Dark Mode should be handled for any new UI items.
Additional context
- The static data will be prepared and made available as part of [Modal Layout Picker] Add support for Self-Hosted sites #2455
- This should be worked on after [Modal Layout Picker] Create Modal window for Modal Layout Picker #2419
- To prepare any static data, the endpoint is being created as part of Add API Endpoint containing the current with starter page layouts #2413. Modeling the static data around the shape of the response created there will help make downstream tasks easier.
- The Categories bar will be handled as part of [Modal Layout Picker] Create Layout Picker category bar UI using static data #2437. However, consideration for making the bar stick to the top of the screen when scrolled should be taken into account.
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
Page Templates[Type] EnhancementImproves a current area of the editorImproves a current area of the editor







