Gutenboarding: add PlansGrid accordion #45054

razvanpapadopol · 2020-08-20T10:36:00Z

Changes proposed in this Pull Request

Re-add plans accordion in Gutenboarding and Site setup. Note: PlansGrid accordion was first introduced in Gutenboarding: Accordion-style plans grid. #44299
Ship Feature picker and Plans Grid accordion to Gutenboarding "stable" (still behind gutenboarding/feature-picker flag in production environment).
Update Gutenboarding e2e test.

Testing instructions

Go to /new
Before reaching Plans step in the linear flow, you should land on Feature selection step.
After skipping or confirming feature selection, Plans step should display as an accordion.
After creating the site, apply D48381-code and sandbox the new site.
When in editor Site setup flow should include PlansGrid accordion.

matticbot · 2020-08-20T10:36:02Z

Test live: https://calypso.live/new?branch=add/plans-grid-accordion

simison · 2020-08-20T10:45:52Z

This still wouldn't launch it to customers, right? Either because we'd not be directing traffic to "experimental" flow yet or otherwise?

matticbot · 2020-08-20T10:46:04Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~1179 bytes added 📈 [gzipped])

name                 parsed_size           gzip_size
entry-gutenboarding      +6316 B  (+0.4%)    +1179 B  (+0.3%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~26 bytes removed 📉 [gzipped])

name              parsed_size           gzip_size
gutenberg-editor        -49 B  (-0.0%)      -26 B  (-0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

matticbot · 2020-08-20T12:43:11Z

Caution: This PR affects files in the Editing Toolkit Plugin on WordPress.com
Please ensure your changes work on WordPress.com before merging.

D48381-code has been created so you can easily test it on your sandbox. See this FieldGuide page about developing the Editing Toolkit Plugin for more info: PCYsg-ly5-p2

razvanpapadopol · 2020-08-20T15:13:59Z

This still wouldn't launch it to customers, right? Either because we'd not be directing traffic to "experimental" flow yet or otherwise?

Yes, the experimental branch containing feature picker and accordion plans grid would be hidden behind ?latest query param for both Gutenboarding site creation and Complete Setup flows.

Once this is tested and merged (together with Editing Plugin and wpcom-block-editor widget) we can start sending traffic from some A/B tests.

razvanpapadopol · 2020-08-21T12:27:17Z

packages/plans-grid/src/plans-table/plan-item.tsx

+							isOpen={ isOpen }
+							onPickDomain={ onPickDomainClick }
+							disabledLabel={ disabledLabel }
+						/>


This is the main change that was actually introduced in this PR. Everything else is mostly just reverting the accordion styled PlansGrid revert while keeping the "stable" multi-column PlansGrid.

I've decided to extract PlansFeatureList since it's almost identical in both versions of the PlansGrid. I've added multiColumn prop for now but I'm pretty sure the same effect can be achieved with a fluid layout (decide on the minimum width and let flex-wrap to automatically decide the number of columns).

cc: @yansern @alshakero

razvanpapadopol · 2020-08-28T17:46:49Z

Superseded by #45280

…ehind gutenboarding/feature-picker flag

simison · 2020-09-10T07:58:59Z

@razvanpapadopol there's at least one E2E failure from Gutenboarding that needs fixing.

client/landing/gutenboarding/stores/onboard/reducer.ts

simison · 2020-09-10T08:13:10Z

client/gutenberg/editor/calypsoify-iframe.tsx

@@ -351,7 +351,7 @@ class CalypsoifyIframe extends Component<
 				this.props.siteCreationFlow === 'gutenboarding' && this.props.isSiteUnlaunched;
 			const frankenflowUrl = `${ window.location.origin }/start/new-launch?siteSlug=${ this.props.siteSlug }&source=editor`;
 			const isNewLaunch = config.isEnabled( 'gutenboarding/new-launch' );
-			const isExperimental = new URLSearchParams( window?.location.search ).has( 'latest' );
+			const isExperimental = config.isEnabled( 'gutenboarding/feature-picker' );


This "isExperimental" = "feature-picker" terminology can feel a bit confusing later on but I think it's fine now, and we'll sort it out later.

Right now this would be easiest stable way to flip the switch between multi-column PlansGrid and accordion PlansGrid + Feature picker for both Gutenboarding and Site Setup flows.

Makes sense 👍

simison

I'll test little more but two small visual findings. These can be follow-up PRs too:

Price loading state is a bit funky:

Hiding the /mo completely vs placing it next to loading animation probably works best and is easiest.

Another is related to scroll positions:

Expand all plans
Click on domain to move to domains step
Click continue
Now you land in plans page where everything is collapsed again and scroll position isn't on top:

Easiest would be at least to ensure we're on top when landing on plans page
It might be helpful to store expanded/collapsed state during the session

Again, neither should block merging.

simison

In the launch flow, with flag enabled for a site that had free plan, I landed directly at plan step:

I expected to land on domain step first like I do in master.

Without the flag, I see older "launch" button instead of "complete setup" button. I expected complete setup with multi-grid:

razvanpapadopol · 2020-09-10T10:34:18Z

Price loading state is a bit funky:

Fixed in a659c2e
Demo on mobile: https://cloudup.com/c4NHHotDhJ7
Demo on desktop: https://cloudup.com/cOd1LafAdQG

Another is related to scroll positions:

Easiest would be at least to ensure we're on top when landing on plans page

Fixed in 88877d0

simison

Double tested with new site with Chrome; looks like the landing on site title step was caused by something else than this PR (happens also in master).

Other than that, the flow is looking good and works great. 👍 Let's get this in.

razvanpapadopol added [Feature] Plans & Upgrades All of the plans on WordPress.com and flow for upgrading plans. [Status] Needs Design Review Add this when you'd like to get a review / feedback from the Design team on your PR [Goal] New Onboarding previously called Gutenboarding labels Aug 20, 2020

razvanpapadopol requested review from simison, alshakero and ollierozdarz August 20, 2020 10:36

razvanpapadopol self-assigned this Aug 20, 2020

matticbot added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Aug 20, 2020

razvanpapadopol force-pushed the add/gutenboarding-experimental-features branch from 516473c to e962d01 Compare August 20, 2020 10:37

razvanpapadopol changed the title ~~Gutenboarding: Re-add PlansGrid accordion version~~ Gutenboarding: Re-add PlansGrid accordion as experimental feature Aug 20, 2020

razvanpapadopol changed the title ~~Gutenboarding: Re-add PlansGrid accordion as experimental feature~~ Gutenboarding: re-add PlansGrid accordion as experimental feature Aug 20, 2020

razvanpapadopol mentioned this pull request Aug 20, 2020

Enable Feature Picker in production and bump AB datestamp #44566

Closed

Base automatically changed from add/gutenboarding-experimental-features to master August 20, 2020 12:49

razvanpapadopol force-pushed the add/plans-grid-accordion branch from d294d5f to 9d88006 Compare August 20, 2020 13:20

razvanpapadopol added the [Status] Needs e2e Testing label Aug 21, 2020

razvanpapadopol mentioned this pull request Aug 21, 2020

Gutenboarding: Feature picker - Main list #44428

Closed

10 tasks

razvanpapadopol commented Aug 21, 2020

View reviewed changes

razvanpapadopol force-pushed the add/plans-grid-accordion branch 2 times, most recently from 46264e6 to e2fda01 Compare August 24, 2020 13:40

razvanpapadopol requested a review from yansern August 24, 2020 14:26

razvanpapadopol added this to the Gutenboarding: feature picker and plan recommendation milestone Aug 26, 2020

razvanpapadopol changed the title ~~Gutenboarding: re-add PlansGrid accordion as experimental feature~~ Gutenboarding: add experimental features to Site setup Aug 27, 2020

razvanpapadopol closed this Aug 28, 2020

razvanpapadopol force-pushed the add/plans-grid-accordion branch from f93db50 to 53895f3 Compare September 9, 2020 16:17

Razvan Papadopol added 3 commits September 9, 2020 19:54

Fix horizontal scrolling on Site setup, Plans step

029349f

feature list style fixes

a019d1f

Enable feature picker and accordion plans to Gutenboarding "stable" b…

e97c6a1

…ehind gutenboarding/feature-picker flag

razvanpapadopol changed the title ~~Gutenboarding: add PlansGrid accordion as experimental feature~~ Gutenboarding: add PlansGrid accordion Sep 9, 2020

razvanpapadopol marked this pull request as ready for review September 9, 2020 18:05

razvanpapadopol removed [Status] Blocked / Hold [Status] Needs Rebase [Status] Needs e2e Testing labels Sep 9, 2020

razvanpapadopol mentioned this pull request Sep 9, 2020

Gutenboarding: release Feature picker and plan recommendation #45526

Merged

3 tasks

Update Gutenboarding e2e test

b396809

razvanpapadopol added the [Status] Needs e2e Testing label Sep 9, 2020

simison reviewed Sep 10, 2020

View reviewed changes

client/landing/gutenboarding/stores/onboard/reducer.ts Outdated Show resolved Hide resolved

simison reviewed Sep 10, 2020

View reviewed changes

Razvan Papadopol added 2 commits September 10, 2020 11:22

revert janitorial alphabetization of Onboard reducer file

c5a2d67

Enable flag in wpcalypso to be picked up by e2e tests

368e2af

simison reviewed Sep 10, 2020

View reviewed changes

Make scrollTo top async to work when using history.goBack

88877d0

simison reviewed Sep 10, 2020

View reviewed changes

fix price loading placeholder

a659c2e

simison approved these changes Sep 10, 2020

View reviewed changes

razvanpapadopol merged commit 8a70073 into master Sep 10, 2020

razvanpapadopol deleted the add/plans-grid-accordion branch September 10, 2020 11:36

matticbot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Sep 10, 2020

razvanpapadopol mentioned this pull request Sep 10, 2020

Bump WordPress.com Editing Toolkit plugin to v2.3 #45536

Merged

razvanpapadopol removed this from the Gutenboarding: feature picker and plan recommendation milestone Sep 14, 2020

razvanpapadopol mentioned this pull request Nov 13, 2020

Plans Grid: Add disabled state to accordion items #44448

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Gutenboarding: add PlansGrid accordion #45054

Gutenboarding: add PlansGrid accordion #45054

razvanpapadopol commented Aug 20, 2020 •

edited

matticbot commented Aug 20, 2020 •

edited by simison

simison commented Aug 20, 2020

matticbot commented Aug 20, 2020 •

edited

matticbot commented Aug 20, 2020

razvanpapadopol commented Aug 20, 2020 •

edited

razvanpapadopol Aug 21, 2020

razvanpapadopol commented Aug 28, 2020

simison commented Sep 10, 2020

simison Sep 10, 2020 •

edited

razvanpapadopol Sep 10, 2020 •

edited

simison Sep 10, 2020

simison left a comment

simison left a comment

razvanpapadopol commented Sep 10, 2020

simison left a comment

Gutenboarding: add PlansGrid accordion #45054

Gutenboarding: add PlansGrid accordion #45054

Conversation

razvanpapadopol commented Aug 20, 2020 • edited

Changes proposed in this Pull Request

Testing instructions

matticbot commented Aug 20, 2020 • edited by simison

simison commented Aug 20, 2020

matticbot commented Aug 20, 2020 • edited

matticbot commented Aug 20, 2020

razvanpapadopol commented Aug 20, 2020 • edited

razvanpapadopol Aug 21, 2020

Choose a reason for hiding this comment

razvanpapadopol commented Aug 28, 2020

simison commented Sep 10, 2020

simison Sep 10, 2020 • edited

Choose a reason for hiding this comment

razvanpapadopol Sep 10, 2020 • edited

Choose a reason for hiding this comment

simison Sep 10, 2020

Choose a reason for hiding this comment

simison left a comment

Choose a reason for hiding this comment

simison left a comment

Choose a reason for hiding this comment

razvanpapadopol commented Sep 10, 2020

simison left a comment

Choose a reason for hiding this comment

razvanpapadopol commented Aug 20, 2020 •

edited

matticbot commented Aug 20, 2020 •

edited by simison

matticbot commented Aug 20, 2020 •

edited

razvanpapadopol commented Aug 20, 2020 •

edited

simison Sep 10, 2020 •

edited

razvanpapadopol Sep 10, 2020 •

edited