wp-calypso
wp-calypso copied to clipboard
Automattic
Stepper: Add unified domain step
Context: pdDR7T-1Ed-p2#comment-2179
Proposed Changes
This aims to create the thinnest wrapper possible to wrap the Domains step in /start and have it in Stepper as well, to achieve parity without repeating any work.
Why are these changes being made?
To be able to delete client/landing/stepper/declarative-flow/internals/steps-repository/domains and client/landing/stepper/declarative-flow/internals/steps-repository/choose-a-domain and have a single Domains step across all frameworks and places.
It's still having an issue of handling the picked domain. Needs more work.
Testing Instructions
- Go to /setup/onboarding.
- Play with the domain step.
- It should be identical to the one at /start/domains.
- It should allow selecting multiple or one domain domains.
- The flow shouldn't take you to checkout if you pick a free domain.
- The flow SHOULD take you to checkout if you pick one or more paid domains.
- It should look identical on mobile too.
What's not to test
- The interaction with the plans grid. The plans grid isn't yet compatible with this domain step, so it doesn't know if you picked a paid domain or such. Don't test the plans grid, just the domains step, please.
Next steps
- ~~Find a way to store the selected domain in the Onboarding store in away that accessible to the plans grid. Similar to
client/landing/stepper/declarative-flow/internals/steps-repository/domains~~ Done. - ~~Find a typed way to persist the step state.~~ Done.
- Test test test.
- Consider doing the same thing for the plans step.
- Sadly, this is terrible for performance because it pulls all of /start frameworks due to the
NavigationLinkin /start that loads all the frameworks to determine the previous step. Not a blocker for sure, though.
Jetpack Cloud live (direct link)
|
|
https://calypso.live?image=registry.a8c.com/calypso/app:build-118375&env=jetpack |
Automattic for Agencies live (direct link)
|
|
https://calypso.live?image=registry.a8c.com/calypso/app:build-118375&env=a8c-for-agencies |
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:
App Entrypoints (~3114 bytes added 📈 [gzipped])
name parsed_size gzip_size
entry-login +4632 B (+0.3%) +2803 B (+0.6%)
entry-stepper +4619 B (+0.2%) +1908 B (+0.3%)
entry-subscriptions +4333 B (+0.3%) +1546 B (+0.3%)
entry-domains-landing +4230 B (+0.7%) +1554 B (+0.8%)
entry-browsehappy +4230 B (+2.1%) +1554 B (+2.5%)
entry-main +3689 B (+0.2%) +1519 B (+0.3%)
Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.
Sections (~107468 bytes added 📈 [gzipped])
name parsed_size gzip_size
update-design-flow +8991 B (+0.8%) -1250 B (-0.4%)
link-in-bio-tld-flow +7318 B (+0.4%) -1420 B (-0.3%)
signup +7188 B (+2.6%) +324 B (+0.5%)
tailored-ecommerce-flow +2127 B (+4.0%) +275 B (+4.0%)
with-theme-assembler-flow +2010 B (+3.0%) +252 B (+2.2%)
update-options-flow +2010 B (+4.0%) +252 B (+4.3%)
trial-wooexpress-flow +2010 B (+3.8%) +251 B (+3.5%)
site-setup-wg +2010 B (+2.4%) +258 B (+1.5%)
site-setup-flow +2010 B (+2.4%) +254 B (+1.5%)
site-migration-flow +2010 B (+3.2%) +252 B (+2.6%)
readymade-template-flow +2010 B (+1.5%) +246 B (+0.8%)
migration-signup +2010 B (+3.6%) +257 B (+3.3%)
migration-flow +2010 B (+2.8%) +250 B (+1.9%)
import-flow +2010 B (+3.3%) +269 B (+2.8%)
hosted-site-migration-flow +2010 B (+3.2%) +251 B (+2.6%)
free-post-setup-flow +2010 B (+4.0%) +253 B (+4.4%)
free-flow +2010 B (+3.4%) +250 B (+2.8%)
assembler-first-flow +2010 B (+2.6%) +247 B (+1.7%)
ai-assembler-flow +2010 B (+2.6%) +251 B (+1.7%)
entrepreneur-flow +2008 B (+1.6%) +19 B (+0.1%)
onboarding-flow +921 B (+3.0%) +149 B (+1.5%)
domains -395 B (-0.0%) -1826 B (-0.3%)
checkout +327 B (+0.0%) +597 B (+0.1%)
transferring-hosted-site-flow -313 B (-0.5%) -577 B (-2.8%)
hosting +293 B (+0.0%) +379 B (+0.1%)
hundred-year-plan +267 B (+0.8%) +93 B (+0.9%)
copy-site-flow +265 B (+0.0%) -282 B (-0.1%)
jetpack-cloud-plugin-management -236 B (-0.0%) -935 B (-0.2%)
settings +233 B (+0.0%) -145 B (-0.1%)
home +233 B (+0.0%) +458 B (+0.1%)
plugins -217 B (-0.0%) -856 B (-0.1%)
design-first-flow +214 B (+0.9%) +82 B (+1.4%)
write-flow +201 B (+0.0%) -204 B (-0.1%)
build-flow +201 B (+0.0%) -219 B (-0.1%)
subscribers +198 B (+0.0%) +31 B (+0.0%)
newsletter-flow +197 B (+1.0%) +70 B (+1.3%)
jetpack-cloud-manage-pricing +196 B (+0.1%) +710 B (+0.7%)
plugin-bundle-flow -192 B (-0.1%) -485 B (-0.8%)
videopress-tv-flow +170 B (+0.3%) +547 B (+2.7%)
newsletter-post-setup-flow +168 B (+0.1%) -5 B (-0.0%)
link-in-bio-post-setup-flow +168 B (+0.1%) -4 B (-0.0%)
import-hosted-site-flow +161 B (+0.0%) -206 B (-0.1%)
people +159 B (+0.0%) -547 B (-0.3%)
settings-performance -157 B (-0.0%) -341 B (-0.2%)
media +155 B (+0.0%) +384 B (+0.1%)
sensei-flow +153 B (+0.0%) +17 B (+0.0%)
woocommerce -144 B (-0.0%) -36 B (-0.0%)
stats -144 B (-0.0%) -38 B (-0.0%)
settings-writing -144 B (-0.0%) -306 B (-0.2%)
settings-podcast -144 B (-0.0%) -306 B (-0.2%)
settings-newsletter -144 B (-0.0%) -306 B (-0.2%)
security -144 B (-0.0%) -220 B (-0.1%)
privacy -144 B (-0.0%) -329 B (-0.2%)
posts-custom -144 B (-0.0%) -401 B (-0.2%)
posts -144 B (-0.0%) -401 B (-0.2%)
notification-settings -144 B (-0.0%) -325 B (-0.1%)
marketing -144 B (-0.0%) -323 B (-0.2%)
jetpack-social -144 B (-0.0%) -89 B (-0.0%)
jetpack-search -144 B (-0.0%) +49 B (+0.0%)
email -144 B (-0.0%) +450 B (+0.2%)
earn -144 B (-0.0%) -37 B (-0.0%)
developer -144 B (-0.0%) -286 B (-0.1%)
comments -144 B (-0.0%) -270 B (-0.1%)
domain-user-transfer-flow +143 B (+0.1%) +895 B (+1.8%)
videopress-flow +134 B (+0.0%) -612 B (-0.2%)
jetpack-cloud-agency-sites-v2 +127 B (+0.0%) +286 B (+0.1%)
new-hosted-site-flow-user-included +118 B (+2.0%) +65 B (+3.3%)
new-hosted-site-flow +118 B (+2.1%) +67 B (+3.5%)
a8c-for-agencies-referrals -115 B (-0.0%) +73 B (+0.0%)
a8c-for-agencies-client -115 B (-0.0%) -93 B (-0.0%)
start-writing-flow +106 B (+0.5%) +80 B (+1.5%)
theme -103 B (-0.0%) -35 B (-0.0%)
promote-post-i2 -103 B (-0.0%) -19 B (-0.0%)
preview -103 B (-0.0%) -20 B (-0.0%)
patterns -103 B (-0.0%) -28 B (-0.0%)
migrate -103 B (-0.0%) -19 B (-0.0%)
marketplace -103 B (-0.0%) -17 B (-0.0%)
jetpack-cloud-overview -103 B (-0.0%) -19 B (-0.0%)
jetpack-cloud-features-comparison -103 B (-0.0%) -39 B (-0.0%)
jetpack-cloud -103 B (-0.0%) -19 B (-0.0%)
customize -103 B (-0.0%) -19 B (-0.0%)
concierge -103 B (-0.0%) -19 B (-0.0%)
a8c-for-agencies-signup +103 B (+0.1%) +35 B (+0.1%)
a8c-for-agencies-purchases -103 B (-0.0%) -125 B (-0.1%)
a8c-for-agencies-partner-directory -103 B (-0.0%) -70 B (-0.0%)
a8c-for-agencies-marketplace -103 B (-0.0%) +51 B (+0.0%)
staging-site +97 B (+0.0%) +131 B (+0.0%)
themes +95 B (+0.0%) +136 B (+0.0%)
link-in-bio-flow +94 B (+0.5%) +46 B (+0.9%)
jetpack-cloud-pricing +93 B (+0.0%) +544 B (+0.2%)
import +85 B (+0.0%) -66 B (-0.0%)
reblogging-flow +82 B (+1.5%) +22 B (+1.2%)
settings-security -72 B (-0.0%) -330 B (-0.2%)
devdocs +67 B (+0.0%) +18 B (+0.0%)
reader +62 B (+0.0%) +170 B (+0.1%)
site-purchases -54 B (-0.0%) -245 B (-0.1%)
purchases -54 B (-0.0%) -351 B (-0.1%)
accept-invite +53 B (+0.0%) -326 B (-0.7%)
woocommerce-installation +52 B (+0.0%) +550 B (+0.5%)
site-blocks +52 B (+0.0%) +421 B (+0.2%)
settings-reading +52 B (+0.0%) +484 B (+0.4%)
settings-jetpack +52 B (+0.0%) +429 B (+0.3%)
scan +52 B (+0.0%) +1069 B (+0.5%)
pages +52 B (+0.0%) +499 B (+0.3%)
me +52 B (+0.0%) +421 B (+0.2%)
jetpack-cloud-settings +52 B (+0.0%) +429 B (+0.3%)
help +52 B (+0.0%) +421 B (+0.2%)
google-my-business +52 B (+0.0%) +357 B (+0.3%)
export +52 B (+0.0%) +521 B (+0.5%)
backup +52 B (+0.0%) +720 B (+0.2%)
add-ons +52 B (+0.0%) +465 B (+0.4%)
activity +52 B (+0.0%) +492 B (+0.2%)
account-close +52 B (+0.0%) +421 B (+0.2%)
account +52 B (+0.0%) +208 B (+0.1%)
jetpack-connect -50 B (-0.0%) -380 B (-0.1%)
gutenberg-editor -36 B (-0.0%) +1 B (+0.0%)
jetpack-cloud-partner-portal +34 B (+0.0%) -885 B (-0.3%)
connect-domain +28 B (+0.1%) +34 B (+0.5%)
jetpack-app +19 B (+0.0%) -238 B (-0.2%)
settings-discussion +13 B (+0.0%) +523 B (+0.4%)
plans +13 B (+0.0%) +3 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 (~33675 bytes added 📈 [gzipped])
name parsed_size gzip_size
async-load-automattic-onboarding-src-step-container +15651 B (new) +6251 B (new)
async-load-calypso-signup-step-wrapper +12191 B (new) +4138 B (new)
async-load-signup-steps-domains -10679 B (-1.9%) -3966 B (-2.4%)
async-load-signup-steps-design-picker +737 B (+1.4%) +884 B (+5.2%)
async-load-signup-steps-creds-permission +588 B (+1.2%) +616 B (+3.8%)
async-load-signup-steps-creds-confirm +588 B (+1.2%) +633 B (+3.9%)
async-load-signup-steps-subscribe-email +486 B (+0.3%) -219 B (-0.4%)
async-load-signup-steps-plans +462 B (+0.1%) -32 B (-0.0%)
async-load-signup-steps-woocommerce-install-step-store-address +433 B (+0.7%) +230 B (+1.1%)
async-load-signup-steps-woocommerce-install-step-business-info +433 B (+0.5%) +259 B (+0.9%)
async-load-signup-steps-theme-selection +433 B (+0.1%) +63 B (+0.1%)
async-load-signup-steps-test-step +433 B (+2.1%) +232 B (+3.5%)
async-load-signup-steps-social-profiles +433 B (+1.6%) +156 B (+1.8%)
async-load-signup-steps-site-picker +433 B (+0.3%) +181 B (+0.4%)
async-load-signup-steps-site-options +433 B (+1.0%) +151 B (+1.2%)
async-load-signup-steps-site +433 B (+1.0%) +90 B (+0.7%)
async-load-signup-steps-rewind-were-backing +433 B (+2.0%) +185 B (+2.6%)
async-load-signup-steps-reader-landing +433 B (+1.8%) +183 B (+2.3%)
async-load-signup-steps-hosting-decider +433 B (+2.0%) +283 B (+4.0%)
async-load-signup-steps-emails +433 B (+0.7%) +149 B (+0.7%)
async-load-signup-steps-difm-site-picker +433 B (+0.3%) +244 B (+0.5%)
async-load-signup-steps-creds-complete +433 B (+2.0%) +182 B (+2.5%)
async-load-signup-steps-courses +433 B (+1.3%) +202 B (+1.9%)
async-load-signup-steps-clone-start +433 B (+1.6%) +203 B (+2.3%)
async-load-signup-steps-clone-ready +433 B (+0.8%) +134 B (+0.8%)
async-load-signup-steps-clone-point +433 B (+0.3%) +92 B (+0.2%)
async-load-signup-steps-clone-destination +433 B (+1.4%) +150 B (+1.5%)
async-load-signup-steps-clone-cloning +433 B (+1.6%) +214 B (+2.5%)
async-load-signup-steps-plans-theme-preselected +421 B (+0.1%) -44 B (-0.0%)
async-load-signup-steps-rewind-form-creds +400 B (+0.6%) +613 B (+2.9%)
async-load-signup-steps-clone-credentials +400 B (+0.6%) +618 B (+2.8%)
async-load-signup-steps-woocommerce-install-confirm +387 B (+0.7%) +326 B (+1.9%)
async-load-signup-steps-initial-intent +337 B (+0.4%) +156 B (+0.5%)
async-load-design +297 B (+0.0%) -42 B (-0.0%)
async-load-signup-steps-website-content +281 B (+0.3%) +178 B (+0.5%)
async-load-signup-steps-user +255 B (+0.2%) -293 B (-0.6%)
async-load-signup-steps-site-or-domain +231 B (+0.6%) +106 B (+0.9%)
async-load-signup-steps-woocommerce-install-transfer +225 B (+0.7%) +230 B (+2.3%)
async-load-signup-steps-page-picker +225 B (+0.1%) +222 B (+0.2%)
async-load-signup-steps-p2-complete-profile +223 B (+0.2%) -31 B (-0.1%)
async-load-signup-steps-new-or-existing-site -190 B (-0.4%) -27 B (-0.2%)
async-load-signup-steps-p2-site +184 B (+0.4%) +9 B (+0.1%)
async-load-signup-steps-p2-join-workspace +184 B (+0.6%) +135 B (+1.4%)
async-load-signup-steps-p2-details +184 B (+0.8%) +209 B (+2.6%)
async-load-signup-steps-p2-confirm-email +184 B (+0.7%) +227 B (+2.7%)
async-load-calypso-my-sites-checkout-modal +183 B (+0.0%) +546 B (+0.2%)
async-load-calypso-blocks-editor-checkout-modal +183 B (+0.0%) +527 B (+0.2%)
async-load-store-app-store-stats +155 B (+0.0%) +431 B (+0.2%)
async-load-signup-steps-starting-point -138 B (-0.4%) +163 B (+1.5%)
async-load-signup-steps-intent -138 B (-0.4%) +149 B (+1.2%)
async-load-signup-steps-store-features -132 B (-0.3%) +178 B (+1.4%)
async-load-signup-steps-woocommerce-install -103 B (-3.3%) -30 B (-2.7%)
async-load-calypso-reader-sidebar -103 B (-0.1%) -25 B (-0.1%)
async-load-automattic-help-center -103 B (-0.0%) -25 B (-0.0%)
async-load-design-blocks +93 B (+0.0%) +640 B (+0.1%)
async-load-design-playground -54 B (-0.0%) -207 B (-0.1%)
async-load-calypso-post-editor-editor-media-modal -41 B (-0.0%) +112 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.
Some testing and questions:
- Can't consistently replicate but when I select a paid domain and plan, I get navigated to
/homeinstead of checkout. - Spacing issues on mobile (search bar, filter button,
Show more resultsbutton, content belowShow more resultsbutton). - Difference in highlight colors on search and filter buttons. When pressed on mobile, the filter button has a pink highlight (pink for my selected theme).
- Are the domains selected in the domains step and the cart linked? Should removing it from the cart affect if it is selected on the domains step? If I select a domain and select a free plan, should the domain be added to the cart (this may be related to the issue where im not navigated to the checkout correctly)?
Hello, I noticed some visual differences comparing localhost and production.
Localhost missing borders
Localhost with different alignment
Production
Also copies are different
As @renancarvalho, I see some problems on mobile for domains
Also, /start/domains has < Back to sites, while it is missing in this PR.
I see Use a domain I own redirecting to /start/domains/use-your-domain, this has to be ported into Stepper, right?
Thanks @alshakero, I see many things have been solved! I still see these:
Use a domain I ownbrings me here
============
In Stepper
In Start
============
Still missing the US in prices
Almost there.
I noted these issues.
Functionality
- When clicking on “Use a domain I own” It is not redirecting to the proper page/ rendering the proper component
- Message about already registered domain not present.
Production
Localhost
Styling.
-
I see div right below
id="wpcom"the.step-route onboarding domainshas padding like 60px 0 0 0 and in production we have 48px 0 0 0. -
Div with class
domains__step-content domains__step-content-domain-stepneeds to remove the padding -
The subtitles are not using the same font-family.
-
Mobile back button is present and in prod it is not.
This PR modifies the release build for the following Calypso Apps:
For info about this notification, see here: PCYsg-OT6-p2
- notifications
- wpcom-block-editor
To test WordPress.com changes, run install-plugin.sh $pluginSlug add/unified-domain-step on your sandbox.