Display PatternAssembler CTA on Logged-out ThemShowcase #72752

bangank36 · 2023-01-29T23:15:04Z

Proposed Changes

Display the PatternAssemblerCTA on logged-out theme showcase
This PR should be addressed after Adding new assembler flow #72747 has been merged

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
Confirm the Blank-canvas-3 theme card is stayed hidden ( more on this Show Blank Canvas 3 theme card in the Theme Showcase #71911 (comment) )
Select the PatternAssemblerCTA on different screen size, confirm the destination has been navigated correctly
The styling of the CTA is also modified to match the style of theme showcase, CTA will be placed on 4th row of the theme list

Testing Flow Recording

Large screen ( > 960px ) Go to Assembler Flow	Small Screen Go to Editor
Lat0IN.mov	kd55zz.mov

CTA position

Small screen	Medium screen	Large screen

CTA styling

CTA on designSetup step	CTA on ThemeShowcase	Empty search card on ThemShowcase

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

matticbot · 2023-01-29T23:15:07Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

github-actions · 2023-01-29T23:15:19Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:commit-69f91c9380d50fa3a37715d3baa0ff51af9cc39d

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:commit-69f91c9380d50fa3a37715d3baa0ff51af9cc39d&env=jetpack

client/components/themes-list/index.jsx

matticbot · 2023-01-29T23:24:14Z

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

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

name                   parsed_size           gzip_size
entry-stepper               +775 B  (+0.0%)     +190 B  (+0.0%)
entry-main                  +114 B  (+0.0%)      +84 B  (+0.0%)
entry-login                 +114 B  (+0.0%)      +89 B  (+0.0%)
entry-domains-landing       +114 B  (+0.0%)      +89 B  (+0.1%)
entry-browsehappy           +114 B  (+0.1%)      +89 B  (+0.3%)
entry-gutenboarding          -38 B  (-0.0%)      -94 B  (-0.0%)

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

Sections (~7999 bytes added 📈 [gzipped])

name                  parsed_size           gzip_size
site-assembler-flow      +27173 B    (new)    +6645 B    (new)
themes                    +2931 B  (+0.4%)     +900 B  (+0.4%)
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%)
theme                       -63 B  (-0.0%)      -26 B  (-0.0%)
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                    -11 B  (-0.0%)      -22 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 (~411 bytes added 📈 [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-design-blocks                              +2983 B  (+0.1%)     +802 B  (+0.1%)
async-load-signup-steps-theme-selection               +2970 B  (+1.9%)     +792 B  (+1.7%)
async-load-automattic-design-preview                   -334 B  (-0.0%)     -219 B  (-0.1%)
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/components/themes-list/index.jsx

arthur791004 · 2023-01-31T10:44:57Z

@taipeicoder I made a change to the theme list that replaces the flex layout with the grid layout, and then we don't need to do any calculations to put the Pattern Assembler CTA in the 4th row. I checked the layout with different viewport widths and it looks good. Do you think is there any side effects?

taipeicoder · 2023-02-01T07:10:26Z

client/components/themes-list/style.scss

-	flex-grow: 1;
+	.pattern-assembler-cta-wrapper {
+		grid-column: 1/-1;
+		grid-row-start: 4;


Works well! One minor detail, the PR description says:

The styling of the CTA is also modified to match the style of theme showcase, CTA will be placed on 3rd row of the theme list

We should update the PR description if that's no longer the case, and placing the CTA in the 4th row instead 🙂

autumnfjeld · 2023-02-02T03:33:35Z

client/components/themes-list/index.jsx

+					<PatternAssemblerCta
+						onButtonClick={ () =>
+							window.location.assign(
+								`/start/with-theme?ref=calypshowcase&theme=${ BLANK_CANVAS_DESIGN.slug }`


This is the theme parameter you are talking about p1675307895826869/1675301136.567349-slack-CRWCHQGUB, ya?

bangank36 commented Jan 29, 2023

View reviewed changes

client/components/themes-list/index.jsx Outdated Show resolved Hide resolved

bangank36 self-assigned this Jan 29, 2023

bangank36 mentioned this pull request Jan 30, 2023

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

Closed

5 tasks

bangank36 force-pushed the add/display-assembler-cta branch from 10b1ddb to 7944b05 Compare January 30, 2023 07:11

bangank36 changed the base branch from trunk to add/assembler-flow January 30, 2023 07:17

bangank36 requested a review from a team January 30, 2023 07:17

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

bangank36 force-pushed the add/display-assembler-cta branch 2 times, most recently from e39e376 to 782826b Compare January 31, 2023 00:47

bangank36 commented Jan 31, 2023

View reviewed changes

client/components/themes-list/index.jsx Outdated Show resolved Hide resolved

Base automatically changed from add/assembler-flow to trunk January 31, 2023 05:36

bangank36 added 12 commits January 31, 2023 17:15

- Export PatternAssemblerCTA component

7502251

- Update cta style

f8faa96

- Update redirection for CTA

8a9a21a

- Fix import/names

44a8cde

- Keep blank-canvas-3 hidden

81440d6

- Update column calculation

8dfe882

- Use location.assign to make it consistent with stepper flow

b489e4c

- Add logged-in check

2b0f6a1

- Using trailing spacers for the CTA positioning

8755be0

- Beautify code

ace0451

- Update CTA relative position

b0d61e0

- Remove redundant

cee1752

arthur791004 force-pushed the add/display-assembler-cta branch from 21ae02c to cee1752 Compare January 31, 2023 09:16

arthur791004 self-assigned this Jan 31, 2023

Change to grid layout

a689412

arthur791004 added 2 commits January 31, 2023 18:51

Move BLANK_CANVAS_DESIGN to @automattic/design-picker

5c0be0b

Fix tests

768772c

taipeicoder approved these changes Feb 1, 2023

View reviewed changes

Fix min width of the theme

bacaf3b

arthur791004 merged commit c7b800b into trunk Feb 1, 2023

arthur791004 deleted the add/display-assembler-cta branch February 1, 2023 08:45

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 Feb 1, 2023

mmtr mentioned this pull request Feb 1, 2023

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

Merged

autumnfjeld reviewed Feb 2, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Display PatternAssembler CTA on Logged-out ThemShowcase #72752

Display PatternAssembler CTA on Logged-out ThemShowcase #72752

bangank36 commented Jan 29, 2023 •

edited by autumnfjeld

Loading

matticbot commented Jan 29, 2023 •

edited

Loading

github-actions bot commented Jan 29, 2023

matticbot commented Jan 29, 2023 •

edited

Loading

arthur791004 commented Jan 31, 2023

taipeicoder Feb 1, 2023

autumnfjeld Feb 2, 2023

arthur791004 Feb 2, 2023

Display PatternAssembler CTA on Logged-out ThemShowcase #72752

Display PatternAssembler CTA on Logged-out ThemShowcase #72752

Conversation

bangank36 commented Jan 29, 2023 • edited by autumnfjeld Loading

Proposed Changes

Testing Instructions

Pre-merge Checklist

matticbot commented Jan 29, 2023 • edited Loading

github-actions bot commented Jan 29, 2023

matticbot commented Jan 29, 2023 • edited Loading

arthur791004 commented Jan 31, 2023

taipeicoder Feb 1, 2023

Choose a reason for hiding this comment

autumnfjeld Feb 2, 2023

Choose a reason for hiding this comment

arthur791004 Feb 2, 2023

Choose a reason for hiding this comment

bangank36 commented Jan 29, 2023 •

edited by autumnfjeld

Loading

matticbot commented Jan 29, 2023 •

edited

Loading

matticbot commented Jan 29, 2023 •

edited

Loading