Update translation handling experience

src/components/site-form.tsx

@@ -1,6 +1,6 @@
 import { Icon, SelectControl } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf, _n } from '@wordpress/i18n';
 import { tip, warning, trash, chevronRight, chevronDown, chevronLeft } from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
 import { FormEvent, useEffect, useRef, useState } from 'react';
@@ -266,6 +266,10 @@ export const SiteForm = ( {
 	const getDocsLink = useDocsLink();
 	const dispatch = useAppDispatch();
 	const isOffline = useOffline();
+
+	const shouldShowCustomDomainError = useCustomDomain && customDomainError;
+	const errorCount = [ error, shouldShowCustomDomainError ].filter( Boolean ).length;
+
 	const offlineMessage = __( 'Changing WordPress version requires an internet connection.' );
 	const wpVersions = useRootSelector(
 		wordpressVersionsSelectors.selectWordPressVersionsWithLatest
@@ -294,7 +298,6 @@ export const SiteForm = ( {
 		chevronIcon = chevronRight;
 	}
 	const generatedDomainName = generateCustomDomainFromSiteName( siteName );
-	const shouldShowCustomDomainError = customDomainError && useCustomDomain;
 
 	return (
 		<form className={ className } onSubmit={ onSubmit }>
@@ -354,19 +357,21 @@ export const SiteForm = ( {
 											{ __( 'Advanced settings' ) }
 										</div>
 									</Button>
-									{ ( error || shouldShowCustomDomainError ) && (
+									{ errorCount > 0 && (
 										<span className="text-red-500 text-[13px] leading-[16px] ml-2 flex items-center">
 											<Icon icon={ warning } size={ 16 } className="mr-1 fill-red-500" />
-											{ error && shouldShowCustomDomainError
-												? __( '2 errors found' )
-												: __( '1 error found' ) }
+											{ sprintf(
+												/* translators: %d: number of errors found */
+												_n( '%d error found', '%d errors found', errorCount ),
+												errorCount
+											) }
 										</span>
 									) }
 								</div>
 								<div
 									className={ cx(
-										'transition-all duration-500 ease-in-out overflow-hidden flex flex-col gap-2',
-										isAdvancedSettingsVisible ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'
+										'transition-all duration-500 ease-in-out overflow-hidden flex flex-col gap-2 interpolate-size-allow-keywords',
+										isAdvancedSettingsVisible ? 'h-auto opacity-100' : 'h-0 opacity-0'
 									) }
 								>
 									<div className={ cx( 'flex flex-col gap-1.5 leading-4 py-2' ) }>

src/index.css

@@ -3,6 +3,12 @@
 @tailwind utilities;
 @import '@wordpress/components/build-style/style.css';
 
+@layer utilities {
+	.interpolate-size-allow-keywords {
+		interpolate-size: allow-keywords;
+	}
+}
+
 body {
 	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 }

src/modules/site-settings/edit-site-details.tsx

@@ -121,7 +121,6 @@ export default function EditSiteDetails( { currentWpVersion, onSave }: EditSiteD
 				} catch ( wpError ) {
 					console.error( 'Error changing WordPress version:', wpError );
 					const errorMessage = stripAnsi( ( wpError as Error )?.message );
-					setIsChangeWpError( __( 'Error changing WordPress version.' ) );
 					getIpcApi().showErrorMessageBox( {
 						title: __( 'Error changing WordPress version' ),
 						message: errorMessage,

src/modules/site-settings/tests/edit-site-details.test.tsx

@@ -256,8 +256,6 @@ describe( 'EditSiteDetails', () => {
 				message: 'Update failed',
 			} );
 		} );
-
-		expect( screen.getByText( 'Error changing WordPress version.' ) ).toBeInTheDocument();
 	} );
 
 	it( 'should disable form controls when site is being edited', async () => {