Studio: Force latest WP version for creating site if the user goes offline

src/components/site-form.tsx

@@ -424,6 +424,9 @@ export const SiteForm = ( {
 												fallbackOptions={ [
 													{ label: __( 'Latest' ), value: DEFAULT_WORDPRESS_VERSION },
 												] }
+												offlineMessage={ __(
+													'You are currently offline so your site will be created with the latest version. Selecting a different WordPress version requires an internet connection.'
+												) }
 											/>
 										</div>
 

src/components/tests/add-site.test.tsx

@@ -416,7 +416,9 @@ describe( 'AddSite', () => {
 		await user.hover( wpVersionSelect );
 
 		expect(
-			screen.getByText( 'Changing WordPress version requires an internet connection.' )
+			screen.getByText(
+				'You are currently offline so your site will be created with the latest version. Selecting a different WordPress version requires an internet connection.'
+			)
 		).toBeInTheDocument();
 	} );
 
@@ -433,7 +435,9 @@ describe( 'AddSite', () => {
 		await user.hover( wpVersionSelect );
 
 		expect(
-			screen.queryByText( 'Changing WordPress version requires an internet connection.' )
+			screen.queryByText(
+				'You are currently offline so your site will be created with the latest version. Selecting a different WordPress version requires an internet connection.'
+			)
 		).not.toBeInTheDocument();
 	} );
 } );

src/components/tests/onboarding.test.tsx

@@ -278,7 +278,9 @@ describe( 'Onboarding Component', () => {
 		await user.hover( wpVersionSelect );
 
 		expect(
-			screen.getByText( 'Changing WordPress version requires an internet connection.' )
+			screen.getByText(
+				'You are currently offline so your site will be created with the latest version. Selecting a different WordPress version requires an internet connection.'
+			)
 		).toBeInTheDocument();
 	} );
 
@@ -292,7 +294,9 @@ describe( 'Onboarding Component', () => {
 		await user.hover( wpVersionSelect );
 
 		expect(
-			screen.queryByText( 'Changing WordPress version requires an internet connection.' )
+			screen.queryByText(
+				'You are currently offline so your site will be created with the latest version. Selecting a different WordPress version requires an internet connection.'
+			)
 		).not.toBeInTheDocument();
 	} );
 } );

src/components/wp-version-selector/index.tsx

@@ -1,6 +1,7 @@
 import { SelectControl, Icon } from '@wordpress/components';
 import { info } from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
+import { useEffect } from 'react';
 import offlineIcon from 'src/components/offline-icon';
 import { Tooltip } from 'src/components/tooltip';
 import { useOffline } from 'src/hooks/use-offline';
@@ -20,6 +21,8 @@ type WPVersionSelectorProps = {
 	extraOptions?: { label: string; value: string }[];
 	/** Fallback options shown when available versions couldn't be fetched */
 	fallbackOptions: { label: string; value: string }[];
+	/** Custom message to show when offline. If not provided, will use the default message */
+	offlineMessage?: string;
 };
 
 export const WPVersionSelector = ( {
@@ -29,12 +32,22 @@ export const WPVersionSelector = ( {
 	disabled = false,
 	extraOptions,
 	fallbackOptions,
+	offlineMessage,
 }: WPVersionSelectorProps ) => {
 	const { __ } = useI18n();
 	const isOffline = useOffline();
-	const offlineMessage = __( 'Changing WordPress version requires an internet connection.' );
+	const defaultOfflineMessage = __( 'Changing WordPress version requires an internet connection.' );
+	const message = offlineMessage || defaultOfflineMessage;
 	const { data: wpVersions = [] } = useGetWordPressVersions();
 
+	// Force latest version if the user goes offline
+	useEffect( () => {
+		if ( isOffline ) {
+			// Always force to latest when offline
+			onChange( DEFAULT_WORDPRESS_VERSION );
+		}
+	}, [ isOffline, onChange ] );
+
 	let betaVersions: { label: string; value: string }[] = wpVersions.filter(
 		( version ) => version.isBeta || version.isDevelopment
 	);
@@ -73,7 +86,7 @@ export const WPVersionSelector = ( {
 			<Tooltip
 				disabled={ ! isOffline }
 				icon={ offlineIcon }
-				text={ offlineMessage }
+				text={ message }
 				placement="top-start"
 				className="flex flex-1 flex-col"
 			>