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

Editor: Multipage redesign #11934

Merged
merged 6 commits into from
Jul 20, 2022
Merged

Editor: Multipage redesign #11934

merged 6 commits into from
Jul 20, 2022

Conversation

barklund
Copy link
Contributor

@barklund barklund commented Jul 18, 2022

Context

This addresses the UX points raised in #11845.

User-facing changes

Feature Before  After
Pages fading

Context page proportions

Carousel page proportions
Screen Shot 2022-07-19 at 11 41 34 Screen Shot 2022-07-19 at 11 41 02 
Grid view page proportions Screen Shot 2022-07-19 at 11 42 03 Screen Shot 2022-07-19 at 11 43 35
Checklist page proportions Screen Shot 2022-07-19 at 11 50 31 Screen Shot 2022-07-19 at 11 44 29

Testing Instructions

This PR can be tested by following these steps:

  1. Make sure the "Context pages" experiment is enabled
  2. Add content to the top of the first page above the safe zone and at the bottom of the page below the safe zone.
  3. Add 5 more pages
  4. Observe that the context pages before the current page fade out and only 4 are shown (resize window to show more pages)
  5. Go back to the second page and observe the first page in the context and see that the top and bottom content is visible.
  6. Observe that the top and bottom content is also visible in the carousel, in the gridview and in the checklist.
  7. And any element to the current (second) page
  8. Try to drag the current element to the first page and observe that the page does not seem to interact when an element is dragged "over" (or behind) it.
  9. Try to resize the current element in the same way so the handle overlaps the previous page and observe that the page does not seem to interact when an element is resized "over" (or behind) it.
  10. Try to drag something from the first page and observe that no meaningful interaction happens (a lasso selection starts, which is fine)

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

Fixes #11845

@barklund barklund added Type: Enhancement New feature or improvement of an existing feature Pod: Prometheus labels Jul 18, 2022
@barklund barklund requested review from miina and merapi July 18, 2022 14:34
@barklund barklund self-assigned this Jul 18, 2022
@github-actions
Copy link
Contributor

Size Change: +140 B (0%)

Total Size: 2.65 MB

Filename Size Change
assets/js/wp-story-editor.js 326 kB +140 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.52 kB
assets/css/web-stories-block.css 4.56 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.36 kB
assets/css/web-stories-list-styles.css 2.39 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/1590.js 1.14 MB
assets/js/1814.js 7.46 kB
assets/js/2505.js 34.9 kB
assets/js/3617.js 224 kB
assets/js/4422.js 49.3 kB
assets/js/5980.js 5.48 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.7 kB

compressed-size-action

@googleforcreators-bot
Copy link
Collaborator

Plugin builds for 1915af6 are ready 🛎️!

Copy link
Contributor

@miina miina left a comment

Choose a reason for hiding this comment

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

Works as advertised!

@@ -32,9 +32,9 @@ export const DRAWER_BUTTON_GAP_COLLAPSED = 2;

// Thumbnail size varies with available carousel size - over or under this limit
export const WIDE_CAROUSEL_LIMIT = 400;
export const WIDE_THUMBNAIL_WIDTH = 40;
export const WIDE_THUMBNAIL_HEIGHT = 60;
export const WIDE_THUMBNAIL_WIDTH = 45;
Copy link
Contributor

Choose a reason for hiding this comment

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

These changes would take effect regardless of the experiment being enabled, that's probably intended?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah, we want to change this regardless.

@swissspidy swissspidy merged commit 4a93ee5 into main Jul 20, 2022
@swissspidy swissspidy deleted the add/11845-multipage-redesign branch July 20, 2022 12:16
@miina
Copy link
Contributor

miina commented Jul 21, 2022

@swissspidy Looks like this got merged with failing Karma tests and these are now failing on main, too.

@swissspidy
Copy link
Collaborator

Ugh, didn‘t check that. Assumed this was ready since it passed QA. Are they easy to fix? Otherwise let‘s revert

@miina
Copy link
Contributor

miina commented Jul 21, 2022

Are they easy to fix? Otherwise let‘s revert

Not sure since both tests seem to pass locally, for me at least. That doesn't make it very easy -- do these fail locally when you try?

@swissspidy
Copy link
Collaborator

Is it the should allow adding new text style from multi-selection one?

Yes it's failing for me locally 😞

Looks like the test is supposed to select both text elements but failing to do so. And because only the Title text element is selected, saving another style doesn't work because it's already been saved.

Unfortunately I don't have time right now to debug this more.

If nobody else can debug locally, feel free to revert or skip the test & look into it later.

cc @merapi @barklund

@merapi
Copy link
Contributor

merapi commented Jul 21, 2022

I'm working on it: #11983

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.

Multipage Canvas: Apply design feedback
5 participants