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.

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

POC: Editor: Multipage Canvas #11669

Merged
merged 13 commits into from
Jun 30, 2022
Merged

POC: Editor: Multipage Canvas #11669

merged 13 commits into from
Jun 30, 2022

Conversation

barklund
Copy link
Contributor

@barklund barklund commented Jun 10, 2022

Context

This adds a preview of the pages before and after the current ones to either side of the canvas, if there is enough space. It adds as many pages, as there is room for.

To-do

  • Which size should they pages be and with what margin?
  • Should the pages be active in any way? Can you click them? Can you drag stuff to them? Or from them?

User-facing changes

Window height Screenshot
Narrow Screen Shot 2022-06-10 at 17 32 42
Medium Screen Shot 2022-06-10 at 17 31 52
Tall Screen Shot 2022-06-10 at 17 32 15

It even works in RTL:
Screen Shot 2022-06-10 at 17 40 17

Testing Instructions

This PR can be tested by following these steps:

  1. Enable "Context pages" feature flag
  2. Add multiple pages to a story (preferably with some content
  3. Switch page a few times
  4. Observe the previous and future pages in the margins of the current page
  5. Try different browser sizes to see the changes

Checklist

  • This PR addresses an existing issue and I have linked this PR to it in ZenHub
  • I have tested this code to the best of my abilities
  • I have verified accessibility to the best of my abilities (docs)
  • I have verified i18n and l10n (translation, right-to-left layout) to the best of my abilities
  • This code is covered by automated tests (unit, integration, and/or e2e) to verify it works as intended (docs)
  • I have added documentation where necessary
  • I have added a matching Type: XYZ label to the PR

Partially addresses #9643

@barklund barklund added Type: Enhancement New feature or improvement of an existing feature Pod: Prometheus labels Jun 10, 2022
@barklund barklund requested review from timarney and merapi June 10, 2022 15:41
@barklund barklund self-assigned this Jun 10, 2022
@timarney
Copy link
Contributor

Nice -- overall :)

Seeing some issues with previous and next screen previews --- likely separate from this PR as the "thumbnail" view has same issue.
Screen Shot 2022-06-10 at 1 33 19 PM

@barklund barklund changed the title [WIP] Editor: Added inactive previous/next pages Editor: Added previous/next pages Jun 15, 2022
@barklund barklund marked this pull request as ready for review June 15, 2022 14:05
Copy link
Contributor

@sblinde sblinde left a comment

Choose a reason for hiding this comment

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

🐝

Code looks solid. Do agree: there are some pre-existing issues w/ the thumbnail view of pages where the Fit button overlaps the arrows when there's a lot of pages, but I know that's outside of this scope and body of work.

@swissspidy
Copy link
Collaborator

Are the pages basically all just screenshots? What is the performance impact of this? Can we measure it?

It might be best to put this behind a feature flag until that is more clear.

@barklund
Copy link
Contributor Author

barklund commented Jun 20, 2022

Are the pages basically all just screenshots? What is the performance impact of this? Can we measure it?

They are all instances of PagePreview, so they're complex HTML until they've been snapshotted by the snapshot logic that we have in place. There might very well be a performance impact of this, as we previously only snapshot tiny thumbnails in the carousel, but now snapshot these much larger canvases. It will have an impact on both computation time for generating these snapshots as well as memory used for storing them. I have not put any tracking of that in at this time.

It might be best to put this behind a feature flag until that is more clear.

That sounds like a good idea!

@merapi
Copy link
Contributor

merapi commented Jun 20, 2022

I'm trying to make it work on QA so the design pod can review it, right now there is no build ZIP.

All good now 👍🏻
image

@github-actions
Copy link
Contributor

github-actions bot commented Jun 20, 2022

Size Change: +727 B (0%)

Total Size: 2.64 MB

Filename Size Change
assets/js/wp-story-editor.js 321 kB +727 B (0%)
ℹ️ View Unchanged
Filename Size
assets/css/carousel-view-rtl.css 702 B
assets/css/carousel-view.css 701 B
assets/css/web-stories-block-rtl.css 4.5 kB
assets/css/web-stories-block.css 4.55 kB
assets/css/web-stories-embed-rtl.css 318 B
assets/css/web-stories-embed.css 317 B
assets/css/web-stories-list-styles-rtl.css 2.34 kB
assets/css/web-stories-list-styles.css 2.37 kB
assets/css/web-stories-theme-style-twentyeleven-rtl.css 102 B
assets/css/web-stories-theme-style-twentyeleven.css 102 B
assets/css/web-stories-theme-style-twentyfifteen-rtl.css 251 B
assets/css/web-stories-theme-style-twentyfifteen.css 251 B
assets/css/web-stories-theme-style-twentyfourteen-rtl.css 287 B
assets/css/web-stories-theme-style-twentyfourteen.css 287 B
assets/css/web-stories-theme-style-twentyseventeen-rtl.css 288 B
assets/css/web-stories-theme-style-twentyseventeen.css 288 B
assets/css/web-stories-theme-style-twentysixteen-rtl.css 224 B
assets/css/web-stories-theme-style-twentysixteen.css 224 B
assets/css/web-stories-theme-style-twentyten-rtl.css 143 B
assets/css/web-stories-theme-style-twentyten.css 143 B
assets/css/web-stories-theme-style-twentytwelve-rtl.css 256 B
assets/css/web-stories-theme-style-twentytwelve.css 256 B
assets/css/web-stories-theme-style-twentytwenty-rtl.css 86 B
assets/css/web-stories-theme-style-twentytwenty.css 86 B
assets/css/web-stories-theme-style-twentytwentyone-rtl.css 326 B
assets/css/web-stories-theme-style-twentytwentyone.css 326 B
assets/css/web-stories-widget-rtl.css 482 B
assets/css/web-stories-widget.css 482 B
assets/css/wp-dashboard-rtl.css 657 B
assets/css/wp-dashboard.css 659 B
assets/css/wp-story-editor-rtl.css 737 B
assets/css/wp-story-editor.css 738 B
assets/js/1814.js 7.45 kB
assets/js/3617.js 224 kB
assets/js/4422.js 49.3 kB
assets/js/5980.js 5.48 kB
assets/js/7.js 1.14 MB
assets/js/7747.js 29.6 kB
assets/js/carousel-view.js 3.41 kB
assets/js/chunk-colorthief.js 2.64 kB
assets/js/chunk-ffmpeg.js 5.64 kB
assets/js/chunk-focus-visible.js 1.01 kB
assets/js/chunk-getStoryMarkup.js 5.82 kB
assets/js/chunk-html-to-image.js 4.6 kB
assets/js/chunk-opentype.js 96 B
assets/js/chunk-react-calendar.js 12.4 kB
assets/js/chunk-react-color.js 44.3 kB
assets/js/chunk-resize-observer-polyfill.js 2.57 kB
assets/js/chunk-web-animations-js.js 14.6 kB
assets/js/chunk-web-stories-template-0-metaData.js 546 B
assets/js/chunk-web-stories-template-0.js 10.6 kB
assets/js/chunk-web-stories-template-1-metaData.js 540 B
assets/js/chunk-web-stories-template-1.js 9.01 kB
assets/js/chunk-web-stories-template-10-metaData.js 533 B
assets/js/chunk-web-stories-template-10.js 6.91 kB
assets/js/chunk-web-stories-template-11-metaData.js 540 B
assets/js/chunk-web-stories-template-11.js 8.51 kB
assets/js/chunk-web-stories-template-12-metaData.js 496 B
assets/js/chunk-web-stories-template-12.js 9.48 kB
assets/js/chunk-web-stories-template-13-metaData.js 525 B
assets/js/chunk-web-stories-template-13.js 7.3 kB
assets/js/chunk-web-stories-template-14-metaData.js 582 B
assets/js/chunk-web-stories-template-14.js 7.58 kB
assets/js/chunk-web-stories-template-15-metaData.js 544 B
assets/js/chunk-web-stories-template-15.js 8.21 kB
assets/js/chunk-web-stories-template-16-metaData.js 588 B
assets/js/chunk-web-stories-template-16.js 10.3 kB
assets/js/chunk-web-stories-template-17-metaData.js 539 B
assets/js/chunk-web-stories-template-17.js 8.52 kB
assets/js/chunk-web-stories-template-18-metaData.js 585 B
assets/js/chunk-web-stories-template-18.js 9.05 kB
assets/js/chunk-web-stories-template-19-metaData.js 501 B
assets/js/chunk-web-stories-template-19.js 9.99 kB
assets/js/chunk-web-stories-template-2-metaData.js 586 B
assets/js/chunk-web-stories-template-2.js 9.16 kB
assets/js/chunk-web-stories-template-20-metaData.js 548 B
assets/js/chunk-web-stories-template-20.js 8.59 kB
assets/js/chunk-web-stories-template-21-metaData.js 534 B
assets/js/chunk-web-stories-template-21.js 9.16 kB
assets/js/chunk-web-stories-template-22-metaData.js 525 B
assets/js/chunk-web-stories-template-22.js 7.37 kB
assets/js/chunk-web-stories-template-23-metaData.js 605 B
assets/js/chunk-web-stories-template-23.js 6.99 kB
assets/js/chunk-web-stories-template-24-metaData.js 518 B
assets/js/chunk-web-stories-template-24.js 10.8 kB
assets/js/chunk-web-stories-template-25-metaData.js 544 B
assets/js/chunk-web-stories-template-25.js 7.07 kB
assets/js/chunk-web-stories-template-26-metaData.js 601 B
assets/js/chunk-web-stories-template-26.js 6.85 kB
assets/js/chunk-web-stories-template-27-metaData.js 543 B
assets/js/chunk-web-stories-template-27.js 7.36 kB
assets/js/chunk-web-stories-template-28-metaData.js 532 B
assets/js/chunk-web-stories-template-28.js 8.49 kB
assets/js/chunk-web-stories-template-29-metaData.js 561 B
assets/js/chunk-web-stories-template-29.js 8.49 kB
assets/js/chunk-web-stories-template-3-metaData.js 540 B
assets/js/chunk-web-stories-template-3.js 8.22 kB
assets/js/chunk-web-stories-template-30-metaData.js 576 B
assets/js/chunk-web-stories-template-30.js 7.67 kB
assets/js/chunk-web-stories-template-31-metaData.js 503 B
assets/js/chunk-web-stories-template-31.js 9.61 kB
assets/js/chunk-web-stories-template-32-metaData.js 551 B
assets/js/chunk-web-stories-template-32.js 12.2 kB
assets/js/chunk-web-stories-template-33-metaData.js 492 B
assets/js/chunk-web-stories-template-33.js 8.86 kB
assets/js/chunk-web-stories-template-34-metaData.js 571 B
assets/js/chunk-web-stories-template-34.js 7.57 kB
assets/js/chunk-web-stories-template-35-metaData.js 565 B
assets/js/chunk-web-stories-template-35.js 8.81 kB
assets/js/chunk-web-stories-template-36-metaData.js 576 B
assets/js/chunk-web-stories-template-36.js 11.6 kB
assets/js/chunk-web-stories-template-37-metaData.js 528 B
assets/js/chunk-web-stories-template-37.js 6.47 kB
assets/js/chunk-web-stories-template-38-metaData.js 572 B
assets/js/chunk-web-stories-template-38.js 7.96 kB
assets/js/chunk-web-stories-template-39-metaData.js 589 B
assets/js/chunk-web-stories-template-39.js 7.67 kB
assets/js/chunk-web-stories-template-4-metaData.js 565 B
assets/js/chunk-web-stories-template-4.js 11.5 kB
assets/js/chunk-web-stories-template-40-metaData.js 556 B
assets/js/chunk-web-stories-template-40.js 9.13 kB
assets/js/chunk-web-stories-template-41-metaData.js 572 B
assets/js/chunk-web-stories-template-41.js 7.75 kB
assets/js/chunk-web-stories-template-42-metaData.js 522 B
assets/js/chunk-web-stories-template-42.js 7 kB
assets/js/chunk-web-stories-template-43-metaData.js 558 B
assets/js/chunk-web-stories-template-43.js 8.37 kB
assets/js/chunk-web-stories-template-44-metaData.js 582 B
assets/js/chunk-web-stories-template-44.js 10.1 kB
assets/js/chunk-web-stories-template-45-metaData.js 564 B
assets/js/chunk-web-stories-template-45.js 7.12 kB
assets/js/chunk-web-stories-template-46-metaData.js 531 B
assets/js/chunk-web-stories-template-46.js 5.01 kB
assets/js/chunk-web-stories-template-47-metaData.js 592 B
assets/js/chunk-web-stories-template-47.js 8.46 kB
assets/js/chunk-web-stories-template-48-metaData.js 556 B
assets/js/chunk-web-stories-template-48.js 8.31 kB
assets/js/chunk-web-stories-template-49-metaData.js 518 B
assets/js/chunk-web-stories-template-49.js 9.7 kB
assets/js/chunk-web-stories-template-5-metaData.js 555 B
assets/js/chunk-web-stories-template-5.js 9.38 kB
assets/js/chunk-web-stories-template-50-metaData.js 504 B
assets/js/chunk-web-stories-template-50.js 8.26 kB
assets/js/chunk-web-stories-template-51-metaData.js 527 B
assets/js/chunk-web-stories-template-51.js 9.89 kB
assets/js/chunk-web-stories-template-52-metaData.js 602 B
assets/js/chunk-web-stories-template-52.js 10.1 kB
assets/js/chunk-web-stories-template-53-metaData.js 553 B
assets/js/chunk-web-stories-template-53.js 5.79 kB
assets/js/chunk-web-stories-template-54-metaData.js 547 B
assets/js/chunk-web-stories-template-54.js 7.52 kB
assets/js/chunk-web-stories-template-55-metaData.js 574 B
assets/js/chunk-web-stories-template-55.js 6.56 kB
assets/js/chunk-web-stories-template-56-metaData.js 543 B
assets/js/chunk-web-stories-template-56.js 9.5 kB
assets/js/chunk-web-stories-template-57-metaData.js 528 B
assets/js/chunk-web-stories-template-57.js 14.1 kB
assets/js/chunk-web-stories-template-58-metaData.js 556 B
assets/js/chunk-web-stories-template-58.js 5.61 kB
assets/js/chunk-web-stories-template-59-metaData.js 588 B
assets/js/chunk-web-stories-template-59.js 8.52 kB
assets/js/chunk-web-stories-template-6-metaData.js 569 B
assets/js/chunk-web-stories-template-6.js 7.04 kB
assets/js/chunk-web-stories-template-60-metaData.js 509 B
assets/js/chunk-web-stories-template-60.js 8.89 kB
assets/js/chunk-web-stories-template-7-metaData.js 569 B
assets/js/chunk-web-stories-template-7.js 7.21 kB
assets/js/chunk-web-stories-template-8-metaData.js 569 B
assets/js/chunk-web-stories-template-8.js 8.4 kB
assets/js/chunk-web-stories-template-9-metaData.js 581 B
assets/js/chunk-web-stories-template-9.js 8.49 kB
assets/js/chunk-web-stories-templates.js 443 B
assets/js/chunk-web-stories-textset-0.js 5.08 kB
assets/js/chunk-web-stories-textset-1.js 6.64 kB
assets/js/chunk-web-stories-textset-2.js 7.67 kB
assets/js/chunk-web-stories-textset-3.js 15.1 kB
assets/js/chunk-web-stories-textset-4.js 4.16 kB
assets/js/chunk-web-stories-textset-5.js 5.49 kB
assets/js/chunk-web-stories-textset-6.js 5.3 kB
assets/js/chunk-web-stories-textset-7.js 10.2 kB
assets/js/generateBlurhash.worker.worker.js 1.1 kB
assets/js/imgareaselect.js 3.77 kB
assets/js/lightbox.js 550 B
assets/js/tinymce-button.js 2.84 kB
assets/js/web-stories-activation-notice.js 26.9 kB
assets/js/web-stories-block.js 22.7 kB
assets/js/web-stories-embed.js 20 B
assets/js/web-stories-widget.js 587 B
assets/js/wp-dashboard.js 72 kB

compressed-size-action

@googleforcreators-bot
Copy link
Collaborator

googleforcreators-bot commented Jun 20, 2022

Plugin builds for ab3bb64 are ready 🛎️!

@barklund
Copy link
Contributor Author

I'm trying to make it work on QA so the design pod can review it, right now there is no build ZIP.

I've pushed a new version with the feature hidden by flag, just FYI.

Morten Barklund and others added 3 commits June 21, 2022 21:03
Co-authored-by: Pascal Birchler <pascalb@google.com>
# Conflicts:
#	packages/story-editor/src/components/canvas/layout.js
@merapi
Copy link
Contributor

merapi commented Jun 22, 2022

I can reproduce the bug from 00:13 locally and on QA.

Screen.Recording.2022-06-22.at.13.58.49.mov

Other than that we are waiting for the design pod review (page size/margins etc).

@barklund
Copy link
Contributor Author

I can reproduce the bug from 00:13 locally and on QA.

Whoa, that's a weird bug! I'll investigate, thanks for catching it!

@barklund
Copy link
Contributor Author

barklund commented Jun 28, 2022

Approved by UX:

  • Size, padding, opacity, and hover looks good

To do after UX review:

  • Last page never shows (some off-by-one error somewhere)
  • Resize all page previews to also show non-safe space (includes page carousel and grid view, should probably be new ticket)
  • Don't show hover state when dragging from canvas to neighbor page
  • Don't allow neighbor pages to be draggable
  • Measure impact on low-end devices
  • Fade pages even more further away, show max 4 either direction

@merapi merapi changed the title Editor: Added previous/next pages POC: Editor: Multipage Canvas Jun 30, 2022
@barklund barklund merged commit 4e7f179 into main Jun 30, 2022
@barklund barklund deleted the try/9643-multipage branch June 30, 2022 15:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Enhancement New feature or improvement of an existing feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants