Multipage Canvas POC

[miina]

Feature Description

Edit: See https://github.com/GoogleForCreators/web-stories-wp/issues/9643#issuecomment-1064304530 for the latest update. Design TBD.

Important: UX prefers the feature to be released once it's fully ready, there won't be originally considered MVP etc. even though we'll most likely implement it in multiple steps. Once we know better, we can convert this issue into an epic.

See Figma

Note: this feature has been blocked for some time due to potential hit on performance. It has been brought up again by UX as high priority so we should take another look into this to find a way how to implement it.

Some options for unblocking this:

• Improve the Page performance (we should do this anyway, also see #8255). EDIT: Note that various performance improvements have been done by Pea pod meanwhile, some of those also influence the Page rendering time.
• Perhaps we can use the images generated anyway for the page carousel thumbnails. The images are tiny though, and when loading the first time, these are not generated yet, so this needs some looking into. EDIT: See #9749

Alternatives Considered

Additional Context

[miina]

UX brought this issue up as quite important and requested. We should take another look at this, most likely the issue will be done in two steps:

• Displaying non-interactive pages (able to navigate by clicking but not able to drag anything to the next page etc)
• Displaying partially interactive pages: possible to drag an element from the active page to prev-next pages.

First we need to fix the thumbnail generation to only generate one image per page, we could potentially reuse those for the prev/next pages.

[miina]

Update from design sync on the 9th of March

The ideal option from Amy:

Make the entire story interactive and side-to-side scrollable

Implications:

• Users will be able to see how objects line up from canvas to canvas, and potentially have point guides in place for exactness
• Users can copy, paste, and drag objects between all canvases
• Users can edit any slide anywhere on screen by scrolling to it and putting it wherever they feel comfortable editing it, even if partial view
• Scrolling would work somewhat like Canva
• There will be no “main canvas” indicators in the workspace, but perhaps an indicator of the canvas you’re working on at any given time on click or nav (for accessibility?)
• Each canvas would have a canvas menu, but quick menu doesn’t show up till you click on it

[bmattb]

@aaskedall Can you confirm that this is still desired? Prom is thinking about picking this up in next sprint. cc @swissspidy @gajasinski

[merapi]

We are still waiting for the design pod feedback on this.

[felipebochehin87]

@swissspidy @barklund please, when the screen is narrow, the quick menu is displayed over the navigation arrow. Is this something to be fixed? If so, will it be in this PR or should I create a new one?

[swissspidy]

@felipebochehin87 I think this issue exists also outside of this PR:

So it would be something that warrants its own ticket. Though it's a a bit of an edge case, so doesn't seem high prio to me.

[felipebochehin87]

Thanks @swissspidy . I'll create a new ticket just so we have a record :)