Global Styles on Personal AB: Calypso changes

[rcrdortiz]

Related to:

• https://github.com/Automattic/dotcom-forge/issues/10229

Proposed Changes

• Updated the necessary Calypso screens so that they can react to the experiment assignment.

Site settings

Design Picker

Theme Showcase

Front End Notice

Why are these changes being made?

• To support the Global Styles on Personal AB test.

Testing Instructions

• Open the Calypso live link
• Make sure to apply [DO NOT MERGE] Add Global Styles on Personal experiment jetpack#41132 to your sandbox
• Sandbox your API
• Change the experiment assignment by visiting: 22138-explat-experiment (this experiment is not final, we still need our own experiment key). Assign your user to the treatment group.
• Test all the screens where global style upgrades are shown.
• Make sure all references of plan upgrades reference the correct plan.

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 UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• 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-aUh-p2)?

[github-actions]

Link to live branch is being generated...
Please wait a few minutes and refresh this page.

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• happy-blocks
• help-center
• notifications
• odyssey-stats
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/global-styles-on-personal-ab on your sandbox.

[matticbot]

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

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

name           parsed_size           gzip_size
entry-stepper       +128 B  (+0.0%)      +17 B  (+0.0%)
entry-main           +27 B  (+0.0%)      +45 B  (+0.0%)
entry-login          +27 B  (+0.0%)      +45 B  (+0.0%)

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

Sections (~1697 bytes added 📈 [gzipped])

name                                parsed_size           gzip_size
jetpack-cloud-partner-portal            +1954 B  (+0.2%)     +497 B  (+0.2%)
theme                                   +1788 B  (+0.2%)     +393 B  (+0.2%)
themes                                  +1687 B  (+0.2%)     +264 B  (+0.1%)
site-settings                           +1072 B  (+0.1%)     +236 B  (+0.1%)
settings                                +1061 B  (+0.1%)     +233 B  (+0.1%)
link-in-bio-tld-flow                     +975 B  (+0.0%)     +275 B  (+0.0%)
write-flow                               +953 B  (+0.1%)     +274 B  (+0.1%)
build-flow                               +953 B  (+0.1%)     +274 B  (+0.1%)
plugin-bundle-flow                       -134 B  (-0.0%)      +15 B  (+0.0%)
new-hosted-site-flow-user-included       -134 B  (-0.1%)      +15 B  (+0.0%)
new-hosted-site-flow                     -134 B  (-0.1%)      +15 B  (+0.0%)
import-hosted-site-flow                  -134 B  (-0.0%)      +15 B  (+0.0%)
import-flow                              -134 B  (-0.1%)      +15 B  (+0.0%)
hundred-year-plan                        -134 B  (-0.1%)      +15 B  (+0.0%)
hundred-year-domain                      -134 B  (-0.1%)      +15 B  (+0.0%)
copy-site-flow                           -134 B  (-0.0%)      +15 B  (+0.0%)
connect-domain                           -134 B  (-0.1%)      +15 B  (+0.0%)
site-setup-wg                            -123 B  (-0.0%)      +18 B  (+0.0%)
site-setup-flow                          -123 B  (-0.0%)      +18 B  (+0.0%)
update-design-flow                       -112 B  (-0.0%)      +16 B  (+0.0%)
checkout                                  +55 B  (+0.0%)      +14 B  (+0.0%)
plans                                     +44 B  (+0.0%)       +5 B  (+0.0%)
plugins                                   +22 B  (+0.0%)       +1 B  (+0.0%)
jetpack-connect                           +22 B  (+0.0%)       +4 B  (+0.0%)
jetpack-cloud-pricing                     +22 B  (+0.0%)       +4 B  (+0.0%)
jetpack-app                               +22 B  (+0.0%)       +1 B  (+0.0%)
customize                                 +18 B  (+0.0%)       +9 B  (+0.0%)
pages                                     +16 B  (+0.0%)       +2 B  (+0.0%)
staging-site                              +11 B  (+0.0%)       +3 B  (+0.0%)
sites-dashboard                           +11 B  (+0.0%)       +3 B  (+0.0%)
site-tools                                +11 B  (+0.0%)       +3 B  (+0.0%)
site-performance                          +11 B  (+0.0%)       +3 B  (+0.0%)
site-overview                             +11 B  (+0.0%)       +3 B  (+0.0%)
site-monitoring                           +11 B  (+0.0%)       +3 B  (+0.0%)
site-marketing                            +11 B  (+0.0%)       +3 B  (+0.0%)
site-logs                                 +11 B  (+0.0%)       +3 B  (+0.0%)
hosting-features                          +11 B  (+0.0%)       +3 B  (+0.0%)
hosting                                   +11 B  (+0.0%)       +3 B  (+0.0%)
github-deployments                        +11 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 (~288 bytes added 📈 [gzipped])

name                                                                              parsed_size           gzip_size
async-load-signup-steps-theme-selection                                               +1687 B  (+0.5%)     +264 B  (+0.3%)
async-load-design-blocks                                                              +1687 B  (+0.1%)     +264 B  (+0.0%)
async-load-automattic-help-center-stepper                                              -134 B  (-0.0%)      +15 B  (+0.0%)
async-load-calypso-my-sites-checkout-modal                                             -101 B  (-0.0%)      +26 B  (+0.0%)
async-load-automattic-global-styles-src-components-global-styles-variations             -58 B  (-0.0%)      -17 B  (-0.0%)
async-load-automattic-design-preview                                                    -58 B  (-0.1%)       -3 B  (-0.0%)
async-load-calypso-blocks-editor-checkout-modal                                         +33 B  (+0.0%)      +11 B  (+0.0%)
async-load-signup-steps-plans-theme-preselected                                         +22 B  (+0.0%)       +1 B  (+0.0%)
async-load-signup-steps-plans                                                           +22 B  (+0.0%)       +1 B  (+0.0%)
async-load-signup-steps-design-picker                                                   +18 B  (+0.0%)       +9 B  (+0.0%)
async-load-design                                                                       +18 B  (+0.0%)       +8 B  (+0.0%)
async-load-signup-steps-page-picker                                                     +11 B  (+0.0%)       +5 B  (+0.0%)
async-load-purchase-modal-wrapper                                                       +11 B  (+0.0%)       +5 B  (+0.0%)
async-load-my-sites-checkout-purchase-modal-is-eligible-for-one-click-checkou...        +11 B  (+0.0%)       +5 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.

[rcrdortiz]

Do not merge until we get the final experiment key.