Add page grid view

[barklund]

Feature description

Add a page grid view as a new global state for the entire editor as well as a button in the page carousel that enables it.

In grid view, show page outlines of all pages in story and allow them to be both dragged and cut-pasted as designed.

Page reordering/duplication takes immediate effect.

Page outlines can be resized using the slider in the footer.

The close button in the footer will close grid view (changes have been persisted instantly when made).

This ticket does not include showing actual previews of the pages in the grid view.

The keyboard interactions are dependent on the outcome of ampproject/amp-wp#3826.

This is still pending UX review.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• Users can enter grid view when pressing the button in the footer.
• Users can reorder pages in grid view by dragging.
• Users can focus pages and spaces in grid view by clicking and navigate between the pages using arrow keys or tabs.
• Users can move pages in grid view by using keyboard shortcuts as designed.
• Users can delete pages in grid view by pressing delete/backspace when focused.
• Users can resize the page preview in the grid by using the slider at the bottom of the view.
• Users can exit grid view.

Implementation brief

QA testing instructions

1. Create a new story with a few pages and elements
2. Verify that clicking on the grid view icon in the bottom right opens the grid view
3. Verify that the size of the thumbnails changes with the range slider
4. The grid view follows the Figma design
5. The thumbnails show the preview of the pages as in the carousel
6. Drag & drop of pages to reorder them works
7. The grid view can be closed by using ESC and by clicking on the back link

Demo

Changelog entry

[jauyong]

Hey @barklund what exactly is this AC? Are you talking about the zoom slider?

Users can resize pages in grid view.

[barklund]

Hey @barklund what exactly is this AC? Are you talking about the zoom slider?

Users can resize pages in grid view.

Yes, it was referring to the preview thumbnail sizing. I have updated and clarified the text (and added deleting pages).

Note that the AC does not include multi-select as we're still exploring if this is a P1 or later.

[adamsilverstein]

I love this issue, having a grid mode will make layout control so much easier for users!

One idea from a recent demo: how about enabling the grid mode automatically (or a "grid automatic mode") for specific interactions such as drag-and-drop or image resizing. In this mode, the grid isn't visible until until interaction - when a user starts resizing or dragging image for example, then the grid appears and interactions "snap" to it. Once the stop interacting, the grid disappears.

[swissspidy]

@adamsilverstein I think this issue is more about a grid view as described in https://github.com/ampproject/amp-wp/issues/3974#issuecomment-572136169. Snapping is handled in ampproject/amp-wp#3773.

[adamsilverstein]

@swissspidy - thanks for the link, that issue does cover my idea - I had missed it earlier when reviewing the issue backlog.

[swissspidy]

Two open UX questions:

• Should clicking on the rectangles at the top change the zoom value? Or are they purely decoration?
• How many zoom levels should there be? Currently there are three steps: small, medium (default), large. We could add more, or even make it totally fluid/responsive.

Current implementation:

[samitron7]

@swissspidy

Here are answers to the UX question:

1. They are purely decoration
2. I think 3 zoom level is fine for now. Can you give me the sizes for the smallest and largest thumbnail.

[swissspidy]

@samitron7 Sounds good. The three sizes are currently like this:

• Small: 90x160
• Medium: 180x320 (like on Figma)
• Large: 270x480

[jauyong]

Hey @swissspidy are you able to add QA instructions for this?

[swissspidy]

Added some, sorry for the delay!