Show launch sidebar as fullscreen on mobile.
The sidebar is always shown first before continuing to the next uncompleted step on mobile.
Added sticky footer for all launch steps.
This includes Go Back button on all launch steps.
Added <LaunchProgress> component.
This shows the (1 of 4, 2 of 4, …) text on the header.
Hide inline help button (blue round question mark button on the bottom right corner) when launch modal is open.
This was blocking the buttons on the sticky footer.
Technical changes:
Added sticky=true|false|null prop on <ActionButtons> component.
This forces action buttons to be sticky all the time, not sticky all the time or automatically sticky on small viewport.
Added onMenuItemClick event on <LaunchMenu> component.
The fullscreen sidebar hides itself when a launch menu is clicked on.
Added isSidebarFullscreen reducer and (set|unset)SidebarFullscreen actions.
Reduce nested divs where possible.
To fix all sticky header/footer + scrollbar quirks, nested divs were removed where possible to help make this easier to work with.
Proporionate scaling for $onboarding-(block|heading|body)-margin-(mobile|small|medium).
Fixes:
Fix nested <p> tag warning when name step is rendered.
Design Deviations:
On mobile view, a 1px bottom border is added to the sticky header. This creates a clearer separation between header and body.
On desktop view, the header (where the wordpress logo is) is no longer sticky. This is to simplify handling of overflowing content / scrollbar.
Testing instructions
How to build:
On root folder, run yarn start.
On apps/full-site-editing, run yarn dev --sync.
On apps/wpcom-block-editor, run yarn dev --sync.
How to test:
Point widgets.wp.com to your sandbox.
Create an unlaunched test site using Gutenboarding (/new)
Test on local calypso with the flag appended to the end of the url ?flags=gutenboarding/new-launch-mobile flag, e.g. calypso.localhost:3000/block-editor/page/UNLAUNCHED_SITE_HERE.wordpress.com/home?flags=gutenboarding/new-launch-mobile
What to test:
When gutenboarding/new-launch-mobile flag is enabled, it should show the launch flow in mobile.
Test all Go back and Continue buttons on sticky footer.
Test launch flow mobile view in various viewport width & height.
Check if launch progress (1 of 4, 2 of 4, …) is showing correctly.
Ensure inline help badge (blue round question mark button on the bottom right corner) is hidden when launch flow is
opened.
Ensure there are no weird scrollbar quirks by testing on long content like plans step and short content like name step.
Also test on Firefox as Firefox scrollbar & clipping behaves differently.
Test on Safari iOS!
Test launch flow desktop view to ensure there’s no regression.
Test onboarding flow /new both mobile & desktop to ensure there’s no regression.
Translate WordPress.com 