Improve util function

Author: ellatrix

client/dashboard/sites/overview/site-card.tsx

@@ -11,17 +11,15 @@ import { dateI18n } from '@wordpress/date';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { sitePHPVersionQuery, siteCurrentPlanQuery } from '../../app/queries';
-import { getBlurredStyles } from '../../utils/blurred-styles';
+import { getIsBlurredProps } from '../../utils/is-blurred';
 import { getSiteStatusLabel } from '../../utils/site-status';
 import { getFormattedWordPressVersion } from '../../utils/wp-version';
 import SitePreview from '../site-preview';
 import type { Site } from '../../data/types';
 
 function PHPVersion( { siteSlug }: { siteSlug: string } ) {
 	return (
-		useQuery( sitePHPVersionQuery( siteSlug ) ).data ?? (
-			<span style={ getBlurredStyles() }>X.Y</span>
-		)
+		useQuery( sitePHPVersionQuery( siteSlug ) ).data ?? <span { ...getIsBlurredProps() }>X.Y</span>
 	);
 }
 
@@ -124,30 +122,29 @@ function PlanDetails( { site }: { site: Site } ) {
 			<FieldTitle>{ __( 'Plan' ) }</FieldTitle>
 			{ product_name_short && <Text>{ product_name_short }</Text> }
 			{ isFree ? (
-				<Text>{ __( 'No expiration date.' ) }</Text>
+				<>
+					<Text>{ __( 'No expiration date.' ) }</Text>
+					<Button href={ `/plans/${ site.slug }` } variant="link">
+						{ __( 'Upgrade' ) }
+					</Button>
+				</>
 			) : (
-				// Show a blurred time while we wait for the current plan.
-				<Text style={ currentPlan ? undefined : getBlurredStyles() }>
-					{ getPlanExpirationMessage(
-						currentPlan ? currentPlan.expiry : new Date().toISOString()
-					) }
-				</Text>
-			) }
-			{ isFree ? (
-				<Button href={ `/plans/${ site.slug }` } variant="link">
-					{ __( 'Upgrade' ) }
-				</Button>
-			) : (
-				<Button
-					// Show a blurred button while we wait for the plan ID.
-					// @ts-expect-error inert is not typed
-					inert={ currentPlan ? undefined : 'true' }
-					style={ currentPlan ? undefined : getBlurredStyles() }
-					href={ currentPlan ? `/purchases/subscriptions/${ site.slug }/${ currentPlan.id }` : '' }
-					variant="link"
-				>
-					{ __( 'Manage subscription' ) }
-				</Button>
+				<>
+					<Text { ...getIsBlurredProps( { enabled: ! currentPlan } ) }>
+						{ getPlanExpirationMessage(
+							currentPlan ? currentPlan.expiry : new Date().toISOString()
+						) }
+					</Text>
+					<Button
+						{ ...getIsBlurredProps( { enabled: ! currentPlan } ) }
+						href={
+							currentPlan ? `/purchases/subscriptions/${ site.slug }/${ currentPlan.id }` : ''
+						}
+						variant="link"
+					>
+						{ __( 'Manage subscription' ) }
+					</Button>
+				</>
 			) }
 		</VStack>
 	);

client/dashboard/sites/overview/uptime-card.tsx

@@ -3,7 +3,7 @@ import { VisuallyHidden } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { connection } from '@wordpress/icons';
 import { siteMonitorUptimeQuery } from '../../app/queries';
-import { getBlurredStyles } from '../../utils/blurred-styles';
+import { getIsBlurredProps } from '../../utils/is-blurred';
 import OverviewCard, { OverviewCardProgressBar } from '../overview-card';
 import type { Site } from '../../data/types';
 
@@ -35,7 +35,7 @@ function UptimeCardEnabled( { siteSlug }: { siteSlug: string } ) {
 			heading={
 				uptimePercentage === undefined ? (
 					<>
-						<span style={ getBlurredStyles() }>{ sprintf( percentageString, '100' ) }</span>
+						<span { ...getIsBlurredProps() }>{ sprintf( percentageString, '100' ) }</span>
 						<VisuallyHidden>{ __( 'Loading…' ) }</VisuallyHidden>
 					</>
 				) : (

client/dashboard/utils/blurred-styles.ts

@@ -0,0 +1,5 @@
+import './style.scss';
+
+export function getIsBlurredProps( { enabled = true }: { enabled?: boolean } = {} ) {
+	return enabled ? { className: 'is-blurred', inert: 'true' } : {};
+}

client/dashboard/utils/is-blurred/index.ts

@@ -0,0 +1,5 @@
+.is-blurred {
+	user-select: none;
+	filter: blur(0.3em);
+	opacity: 0.5;
+}