Repository: Automattic/wp-calypso
Pull request #101632: Enhance domain consistency in My Home
Author: login: vykes-mac
Created: 2025-03-20T01:29:58Z | Merged: 2025-03-21T21:00:50Z

<!--
Link a related issue to this PR. If the PR does not immediately resolve the issue,
for example, it requires a separate deployment to production, avoid
using the "fixes" keyword and instead attach the [Status] Fix Inbound label to
the linked issue.
-->

Related to https://github.com/Automattic/wp-calypso/issues/99237

The purpose of this PR is to make the domain displayed throughout the onboarding consistent. Whenever the user purchase a custom domain that domain is shown in the fullscreen launchpad but the `.wordpress.com` subdomain is shown on the My Home Dashboard. This happens because the domain take sometime to become active in the backend, particularly when activating ssl on the domain, after the domain completes activation/setup then all the sites urls are updated with the domain, before that the sites url will be the `.wordpress.com` subdomain. This PR favors the custom domain over the siteSlug since the domain is available but just not finish setting up. **Note** when the user clicks the `View site` CTA on the Launch celebration notice we still have to maintain `.wordpress.com` subdomain until the domain ssl finishes otherwise the site will not be found when the CTA us clicked. 

## Proposed Changes
* Added loading state for site domain display in the `Site` component.
* Updated domain rendering logic to prioritize custom domains over default site domain.
* Refactored CelebrateLaunchModal to use the correct site domain based on custom domains.

## Why are these changes being made?
<!--
It's easy to see what a PR does but much harder to find out why it was made,
particularly when researching old changes in history. Record an explanation of
the motivation behind this change and how it will help.
-->

* As part of the overall onboarding experience improvement.

## Testing Instructions

<!--
Add as many details as possible to help others reproduce the issue and test the fix.
"Before / After" screenshots can also be very helpful when the change is visual.
-->

* go to `/setup/onboarding` 
* Choose a paid domain, personal plan and complete the flow quickly 
* Verify the that your custom domain is shown in My Home sidebar instead of `.wordpress.com` subdomain
* Launch your site immediately and verify the custom domain is shown in the celebration modal instead of wordpress subdomain.
* Clicking `View site` should take you to your site but the url will be `.wordpress.com` subdomain until the domain setup is completed in the backend.


**Before**
p1738596412795819/1738593870.964859-slack-C06FCT6EEHH

**After**

https://github.com/user-attachments/assets/12bc939a-c8a6-4c43-8d93-926a48396b92


## Pre-merge Checklist

<!--
Complete applicable items on this checklist **before** merging into trunk. Inapplicable items can be left unchecked.

Both the PR author and reviewer are responsible for ensuring the checklist is completed.
-->

- [ ] Has the general commit checklist been followed? (PCYsg-hS-p2)
- [ ] [Have you written new tests](https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md) 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](https://github.com/Automattic/wp-calypso/blob/trunk/packages/state-utils/src/create-selector/README.md) and [Using memoizing selectors](https://react-redux.js.org/api/hooks#using-memoizing-selectors) and [Our Approach to Data](https://github.com/Automattic/wp-calypso/blob/trunk/docs/our-approach-to-data.md)
- [ ] 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)?


Diff:
diff --git a/client/blocks/site/index.jsx b/client/blocks/site/index.jsx
index f8a5a16ba806..31619b9d9ba1 100644
--- a/client/blocks/site/index.jsx
+++ b/client/blocks/site/index.jsx
@@ -17,6 +17,11 @@ import isAtomicSite from 'calypso/state/selectors/is-site-automated-transfer';
 import isSiteP2Hub from 'calypso/state/selectors/is-site-p2-hub';
 import isSiteWPForTeams from 'calypso/state/selectors/is-site-wpforteams';
 import isUnlaunchedSite from 'calypso/state/selectors/is-unlaunched-site';
+import {
+	getDomainsBySiteId,
+	hasLoadedSiteDomains,
+	isRequestingSiteDomains,
+} from 'calypso/state/sites/domains/selectors';
 import { isTrialSite } from 'calypso/state/sites/plans/selectors';
 import {
 	getSite,
@@ -112,22 +117,34 @@ class Site extends Component {
 	};
 
 	renderSiteDomain = () => {
-		const { site, homeLink, translate } = this.props;
+		const { site, homeLink, translate, customDomains, isLoadingDomains } = this.props;
+
+		if ( isLoadingDomains ) {
+			return <div className="site__domain is-loading" />;
+		}
+
+		const siteDomain = customDomains.length > 0 ? customDomains[ 0 ].domain : site.domain;
 
 		return (
 			<div className="site__domain">
 				{ isJetpackCloud() &&
 					homeLink &&
 					translate( 'View %(domain)s', {
-						args: { domain: site.domain },
+						args: { domain: siteDomain },
 					} ) }
-				{ ( ! isJetpackCloud() || ! homeLink ) && site.domain }
+				{ ( ! isJetpackCloud() || ! homeLink ) && siteDomain }
 			</div>
 		);
 	};
 
 	renderDomainAndInlineBadges = () => {
-		const { site, homeLink, translate } = this.props;
+		const { site, homeLink, translate, customDomains, isLoadingDomains } = this.props;
+
+		if ( isLoadingDomains ) {
+			return <div className="site__domain is-loading" />;
+		}
+
+		const siteDomain = customDomains.length > 0 ? customDomains[ 0 ].domain : site.domain;
 
 		return (
 			<div className="site__domain-and-badges">
@@ -135,9 +152,9 @@ class Site extends Component {
 					{ isJetpackCloud() &&
 						homeLink &&
 						translate( 'View %(domain)s', {
-							args: { domain: site.domain },
+							args: { domain: siteDomain },
 						} ) }
-					{ ( ! isJetpackCloud() || ! homeLink ) && site.domain }
+					{ ( ! isJetpackCloud() || ! homeLink ) && siteDomain }
 				</div>
 				{ this.renderSiteBadges() }
 			</div>
@@ -301,10 +318,15 @@ class Site extends Component {
 function mapStateToProps( state, ownProps ) {
 	const siteId = ownProps.siteId || ownProps.site?.ID;
 	const site = siteId ? getSite( state, siteId ) : ownProps.site;
-
+	const siteDomains = getDomainsBySiteId( state, siteId );
+	const customDomains = siteDomains.filter( ( domain ) => ! domain.isWPCOMDomain );
+	const isLoadingDomains =
+		! hasLoadedSiteDomains( state, siteId ) && isRequestingSiteDomains( state, siteId );
 	return {
 		siteId,
 		site,
+		customDomains,
+		isLoadingDomains,
 		isPreviewable: isSitePreviewable( state, siteId ),
 		siteSlug: getSiteSlug( state, siteId ),
 		isSiteUnlaunched: isUnlaunchedSite( state, siteId ),
diff --git a/client/blocks/site/style.scss b/client/blocks/site/style.scss
index 156b38fc7d29..475b0b93a7f5 100644
--- a/client/blocks/site/style.scss
+++ b/client/blocks/site/style.scss
@@ -28,6 +28,20 @@
 		}
 	}
 
+	.site__domain.is-loading {
+		animation: pulse-light 1.8s ease-in-out infinite;
+		background-color: var( --color-neutral-10 );
+		color: transparent;
+		width: 50%;
+		height: 12px;
+		margin-top: 3px;
+		display: block;
+
+		&::after {
+			display: none;
+		}
+	}
+
 	&.is-loading {
 		pointer-events: none;
 
diff --git a/client/blocks/site/test/index.jsx b/client/blocks/site/test/index.jsx
new file mode 100644
index 000000000000..65d2f7af1c1c
--- /dev/null
+++ b/client/blocks/site/test/index.jsx
@@ -0,0 +1,109 @@
+/**
+ * @jest-environment jsdom
+ */
+import { render, screen } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { legacy_configureStore as configureStore } from 'redux-mock-store';
+import Site from '../index';
+
+const mockStore = configureStore();
+
+describe( 'Site', () => {
+	const defaultSite = {
+		ID: 1,
+		URL: 'https://example.wordpress.com',
+		title: 'Test Site',
+		domain: 'example.wordpress.com',
+		is_private: false,
+		options: {},
+	};
+
+	const createStore = ( customState = {} ) => {
+		const defaultState = {
+			sites: {
+				items: {
+					[ defaultSite.ID ]: defaultSite,
+				},
+				domains: {
+					items: {},
+					requesting: {},
+					loaded: {},
+				},
+				plans: {
+					[ defaultSite.ID ]: {},
+				},
+			},
+			ui: {
+				selectedSiteId: defaultSite.ID,
+			},
+			currentUser: {
+				capabilities: {},
+			},
+		};
+
+		return mockStore( {
+			...defaultState,
+			sites: {
+				...defaultState.sites,
+				...customState.sites,
+				domains: {
+					...defaultState.sites.domains,
+					...customState.sites?.domains,
+				},
+			},
+		} );
+	};
+
+	const renderComponent = ( props = {}, store = createStore() ) => {
+		return render(
+			<Provider store={ store }>
+				<Site site={ defaultSite } { ...props } />
+			</Provider>
+		);
+	};
+
+	describe( 'Domain rendering', () => {
+		it( 'renders site domain when no custom domains are present', () => {
+			renderComponent();
+			expect(
+				screen.getByText( defaultSite.domain, { selector: 'div.site__domain' } )
+			).toBeInTheDocument();
+		} );
+
+		it( 'renders custom domain when present', () => {
+			const customDomain = 'example.com';
+			const store = createStore( {
+				sites: {
+					domains: {
+						items: {
+							[ defaultSite.ID ]: [
+								{
+									domain: customDomain,
+									isWPCOMDomain: false,
+								},
+								{
+									domain: defaultSite.domain,
+									isWPCOMDomain: true,
+								},
+							],
+						},
+						requesting: {
+							[ defaultSite.ID ]: false,
+						},
+						loaded: {
+							[ defaultSite.ID ]: true,
+						},
+					},
+					plans: {
+						[ defaultSite.ID ]: {},
+					},
+				},
+			} );
+
+			renderComponent( {}, store );
+			expect(
+				screen.getByText( customDomain, { selector: 'div.site__domain' } )
+			).toBeInTheDocument();
+		} );
+	} );
+} );
diff --git a/client/my-sites/customer-home/cards/features/site-preview/index.tsx b/client/my-sites/customer-home/cards/features/site-preview/index.tsx
index 02682cbda3cc..2c125853a169 100644
--- a/client/my-sites/customer-home/cards/features/site-preview/index.tsx
+++ b/client/my-sites/customer-home/cards/features/site-preview/index.tsx
@@ -9,9 +9,11 @@ import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
 import { Truncated } from 'calypso/sites-dashboard/components/sites-site-url';
 import { useSelector } from 'calypso/state';
 import { canCurrentUser } from 'calypso/state/selectors/can-current-user';
+import { createSiteDomainObject } from 'calypso/state/sites/domains/assembler';
+import { getDomainsBySiteId } from 'calypso/state/sites/domains/selectors';
 import { getSelectedSite } from 'calypso/state/ui/selectors';
-import './style.scss';
 import { SitePreviewEllipsisMenu } from './site-preview-ellipsis-menu';
+import './style.scss';
 
 interface ThumbnailWrapperProps {
 	showEditSite: boolean;
@@ -64,6 +66,10 @@ const SitePreview = ( {
 	);
 	const isMobile = useMobileBreakpoint();
 
+	const customDomains = useSelector( ( state ) =>
+		getDomainsBySiteId( state, selectedSite?.ID ?? 0 )
+	);
+
 	if ( isMobile ) {
 		return <></>;
 	}
@@ -77,13 +83,18 @@ const SitePreview = ( {
 		  } )
 		: '#';
 
+	const domains = customDomains.map( createSiteDomainObject );
+
+	const nonWpcomDomains = domains.filter( ( domain ) => ! domain.isWPCOMDomain );
+
+	const siteDomain = nonWpcomDomains?.length ? nonWpcomDomains[ 0 ].domain : selectedSite?.slug;
+
 	// We use an iframe rather than mShot to not cache changes.
 	const iframeSrcKeepHomepage = selectedSite
 		? `//${ selectedSite.slug }/?hide_banners=true&preview_overlay=true&preview=true`
 		: '#';
 
 	const selectedSiteURL = selectedSite ? selectedSite.URL : '#';
-	const selectedSiteSlug = selectedSite ? selectedSite.slug : '...';
 	const selectedSiteName = selectedSite ? selectedSite.name : '&nbsp;';
 
 	return (
@@ -117,7 +128,7 @@ const SitePreview = ( {
 							title={ selectedSiteURL }
 							className="home-site-preview__info-domain"
 						>
-							<Truncated>{ selectedSiteSlug }</Truncated>
+							<Truncated>{ siteDomain }</Truncated>
 						</a>
 					</div>
 					<SitePreviewEllipsisMenu />
diff --git a/client/my-sites/customer-home/components/celebrate-launch-modal.jsx b/client/my-sites/customer-home/components/celebrate-launch-modal.jsx
index 1a68e23084dd..64007491cd14 100644
--- a/client/my-sites/customer-home/components/celebrate-launch-modal.jsx
+++ b/client/my-sites/customer-home/components/celebrate-launch-modal.jsx
@@ -21,11 +21,10 @@ function CelebrateLaunchModal( { setModalIsOpen, site, allDomains } ) {
 	const transformedDomains = allDomains.map( createSiteDomainObject );
 	const [ clipboardCopied, setClipboardCopied ] = useState( false );
 	const clipboardButtonEl = useRef( null );
-	const hasCustomDomain = Boolean(
-		transformedDomains.find( ( domain ) => ! domain.isWPCOMDomain )
-	);
+	const customDomains = transformedDomains.filter( ( domain ) => ! domain.isWPCOMDomain );
+	const hasCustomDomain = customDomains.length > 0;
 	const hasEnTranslation = useHasEnTranslation();
-
+	const siteDomain = hasCustomDomain ? customDomains[ 0 ].domain : site.slug;
 	useEffect( () => {
 		// remove the celebrateLaunch URL param without reloading the page as soon as the modal loads
 		// make sure the modal is shown only once
@@ -124,10 +123,10 @@ function CelebrateLaunchModal( { setModalIsOpen, site, allDomains } ) {
 				<div className="launched__modal-actions">
 					<div className="launched__modal-site">
 						<div className="launched__modal-domain">
-							<p className="launched__modal-domain-text">{ site.slug }</p>
+							<p className="launched__modal-domain-text">{ siteDomain }</p>
 							<ClipboardButton
 								aria-label={ translate( 'Copy URL' ) }
-								text={ site.slug }
+								text={ siteDomain }
 								className="launchpad__clipboard-button"
 								borderless
 								compact
diff --git a/client/my-sites/customer-home/test/celebrate-launch-modal.tsx b/client/my-sites/customer-home/test/celebrate-launch-modal.tsx
new file mode 100644
index 000000000000..d590364fb45d
--- /dev/null
+++ b/client/my-sites/customer-home/test/celebrate-launch-modal.tsx
@@ -0,0 +1,91 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { Provider } from 'react-redux';
+import configureStore from 'redux-mock-store';
+import CelebrateLaunchModal from '../components/celebrate-launch-modal';
+
+const mockStore = configureStore();
+
+describe( 'CelebrateLaunchModal', () => {
+	const mockSetModalIsOpen = jest.fn();
+
+	const defaultProps = {
+		setModalIsOpen: mockSetModalIsOpen,
+		site: {
+			slug: 'test-site.wordpress.com',
+			URL: 'https://test-site.wordpress.com',
+			plan: {
+				is_free: true,
+				product_slug: 'free_plan',
+			},
+		},
+		allDomains: [],
+	};
+
+	test( 'renders site slug when no custom domain is present', () => {
+		const store = mockStore( {} );
+		render(
+			<Provider store={ store }>
+				<CelebrateLaunchModal { ...defaultProps } />
+			</Provider>
+		);
+
+		expect( screen.getByText( 'test-site.wordpress.com' ) ).toBeInTheDocument();
+	} );
+
+	test( 'renders custom domain when present', () => {
+		const store = mockStore( {} );
+		const customDomain = 'mycustomdomain.com';
+		const propsWithCustomDomain = {
+			...defaultProps,
+			allDomains: [
+				{
+					domain: customDomain,
+					type: 'REGISTERED',
+					wpcom_domain: false,
+				},
+			],
+		};
+
+		render(
+			<Provider store={ store }>
+				<CelebrateLaunchModal { ...propsWithCustomDomain } />
+			</Provider>
+		);
+
+		expect( screen.getByText( customDomain ) ).toBeInTheDocument();
+	} );
+
+	test( 'prefers custom domain over site slug when both are present', () => {
+		const store = mockStore( {} );
+		const customDomain = 'mycustomdomain.com';
+		const propsWithBothDomains = {
+			...defaultProps,
+			allDomains: [
+				{
+					domain: customDomain,
+					type: 'REGISTERED',
+					wpcom_domain: false,
+				},
+				{
+					domain: 'test-site.wordpress.com',
+					type: 'WPCOM',
+					wpcom_domain: true,
+				},
+			],
+		};
+
+		render(
+			<Provider store={ store }>
+				<CelebrateLaunchModal { ...propsWithBothDomains } />
+			</Provider>
+		);
+
+		expect( screen.getByText( customDomain ) ).toBeInTheDocument();
+		expect( screen.queryByText( 'test-site.wordpress.com' ) ).not.toBeInTheDocument();
+	} );
+} );


Reviews:
user: login: paulopmt1
body: Good job @vykes-mac, everything is working as expected!

- [x] Verify the that your custom domain is shown in My Home sidebar instead of .wordpress.com subdomain
- [x] Launch your site immediately and verify the custom domain is shown in the celebration modal instead of wordpress subdomain.
- [x] Clicking View site should take you to your site but the url will be .wordpress.com subdomain until the domain setup is completed in the backend.


| Before | After |
|--------|--------|
| ![image](https://github.com/user-attachments/assets/d7fd32f8-c05e-4e13-9030-118066ecbc4c) | ![image](https://github.com/user-attachments/assets/80c631be-32f7-488c-8636-a470d60f1c18) | 
| ![image](https://github.com/user-attachments/assets/ade6ede4-af1d-4e98-8d66-427db4f27e3b) | ![image](https://github.com/user-attachments/assets/b435a7ec-3926-496f-b56f-d2ef07429a39) |
| ![image](https://github.com/user-attachments/assets/eeadda03-5795-4b99-b0a6-d306d1b019ab) | ![image](https://github.com/user-attachments/assets/9e942ec3-7906-4a0f-8ece-c32d01ea2543) | 

Left some non-blocking comments in the PR.
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-20T18:31:08Z
user: login: p-jackson
body: Works great. I tested with purchasing zero and two domains during onboarding just to double check. I like the rationale of using the custom domain when it's just for display, and the site's official domain when it actually needs to be visited.

I'm approving, but one other place which could be fixed is this panel in My Home

![CleanShot 2025-03-21 at 19 58 39@2x](https://github.com/user-attachments/assets/27589eea-c823-44be-b7c4-09d97cc7dd32)

state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-21T07:00:50Z

Review comments:
diff_hunk: @@ -21,11 +21,10 @@ function CelebrateLaunchModal( { setModalIsOpen, site, allDomains } ) {
 	const transformedDomains = allDomains.map( createSiteDomainObject );
 	const [ clipboardCopied, setClipboardCopied ] = useState( false );
 	const clipboardButtonEl = useRef( null );
-	const hasCustomDomain = Boolean(
-		transformedDomains.find( ( domain ) => ! domain.isWPCOMDomain )
-	);
+	const customDomains = transformedDomains.filter( ( domain ) => ! domain.isWPCOMDomain );
path: client/my-sites/customer-home/components/celebrate-launch-modal.jsx
user: login: paulopmt1
body: Nice! Can we add a unit test for these changes?
created_at: 2025-03-20T18:28:22Z
author_association: CONTRIBUTOR
diff_hunk: @@ -112,32 +113,44 @@ class Site extends Component {
 	};
 
 	renderSiteDomain = () => {
-		const { site, homeLink, translate } = this.props;
+		const { site, homeLink, translate, customDomains, isLoadingDomains } = this.props;
+
+		if ( isLoadingDomains ) {
+			return <div className="site__domain is-loading" />;
+		}
+
+		const siteDomain = customDomains.length > 0 ? customDomains[ 0 ].domain : site.domain;
 
 		return (
 			<div className="site__domain">
 				{ isJetpackCloud() &&
 					homeLink &&
 					translate( 'View %(domain)s', {
-						args: { domain: site.domain },
+						args: { domain: siteDomain },
 					} ) }
-				{ ( ! isJetpackCloud() || ! homeLink ) && site.domain }
+				{ ( ! isJetpackCloud() || ! homeLink ) && siteDomain }
 			</div>
 		);
 	};
 
 	renderDomainAndInlineBadges = () => {
-		const { site, homeLink, translate } = this.props;
+		const { site, homeLink, translate, customDomains, isLoadingDomains } = this.props;
+
+		if ( isLoadingDomains ) {
+			return <div className="site__domain is-loading" />;
+		}
+
+		const siteDomain = customDomains.length > 0 ? customDomains[ 0 ].domain : site.domain;
path: client/blocks/site/index.jsx
user: login: paulopmt1
body: It's working as expected! A unit test for them would also be great 
created_at: 2025-03-20T18:29:41Z
author_association: CONTRIBUTOR

PR comments:
user: login: github-actions[bot]
created_at: 2025-03-20T01:30:13Z
body: <details>
<summary>Calypso Live <a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-138057">(direct link)</a></summary>
<table>
<tr>
<td>
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https%3A%2F%2Fcalypso.live%3Fimage%3Dregistry.a8c.com%2Fcalypso%2Fapp%3Abuild-138057%26flags%3Doauth&choe=UTF-8" />
</td>
<td>
<a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-138057">https://calypso.live?image=registry.a8c.com/calypso/app:build-138057</a>
</td>
</tr>
</table>
</details>
<details>
<summary>Jetpack Cloud live <a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-138057&env=jetpack">(direct link)</a></summary>
<table>
<tr>
<td>
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https%3A%2F%2Fcalypso.live%3Fimage%3Dregistry.a8c.com%2Fcalypso%2Fapp%3Abuild-138057%26env%3Djetpack%26flags%3Doauth&choe=UTF-8" />
</td>
<td>
<a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-138057&env=jetpack">https://calypso.live?image=registry.a8c.com/calypso/app:build-138057&env=jetpack</a>
</td>
</tr>
</table>
</details>
<details>
<summary>Automattic for Agencies live <a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-138057&env=a8c-for-agencies">(direct link)</a></summary>
<table>
<tr>
<td>
<img src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=https%3A%2F%2Fcalypso.live%3Fimage%3Dregistry.a8c.com%2Fcalypso%2Fapp%3Abuild-138057%26env%3Da8c-for-agencies%26flags%3Doauth&choe=UTF-8" />
</td>
<td>
<a href="https://calypso.live?image=registry.a8c.com/calypso/app:build-138057&env=a8c-for-agencies">https://calypso.live?image=registry.a8c.com/calypso/app:build-138057&env=a8c-for-agencies</a>
</td>
</tr>
</table>
</details>
<!--calypso-live-watermark:apr@v1-->
author_association: NONE
user: login: matticbot
created_at: 2025-03-20T01:30:27Z
body: <!-- icfy-watermark: c52822 -->
Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

**Sections** (~340 bytes added 📈 [gzipped])
<details>

```
name                               parsed_size           gzip_size
home                                    +609 B  (+0.0%)     +148 B  (+0.0%)
checkout                                +583 B  (+0.0%)     +179 B  (+0.0%)
woocommerce-installation                +403 B  (+0.1%)     +103 B  (+0.1%)
woocommerce                             +403 B  (+0.1%)     +103 B  (+0.1%)
themes                                  +403 B  (+0.0%)     +103 B  (+0.0%)
theme                                   +403 B  (+0.1%)     +103 B  (+0.0%)
subscribers                             +403 B  (+0.0%)     +103 B  (+0.0%)
stats                                   +403 B  (+0.0%)     +103 B  (+0.0%)
staging-site                            +403 B  (+0.0%)     +103 B  (+0.0%)
sites-dashboard                         +403 B  (+0.0%)     +103 B  (+0.0%)
site-settings                           +403 B  (+0.0%)     +103 B  (+0.0%)
site-purchases                          +403 B  (+0.0%)     +103 B  (+0.0%)
site-performance                        +403 B  (+0.0%)     +103 B  (+0.0%)
site-monitoring                         +403 B  (+0.0%)     +103 B  (+0.0%)
site-logs                               +403 B  (+0.0%)     +103 B  (+0.0%)
settings-writing                        +403 B  (+0.1%)     +103 B  (+0.1%)
settings-security                       +403 B  (+0.1%)     +103 B  (+0.1%)
settings-reading                        +403 B  (+0.1%)     +103 B  (+0.1%)
settings-podcast                        +403 B  (+0.1%)     +103 B  (+0.1%)
settings-performance                    +403 B  (+0.1%)     +103 B  (+0.1%)
settings-newsletter                     +403 B  (+0.1%)     +103 B  (+0.1%)
settings-jetpack                        +403 B  (+0.1%)     +103 B  (+0.1%)
settings-discussion                     +403 B  (+0.1%)     +103 B  (+0.1%)
settings                                +403 B  (+0.0%)     +103 B  (+0.0%)
scan                                    +403 B  (+0.0%)     +103 B  (+0.0%)
reader                                  +403 B  (+0.0%)     +103 B  (+0.0%)
purchases                               +403 B  (+0.0%)     +103 B  (+0.0%)
promote-post-i2                         +403 B  (+0.1%)     +103 B  (+0.0%)
preview                                 +403 B  (+0.1%)     +103 B  (+0.1%)
posts-custom                            +403 B  (+0.1%)     +103 B  (+0.0%)
posts                                   +403 B  (+0.1%)     +103 B  (+0.0%)
plugins                                 +403 B  (+0.0%)     +103 B  (+0.0%)
plans                                   +403 B  (+0.0%)     +103 B  (+0.0%)
people                                  +403 B  (+0.0%)     +103 B  (+0.0%)
pages                                   +403 B  (+0.1%)     +103 B  (+0.1%)
overview                                +403 B  (+0.0%)     +103 B  (+0.0%)
notification-settings                   +403 B  (+0.1%)     +116 B  (+0.1%)
migrate                                 +403 B  (+0.1%)     +103 B  (+0.1%)
media                                   +403 B  (+0.0%)     +103 B  (+0.0%)
marketplace                             +403 B  (+0.1%)     +103 B  (+0.1%)
marketing                               +403 B  (+0.0%)     +103 B  (+0.0%)
jetpack-social                          +403 B  (+0.1%)     +103 B  (+0.1%)
jetpack-search                          +403 B  (+0.1%)     +103 B  (+0.1%)
jetpack-connect                         +403 B  (+0.0%)     +103 B  (+0.0%)
jetpack-cloud-settings                  +403 B  (+0.1%)     +103 B  (+0.0%)
jetpack-cloud-pricing                   +403 B  (+0.1%)     +103 B  (+0.0%)
jetpack-cloud-plugin-management         +403 B  (+0.0%)     +103 B  (+0.0%)
jetpack-cloud-partner-portal            +403 B  (+0.0%)     +103 B  (+0.0%)
jetpack-cloud-overview                  +403 B  (+0.1%)     +103 B  (+0.1%)
jetpack-cloud-features-comparison       +403 B  (+0.1%)     +103 B  (+0.1%)
jetpack-cloud-agency-dashboard          +403 B  (+0.0%)     +103 B  (+0.0%)
jetpack-cloud                           +403 B  (+0.1%)     +103 B  (+0.1%)
import                                  +403 B  (+0.1%)     +103 B  (+0.0%)
hosting                                 +403 B  (+0.0%)     +103 B  (+0.0%)
gutenberg-editor                        +403 B  (+0.1%)     +103 B  (+0.1%)
google-my-business                      +403 B  (+0.1%)     +103 B  (+0.1%)
github-deployments                      +403 B  (+0.0%)     +103 B  (+0.0%)
export                                  +403 B  (+0.1%)     +103 B  (+0.1%)
email                                   +403 B  (+0.0%)     +103 B  (+0.0%)
earn                                    +403 B  (+0.0%)     +103 B  (+0.0%)
domains                                 +403 B  (+0.0%)     +103 B  (+0.0%)
customize                               +403 B  (+0.1%)     +103 B  (+0.1%)
concierge                               +403 B  (+0.1%)     +103 B  (+0.1%)
comments                                +403 B  (+0.1%)     +103 B  (+0.0%)
backup                                  +403 B  (+0.0%)     +103 B  (+0.0%)
add-ons                                 +403 B  (+0.1%)     +103 B  (+0.1%)
activity                                +403 B  (+0.1%)     +103 B  (+0.0%)
account                                 +403 B  (+0.1%)     +103 B  (+0.0%)
a8c-for-agencies-sites                  +403 B  (+0.0%)     +103 B  (+0.0%)
a8c-for-agencies-plugins                +403 B  (+0.0%)     +103 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.
</details>

**Async-loaded Components** (~401 bytes added 📈 [gzipped])
<details>

```
name                                             parsed_size           gzip_size
async-load-signup-steps-site-picker                   +981 B  (+0.4%)     +325 B  (+0.4%)
async-load-signup-steps-difm-site-picker              +981 B  (+0.4%)     +325 B  (+0.4%)
async-load-design-blocks                              +403 B  (+0.0%)     +103 B  (+0.0%)
async-load-calypso-blocks-editor-checkout-modal       +180 B  (+0.0%)      +76 B  (+0.0%)
```

React components that are loaded lazily, when a certain part of UI is displayed for the first time.
</details>

**Legend**
<details>
<summary>What is parsed and gzip size?</summary>

**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.
</details>

Generated by performance advisor bot at [iscalypsofastyet.com](http://iscalypsofastyet.com).
author_association: CONTRIBUTOR
user: login: matticbot
created_at: 2025-03-20T21:54:45Z
body: **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 update/domain-consistency-on-home` on your sandbox.
<!--calypso-app-artifacts-watermark:apr@v1-->
author_association: CONTRIBUTOR
user: login: vykes-mac
created_at: 2025-03-21T19:31:11Z
body: > Works great. I tested with purchasing zero and two domains during onboarding just to double check. I like the rationale of using the custom domain when it's just for display, and the site's official domain when it actually needs to be visited.
> 
> I'm approving, but one other place which could be fixed is this panel in My Home

@p-jackson Thanks for the review and pointing out that panel. will fix that before merging
author_association: CONTRIBUTOR