Global Styles on Personal AB: Calypso changes #98538

rcrdortiz · 2025-01-17T11:25:06Z

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

…cts accordingly

github-actions · 2025-01-17T11:25:17Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-131201&env=a8c-for-agencies

matticbot · 2025-01-17T11:30:55Z

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 · 2025-01-17T11:33:37Z

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

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

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

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

Sections (~1808 bytes added 📈 [gzipped])

name                                parsed_size           gzip_size
jetpack-cloud-partner-portal            +1876 B  (+0.2%)     +523 B  (+0.2%)
theme                                   +1599 B  (+0.2%)     +390 B  (+0.2%)
themes                                  +1484 B  (+0.1%)     +293 B  (+0.1%)
site-settings                            +983 B  (+0.1%)     +292 B  (+0.1%)
settings                                 +983 B  (+0.1%)     +292 B  (+0.1%)
link-in-bio-tld-flow                     +877 B  (+0.0%)     +280 B  (+0.0%)
write-flow                               +855 B  (+0.1%)     +277 B  (+0.1%)
build-flow                               +855 B  (+0.1%)     +277 B  (+0.1%)
site-setup-wg                            -134 B  (-0.0%)      +16 B  (+0.0%)
site-setup-flow                          -134 B  (-0.0%)      +16 B  (+0.0%)
plugin-bundle-flow                       -134 B  (-0.0%)      +16 B  (+0.0%)
new-hosted-site-flow-user-included       -134 B  (-0.1%)      +16 B  (+0.0%)
new-hosted-site-flow                     -134 B  (-0.1%)      +16 B  (+0.0%)
import-hosted-site-flow                  -134 B  (-0.0%)      +16 B  (+0.0%)
import-flow                              -134 B  (-0.1%)      +16 B  (+0.0%)
hundred-year-plan                        -134 B  (-0.1%)      +16 B  (+0.0%)
hundred-year-domain                      -134 B  (-0.1%)      +16 B  (+0.0%)
copy-site-flow                           -134 B  (-0.0%)      +16 B  (+0.0%)
connect-domain                           -134 B  (-0.1%)      +16 B  (+0.0%)
update-design-flow                       -112 B  (-0.0%)      +19 B  (+0.0%)
checkout                                  +55 B  (+0.0%)      +14 B  (+0.0%)
plans                                     +44 B  (+0.0%)       +7 B  (+0.0%)
plugins                                   +22 B  (+0.0%)       +3 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%)       +3 B  (+0.0%)
customize                                 +18 B  (+0.0%)      +10 B  (+0.0%)
pages                                     +16 B  (+0.0%)       +2 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 (~325 bytes added 📈 [gzipped])

name                                                                              parsed_size           gzip_size
async-load-signup-steps-theme-selection                                               +1484 B  (+0.4%)     +293 B  (+0.3%)
async-load-design-blocks                                                              +1484 B  (+0.1%)     +293 B  (+0.0%)
async-load-automattic-help-center-stepper                                              -134 B  (-0.0%)      +16 B  (+0.0%)
async-load-calypso-my-sites-checkout-modal                                             -101 B  (-0.0%)      +27 B  (+0.0%)
async-load-calypso-blocks-editor-checkout-modal                                         +33 B  (+0.0%)      +11 B  (+0.0%)
async-load-automattic-global-styles-src-components-global-styles-variations             -25 B  (-0.0%)      -11 B  (-0.0%)
async-load-automattic-design-preview                                                    -25 B  (-0.1%)       -6 B  (-0.1%)
async-load-signup-steps-plans-theme-preselected                                         +22 B  (+0.0%)       +3 B  (+0.0%)
async-load-signup-steps-plans                                                           +22 B  (+0.0%)       +3 B  (+0.0%)
async-load-signup-steps-design-picker                                                   +18 B  (+0.0%)       +9 B  (+0.0%)
async-load-design                                                                       +18 B  (+0.0%)      +10 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.

…rigger an error in some circumstances

…global as default value to avoid prop drilling into the package.

rcrdortiz · 2025-01-17T16:26:51Z

Do not merge until we get the final experiment key.

xavier-lc

I can see the style variations message on the design picker, but I'm not sure how to get the others.

client/state/sites/hooks/with-site-global-styles-on-personal.tsx

client/jetpack-cloud/sections/partner-portal/primary/wpcom-atomic-hosting/card-content.tsx

...g/stepper/declarative-flow/internals/steps-repository/design-setup/unified-design-picker.tsx

client/state/sites/hooks/use-site-global-styles-on-personal.ts

… useEffect

dsas

I've been through and tested everything I can think of on control and treatment and it works for me.

I've only skimmed through the code, but @xavier-lc has had a closer look, so I'm approving.

BogdanUngureanu · 2025-01-22T13:13:28Z

LGTM too! 🥇

packages/calypso-products/src/is-global-styles-on-personal-enabled.ts

ddc22

A quick note about packages on calypso. Packages should ideally be self-contained and avoid global dependencies. We can approach this in one of two ways.

1 - Expose a brand new function
globalStylesOnPersonalExperimentFeatures: ()=>{}
2 - Inject a function parameter isGlobalStylesOnPersonalEnabled

Either way next we can introduce a new prop on plans grid as shown here.

wp-calypso/packages/plans-grid-next/src/types.ts

Lines 216 to 242 in 930396e

    
           	/** 
        
           	 * Reduce the vertical spacing between each feature group 
        
           	 */ 
        
           	enableReducedFeatureGroupSpacing?: boolean; 
        
           	/** 
        
           	 * Display only the client logos for the enterprise plan 
        
           	 */ 
        
           	enableLogosOnlyForEnterprisePlan?: boolean; 
        
           	/** 
        
           	 * Hide the titles for feature groups in the features grid 
        
           	 */ 
        
           	hideFeatureGroupTitles?: boolean; 
        
           	/** 
        
           	 * Enable the display of the term savings in plan prices. 
        
           	 * Prices will display crossed out with the savings from shorter term accentuated in a label. 
        
           	 * This carries lower precedence than promo/coupon and introductory pricing, irrespective of whether set or not. 
        
           	 */ 
        
           	enableTermSavingsPriceDisplay?: boolean; 
        
           	/** 
        
           	 * Determine if storage add-on products should be combined with plan costs when 
        
           	 * calculating prices. 
        
           	 */ 
        
           	reflectStorageSelectionInPlanPrices?: boolean;

the prop can then be funneled down here to be utilized here to differentiate between the feature sets

wp-calypso/packages/plans-grid-next/src/hooks/data-store/use-plan-features-for-grid-plans.ts

Lines 41 to 51 in 930396e

    
           const usePlanFeaturesForGridPlans: UsePlanFeaturesForGridPlans = ( { 
        
           	gridPlans, 
        
           	allFeaturesList, 
        
           	hasRedeemedDomainCredit, 
        
           	intent, 
        
           	selectedFeature, 
        
           	showLegacyStorageFeature, 
        
           	isInSignup, 
        
           } ) => { 
        
           	const highlightedFeatures = useHighlightedFeatures( { intent: intent ?? null, isInSignup } ); 
        
           	return useMemo( () => {

Let me know if I can help with this change. Happy to draw up a pull request to your PR :)

rcrdortiz · 2025-01-28T09:31:12Z

We now have the final experiment code and this PR can be merged.

necronet · 2025-01-29T00:08:27Z

client/state/sites/hooks/use-site-global-styles-status.ts

+				Promise.resolve( {
+					shouldLimitGlobalStyles: true,
+					globalStylesInUse: false,
+					globalStylesInPersonalPlan: experimentAssignment.variationName === 'treatment',


We have 2 different treatments for this experiment which are: gs_on_personal and gs_on_personal_extra_features

Fixed in #98974

Calypso is now aware of the GS on Personal AB experiment code and rea…

e9ceb1b

…cts accordingly

Removed pre intitialization requirement

9a3e60a

rcrdortiz self-assigned this Jan 17, 2025

rcrdortiz added 6 commits January 17, 2025 13:37

Merge branch 'trunk' into add/global-styles-on-personal-ab

5baf429

Fixed test

910910d

Fixed tests

8dac17b

Fixed the global isGlobalStylesOnPersonal check so that it does not t…

6a411aa

…rigger an error in some circumstances

On the Design Picker, we now use the global isGlobalStylesOnPersonal …

2e6ce68

…global as default value to avoid prop drilling into the package.

Merge branch 'trunk' into add/global-styles-on-personal-ab

e7c40fc

rcrdortiz added 2 commits January 20, 2025 09:19

Merge branch 'trunk' into add/global-styles-on-personal-ab

d131b0a

Added window interface to comply with TS

8ff6be7

rcrdortiz requested a review from a team January 20, 2025 08:48

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 20, 2025

rcrdortiz changed the title ~~Global Styles on Personal AB: Calypso changes~~ [Do not merge] Global Styles on Personal AB: Calypso changes Jan 20, 2025

rcrdortiz added the DO NOT MERGE label Jan 20, 2025

xavier-lc reviewed Jan 20, 2025

View reviewed changes

rcrdortiz added 3 commits January 21, 2025 12:07

Updated comment to better describe the functionality

91d0da9

Add the global styles experiment status to the window object by using…

bf9e638

… useEffect

Simplified the withSiteGlobalStylesOnPersonal hoc

66de3f1

rcrdortiz requested a review from xavier-lc January 21, 2025 11:13

rcrdortiz added 3 commits January 21, 2025 15:00

Merge branch 'trunk' into add/global-styles-on-personal-ab

d8ff417

Removed an unused import

5a38f29

Merge branch 'trunk' into add/global-styles-on-personal-ab

e69b78a

dsas approved these changes Jan 22, 2025

View reviewed changes

We now support the LiTS with no site selected as part of the experiment

596ea7f

BogdanUngureanu approved these changes Jan 22, 2025

View reviewed changes

ddc22 reviewed Jan 22, 2025

View reviewed changes

packages/calypso-products/src/is-global-styles-on-personal-enabled.ts Show resolved Hide resolved

ddc22 reviewed Jan 22, 2025

View reviewed changes

rcrdortiz added 2 commits January 28, 2025 09:49

Merge branch 'trunk' into add/global-styles-on-personal-ab

cfca503

Added final experiment key

1211077

rcrdortiz removed the DO NOT MERGE label Jan 28, 2025

rcrdortiz changed the title ~~[Do not merge] Global Styles on Personal AB: Calypso changes~~ Global Styles on Personal AB: Calypso changes Jan 28, 2025

rcrdortiz merged commit 14761a3 into trunk Jan 28, 2025
14 checks passed

rcrdortiz deleted the add/global-styles-on-personal-ab branch January 28, 2025 09:35

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 28, 2025

necronet reviewed Jan 29, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Global Styles on Personal AB: Calypso changes #98538

Global Styles on Personal AB: Calypso changes #98538

rcrdortiz commented Jan 17, 2025 •

edited

Loading

github-actions bot commented Jan 17, 2025 •

edited by matticbot

Loading

matticbot commented Jan 17, 2025 •

edited

Loading

matticbot commented Jan 17, 2025 •

edited

Loading

rcrdortiz commented Jan 17, 2025

xavier-lc left a comment

dsas left a comment

BogdanUngureanu commented Jan 22, 2025

ddc22 left a comment

rcrdortiz commented Jan 28, 2025

necronet Jan 29, 2025

mmtr Jan 29, 2025

	/**
	* Reduce the vertical spacing between each feature group
	*/
	enableReducedFeatureGroupSpacing?: boolean;

	/**
	* Display only the client logos for the enterprise plan
	*/
	enableLogosOnlyForEnterprisePlan?: boolean;

	/**
	* Hide the titles for feature groups in the features grid
	*/
	hideFeatureGroupTitles?: boolean;

	/**
	* Enable the display of the term savings in plan prices.
	* Prices will display crossed out with the savings from shorter term accentuated in a label.
	* This carries lower precedence than promo/coupon and introductory pricing, irrespective of whether set or not.
	*/
	enableTermSavingsPriceDisplay?: boolean;

	/**
	* Determine if storage add-on products should be combined with plan costs when
	* calculating prices.
	*/
	reflectStorageSelectionInPlanPrices?: boolean;

	const usePlanFeaturesForGridPlans: UsePlanFeaturesForGridPlans = ( {
	gridPlans,
	allFeaturesList,
	hasRedeemedDomainCredit,
	intent,
	selectedFeature,
	showLegacyStorageFeature,
	isInSignup,
	} ) => {
	const highlightedFeatures = useHighlightedFeatures( { intent: intent ?? null, isInSignup } );
	return useMemo( () => {

Global Styles on Personal AB: Calypso changes #98538

Global Styles on Personal AB: Calypso changes #98538

Conversation

rcrdortiz commented Jan 17, 2025 • edited Loading

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

github-actions bot commented Jan 17, 2025 • edited by matticbot Loading

matticbot commented Jan 17, 2025 • edited Loading

matticbot commented Jan 17, 2025 • edited Loading

rcrdortiz commented Jan 17, 2025

xavier-lc left a comment

Choose a reason for hiding this comment

dsas left a comment

Choose a reason for hiding this comment

BogdanUngureanu commented Jan 22, 2025

ddc22 left a comment

Choose a reason for hiding this comment

rcrdortiz commented Jan 28, 2025

necronet Jan 29, 2025

Choose a reason for hiding this comment

mmtr Jan 29, 2025

Choose a reason for hiding this comment

rcrdortiz commented Jan 17, 2025 •

edited

Loading

github-actions bot commented Jan 17, 2025 •

edited by matticbot

Loading

matticbot commented Jan 17, 2025 •

edited

Loading

matticbot commented Jan 17, 2025 •

edited

Loading