Adding new assembler flow #72747

bangank36 · 2023-01-29T04:37:08Z

Proposed Changes

Instead of redirect to the PA step of site-setup flow, we should create new Assembler flow with only PA step
This will help introduce the pattern assembler flow into logged-out and logged-in theme showcase
PR Make sure user lands on PatternAssembler after select blank-canvas #71852 will be retired

Testing Instructions

Checkout this branch, if you are using calypso live link, open the browser console and run this to make sure the feature flag is enabled document.cookie = 'flags=pattern-assembler/logged-out-showcase;max-age=1209600;path=/'
Log out from your wp account
Access theme showcase via /themes
Select blank-canvas-3 theme and confirm that /patternAssembler step is shown after finishing site creation
Select other theme and confirm that the end of flow is /home

Blank Canvas Card Large screen ( > 960px )	Blank Canvas Card Small Screen	Other Card
GbkUzH.mp4	dzfFfc.mp4	TQLgEA.mov

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-ajp-p2)?

Reference

Related to #71706
Detailed post pbxlJb-3oe-p2

github-actions · 2023-01-29T04:37:20Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-55555

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-55555&env=jetpack

matticbot · 2023-01-29T04:47:48Z

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

App Entrypoints (~69 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
entry-stepper               +290 B  (+0.0%)     +145 B  (+0.0%)
entry-main                  +114 B  (+0.0%)      +86 B  (+0.0%)
entry-login                 +114 B  (+0.0%)      +91 B  (+0.0%)
entry-domains-landing       +114 B  (+0.0%)      +91 B  (+0.1%)
entry-browsehappy           +114 B  (+0.1%)      +91 B  (+0.3%)
entry-gutenboarding          -38 B  (-0.0%)      -92 B  (-0.0%)

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

Sections (~7146 bytes added 📈 [gzipped])

name                  parsed_size           gzip_size
site-assembler-flow      +27173 B    (new)    +6645 B    (new)
site-setup-flow            +771 B  (+0.0%)     +129 B  (+0.0%)
import-flow                +771 B  (+0.0%)     +129 B  (+0.0%)
signup                     +611 B  (+0.2%)     +219 B  (+0.3%)
jetpack-connect            +611 B  (+0.1%)     +219 B  (+0.1%)
accept-invite              +611 B  (+0.2%)     +219 B  (+0.3%)
write-flow                 +559 B  (+0.2%)     +193 B  (+0.4%)
videopress-flow            +559 B  (+0.1%)     +193 B  (+0.2%)
newsletter-flow            +559 B  (+0.1%)     +193 B  (+0.2%)
link-in-bio-tld-flow       +559 B  (+0.1%)     +193 B  (+0.1%)
link-in-bio-flow           +559 B  (+0.1%)     +193 B  (+0.1%)
free-flow                  +559 B  (+0.2%)     +193 B  (+0.3%)
build-flow                 +559 B  (+0.2%)     +193 B  (+0.4%)
stats                       +52 B  (+0.0%)      +26 B  (+0.0%)
plugins                     +52 B  (+0.0%)      +25 B  (+0.0%)
plans                       +52 B  (+0.0%)      +24 B  (+0.0%)
marketplace                 +52 B  (+0.0%)      +27 B  (+0.0%)
domains                     +52 B  (+0.0%)      +26 B  (+0.0%)
checkout                    +52 B  (+0.0%)      +25 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.

Async-loaded Components (~1158 bytes removed 📉 [gzipped])

name                                              parsed_size           gzip_size
async-load-pattern-list-renderer                     +37356 B  (+3.7%)   +11552 B  (+3.8%)
async-load-pattern-large-preview                     +37356 B  (+3.7%)   +11552 B  (+3.8%)
async-load-pattern-assembler-container               +37356 B  (+3.7%)   +11552 B  (+3.8%)
async-load-automattic-design-preview                   -334 B  (-0.0%)     -219 B  (-0.1%)
async-load-design-blocks                                +52 B  (+0.0%)      +25 B  (+0.0%)
async-load-calypso-layout-masterbar-checkout-tsx        +52 B  (+0.0%)      +24 B  (+0.1%)
async-load-calypso-layout-masterbar-checkout            +52 B  (+0.1%)      +25 B  (+0.1%)
async-load-calypso-blocks-editor-checkout-modal         +52 B  (+0.0%)      +22 B  (+0.0%)
async-load-design-wordpress-components-gallery          -13 B  (-0.0%)      -43 B  (-0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

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.

client/landing/stepper/declarative-flow/assembler.ts

client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/index.tsx

packages/onboarding/src/utils/flows.ts

...t/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/constants.ts

client/landing/stepper/declarative-flow/site-assembler-flow.ts

arthur791004 · 2023-01-30T07:01:20Z

client/landing/stepper/declarative-flow/site-assembler-flow.ts

+		};
+
+		const submit = ( providedDependencies: ProvidedDependencies = {} ) => {
+			recordSubmitStep( providedDependencies, '', flowName, _currentStep );


Would it be better to introduce new intent for the site assembler flow? Or is the flow name enough for tracking cc @autumnfjeld

I think the flow name should be enough for now cc: @autumnfjeld

@arthur791004 I think we can leave this as it is and address it on metrics issue, how do you think?

We have discussed the topic of intent in a few different places:

p1671807817094079/1671770959.129519-slack-CRWCHQGUB

pbxlJb-3bS-p2#comment-2201

p1673498055131429-slack-C048CUFRGFQ

The problem with using intent=assembler is that we can't keep track of the build and write intent if we overwrite it with assembler. And the write intent is used in My Home to conditionally show content. Thus, we have some constraints we must respect.

Can you point to all the different flowName options we have? To give me a sense of where else flow is used.

Is it this same flow. And these are all the flow possibilities?

I'm worried we are using flow in two different ways:

stepper flow definition

singup flow definition (e.g. when flow=onboarding)

maybe these are all compatible?

see FigJam (which I didn't yet update! oops!)

I started a new metrics map for the logged out PA flow. Let's fill in all the items correctly:

client/landing/stepper/declarative-flow/site-assembler-flow.ts

arthur791004

Tested and look good to me 👍

miksansegundo

The changes work well 👍. Great job!

We could find a clearer name for the flow. See my suggestions. @Automattic/lego any better ideas?

This new flow will be triggered from a theme switch and also from an empty theme search (see Themes: Improve the Empty Search Results Screen) and possibly from other places where we want to help users create their own theme from scratch.

client/landing/stepper/declarative-flow/site-assembler-flow.ts

client/signup/config/flows.js

miksansegundo · 2023-01-30T10:48:35Z

packages/onboarding/src/utils/flows.ts

@@ -13,6 +13,8 @@ export const MIGRATION_FLOW = 'import-focused';
 export const COPY_SITE_FLOW = 'copy-site';
 export const BUILD_FLOW = 'build';
 export const WRITE_FLOW = 'write';
+export const SITE_ASSEMBLER_FLOW = 'site-assembler';


I find the new flow name confusing:

/setup/site-assembler/patternAssembler - Used for a theme switch or an empty theme search.

/setup/site-setup/patternAssembler - Used for the onboarding flow.

Can we find a clearer name?

Maybe /setup/site-theme/patternAssembler

Maybe /setup/site-design/patternAssembler

site-theme does not make sense to me, and site-design sounds like it more focus on the visualization of the site, and not include the content
I think this is not blocker though, will bring this up on tomorrow's sync
cc: @Automattic/lego

Why are we mixing snake-case and camelCase? This seems wrong.

This is the current setup for the names I think
snake-case is for the flow name, while camelCase is used for step name.
eg: /setup/site-setup/designSetup

Thank you. I was just realizing that, going to other steps, like https://wordpress.com/setup/site-setup/designSetup

For flows coming from the Theme Showcase, maybe to be cohesive with with-theme
https://wordpress.com/start/with-theme/user?ref=calypshowcase&theme=upsidedown:

/setup/with-assembler/patternAssembler

To be clear, we need two path names, where the differentiation in path name is

logged-in -> theme switch PA flow

logged-out -> onboarding PA flow

CMIIW, but adding 2 path names means we have to create 2 flows in the Stepper Framework

miksansegundo · 2023-01-30T11:04:53Z

BTW. When testing this PR, I found a critical issue, not on production, and it seems not related to these changes. Can you confirm? @bangank36

When switching to any theme preserving the homepage within the logged-in showcase, the API /themes/mine returns an error 500 when the passing dont_change_homepage: true.

bangank36 · 2023-01-30T13:23:35Z

Can you confirm? @bangank36

@miksansegundo I can reproduce the issue, I also think it is not related to this PR, since I was testing this issue on trunk
It should be something wrong with persistent template on theme switch, which is enabled via this flag themes/theme-switch-persist-template
Disable the flag via ?flags=-themes/theme-switch-persist-template makes the issue gone, I think we should create an issue to investigate this. In the mean time, we should set the flag themes/theme-switch-persist-template to false on all enviroment

autumnfjeld · 2023-01-31T01:06:01Z

I think we should create an issue to investigate this

Thank you.
An issue to add to the theme switch view https://github.com/orgs/Automattic/projects/338/views/35

bangank36 · 2023-01-31T05:35:40Z

I did the final test before merging

f868Oq.mov

- Adding new assembler flow

a125b23

bangank36 self-assigned this Jan 29, 2023

- Prevent to assembler flow when viewport is not desktop

47fa539

This was referenced Jan 29, 2023

Make sure user lands on PatternAssembler after select blank-canvas #71852

Closed

Display PatternAssembler CTA on Logged-out ThemShowcase #72752

Merged

bangank36 requested a review from a team January 29, 2023 23:36

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 29, 2023

bangank36 requested a review from mmtr January 29, 2023 23:36

bangank36 mentioned this pull request Jan 30, 2023

☂ Pattern Assembler flow in logged-out Theme Showcase #71706

Closed

5 tasks

arthur791004 reviewed Jan 30, 2023

View reviewed changes

client/landing/stepper/declarative-flow/assembler.ts Outdated Show resolved Hide resolved

client/landing/stepper/declarative-flow/internals/steps-repository/pattern-assembler/index.tsx Outdated Show resolved Hide resolved

bangank36 added 2 commits January 30, 2023 12:49

- Unify assembler name

66ea280

Fix import order

b1c2a93

bangank36 requested a review from arthur791004 January 30, 2023 05:59

arthur791004 reviewed Jan 30, 2023

View reviewed changes

- Update constants name

d615cd8

bangank36 requested a review from arthur791004 January 30, 2023 07:33

arthur791004 reviewed Jan 30, 2023

View reviewed changes

client/landing/stepper/declarative-flow/site-assembler-flow.ts Show resolved Hide resolved

- Update the wpcom_signup_completed_flow

2ba5ba1

bangank36 requested a review from arthur791004 January 30, 2023 08:38

arthur791004 approved these changes Jan 30, 2023

View reviewed changes

miksansegundo requested a review from a team January 30, 2023 09:40

Copons requested a review from a team January 30, 2023 10:42

miksansegundo approved these changes Jan 30, 2023

View reviewed changes

- Use constant for 'blank-canvas-3' string

383121d

bangank36 requested a review from miksansegundo January 30, 2023 13:23

autumnfjeld mentioned this pull request Jan 31, 2023

Themes Showcase: Replace empty search card with more theme options #72286

Merged

bangank36 merged commit 6aff82f into trunk Jan 31, 2023

bangank36 deleted the add/assembler-flow branch January 31, 2023 05:36

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 31, 2023

miksansegundo mentioned this pull request Jan 31, 2023

[Bug] Persist Home template returns a 500 error (not on production or staging) #72811

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding new assembler flow #72747

Adding new assembler flow #72747

bangank36 commented Jan 29, 2023 •

edited

Loading

github-actions bot commented Jan 29, 2023 •

edited by matticbot

Loading

matticbot commented Jan 29, 2023 •

edited

Loading

arthur791004 Jan 30, 2023

bangank36 Jan 30, 2023

bangank36 Jan 30, 2023

arthur791004 Jan 30, 2023

bangank36 Jan 30, 2023

autumnfjeld Jan 30, 2023

autumnfjeld Jan 31, 2023

arthur791004 left a comment

miksansegundo left a comment

miksansegundo Jan 30, 2023

bangank36 Jan 30, 2023

autumnfjeld Jan 31, 2023 •

edited

Loading

bangank36 Jan 31, 2023

autumnfjeld Jan 31, 2023

autumnfjeld Jan 31, 2023

autumnfjeld Jan 31, 2023

bangank36 Jan 31, 2023 •

edited

Loading

miksansegundo commented Jan 30, 2023

bangank36 commented Jan 30, 2023

autumnfjeld commented Jan 31, 2023 •

edited by bangank36

Loading

bangank36 commented Jan 31, 2023

Adding new assembler flow #72747

Adding new assembler flow #72747

Conversation

bangank36 commented Jan 29, 2023 • edited Loading

Proposed Changes

Testing Instructions

Pre-merge Checklist

Reference

github-actions bot commented Jan 29, 2023 • edited by matticbot Loading

matticbot commented Jan 29, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arthur791004 left a comment

Choose a reason for hiding this comment

miksansegundo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

autumnfjeld Jan 31, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bangank36 Jan 31, 2023 • edited Loading

Choose a reason for hiding this comment

miksansegundo commented Jan 30, 2023

bangank36 commented Jan 30, 2023

autumnfjeld commented Jan 31, 2023 • edited by bangank36 Loading

bangank36 commented Jan 31, 2023

bangank36 commented Jan 29, 2023 •

edited

Loading

github-actions bot commented Jan 29, 2023 •

edited by matticbot

Loading

matticbot commented Jan 29, 2023 •

edited

Loading

autumnfjeld Jan 31, 2023 •

edited

Loading

bangank36 Jan 31, 2023 •

edited

Loading

autumnfjeld commented Jan 31, 2023 •

edited by bangank36

Loading