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

bangank36 · 2023-01-10T13:35:52Z

Proposed Changes

This PR will address the solution to pre-select blank-canvas design for users that come from the logged-out theme showcase ( after they selected blank-canvas-3 theme )
Also make sure user will be landed on /site-editor after PA step completed

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
Recording

ero26H.mp4

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)?

Related to #71706

github-actions · 2023-01-10T13:36:08Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2023-01-10T16:44:25Z

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

Sections (~346 bytes added 📈 [gzipped])

name                     parsed_size           gzip_size
site-setup-flow              +1395 B  (+0.1%)     +402 B  (+0.1%)
import-flow                   +388 B  (+0.0%)     +131 B  (+0.0%)
signup                        +166 B  (+0.1%)      +47 B  (+0.1%)
trial-wooexpress-flow         +149 B  (+0.5%)      +34 B  (+0.3%)
tailored-ecommerce-flow       +149 B  (+0.0%)      +32 B  (+0.0%)
sites-dashboard               +149 B  (+0.0%)      +33 B  (+0.0%)
settings                      +149 B  (+0.0%)      +33 B  (+0.0%)
link-in-bio-tld-flow          +149 B  (+0.0%)      +32 B  (+0.0%)
link-in-bio-flow              +149 B  (+0.0%)      +32 B  (+0.0%)
free-flow                     +149 B  (+0.1%)      +34 B  (+0.1%)
copy-site                     +149 B  (+0.0%)      +32 B  (+0.0%)
checkout                      +149 B  (+0.0%)      +35 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 (~135 bytes added 📈 [gzipped])

name                                              parsed_size           gzip_size
async-load-design                                      +149 B  (+0.0%)      +33 B  (+0.0%)
async-load-calypso-my-sites-checkout-modal             +149 B  (+0.0%)      +35 B  (+0.0%)
async-load-calypso-layout-masterbar-checkout-tsx       +149 B  (+0.1%)      +33 B  (+0.1%)
async-load-calypso-layout-masterbar-checkout           +149 B  (+0.2%)      +34 B  (+0.2%)
async-load-calypso-blocks-editor-checkout-modal        +149 B  (+0.0%)      +35 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.

bangank36 · 2023-01-17T09:53:39Z

Update: for some reason, the change only work on localhost but not Calypso Live, will need to figuring why...

bangank36 · 2023-01-17T10:27:03Z

Update: the Calypso Live URL require the flag to be persisted on URL, but since the theme showcase requires a redirect, we need to enable the feature via cookie p1673950877830519/1673944921.451349-slack-CRWCHQGUB

document.cookie = 'flags=pattern-assembler/logged-out-showcase;max-age=1209600;path=/'

JLFccP.mp4

miksansegundo

Maybe it's my environment, but It didn't work on the first attempt. I'll try again.

miksansegundo · 2023-01-17T10:05:37Z

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

@@ -64,7 +79,11 @@ const PatternAssembler: Step = ( { navigation, flow } ) => {
 	useEffect( () => {
 		// Require to start the flow from the first step
 		if ( ! selectedDesign ) {
-			goToStep?.( 'goals' );
+			if ( signupSelectedThemeSlug !== 'blank-canvas-3' ) {


We can use isBlankCanvasDesign( signupSelectedThemeSlug ) from @automattic/design-picker.

@miksansegundo signupSelectedThemeSlug is a string while isBlankCanvasDesign expects a Design object, so I don't think we can use it like suggested

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

miksansegundo · 2023-01-17T10:29:03Z

client/signup/controller.js

@@ -295,6 +296,11 @@ export default {
 		if ( ! isEmpty( additionalDependencies ) ) {
 			context.store.dispatch( updateDependencies( additionalDependencies ) );
 		}
+		if ( themeParameter ) {
+			setSignupSelectedThemeSlug( query.theme );


I'd use an empty string '' instead of null because the sessionStorage saves a string but in your case that works too.

To save some characters:

setSignupSelectedThemeSlug( themeParameter || '' )

I think it would be better to set the query string via the getChecklistThemeDestination function because that's why we store the themeParameter in additionalDependencies (L290 - L294)

See

wp-calypso/client/signup/config/flows.js

Line 115 in bac42aa

return `/setup/site-setup/patternAssembler?siteSlug=${ siteSlug }`;

Besides, I think it would be better to create a new flow and include only the PA step. It's a bit weird to redirect the user to a certain step of the flow after the signup. What do you think?

For example, podcast flow, free flow, etc

create a new flow and include only the PA step

That would be extremely helpful for #72286 too!

arthur791004 · 2023-01-19T07:00:10Z

client/signup/controller.js

@@ -295,6 +296,11 @@ export default {
 		if ( ! isEmpty( additionalDependencies ) ) {
 			context.store.dispatch( updateDependencies( additionalDependencies ) );
 		}
+		if ( themeParameter ) {
+			setSignupSelectedThemeSlug( query.theme );


I think it would be better to set the query string via the getChecklistThemeDestination function because that's why we store the themeParameter in additionalDependencies (L290 - L294)

See

wp-calypso/client/signup/config/flows.js

Line 115 in bac42aa

return `/setup/site-setup/patternAssembler?siteSlug=${ siteSlug }`;

arthur791004 · 2023-01-19T07:04:07Z

client/signup/controller.js

@@ -295,6 +296,11 @@ export default {
 		if ( ! isEmpty( additionalDependencies ) ) {
 			context.store.dispatch( updateDependencies( additionalDependencies ) );
 		}
+		if ( themeParameter ) {
+			setSignupSelectedThemeSlug( query.theme );


Besides, I think it would be better to create a new flow and include only the PA step. It's a bit weird to redirect the user to a certain step of the flow after the signup. What do you think?

For example, podcast flow, free flow, etc

arthur791004 · 2023-01-19T07:06:17Z

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

+				goToStep?.( 'goals' );
+			}
+			// User has selected blank-canvas-3 theme from theme showcase
+			setSelectedDesign( blankCanvasDesign as Design );


this has to be wrapped inside the else condition to ensure we won't save the blank canvas design after goToStep executed

miksansegundo · 2023-01-23T04:44:13Z

Just noting here that team T-Rex is working on adding a direct link from the theme research results to access the assembler directly. See https://github.com/Automattic/dotcom-forge/issues/1453

Let's keep in mind that the assembler flow won't be not only a site creation flow but also a theme creation flow to design a new homepage on existing sites and creating a new flow with only the assembler step will help to skip tweaks that are only for the site creation use case like the redirection to ensure users have an intent saved in the goals step. cc: @autumnfjeld

bangank36 · 2023-01-27T07:44:43Z

Besides, I think it would be better to create a new flow and include only the PA step. It's a bit weird to redirect the user to a certain step of the flow after the signup. What do you think?

For example, podcast flow, free flow, etc

This is brilliant idea, let's see what I can do

bangank36 · 2023-01-29T14:45:20Z

The issues of this PR will be addressed on #72747

bangank36 self-assigned this Jan 10, 2023

bangank36 mentioned this pull request Jan 10, 2023

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

Closed

5 tasks

bangank36 force-pushed the add/preselect-design-pa branch from 5fbc0db to d22b600 Compare January 17, 2023 08:45

bangank36 marked this pull request as ready for review January 17, 2023 08:57

bangank36 requested a review from a team January 17, 2023 09:02

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 17, 2023

bangank36 mentioned this pull request Jan 17, 2023

Enable feature flag to unlock blank-canvas-3 #71708

Merged

7 tasks

miksansegundo reviewed Jan 17, 2023

View reviewed changes

arthur791004 reviewed Jan 19, 2023

View reviewed changes

mmtr mentioned this pull request Jan 19, 2023

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

Merged

bangank36 added 3 commits January 27, 2023 14:27

- Draft: hard code the blank canvas design

2d64f0e

- Set design on PA step

b6780d1

- Storage selected theme

c426fe0

- Move blank canvas to constant

1dcf389

bangank36 force-pushed the add/preselect-design-pa branch from d22b600 to 1dcf389 Compare January 27, 2023 07:46

bangank36 mentioned this pull request Jan 29, 2023

Adding new assembler flow #72747

Merged

7 tasks

bangank36 closed this Jan 29, 2023

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 29, 2023

sirreal deleted the add/preselect-design-pa branch January 14, 2025 18:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

bangank36 commented Jan 10, 2023 •

edited

Loading

github-actions bot commented Jan 10, 2023 •

edited by matticbot

Loading

matticbot commented Jan 10, 2023 •

edited

Loading

bangank36 commented Jan 17, 2023

bangank36 commented Jan 17, 2023 •

edited

Loading

miksansegundo left a comment

miksansegundo Jan 17, 2023

bangank36 Jan 27, 2023

miksansegundo Jan 17, 2023

arthur791004 Jan 19, 2023

arthur791004 Jan 19, 2023

mmtr Jan 19, 2023

arthur791004 Jan 19, 2023

arthur791004 Jan 19, 2023

arthur791004 Jan 19, 2023

miksansegundo commented Jan 23, 2023

bangank36 commented Jan 27, 2023

bangank36 commented Jan 29, 2023

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

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

Conversation

bangank36 commented Jan 10, 2023 • edited Loading

Proposed Changes

Testing Instructions

Pre-merge Checklist

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

matticbot commented Jan 10, 2023 • edited Loading

bangank36 commented Jan 17, 2023

bangank36 commented Jan 17, 2023 • edited Loading

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

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

miksansegundo commented Jan 23, 2023

bangank36 commented Jan 27, 2023

bangank36 commented Jan 29, 2023

bangank36 commented Jan 10, 2023 •

edited

Loading

github-actions bot commented Jan 10, 2023 •

edited by matticbot

Loading

matticbot commented Jan 10, 2023 •

edited

Loading

bangank36 commented Jan 17, 2023 •

edited

Loading