Proporionate scaling for $onboarding-(block|heading|body)-margin-(mobile|small|medium).
Fix nested <p> tag warning when name step is rendered.
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.
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
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.