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 and output: Custom page advancement #12318

Merged
merged 7 commits into from
Sep 16, 2022
Merged

Conversation

barklund
Copy link
Contributor

Context

This adds a new custom per-page page advancement panel.

User-facing changes

Advancement setting Without override  With override
Manual Screen Shot 2022-09-14 at 19 00 12 Screen Shot 2022-09-14 at 18 58 37
Auto Screen Shot 2022-09-14 at 18 58 23 Screen Shot 2022-09-14 at 18 58 33

Testing Instructions

This PR can be tested by following these steps:

  1. Enable the experiment
  2. Set any document-wide page advancement setting in the document panel
  3. Then for any individual page, override the global page advancement setting locally (or not)
  4. Observe that the preview story will correctly used either the local page setting or the global setting if not overridden.

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 #12210

@barklund barklund added Type: Enhancement New feature or improvement of an existing feature Pod: Prometheus labels Sep 14, 2022
@barklund barklund self-assigned this Sep 14, 2022
@barklund barklund marked this pull request as ready for review September 14, 2022 21:24
@googleforcreators-bot
Copy link
Collaborator

googleforcreators-bot commented Sep 14, 2022

Plugin builds for bef41f0 are ready 🛎️!

@github-actions
Copy link
Contributor

github-actions bot commented Sep 14, 2022

Size Change: +739 B (0%)

Total Size: 2.72 MB

Filename Size Change
assets/js/wp-story-editor.js 1.36 MB +703 B (0%)
ℹ️ View Unchanged
Filename Size Change
assets/css/carousel-view-rtl.css 702 B 0 B
assets/css/carousel-view.css 701 B 0 B
assets/css/web-stories-block-rtl.css 4.52 kB 0 B
assets/css/web-stories-block.css 4.56 kB 0 B
assets/css/web-stories-embed-rtl.css 318 B 0 B
assets/css/web-stories-embed.css 317 B 0 B
assets/css/web-stories-list-styles-rtl.css 2.36 kB 0 B
assets/css/web-stories-list-styles.css 2.39 kB 0 B
assets/css/web-stories-theme-style-twentyeleven-rtl.css 102 B 0 B
assets/css/web-stories-theme-style-twentyeleven.css 102 B 0 B
assets/css/web-stories-theme-style-twentyfifteen-rtl.css 251 B 0 B
assets/css/web-stories-theme-style-twentyfifteen.css 251 B 0 B
assets/css/web-stories-theme-style-twentyfourteen-rtl.css 287 B 0 B
assets/css/web-stories-theme-style-twentyfourteen.css 287 B 0 B
assets/css/web-stories-theme-style-twentyseventeen-rtl.css 288 B 0 B
assets/css/web-stories-theme-style-twentyseventeen.css 288 B 0 B
assets/css/web-stories-theme-style-twentysixteen-rtl.css 224 B 0 B
assets/css/web-stories-theme-style-twentysixteen.css 224 B 0 B
assets/css/web-stories-theme-style-twentyten-rtl.css 143 B 0 B
assets/css/web-stories-theme-style-twentyten.css 143 B 0 B
assets/css/web-stories-theme-style-twentytwelve-rtl.css 256 B 0 B
assets/css/web-stories-theme-style-twentytwelve.css 256 B 0 B
assets/css/web-stories-theme-style-twentytwenty-rtl.css 86 B 0 B
assets/css/web-stories-theme-style-twentytwenty.css 86 B 0 B
assets/css/web-stories-theme-style-twentytwentyone-rtl.css 326 B 0 B
assets/css/web-stories-theme-style-twentytwentyone.css 326 B 0 B
assets/css/web-stories-widget-rtl.css 482 B 0 B
assets/css/web-stories-widget.css 482 B 0 B
assets/css/wp-dashboard-rtl.css 657 B 0 B
assets/css/wp-dashboard.css 659 B 0 B
assets/css/wp-story-editor-rtl.css 737 B 0 B
assets/css/wp-story-editor.css 738 B 0 B
assets/js/1512.js 6.15 kB 0 B
assets/js/1814.js 7.45 kB 0 B
assets/js/2388.js 85.3 kB 0 B
assets/js/4319.js 34.9 kB 0 B
assets/js/4422.js 49.3 kB 0 B
assets/js/4484.js 84.7 kB 0 B
assets/js/5051.js 92.1 kB 0 B
assets/js/6753.js 113 kB 0 B
assets/js/9796.js 3.71 kB 0 B
assets/js/carousel-view.js 3.41 kB 0 B
assets/js/chunk-colorthief.js 2.64 kB 0 B
assets/js/chunk-ffmpeg.js 5.89 kB 0 B
assets/js/chunk-focus-visible.js 1.01 kB 0 B
assets/js/chunk-getStoryMarkup.js 12.4 kB +34 B (0%)
assets/js/chunk-html-to-image.js 4.5 kB 0 B
assets/js/chunk-opentype.js 96 B 0 B
assets/js/chunk-react-calendar.js 12.5 kB 0 B
assets/js/chunk-react-color.js 44.3 kB 0 B
assets/js/chunk-web-animations-js.js 14.6 kB 0 B
assets/js/chunk-web-stories-template-0-metaData.js 545 B 0 B
assets/js/chunk-web-stories-template-0.js 11.4 kB 0 B
assets/js/chunk-web-stories-template-1-metaData.js 539 B 0 B
assets/js/chunk-web-stories-template-1.js 9.61 kB 0 B
assets/js/chunk-web-stories-template-10-metaData.js 533 B 0 B
assets/js/chunk-web-stories-template-10.js 7.37 kB 0 B
assets/js/chunk-web-stories-template-11-metaData.js 539 B 0 B
assets/js/chunk-web-stories-template-11.js 9.09 kB 0 B
assets/js/chunk-web-stories-template-12-metaData.js 497 B 0 B
assets/js/chunk-web-stories-template-12.js 9.7 kB 0 B
assets/js/chunk-web-stories-template-13-metaData.js 525 B 0 B
assets/js/chunk-web-stories-template-13.js 7.4 kB 0 B
assets/js/chunk-web-stories-template-14-metaData.js 582 B 0 B
assets/js/chunk-web-stories-template-14.js 7.37 kB 0 B
assets/js/chunk-web-stories-template-15-metaData.js 544 B 0 B
assets/js/chunk-web-stories-template-15.js 9 kB 0 B
assets/js/chunk-web-stories-template-16-metaData.js 588 B 0 B
assets/js/chunk-web-stories-template-16.js 10.9 kB 0 B
assets/js/chunk-web-stories-template-17-metaData.js 539 B 0 B
assets/js/chunk-web-stories-template-17.js 9.2 kB 0 B
assets/js/chunk-web-stories-template-18-metaData.js 585 B 0 B
assets/js/chunk-web-stories-template-18.js 9.91 kB 0 B
assets/js/chunk-web-stories-template-19-metaData.js 501 B 0 B
assets/js/chunk-web-stories-template-19.js 10.8 kB 0 B
assets/js/chunk-web-stories-template-2-metaData.js 586 B 0 B
assets/js/chunk-web-stories-template-2.js 9.3 kB 0 B
assets/js/chunk-web-stories-template-20-metaData.js 548 B 0 B
assets/js/chunk-web-stories-template-20.js 9.01 kB 0 B
assets/js/chunk-web-stories-template-21-metaData.js 535 B 0 B
assets/js/chunk-web-stories-template-21.js 9.85 kB 0 B
assets/js/chunk-web-stories-template-22-metaData.js 525 B 0 B
assets/js/chunk-web-stories-template-22.js 7.83 kB 0 B
assets/js/chunk-web-stories-template-23-metaData.js 605 B 0 B
assets/js/chunk-web-stories-template-23.js 7.48 kB 0 B
assets/js/chunk-web-stories-template-24-metaData.js 516 B 0 B
assets/js/chunk-web-stories-template-24.js 11.7 kB 0 B
assets/js/chunk-web-stories-template-25-metaData.js 544 B 0 B
assets/js/chunk-web-stories-template-25.js 7.06 kB 0 B
assets/js/chunk-web-stories-template-26-metaData.js 601 B 0 B
assets/js/chunk-web-stories-template-26.js 7.27 kB 0 B
assets/js/chunk-web-stories-template-27-metaData.js 542 B 0 B
assets/js/chunk-web-stories-template-27.js 7.82 kB 0 B
assets/js/chunk-web-stories-template-28-metaData.js 532 B 0 B
assets/js/chunk-web-stories-template-28.js 9.07 kB 0 B
assets/js/chunk-web-stories-template-29-metaData.js 562 B 0 B
assets/js/chunk-web-stories-template-29.js 9.25 kB 0 B
assets/js/chunk-web-stories-template-3-metaData.js 539 B 0 B
assets/js/chunk-web-stories-template-3.js 8.42 kB 0 B
assets/js/chunk-web-stories-template-30-metaData.js 576 B 0 B
assets/js/chunk-web-stories-template-30.js 7.89 kB 0 B
assets/js/chunk-web-stories-template-31-metaData.js 502 B 0 B
assets/js/chunk-web-stories-template-31.js 10.3 kB 0 B
assets/js/chunk-web-stories-template-32-metaData.js 552 B 0 B
assets/js/chunk-web-stories-template-32.js 13.3 kB 0 B
assets/js/chunk-web-stories-template-33-metaData.js 492 B 0 B
assets/js/chunk-web-stories-template-33.js 9.07 kB 0 B
assets/js/chunk-web-stories-template-34-metaData.js 571 B 0 B
assets/js/chunk-web-stories-template-34.js 7.58 kB 0 B
assets/js/chunk-web-stories-template-35-metaData.js 566 B 0 B
assets/js/chunk-web-stories-template-35.js 8.91 kB 0 B
assets/js/chunk-web-stories-template-36-metaData.js 577 B 0 B
assets/js/chunk-web-stories-template-36.js 12.7 kB 0 B
assets/js/chunk-web-stories-template-37-metaData.js 528 B 0 B
assets/js/chunk-web-stories-template-37.js 6.71 kB 0 B
assets/js/chunk-web-stories-template-38-metaData.js 572 B 0 B
assets/js/chunk-web-stories-template-38.js 7.94 kB 0 B
assets/js/chunk-web-stories-template-39-metaData.js 589 B 0 B
assets/js/chunk-web-stories-template-39.js 8.08 kB 0 B
assets/js/chunk-web-stories-template-4-metaData.js 564 B 0 B
assets/js/chunk-web-stories-template-4.js 12.7 kB 0 B
assets/js/chunk-web-stories-template-40-metaData.js 557 B 0 B
assets/js/chunk-web-stories-template-40.js 10.2 kB 0 B
assets/js/chunk-web-stories-template-41-metaData.js 572 B 0 B
assets/js/chunk-web-stories-template-41.js 7.75 kB 0 B
assets/js/chunk-web-stories-template-42-metaData.js 521 B 0 B
assets/js/chunk-web-stories-template-42.js 7 kB 0 B
assets/js/chunk-web-stories-template-43-metaData.js 557 B 0 B
assets/js/chunk-web-stories-template-43.js 8.76 kB 0 B
assets/js/chunk-web-stories-template-44-metaData.js 584 B 0 B
assets/js/chunk-web-stories-template-44.js 11.1 kB 0 B
assets/js/chunk-web-stories-template-45-metaData.js 565 B 0 B
assets/js/chunk-web-stories-template-45.js 7.52 kB 0 B
assets/js/chunk-web-stories-template-46-metaData.js 531 B 0 B
assets/js/chunk-web-stories-template-46.js 5.22 kB 0 B
assets/js/chunk-web-stories-template-47-metaData.js 592 B 0 B
assets/js/chunk-web-stories-template-47.js 9.42 kB 0 B
assets/js/chunk-web-stories-template-48-metaData.js 555 B 0 B
assets/js/chunk-web-stories-template-48.js 9.09 kB 0 B
assets/js/chunk-web-stories-template-49-metaData.js 518 B 0 B
assets/js/chunk-web-stories-template-49.js 9.69 kB 0 B
assets/js/chunk-web-stories-template-5-metaData.js 556 B 0 B
assets/js/chunk-web-stories-template-5.js 9.94 kB 0 B
assets/js/chunk-web-stories-template-50-metaData.js 503 B 0 B
assets/js/chunk-web-stories-template-50.js 9.15 kB 0 B
assets/js/chunk-web-stories-template-51-metaData.js 526 B 0 B
assets/js/chunk-web-stories-template-51.js 10.4 kB 0 B
assets/js/chunk-web-stories-template-52-metaData.js 602 B 0 B
assets/js/chunk-web-stories-template-52.js 10.4 kB 0 B
assets/js/chunk-web-stories-template-53-metaData.js 553 B 0 B
assets/js/chunk-web-stories-template-53.js 5.78 kB 0 B
assets/js/chunk-web-stories-template-54-metaData.js 547 B 0 B
assets/js/chunk-web-stories-template-54.js 7.67 kB 0 B
assets/js/chunk-web-stories-template-55-metaData.js 573 B 0 B
assets/js/chunk-web-stories-template-55.js 7.13 kB 0 B
assets/js/chunk-web-stories-template-56-metaData.js 542 B 0 B
assets/js/chunk-web-stories-template-56.js 9.87 kB 0 B
assets/js/chunk-web-stories-template-57-metaData.js 527 B 0 B
assets/js/chunk-web-stories-template-57.js 14.9 kB 0 B
assets/js/chunk-web-stories-template-58-metaData.js 555 B 0 B
assets/js/chunk-web-stories-template-58.js 5.74 kB 0 B
assets/js/chunk-web-stories-template-59-metaData.js 590 B 0 B
assets/js/chunk-web-stories-template-59.js 8.96 kB 0 B
assets/js/chunk-web-stories-template-6-metaData.js 569 B 0 B
assets/js/chunk-web-stories-template-6.js 7.07 kB 0 B
assets/js/chunk-web-stories-template-60-metaData.js 510 B 0 B
assets/js/chunk-web-stories-template-60.js 9.51 kB 0 B
assets/js/chunk-web-stories-template-7-metaData.js 569 B 0 B
assets/js/chunk-web-stories-template-7.js 7.46 kB 0 B
assets/js/chunk-web-stories-template-8-metaData.js 569 B 0 B
assets/js/chunk-web-stories-template-8.js 8.93 kB 0 B
assets/js/chunk-web-stories-template-9-metaData.js 581 B 0 B
assets/js/chunk-web-stories-template-9.js 8.46 kB 0 B
assets/js/chunk-web-stories-templates.js 845 B 0 B
assets/js/chunk-web-stories-textset-0.js 5.06 kB 0 B
assets/js/chunk-web-stories-textset-1.js 6.65 kB 0 B
assets/js/chunk-web-stories-textset-2.js 7.65 kB 0 B
assets/js/chunk-web-stories-textset-3.js 15.1 kB 0 B
assets/js/chunk-web-stories-textset-4.js 4.15 kB 0 B
assets/js/chunk-web-stories-textset-5.js 5.47 kB 0 B
assets/js/chunk-web-stories-textset-6.js 5.28 kB 0 B
assets/js/chunk-web-stories-textset-7.js 10.2 kB 0 B
assets/js/generateBlurhash.worker.worker.js 1.1 kB 0 B
assets/js/imgareaselect.js 3.77 kB 0 B
assets/js/lightbox.js 550 B 0 B
assets/js/tinymce-button.js 2.85 kB 0 B
assets/js/web-stories-activation-notice.js 25.4 kB 0 B
assets/js/web-stories-block.js 18 kB 0 B
assets/js/web-stories-embed.js 20 B 0 B
assets/js/web-stories-widget.js 587 B 0 B
assets/js/wp-dashboard.js 64.1 kB +2 B (0%)

compressed-size-action

@kkalarickal
Copy link

Verified this feature via web-story: Custom page advancement#12318

Status:

  • Functionality : OK
  • Usability : see UX Suggestions for improvement

Scenario: Settings and Defaults

  1. With Experimental > Enable detailed page advancement settings on a per-page basis turned OFF, the global page adv works as expected
  2. With the experiment turned ON, each page has a Style > Page Advancement panel that controls page adv for individual page
  3. When Global Page Adv = AUTO, then by default Individual Page Adv = AUTO.
  4. Value of Duration is updated from Global to individual when there is no override
  5. Similarly, when Global Page Adv = MANUAL, then by default the Individual Page Adv = MANUAL

UX Suggestion
The title of the panel - Page Advancement - is identical for both Global and Individual. This is in contrast to the title for the Background Audio panel ... which is called "Page Background Audio" (individual) vs "Background Audio" (global). It might be useful to have a different title for the subpanel so that use does not mistakenly think they are changing the global when they are in fact changing the individual (or vice versa).

image.png

image.png

@kkalarickal
Copy link

Scenario: Overriding and Duration value

  1. When Individual Page Adv has OVERRIDE turned ON, it is possible to change the option to Auto or Manual for the page.
  2. If the Global Page Adv Auto Duration is changed, then the Individual Page Adv Auto Duration remains unaffected.
  3. Similarly, if the Global setting is changed to Manual, then the Individual setting remains the overridden value
  4. Resetting Duration when going from Manual to Auto
  • Set Global Page Adv to Auto and change Duration (from default 7) to another number,
  • Change the Global Page Adv from Auto to Manual and back to Auto
  • Notice that the Duration is reset to default 7 sec
  • If you do the same sequence for Individual Page Adv settings, then the Duration is NOT reset.
  1. Toggling Override from ON to OFF and back to ON, resets the Duration value to the Global Page Adv Auto Duration as expected

@kkalarickal
Copy link

Scenario: Using the page adv settings in Preview & Publish

  1. Confirmed that setting a mixed configuration of Override > Auto & Default > Auto, each page maintains the appropriate Auto: Duration
  2. Confirmed that setting a mixed configuration of Override > Manual & Default > Manual, each page needs to be advanced manually
  3. Confirmed that setting a mixed config of Override > Auto, Default > Manual ... as well as Override > Manual, Default > Auto, each page advances as per its specification.

@kkalarickal
Copy link

Scenario: Corner Cases and Negative Testing

  1. A Global Page Advancement option is shown in the Publish overlay that occurs when the story is moved from Draft -> Publish. Confirmed that this Global Page Adv setting matches the behavior of the Global Page Adv setting in the editor.

  2. Setting the Auto > Duration to be less than the duration of an embedded video results in the page remaining open beyond the Duration so that the video is played fully. But if video is on a Loop, the Duration value is used for keeping page open.

Example - Page Adv Duration is 6 seconds, but embedded video is of 11 sec. Then the page will remain open for 11 sec till video auto plays to completion. However, if the Loop option is turned on for the video, then the page remains open for the Duration of 6 seconds.

@swissspidy -- is it valid to have the page adv auto duration ignored if there is a video playing in the page that is longer duration ?

@swissspidy
Copy link
Collaborator

Yes this is expected behavior.

@miina
Copy link
Contributor

miina commented Sep 16, 2022

UX Suggestion
The title of the panel - Page Advancement - is identical for both Global and Individual. This is in contrast to the title for the Background Audio panel ... which is called "Page Background Audio" (individual) vs "Background Audio" (global). It might be useful to have a different title for the subpanel so that use does not mistakenly think they are changing the global when they are in fact changing the individual (or vice versa).

Thanks for thinking about this and for the suggestion! I believe @aaskedall recommended using something like "Default Page Advancement" in the Document settings, we're currently still waiting for the mocks though.

@barklund barklund merged commit 2c06dea into main Sep 16, 2022
@barklund barklund deleted the add/12210-custom-page-advance branch September 16, 2022 08:17
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.

Page-Level Page Advancement Setting
5 participants