From 7567c001965336be0ab07d760a2d8cc228eab182 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gergely=20Cs=C3=A9csey?= <gcsecsey@gmail.com>
Date: Thu, 27 Aug 2026 10:45:17 +0100
Subject: [PATCH 01/15] Rename the "latest" WordPress version option to
 "Auto-update" and name the installed version

---
 apps/cli/commands/config/set.ts               |  4 +-
 apps/cli/commands/site/create.ts              |  4 +-
 .../components/wp-version-selector/index.tsx  | 15 +++--
 .../add-site/components/create-site-form.tsx  |  3 +-
 .../site-settings/edit-site-details.tsx       |  3 +
 .../tests/edit-site-details.test.tsx          | 25 +++++++
 .../src/components/site-fields/index.test.ts  | 67 +++++++++++++++++++
 apps/ui/src/components/site-fields/index.ts   |  9 ++-
 .../site-fields/wp-version-control.tsx        | 20 +++---
 .../site-overview-view/index.test.tsx         | 25 ++++++-
 .../components/site-settings-view/index.tsx   | 10 ++-
 .../common/lib/wordpress-version-labels.ts    | 26 +++++++
 12 files changed, 188 insertions(+), 23 deletions(-)
 create mode 100644 apps/ui/src/components/site-fields/index.test.ts
 create mode 100644 packages/common/lib/wordpress-version-labels.ts

diff --git a/apps/cli/commands/config/set.ts b/apps/cli/commands/config/set.ts
index e07df34860..55e9f208a4 100644
--- a/apps/cli/commands/config/set.ts
+++ b/apps/cli/commands/config/set.ts
@@ -423,7 +423,9 @@ export const registerCommand = ( yargs: StudioArgv ) => {
 				} )
 				.option( 'wp', {
 					type: 'string',
-					description: __( 'WordPress version' ),
+					description: __(
+						'WordPress version. Use "latest" to let the site auto-update, or pin a version (e.g., "6.4", "6.4.1")'
+					),
 					coerce: ( value: string ) => {
 						if ( ! isValidWordPressVersion( value ) ) {
 							throw new ValidationError(
diff --git a/apps/cli/commands/site/create.ts b/apps/cli/commands/site/create.ts
index f3cbbe0bc5..39ef10181d 100644
--- a/apps/cli/commands/site/create.ts
+++ b/apps/cli/commands/site/create.ts
@@ -564,7 +564,9 @@ export const registerCommand = ( yargs: StudioArgv ) => {
 				} )
 				.option( 'wp', {
 					type: 'string',
-					describe: __( 'WordPress version (e.g., "latest", "6.4", "6.4.1")' ),
+					describe: __(
+						'WordPress version. Use "latest" to let the site auto-update, or pin a version (e.g., "6.4", "6.4.1")'
+					),
 					defaultDescription: DEFAULT_WORDPRESS_VERSION,
 					coerce: coerceWpVersion,
 				} )
diff --git a/apps/studio/src/components/wp-version-selector/index.tsx b/apps/studio/src/components/wp-version-selector/index.tsx
index 2f17ba3229..d38c078f45 100644
--- a/apps/studio/src/components/wp-version-selector/index.tsx
+++ b/apps/studio/src/components/wp-version-selector/index.tsx
@@ -1,4 +1,5 @@
 import { DEFAULT_WORDPRESS_VERSION, MINIMUM_WORDPRESS_VERSION } from '@studio/common/constants';
+import { getAutoUpdateVersionLabel } from '@studio/common/lib/wordpress-version-labels';
 import { isWordPressBetaVersion } from '@studio/common/lib/wordpress-version-utils';
 import { SelectControl, Icon } from '@wordpress/components';
 import { info } from '@wordpress/icons';
@@ -23,6 +24,8 @@ type WPVersionSelectorProps = {
 	fallbackOptions: { label: string; value: string }[];
 	/** Custom message to show when offline. If not provided, will use the default message */
 	offlineMessage?: string;
+	/** Shown in the auto-update label. Only pass it for auto-updating sites. */
+	installedVersion?: string;
 };
 
 export const WPVersionSelector = ( {
@@ -33,6 +36,7 @@ export const WPVersionSelector = ( {
 	extraOptions,
 	fallbackOptions,
 	offlineMessage,
+	installedVersion,
 }: WPVersionSelectorProps ) => {
 	const { __ } = useI18n();
 	const isOffline = useOffline();
@@ -76,7 +80,7 @@ export const WPVersionSelector = ( {
 		<label className="flex flex-1 flex-col gap-1.5 leading-4">
 			<span className="font-semibold flex items-center gap-0.5">
 				{ __( 'WordPress version' ) }
-				{ selectedValue !== 'latest' && (
+				{ selectedValue !== DEFAULT_WORDPRESS_VERSION && (
 					<Tooltip
 						text={ __( 'WordPress Core automatic updates will be disabled for this site.' ) }
 						placement="top-start"
@@ -102,11 +106,10 @@ export const WPVersionSelector = ( {
 				>
 					{ wpVersions.length > 0 ? (
 						<>
-							<optgroup label={ __( 'Auto-updating' ) }>
-								<option key={ DEFAULT_WORDPRESS_VERSION } value={ DEFAULT_WORDPRESS_VERSION }>
-									{ __( 'latest' ) }
-								</option>
-							</optgroup>
+							{ /* Ungrouped: the option names the mode itself. */ }
+							<option key={ DEFAULT_WORDPRESS_VERSION } value={ DEFAULT_WORDPRESS_VERSION }>
+								{ getAutoUpdateVersionLabel( installedVersion ) }
+							</option>
 							<optgroup label={ __( 'Beta & Nightly' ) }>
 								{ betaVersions.map( ( { label, value } ) => (
 									<option key={ value } value={ value }>
diff --git a/apps/studio/src/modules/add-site/components/create-site-form.tsx b/apps/studio/src/modules/add-site/components/create-site-form.tsx
index 3b4cab33a8..1fc9c3ff4e 100644
--- a/apps/studio/src/modules/add-site/components/create-site-form.tsx
+++ b/apps/studio/src/modules/add-site/components/create-site-form.tsx
@@ -18,6 +18,7 @@ import {
 	SITE_RUNTIME_PLAYGROUND,
 	type SiteRuntime,
 } from '@studio/common/lib/site-runtime';
+import { getAutoUpdateVersionLabel } from '@studio/common/lib/wordpress-version-labels';
 import {
 	RecommendedPHPVersion,
 	SupportedPHPVersion,
@@ -518,7 +519,7 @@ export const CreateSiteForm = ( {
 										selectedValue={ wpVersion }
 										onChange={ setWpVersion }
 										fallbackOptions={ [
-											{ label: __( 'Latest' ), value: DEFAULT_WORDPRESS_VERSION },
+											{ label: getAutoUpdateVersionLabel(), 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.'
diff --git a/apps/studio/src/modules/site-settings/edit-site-details.tsx b/apps/studio/src/modules/site-settings/edit-site-details.tsx
index 8c82082620..0aafee3ffe 100644
--- a/apps/studio/src/modules/site-settings/edit-site-details.tsx
+++ b/apps/studio/src/modules/site-settings/edit-site-details.tsx
@@ -440,6 +440,9 @@ const EditSiteDetails = ( { currentWpVersion, onSave }: EditSiteDetailsProps ) =
 													onChange={ setSelectedWpVersion }
 													disabled={ isEditingSite }
 													errorMessage={ errorUpdatingWpVersion }
+													installedVersion={
+														selectedSite?.isWpAutoUpdating !== false ? currentWpVersion : undefined
+													}
 													extraOptions={ [
 														{
 															label: currentWpVersion,
diff --git a/apps/studio/src/modules/site-settings/tests/edit-site-details.test.tsx b/apps/studio/src/modules/site-settings/tests/edit-site-details.test.tsx
index 536e667a61..c5e69cbb0b 100644
--- a/apps/studio/src/modules/site-settings/tests/edit-site-details.test.tsx
+++ b/apps/studio/src/modules/site-settings/tests/edit-site-details.test.tsx
@@ -149,6 +149,31 @@ describe( 'EditSiteDetails', () => {
 		expect( screen.getByLabelText( 'Site name' ) ).toHaveValue( 'Test Site' );
 		expect( screen.getByLabelText( 'PHP version' ) ).toHaveValue( '8.4' );
 		expect( screen.getByLabelText( 'WordPress version' ) ).toHaveValue( 'latest' );
+		// The auto-update option names the version the site runs now, so
+		// "latest" can't be read as "already on the newest release" (STU-2348).
+		expect( screen.getByRole( 'option', { name: 'Auto-update (6.3)' } ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'group', { name: 'Stable Versions' } ) ).toBeInTheDocument();
+	} );
+
+	it( 'should omit the installed version from the auto-update option for pinned sites', async () => {
+		vi.mocked( useSiteDetails ).mockReturnValue(
+			createMock< ReturnType< typeof useSiteDetails > >( {
+				...baseMockSiteDetails,
+				selectedSite: { ...baseMockSiteDetails.selectedSite, isWpAutoUpdating: false },
+				isEditModalOpen: true,
+			} )
+		);
+
+		renderWithProvider( <EditSiteDetails { ...defaultProps } /> );
+
+		await waitFor( () => {
+			expect( screen.getByRole( 'dialog' ) ).toBeInTheDocument();
+		} );
+
+		// Naming a version next to "Auto-update" on a pinned site would read as
+		// if auto-updates were already on.
+		expect( screen.getByRole( 'option', { name: 'Auto-update' } ) ).toBeInTheDocument();
+		expect( screen.queryByRole( 'option', { name: 'Auto-update (6.3)' } ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should close the modal when cancel button is clicked', async () => {
diff --git a/apps/ui/src/components/site-fields/index.test.ts b/apps/ui/src/components/site-fields/index.test.ts
new file mode 100644
index 0000000000..fdddc97afd
--- /dev/null
+++ b/apps/ui/src/components/site-fields/index.test.ts
@@ -0,0 +1,67 @@
+import { DEFAULT_WORDPRESS_VERSION } from '@studio/common/constants';
+import { describe, expect, it } from 'vitest';
+import { wpVersionField } from './index';
+import type { WpVersionOption } from './wp-version-control';
+import type { WordPressVersion } from '@studio/common/lib/wordpress-versions';
+
+const VERSIONS: WordPressVersion[] = [
+	{ label: '7.1', value: 'latest', isBeta: false, isDevelopment: false },
+	{ label: 'nightly', value: '7.2-alpha-63347', isBeta: false, isDevelopment: true },
+	{ label: '7.1', value: '7.1', isBeta: false, isDevelopment: false },
+	{ label: '6.9', value: '6.9.7', isBeta: false, isDevelopment: false },
+];
+
+function optionsOf( field: ReturnType< typeof wpVersionField > ): WpVersionOption[] {
+	return ( field.elements ?? [] ) as WpVersionOption[];
+}
+
+function autoUpdateLabels( field: ReturnType< typeof wpVersionField > ): string[] {
+	return optionsOf( field )
+		.filter( ( option ) => option.group === 'latest' )
+		.map( ( option ) => option.label );
+}
+
+describe( 'wpVersionField', () => {
+	it( 'names the installed version in the auto-update option', () => {
+		const field = wpVersionField( DEFAULT_WORDPRESS_VERSION, VERSIONS, {
+			latestValue: '',
+			installedVersion: '6.9.7',
+		} );
+
+		expect( autoUpdateLabels( field ) ).toEqual( [
+			'Auto-update (6.9.7)',
+			// The hidden `latest` fallback has to match, or a pinned site whose
+			// files can't be read renders a differently worded option.
+			'Auto-update (6.9.7)',
+		] );
+	} );
+
+	it( 'falls back to the bare mode name when the installed version is unknown', () => {
+		for ( const installedVersion of [ undefined, '-' ] ) {
+			const field = wpVersionField( DEFAULT_WORDPRESS_VERSION, VERSIONS, {
+				latestValue: '',
+				installedVersion,
+			} );
+
+			expect( autoUpdateLabels( field ) ).toEqual( [ 'Auto-update', 'Auto-update' ] );
+		}
+	} );
+
+	it( 'uses the bare mode name on the create form, which has no site yet', () => {
+		const field = wpVersionField( DEFAULT_WORDPRESS_VERSION, VERSIONS );
+
+		expect( autoUpdateLabels( field ) ).toEqual( [ 'Auto-update' ] );
+	} );
+
+	it( 'keeps prerelease and stable versions in separate groups', () => {
+		const field = wpVersionField( DEFAULT_WORDPRESS_VERSION, VERSIONS );
+		const options = optionsOf( field );
+
+		expect( options.filter( ( option ) => option.group === 'prerelease' ) ).toEqual( [
+			{ value: '7.2-alpha-63347', label: 'nightly', group: 'prerelease' },
+		] );
+		expect(
+			options.filter( ( option ) => option.group === 'stable' ).map( ( o ) => o.value )
+		).toEqual( [ '7.1', '6.9.7' ] );
+	} );
+} );
diff --git a/apps/ui/src/components/site-fields/index.ts b/apps/ui/src/components/site-fields/index.ts
index 0fdd8d0cbe..6189b69b6c 100644
--- a/apps/ui/src/components/site-fields/index.ts
+++ b/apps/ui/src/components/site-fields/index.ts
@@ -12,6 +12,7 @@ import {
 	getDomainNameValidationError,
 } from '@studio/common/lib/domains';
 import { validateAdminEmail, validateAdminUsername } from '@studio/common/lib/passwords';
+import { getAutoUpdateVersionLabel } from '@studio/common/lib/wordpress-version-labels';
 import {
 	isWordPressBetaVersion,
 	isWordPressDevVersion,
@@ -79,11 +80,14 @@ export function wpVersionField< T extends { wpVersion: string } >(
 	{
 		latestValue = DEFAULT_WORDPRESS_VERSION,
 		currentVersion,
+		installedVersion,
 		offline = false,
 		offlineMessage = __( 'Changing WordPress version requires an internet connection.' ),
 	}: {
 		latestValue?: string;
 		currentVersion?: string;
+		/** Shown in the auto-update label. Only pass it for auto-updating sites. */
+		installedVersion?: string;
 		offline?: boolean;
 		offlineMessage?: string;
 	} = {}
@@ -139,8 +143,9 @@ export function wpVersionField< T extends { wpVersion: string } >(
 				stable = addVersionOption( option, stable );
 			}
 		}
+		const autoUpdateLabel = getAutoUpdateVersionLabel( installedVersion );
 		const options: WpVersionOption[] = [
-			{ value: latestValue, label: __( 'latest' ), group: 'latest' },
+			{ value: latestValue, label: autoUpdateLabel, group: 'latest' },
 			...prerelease,
 			...stable,
 		];
@@ -151,7 +156,7 @@ export function wpVersionField< T extends { wpVersion: string } >(
 			// offering it.
 			options.push( {
 				value: DEFAULT_WORDPRESS_VERSION,
-				label: __( 'latest' ),
+				label: autoUpdateLabel,
 				group: 'latest',
 				hidden: true,
 			} );
diff --git a/apps/ui/src/components/site-fields/wp-version-control.tsx b/apps/ui/src/components/site-fields/wp-version-control.tsx
index 181a036cd5..6ee2a2c4f3 100644
--- a/apps/ui/src/components/site-fields/wp-version-control.tsx
+++ b/apps/ui/src/components/site-fields/wp-version-control.tsx
@@ -24,10 +24,10 @@ export type WpVersionOption = Option & {
 };
 
 /**
- * WordPress version dropdown with the legacy selector's optgroups
- * (Auto-updating / Beta & Nightly / Stable Versions). When the field is
- * disabled with a description (offline), the description shows as a hover
- * tooltip like the legacy UI instead of inline help text.
+ * WordPress version dropdown: the auto-update option first, then the pinned
+ * versions in optgroups. When the field is disabled with a description
+ * (offline), the description shows as a hover tooltip like the legacy UI
+ * instead of inline help text.
  */
 export function WpVersionControl< Item >( {
 	data,
@@ -42,11 +42,10 @@ export function WpVersionControl< Item >( {
 	const value = field.getValue( { item: data } ) ?? '';
 	const disabled = field.isDisabled( { item: data, field } );
 	const options = ( field.elements ?? [] ) as WpVersionOption[];
+	// The auto-update option carries its own explanation, so it needs no
+	// heading; HTML allows plain options before the first optgroup.
+	const autoUpdateOptions = options.filter( ( option ) => option.group === 'latest' );
 	const groups = [
-		{
-			label: __( 'Auto-updating' ),
-			options: options.filter( ( option ) => option.group === 'latest' ),
-		},
 		{
 			label: __( 'Beta & Nightly' ),
 			options: options.filter( ( option ) => option.group === 'prerelease' ),
@@ -67,6 +66,11 @@ export function WpVersionControl< Item >( {
 			disabled={ disabled }
 			onChange={ ( newValue ) => onChange( field.setValue( { item: data, value: newValue } ) ) }
 		>
+			{ autoUpdateOptions.map( ( option ) => (
+				<option key={ option.value } value={ option.value } hidden={ option.hidden }>
+					{ option.label }
+				</option>
+			) ) }
 			{ groups.map( ( group ) => (
 				<optgroup key={ group.label } label={ group.label }>
 					{ group.options.map( ( option ) => (
diff --git a/apps/ui/src/components/site-overview-view/index.test.tsx b/apps/ui/src/components/site-overview-view/index.test.tsx
index 0d97d23925..5c530f3373 100644
--- a/apps/ui/src/components/site-overview-view/index.test.tsx
+++ b/apps/ui/src/components/site-overview-view/index.test.tsx
@@ -480,19 +480,38 @@ describe( 'SiteOverviewView', () => {
 		).not.toHaveClass( settingsStyles.emailControl );
 	} );
 
-	it( 'renders the WordPress version dropdown with latest preselected for auto-updating sites', () => {
+	it( 'renders the WordPress version dropdown with auto-update preselected for auto-updating sites', () => {
 		useWordPressVersionsMock.mockReturnValue( { data: WP_VERSIONS } );
+		useWpVersionMock.mockReturnValue( { data: '6.7.2' } );
 
 		renderView( 'general' );
 
 		const select = screen.getByLabelText( 'WordPress version' );
 		expect( select.tagName ).toBe( 'SELECT' );
 		expect( select ).toHaveValue( '' );
-		expect( screen.getByRole( 'option', { name: '6.7.2' } ) ).toBeInTheDocument();
-		expect( screen.getByRole( 'group', { name: 'Auto-updating' } ) ).toBeInTheDocument();
+		// The auto-update option names the version the site runs now, so
+		// "latest" can't be read as "already on the newest release" (STU-2348).
+		expect( screen.getByRole( 'option', { name: 'Auto-update (6.7.2)' } ) ).toBeInTheDocument();
 		expect( screen.getByRole( 'group', { name: 'Stable Versions' } ) ).toBeInTheDocument();
 	} );
 
+	it( 'omits the installed version from the auto-update option for pinned sites', () => {
+		useWordPressVersionsMock.mockReturnValue( { data: WP_VERSIONS } );
+		useWpVersionMock.mockReturnValue( { data: '6.7.2' } );
+		useSitesMock.mockReturnValue( {
+			data: [ createSite( { running: true, isWpAutoUpdating: false } ) ],
+		} );
+
+		renderView( 'general' );
+
+		// Naming a version next to "Auto-update" on a pinned site would read as
+		// if auto-updates were already on.
+		expect( screen.getByRole( 'option', { name: 'Auto-update' } ) ).toBeInTheDocument();
+		expect(
+			screen.queryByRole( 'option', { name: 'Auto-update (6.7.2)' } )
+		).not.toBeInTheDocument();
+	} );
+
 	it( 'saves a pinned WordPress version picked from the dropdown', () => {
 		const updateSiteMutate = vi.fn();
 		useUpdateSiteMock.mockReturnValue( { isPending: false, mutate: updateSiteMutate } );
diff --git a/apps/ui/src/components/site-settings-view/index.tsx b/apps/ui/src/components/site-settings-view/index.tsx
index 9796bcdf6f..f9b17bf495 100644
--- a/apps/ui/src/components/site-settings-view/index.tsx
+++ b/apps/ui/src/components/site-settings-view/index.tsx
@@ -159,6 +159,7 @@ export function SiteSettingsForm( { site, activeTab }: { site: SiteDetails; acti
 				latestValue: '',
 				currentVersion:
 					installedWpVersion && installedWpVersion !== '-' ? installedWpVersion : undefined,
+				installedVersion: site.isWpAutoUpdating !== false ? installedWpVersion : undefined,
 				offline: isOffline,
 			} ),
 			{ ...adminUsernameField< FormData >(), Edit: AdminUsernameControl },
@@ -177,7 +178,14 @@ export function SiteSettingsForm( { site, activeTab }: { site: SiteDetails; acti
 			enableDebugLogField< FormData >(),
 			enableDebugDisplayField< FormData >(),
 		],
-		[ existingDomainNames, installedWpVersion, isOffline, wpVersions, xdebugConflictSiteName ]
+		[
+			existingDomainNames,
+			installedWpVersion,
+			isOffline,
+			site.isWpAutoUpdating,
+			wpVersions,
+			xdebugConflictSiteName,
+		]
 	);
 
 	const generalForm = useMemo< Form >(
diff --git a/packages/common/lib/wordpress-version-labels.ts b/packages/common/lib/wordpress-version-labels.ts
new file mode 100644
index 0000000000..3f0caab83e
--- /dev/null
+++ b/packages/common/lib/wordpress-version-labels.ts
@@ -0,0 +1,26 @@
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Label for the auto-updating WordPress version option, shared by the agentic
+ * UI and the Classic renderer so translators only see one phrasing.
+ *
+ * "latest" is a mode, not a version: Studio enables WordPress core auto-updates
+ * for those sites and pins every other choice. The old "latest" label read as a
+ * promise that the site already runs the newest release, so wp-admin's update
+ * notice looked like a contradiction (STU-2348).
+ *
+ * @param installedVersion The version the site runs right now, when it is known.
+ *                         Omit it on the create-site form, and for sites that
+ *                         are pinned — naming a version next to "Auto-update"
+ *                         would read as if auto-updates were already on.
+ */
+export function getAutoUpdateVersionLabel( installedVersion?: string ): string {
+	if ( ! installedVersion || installedVersion === '-' ) {
+		return __( 'Auto-update' );
+	}
+	return sprintf(
+		/* translators: %s: WordPress version the site runs now, e.g. 6.9.7 */
+		__( 'Auto-update (%s)' ),
+		installedVersion
+	);
+}

From b1e20830c347a0efa242e451c56f3d3e95809e08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gergely=20Cs=C3=A9csey?= <gcsecsey@gmail.com>
Date: Thu, 27 Aug 2026 11:44:59 +0100
Subject: [PATCH 02/15] Fall back to the bare Auto-update label when the
 installed version is not a version number

---
 .playwright-mcp/page-2026-08-27T10-42-54-487Z.yml | 0
 apps/ui/src/components/site-fields/index.test.ts  | 3 ++-
 packages/common/lib/wordpress-version-labels.ts   | 5 ++++-
 3 files changed, 6 insertions(+), 2 deletions(-)
 create mode 100644 .playwright-mcp/page-2026-08-27T10-42-54-487Z.yml

diff --git a/.playwright-mcp/page-2026-08-27T10-42-54-487Z.yml b/.playwright-mcp/page-2026-08-27T10-42-54-487Z.yml
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/ui/src/components/site-fields/index.test.ts b/apps/ui/src/components/site-fields/index.test.ts
index fdddc97afd..c1960d43a6 100644
--- a/apps/ui/src/components/site-fields/index.test.ts
+++ b/apps/ui/src/components/site-fields/index.test.ts
@@ -37,7 +37,8 @@ describe( 'wpVersionField', () => {
 	} );
 
 	it( 'falls back to the bare mode name when the installed version is unknown', () => {
-		for ( const installedVersion of [ undefined, '-' ] ) {
+		// `latest` is the mode, not a version — "Auto-update (latest)" says nothing.
+		for ( const installedVersion of [ undefined, '', '-', 'latest' ] ) {
 			const field = wpVersionField( DEFAULT_WORDPRESS_VERSION, VERSIONS, {
 				latestValue: '',
 				installedVersion,
diff --git a/packages/common/lib/wordpress-version-labels.ts b/packages/common/lib/wordpress-version-labels.ts
index 3f0caab83e..cc158c12c4 100644
--- a/packages/common/lib/wordpress-version-labels.ts
+++ b/packages/common/lib/wordpress-version-labels.ts
@@ -13,9 +13,12 @@ import { __, sprintf } from '@wordpress/i18n';
  *                         Omit it on the create-site form, and for sites that
  *                         are pinned — naming a version next to "Auto-update"
  *                         would read as if auto-updates were already on.
+ *                         Anything that isn't a concrete version number (`-`,
+ *                         `latest`) falls back to the bare label, since
+ *                         "Auto-update (latest)" would say nothing.
  */
 export function getAutoUpdateVersionLabel( installedVersion?: string ): string {
-	if ( ! installedVersion || installedVersion === '-' ) {
+	if ( ! installedVersion || ! /^\d/.test( installedVersion ) ) {
 		return __( 'Auto-update' );
 	}
 	return sprintf(

From 5089e5e5342ffaf85a440c30bfc12b4a5da4f323 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gergely=20Cs=C3=A9csey?= <gcsecsey@gmail.com>
Date: Thu, 27 Aug 2026 11:59:13 +0100
Subject: [PATCH 03/15] Show the installed version in the Auto-update label
 right after switching to auto-update

---
 .../page-2026-08-27T10-49-52-113Z.yml         |   0
 .../page-2026-08-27T10-54-50-604Z.yml         | 274 ++++++++++++++++++
 .../page-2026-08-27T10-55-23-761Z.yml         | 274 ++++++++++++++++++
 .../page-2026-08-27T10-57-13-335Z.yml         |   0
 .../components/site-settings-view/index.tsx   |   8 +-
 apps/ui/src/data/queries/use-sites.ts         |  12 +-
 6 files changed, 565 insertions(+), 3 deletions(-)
 create mode 100644 .playwright-mcp/page-2026-08-27T10-49-52-113Z.yml
 create mode 100644 .playwright-mcp/page-2026-08-27T10-54-50-604Z.yml
 create mode 100644 .playwright-mcp/page-2026-08-27T10-55-23-761Z.yml
 create mode 100644 .playwright-mcp/page-2026-08-27T10-57-13-335Z.yml

diff --git a/.playwright-mcp/page-2026-08-27T10-49-52-113Z.yml b/.playwright-mcp/page-2026-08-27T10-49-52-113Z.yml
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/.playwright-mcp/page-2026-08-27T10-54-50-604Z.yml b/.playwright-mcp/page-2026-08-27T10-54-50-604Z.yml
new file mode 100644
index 0000000000..57883431f9
--- /dev/null
+++ b/.playwright-mcp/page-2026-08-27T10-54-50-604Z.yml
@@ -0,0 +1,274 @@
+- generic [ref=f1e5]:
+  - complementary [ref=f1e6]:
+    - generic [ref=f1e8]:
+      - button "Add site" [ref=f1e11] [cursor=pointer]
+      - generic [ref=f1e15]:
+        - generic [ref=f1e18] [cursor=pointer]:
+          - button "Barion WP70 Test" [ref=f1e20]
+          - generic [ref=f1e22]:
+            - button "Site overview" [ref=f1e23]
+            - 'button "Site status: Running. Stop site" [ref=f1e27]'
+        - generic [ref=f1e34] [cursor=pointer]:
+          - button "Catnap" [ref=f1e36]
+          - generic [ref=f1e38]:
+            - button "Site overview" [ref=f1e39]
+            - 'button "Site status: Stopped. Start site" [ref=f1e43]'
+        - generic [ref=f1e50] [cursor=pointer]:
+          - button "Chat to Blog" [ref=f1e52]
+          - generic [ref=f1e54]:
+            - button "Site overview" [ref=f1e55]
+            - 'button "Site status: Stopped. Start site" [ref=f1e59]'
+        - generic [ref=f1e66] [cursor=pointer]:
+          - button "Cool Beans" [ref=f1e68]
+          - generic [ref=f1e70]:
+            - button "Site overview" [ref=f1e71]
+            - 'button "Site status: Stopped. Start site" [ref=f1e75]'
+        - generic [ref=f1e82] [cursor=pointer]:
+          - button "Ecommerce import" [ref=f1e84]
+          - generic [ref=f1e86]:
+            - button "Site overview" [ref=f1e87]
+            - 'button "Site status: Stopped. Start site" [ref=f1e91]'
+        - generic [ref=f1e98] [cursor=pointer]:
+          - button "Ecommerce offline import" [ref=f1e100]
+          - generic [ref=f1e102]:
+            - button "Site overview" [ref=f1e103]
+            - 'button "Site status: Stopped. Start site" [ref=f1e107]'
+        - generic [ref=f1e114] [cursor=pointer]:
+          - button "flip-test-b" [ref=f1e116]
+          - generic [ref=f1e118]:
+            - button "Site overview" [ref=f1e119]
+            - 'button "Site status: Stopped. Start site" [ref=f1e123]'
+        - generic [ref=f1e130] [cursor=pointer]:
+          - button "Friends plugin" [ref=f1e132]
+          - generic [ref=f1e134]:
+            - button "Site overview" [ref=f1e135]
+            - 'button "Site status: Stopped. Start site" [ref=f1e139]'
+        - generic [ref=f1e146] [cursor=pointer]:
+          - button "Gergely Csécsey" [ref=f1e148]
+          - generic [ref=f1e150]:
+            - button "Site overview" [ref=f1e151]
+            - 'button "Site status: Stopped. Start site" [ref=f1e155]'
+        - generic [ref=f1e162] [cursor=pointer]:
+          - button "Invalid" [ref=f1e164]
+          - generic [ref=f1e166]:
+            - button "Site overview" [ref=f1e167]
+            - 'button "Site status: Stopped. Start site" [ref=f1e171]'
+        - generic [ref=f1e178] [cursor=pointer]:
+          - button "Jetpack backup" [ref=f1e180]
+          - generic [ref=f1e182]:
+            - button "Site overview" [ref=f1e183]
+            - 'button "Site status: Stopped. Start site" [ref=f1e187]'
+        - generic [ref=f1e194] [cursor=pointer]:
+          - button "Local backup" [ref=f1e196]
+          - generic [ref=f1e198]:
+            - button "Site overview" [ref=f1e199]
+            - 'button "Site status: Stopped. Start site" [ref=f1e203]'
+        - generic [ref=f1e210] [cursor=pointer]:
+          - button "My WordPress Website 17" [ref=f1e212]
+          - generic [ref=f1e214]:
+            - button "Site overview" [ref=f1e215]
+            - 'button "Site status: Stopped. Start site" [ref=f1e219]'
+        - generic [ref=f1e226] [cursor=pointer]:
+          - button "My WordPress Website 19" [ref=f1e228]
+          - generic [ref=f1e230]:
+            - button "Site overview" [ref=f1e231]
+            - 'button "Site status: Stopped. Start site" [ref=f1e235]'
+        - generic [ref=f1e242] [cursor=pointer]:
+          - button "My WordPress Website 20" [ref=f1e244]
+          - generic [ref=f1e246]:
+            - button "Site overview" [ref=f1e247]
+            - 'button "Site status: Stopped. Start site" [ref=f1e251]'
+        - generic [ref=f1e258] [cursor=pointer]:
+          - button "My WordPress Website 21" [ref=f1e260]
+          - generic [ref=f1e262]:
+            - button "Site overview" [ref=f1e263]
+            - 'button "Site status: Stopped. Start site" [ref=f1e267]'
+        - generic [ref=f1e274] [cursor=pointer]:
+          - button "My WordPress Website 22" [ref=f1e276]
+          - generic [ref=f1e278]:
+            - button "Site overview" [ref=f1e279]
+            - 'button "Site status: Running. Stop site" [ref=f1e283]'
+        - generic [ref=f1e290] [cursor=pointer]:
+          - button "My WordPress Website 23" [ref=f1e292]
+          - generic [ref=f1e294]:
+            - button "Site overview" [ref=f1e295]
+            - 'button "Site status: Running. Stop site" [ref=f1e299]'
+        - generic [ref=f1e306] [cursor=pointer]:
+          - button "Niche Coffee" [ref=f1e308]
+          - generic [ref=f1e310]:
+            - button "Site overview" [ref=f1e311]
+            - 'button "Site status: Stopped. Start site" [ref=f1e315]'
+        - generic [ref=f1e322] [cursor=pointer]:
+          - button "Pasta La Vista" [ref=f1e324]
+          - generic [ref=f1e326]:
+            - button "Site overview" [ref=f1e327]
+            - 'button "Site status: Stopped. Start site" [ref=f1e331]'
+        - generic [ref=f1e338] [cursor=pointer]:
+          - button "Playground backup" [ref=f1e340]
+          - generic [ref=f1e342]:
+            - button "Site overview" [ref=f1e343]
+            - 'button "Site status: Stopped. Start site" [ref=f1e347]'
+        - generic [ref=f1e354] [cursor=pointer]:
+          - button "Rosa Tattoo" [ref=f1e356]
+          - generic [ref=f1e358]:
+            - button "Site overview" [ref=f1e359]
+            - 'button "Site status: Stopped. Start site" [ref=f1e363]'
+        - generic [ref=f1e370] [cursor=pointer]:
+          - button "Seedlet" [ref=f1e372]
+          - generic [ref=f1e374]:
+            - button "Site overview" [ref=f1e375]
+            - 'button "Site status: Stopped. Start site" [ref=f1e379]'
+        - generic [ref=f1e386] [cursor=pointer]:
+          - button "sqlite-fix-test" [ref=f1e388]
+          - generic [ref=f1e390]:
+            - button "Site overview" [ref=f1e391]
+            - 'button "Site status: Stopped. Start site" [ref=f1e395]'
+        - generic [ref=f1e402] [cursor=pointer]:
+          - button "Start/stop test" [ref=f1e404]
+          - generic [ref=f1e406]:
+            - button "Site overview" [ref=f1e407]
+            - 'button "Site status: Stopped. Start site" [ref=f1e411]'
+        - generic [ref=f1e418] [cursor=pointer]:
+          - button "STU-1821 Sandbox" [ref=f1e420]
+          - generic [ref=f1e422]:
+            - button "Site overview" [ref=f1e423]
+            - 'button "Site status: Stopped. Start site" [ref=f1e427]'
+        - generic [ref=f1e434] [cursor=pointer]:
+          - button "STU2348 Aged" [ref=f1e436]
+          - generic [ref=f1e438]:
+            - button "Site overview" [ref=f1e439]
+            - 'button "Site status: Stopped. Start site" [ref=f1e443]'
+        - generic [ref=f1e450] [cursor=pointer]:
+          - button "STU2348 Aged2" [ref=f1e452]
+          - generic [ref=f1e454]:
+            - button "Site overview" [ref=f1e455]
+            - 'button "Site status: Stopped. Start site" [ref=f1e459]'
+        - generic [ref=f1e466] [cursor=pointer]:
+          - button "STU2348 Aged3" [ref=f1e468]
+          - generic [ref=f1e470]:
+            - button "Site overview" [ref=f1e471]
+            - 'button "Site status: Stopped. Start site" [ref=f1e475]'
+        - generic [ref=f1e482] [cursor=pointer]:
+          - button "STU2348 Aged4" [ref=f1e484]
+          - generic [ref=f1e486]:
+            - button "Site overview" [ref=f1e487]
+            - 'button "Site status: Stopped. Start site" [ref=f1e491]'
+        - generic [ref=f1e498] [cursor=pointer]:
+          - button "STU2348 Aged5" [ref=f1e500]
+          - generic [ref=f1e502]:
+            - button "Site overview" [ref=f1e503]
+            - 'button "Site status: Stopped. Start site" [ref=f1e507]'
+        - generic [ref=f1e514] [cursor=pointer]:
+          - button "STU2348 Cron" [ref=f1e516]
+          - generic [ref=f1e518]:
+            - button "Site overview" [ref=f1e519]
+            - 'button "Site status: Stopped. Start site" [ref=f1e523]'
+        - generic [ref=f1e530] [cursor=pointer]:
+          - button "STU2348 Flip" [ref=f1e532]
+          - generic [ref=f1e534]:
+            - button "Site overview" [pressed] [ref=f1e535]
+            - 'button "Site status: Stopped. Start site" [ref=f1e539]'
+        - generic [ref=f1e546] [cursor=pointer]:
+          - button "STU2348 Latest" [ref=f1e548]
+          - generic [ref=f1e550]:
+            - button "Site overview" [ref=f1e551]
+            - 'button "Site status: Stopped. Start site" [ref=f1e555]'
+        - generic [ref=f1e562] [cursor=pointer]:
+          - button "Test-reprint-overwrite" [ref=f1e564]
+          - generic [ref=f1e566]:
+            - button "Site overview" [ref=f1e567]
+            - 'button "Site status: Stopped. Start site" [ref=f1e571]'
+        - generic [ref=f1e578] [cursor=pointer]:
+          - button "VL test" [ref=f1e580]
+          - generic [ref=f1e582]:
+            - button "Site overview" [ref=f1e583]
+            - 'button "Site status: Stopped. Start site" [ref=f1e587]'
+      - generic [ref=f1e592]:
+        - button "Studio Beta options" [ref=f1e594] [cursor=pointer]:
+          - generic [ref=f1e595]: Beta
+        - generic [ref=f1e597]:
+          - button "App settings" [ref=f1e598] [cursor=pointer]
+          - button "Hide sidebar" [ref=f1e601] [cursor=pointer]
+  - separator "Resize sidebar" [ref=f1e605]
+  - main [ref=f1e607]:
+    - generic [ref=f1e608]:
+      - generic [ref=f1e612]:
+        - button "STU2348 Flip Local preview" [ref=f1e615] [cursor=pointer]:
+          - generic [ref=f1e618]:
+            - generic [ref=f1e619]: STU2348 Flip
+            - generic [ref=f1e620]: Local preview
+        - generic [ref=f1e624]:
+          - tablist [ref=f1e627]:
+            - tab "Overview" [ref=f1e628] [cursor=pointer]
+            - tab "Settings" [selected] [ref=f1e630] [cursor=pointer]
+            - tab "Debugging" [ref=f1e632] [cursor=pointer]
+          - main [ref=f1e635]:
+            - generic [ref=f1e636]:
+              - tabpanel "Settings" [ref=f1e637]:
+                - generic [ref=f1e638]:
+                  - generic [ref=f1e643]:
+                    - generic [ref=f1e644]: Site name
+                    - textbox "Site name" [ref=f1e647]: STU2348 Flip
+                  - generic [ref=f1e649]:
+                    - generic [ref=f1e655] [cursor=pointer]:
+                      - generic [ref=f1e656]: PHP version
+                      - combobox "PHP version" [ref=f1e659]:
+                        - option "8.5"
+                        - option "8.4" [selected]
+                        - option "8.3"
+                        - option "8.2"
+                    - generic [ref=f1e664] [cursor=pointer]:
+                      - generic [ref=f1e665]: WordPress version
+                      - combobox "WordPress version" [ref=f1e668]:
+                        - option "Auto-update"
+                        - option "nightly"
+                        - option "7.1"
+                        - option "7.0"
+                        - option "6.9" [selected]
+                        - option "6.8"
+                        - option "6.7"
+                        - option "6.6"
+                        - option "6.5"
+                        - option "6.4"
+                        - option "6.3"
+                        - option "6.2"
+                  - generic [ref=f1e670]:
+                    - generic [ref=f1e676]:
+                      - generic [ref=f1e677]: Admin username
+                      - generic [ref=f1e679]:
+                        - textbox "Admin username" [ref=f1e680]: admin
+                        - generic [ref=f1e684]:
+                          - button "Copy admin username" [ref=f1e685] [cursor=pointer]
+                          - status [ref=f1e688]
+                    - generic [ref=f1e694]:
+                      - generic [ref=f1e695]: Admin password
+                      - generic [ref=f1e697]:
+                        - textbox "Admin password" [ref=f1e698]: e2)q6zs@XYFtBU!RgpXKKVi8
+                        - generic [ref=f1e701]:
+                          - button "Show password" [ref=f1e702] [cursor=pointer]
+                          - generic [ref=f1e705]:
+                            - button "Copy admin password" [ref=f1e706] [cursor=pointer]
+                            - status [ref=f1e709]
+                  - generic [ref=f1e714]:
+                    - generic [ref=f1e715]: Admin email
+                    - generic [ref=f1e717]:
+                      - textbox "Admin email" [ref=f1e718]: admin@localhost.com
+                      - generic [ref=f1e722]:
+                        - button "Copy admin email" [ref=f1e723] [cursor=pointer]
+                        - status [ref=f1e726]
+                  - generic [ref=f1e729]:
+                    - generic [ref=f1e731]:
+                      - checkbox "Use custom domain" [ref=f1e733] [cursor=pointer]
+                      - generic [ref=f1e734] [cursor=pointer]: Use custom domain
+                    - paragraph [ref=f1e735]:
+                      - generic [ref=f1e736]: Your system password will be required to set up the domain.
+              - button "Save settings" [disabled] [ref=f1e738]
+        - button "Hide preview" [ref=f1e739] [cursor=pointer]
+      - complementary "Site preview" [ref=f1e743]:
+        - generic [ref=f1e746]:
+          - button "Open in Browser" [disabled] [ref=f1e747]
+          - button "Open in…" [ref=f1e750] [cursor=pointer]
+        - generic [ref=f1e757]:
+          - paragraph [ref=f1e758]: Start the site to see a live preview.
+          - button "Start site" [ref=f1e759] [cursor=pointer]
+      - separator "Resize site preview" [ref=f1e763]
\ No newline at end of file
diff --git a/.playwright-mcp/page-2026-08-27T10-55-23-761Z.yml b/.playwright-mcp/page-2026-08-27T10-55-23-761Z.yml
new file mode 100644
index 0000000000..6fdc67e721
--- /dev/null
+++ b/.playwright-mcp/page-2026-08-27T10-55-23-761Z.yml
@@ -0,0 +1,274 @@
+- generic [ref=f2e5]:
+  - complementary [ref=f2e6]:
+    - generic [ref=f2e8]:
+      - button "Add site" [ref=f2e11] [cursor=pointer]
+      - generic [ref=f2e15]:
+        - generic [ref=f2e18] [cursor=pointer]:
+          - button "Barion WP70 Test" [ref=f2e20]
+          - generic [ref=f2e22]:
+            - button "Site overview" [ref=f2e23]
+            - 'button "Site status: Stopped. Start site" [ref=f2e27]'
+        - generic [ref=f2e34] [cursor=pointer]:
+          - button "Catnap" [ref=f2e36]
+          - generic [ref=f2e38]:
+            - button "Site overview" [ref=f2e39]
+            - 'button "Site status: Stopped. Start site" [ref=f2e43]'
+        - generic [ref=f2e50] [cursor=pointer]:
+          - button "Chat to Blog" [ref=f2e52]
+          - generic [ref=f2e54]:
+            - button "Site overview" [ref=f2e55]
+            - 'button "Site status: Stopped. Start site" [ref=f2e59]'
+        - generic [ref=f2e66] [cursor=pointer]:
+          - button "Cool Beans" [ref=f2e68]
+          - generic [ref=f2e70]:
+            - button "Site overview" [ref=f2e71]
+            - 'button "Site status: Stopped. Start site" [ref=f2e75]'
+        - generic [ref=f2e82] [cursor=pointer]:
+          - button "Ecommerce import" [ref=f2e84]
+          - generic [ref=f2e86]:
+            - button "Site overview" [ref=f2e87]
+            - 'button "Site status: Stopped. Start site" [ref=f2e91]'
+        - generic [ref=f2e98] [cursor=pointer]:
+          - button "Ecommerce offline import" [ref=f2e100]
+          - generic [ref=f2e102]:
+            - button "Site overview" [ref=f2e103]
+            - 'button "Site status: Stopped. Start site" [ref=f2e107]'
+        - generic [ref=f2e114] [cursor=pointer]:
+          - button "flip-test-b" [ref=f2e116]
+          - generic [ref=f2e118]:
+            - button "Site overview" [ref=f2e119]
+            - 'button "Site status: Stopped. Start site" [ref=f2e123]'
+        - generic [ref=f2e130] [cursor=pointer]:
+          - button "Friends plugin" [ref=f2e132]
+          - generic [ref=f2e134]:
+            - button "Site overview" [ref=f2e135]
+            - 'button "Site status: Stopped. Start site" [ref=f2e139]'
+        - generic [ref=f2e146] [cursor=pointer]:
+          - button "Gergely Csécsey" [ref=f2e148]
+          - generic [ref=f2e150]:
+            - button "Site overview" [ref=f2e151]
+            - 'button "Site status: Stopped. Start site" [ref=f2e155]'
+        - generic [ref=f2e162] [cursor=pointer]:
+          - button "Invalid" [ref=f2e164]
+          - generic [ref=f2e166]:
+            - button "Site overview" [ref=f2e167]
+            - 'button "Site status: Stopped. Start site" [ref=f2e171]'
+        - generic [ref=f2e178] [cursor=pointer]:
+          - button "Jetpack backup" [ref=f2e180]
+          - generic [ref=f2e182]:
+            - button "Site overview" [ref=f2e183]
+            - 'button "Site status: Stopped. Start site" [ref=f2e187]'
+        - generic [ref=f2e194] [cursor=pointer]:
+          - button "Local backup" [ref=f2e196]
+          - generic [ref=f2e198]:
+            - button "Site overview" [ref=f2e199]
+            - 'button "Site status: Stopped. Start site" [ref=f2e203]'
+        - generic [ref=f2e210] [cursor=pointer]:
+          - button "My WordPress Website 17" [ref=f2e212]
+          - generic [ref=f2e214]:
+            - button "Site overview" [ref=f2e215]
+            - 'button "Site status: Stopped. Start site" [ref=f2e219]'
+        - generic [ref=f2e226] [cursor=pointer]:
+          - button "My WordPress Website 19" [ref=f2e228]
+          - generic [ref=f2e230]:
+            - button "Site overview" [ref=f2e231]
+            - 'button "Site status: Stopped. Start site" [ref=f2e235]'
+        - generic [ref=f2e242] [cursor=pointer]:
+          - button "My WordPress Website 20" [ref=f2e244]
+          - generic [ref=f2e246]:
+            - button "Site overview" [ref=f2e247]
+            - 'button "Site status: Stopped. Start site" [ref=f2e251]'
+        - generic [ref=f2e258] [cursor=pointer]:
+          - button "My WordPress Website 21" [ref=f2e260]
+          - generic [ref=f2e262]:
+            - button "Site overview" [ref=f2e263]
+            - 'button "Site status: Stopped. Start site" [ref=f2e267]'
+        - generic [ref=f2e274] [cursor=pointer]:
+          - button "My WordPress Website 22" [ref=f2e276]
+          - generic [ref=f2e278]:
+            - button "Site overview" [ref=f2e279]
+            - 'button "Site status: Stopped. Start site" [ref=f2e283]'
+        - generic [ref=f2e290] [cursor=pointer]:
+          - button "My WordPress Website 23" [ref=f2e292]
+          - generic [ref=f2e294]:
+            - button "Site overview" [ref=f2e295]
+            - 'button "Site status: Stopped. Start site" [ref=f2e299]'
+        - generic [ref=f2e306] [cursor=pointer]:
+          - button "Niche Coffee" [ref=f2e308]
+          - generic [ref=f2e310]:
+            - button "Site overview" [ref=f2e311]
+            - 'button "Site status: Stopped. Start site" [ref=f2e315]'
+        - generic [ref=f2e322] [cursor=pointer]:
+          - button "Pasta La Vista" [ref=f2e324]
+          - generic [ref=f2e326]:
+            - button "Site overview" [ref=f2e327]
+            - 'button "Site status: Stopped. Start site" [ref=f2e331]'
+        - generic [ref=f2e338] [cursor=pointer]:
+          - button "Playground backup" [ref=f2e340]
+          - generic [ref=f2e342]:
+            - button "Site overview" [ref=f2e343]
+            - 'button "Site status: Stopped. Start site" [ref=f2e347]'
+        - generic [ref=f2e354] [cursor=pointer]:
+          - button "Rosa Tattoo" [ref=f2e356]
+          - generic [ref=f2e358]:
+            - button "Site overview" [ref=f2e359]
+            - 'button "Site status: Stopped. Start site" [ref=f2e363]'
+        - generic [ref=f2e370] [cursor=pointer]:
+          - button "Seedlet" [ref=f2e372]
+          - generic [ref=f2e374]:
+            - button "Site overview" [ref=f2e375]
+            - 'button "Site status: Stopped. Start site" [ref=f2e379]'
+        - generic [ref=f2e386] [cursor=pointer]:
+          - button "sqlite-fix-test" [ref=f2e388]
+          - generic [ref=f2e390]:
+            - button "Site overview" [ref=f2e391]
+            - 'button "Site status: Stopped. Start site" [ref=f2e395]'
+        - generic [ref=f2e402] [cursor=pointer]:
+          - button "Start/stop test" [ref=f2e404]
+          - generic [ref=f2e406]:
+            - button "Site overview" [ref=f2e407]
+            - 'button "Site status: Stopped. Start site" [ref=f2e411]'
+        - generic [ref=f2e418] [cursor=pointer]:
+          - button "STU-1821 Sandbox" [ref=f2e420]
+          - generic [ref=f2e422]:
+            - button "Site overview" [ref=f2e423]
+            - 'button "Site status: Stopped. Start site" [ref=f2e427]'
+        - generic [ref=f2e434] [cursor=pointer]:
+          - button "STU2348 Aged" [ref=f2e436]
+          - generic [ref=f2e438]:
+            - button "Site overview" [ref=f2e439]
+            - 'button "Site status: Stopped. Start site" [ref=f2e443]'
+        - generic [ref=f2e450] [cursor=pointer]:
+          - button "STU2348 Aged2" [ref=f2e452]
+          - generic [ref=f2e454]:
+            - button "Site overview" [ref=f2e455]
+            - 'button "Site status: Stopped. Start site" [ref=f2e459]'
+        - generic [ref=f2e466] [cursor=pointer]:
+          - button "STU2348 Aged3" [ref=f2e468]
+          - generic [ref=f2e470]:
+            - button "Site overview" [ref=f2e471]
+            - 'button "Site status: Stopped. Start site" [ref=f2e475]'
+        - generic [ref=f2e482] [cursor=pointer]:
+          - button "STU2348 Aged4" [ref=f2e484]
+          - generic [ref=f2e486]:
+            - button "Site overview" [ref=f2e487]
+            - 'button "Site status: Stopped. Start site" [ref=f2e491]'
+        - generic [ref=f2e498] [cursor=pointer]:
+          - button "STU2348 Aged5" [ref=f2e500]
+          - generic [ref=f2e502]:
+            - button "Site overview" [ref=f2e503]
+            - 'button "Site status: Stopped. Start site" [ref=f2e507]'
+        - generic [ref=f2e514] [cursor=pointer]:
+          - button "STU2348 Cron" [ref=f2e516]
+          - generic [ref=f2e518]:
+            - button "Site overview" [ref=f2e519]
+            - 'button "Site status: Stopped. Start site" [ref=f2e523]'
+        - generic [ref=f2e530] [cursor=pointer]:
+          - button "STU2348 Flip" [ref=f2e532]
+          - generic [ref=f2e534]:
+            - button "Site overview" [pressed] [ref=f2e535]
+            - 'button "Site status: Stopped. Start site" [ref=f2e539]'
+        - generic [ref=f2e546] [cursor=pointer]:
+          - button "STU2348 Latest" [ref=f2e548]
+          - generic [ref=f2e550]:
+            - button "Site overview" [ref=f2e551]
+            - 'button "Site status: Stopped. Start site" [ref=f2e555]'
+        - generic [ref=f2e562] [cursor=pointer]:
+          - button "Test-reprint-overwrite" [ref=f2e564]
+          - generic [ref=f2e566]:
+            - button "Site overview" [ref=f2e567]
+            - 'button "Site status: Stopped. Start site" [ref=f2e571]'
+        - generic [ref=f2e578] [cursor=pointer]:
+          - button "VL test" [ref=f2e580]
+          - generic [ref=f2e582]:
+            - button "Site overview" [ref=f2e583]
+            - 'button "Site status: Stopped. Start site" [ref=f2e587]'
+      - generic [ref=f2e592]:
+        - button "Studio Beta options" [ref=f2e594] [cursor=pointer]:
+          - generic [ref=f2e595]: Beta
+        - generic [ref=f2e597]:
+          - button "App settings" [ref=f2e598] [cursor=pointer]
+          - button "Hide sidebar" [ref=f2e601] [cursor=pointer]
+  - separator "Resize sidebar" [ref=f2e605]
+  - main [ref=f2e607]:
+    - generic [ref=f2e608]:
+      - generic [ref=f2e612]:
+        - button "STU2348 Flip Local preview" [ref=f2e615] [cursor=pointer]:
+          - generic [ref=f2e618]:
+            - generic [ref=f2e619]: STU2348 Flip
+            - generic [ref=f2e620]: Local preview
+        - generic [ref=f2e624]:
+          - tablist [ref=f2e627]:
+            - tab "Overview" [ref=f2e628] [cursor=pointer]
+            - tab "Settings" [selected] [ref=f2e630] [cursor=pointer]
+            - tab "Debugging" [ref=f2e632] [cursor=pointer]
+          - main [ref=f2e635]:
+            - generic [ref=f2e636]:
+              - tabpanel "Settings" [ref=f2e637]:
+                - generic [ref=f2e638]:
+                  - generic [ref=f2e643]:
+                    - generic [ref=f2e644]: Site name
+                    - textbox "Site name" [ref=f2e647]: STU2348 Flip
+                  - generic [ref=f2e649]:
+                    - generic [ref=f2e655] [cursor=pointer]:
+                      - generic [ref=f2e656]: PHP version
+                      - combobox "PHP version" [ref=f2e659]:
+                        - option "8.5"
+                        - option "8.4" [selected]
+                        - option "8.3"
+                        - option "8.2"
+                    - generic [ref=f2e664] [cursor=pointer]:
+                      - generic [ref=f2e665]: WordPress version
+                      - combobox "WordPress version" [ref=f2e668]:
+                        - option "Auto-update"
+                        - option "nightly"
+                        - option "7.1" [selected]
+                        - option "7.0"
+                        - option "6.9"
+                        - option "6.8"
+                        - option "6.7"
+                        - option "6.6"
+                        - option "6.5"
+                        - option "6.4"
+                        - option "6.3"
+                        - option "6.2"
+                  - generic [ref=f2e670]:
+                    - generic [ref=f2e676]:
+                      - generic [ref=f2e677]: Admin username
+                      - generic [ref=f2e679]:
+                        - textbox "Admin username" [ref=f2e680]: admin
+                        - generic [ref=f2e684]:
+                          - button "Copy admin username" [ref=f2e685] [cursor=pointer]
+                          - status [ref=f2e688]
+                    - generic [ref=f2e694]:
+                      - generic [ref=f2e695]: Admin password
+                      - generic [ref=f2e697]:
+                        - textbox "Admin password" [ref=f2e698]: e2)q6zs@XYFtBU!RgpXKKVi8
+                        - generic [ref=f2e701]:
+                          - button "Show password" [ref=f2e702] [cursor=pointer]
+                          - generic [ref=f2e705]:
+                            - button "Copy admin password" [ref=f2e706] [cursor=pointer]
+                            - status [ref=f2e709]
+                  - generic [ref=f2e714]:
+                    - generic [ref=f2e715]: Admin email
+                    - generic [ref=f2e717]:
+                      - textbox "Admin email" [ref=f2e718]: admin@localhost.com
+                      - generic [ref=f2e722]:
+                        - button "Copy admin email" [ref=f2e723] [cursor=pointer]
+                        - status [ref=f2e726]
+                  - generic [ref=f2e729]:
+                    - generic [ref=f2e731]:
+                      - checkbox "Use custom domain" [ref=f2e733] [cursor=pointer]
+                      - generic [ref=f2e734] [cursor=pointer]: Use custom domain
+                    - paragraph [ref=f2e735]:
+                      - generic [ref=f2e736]: Your system password will be required to set up the domain.
+              - button "Save settings" [disabled] [ref=f2e738]
+        - button "Hide preview" [ref=f2e739] [cursor=pointer]
+      - complementary "Site preview" [ref=f2e743]:
+        - generic [ref=f2e746]:
+          - button "Open in Browser" [disabled] [ref=f2e747]
+          - button "Open in…" [ref=f2e750] [cursor=pointer]
+        - generic [ref=f2e757]:
+          - paragraph [ref=f2e758]: Start the site to see a live preview.
+          - button "Start site" [ref=f2e759] [cursor=pointer]
+      - separator "Resize site preview" [ref=f2e763]
\ No newline at end of file
diff --git a/.playwright-mcp/page-2026-08-27T10-57-13-335Z.yml b/.playwright-mcp/page-2026-08-27T10-57-13-335Z.yml
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/ui/src/components/site-settings-view/index.tsx b/apps/ui/src/components/site-settings-view/index.tsx
index f9b17bf495..b6304f9aad 100644
--- a/apps/ui/src/components/site-settings-view/index.tsx
+++ b/apps/ui/src/components/site-settings-view/index.tsx
@@ -159,7 +159,11 @@ export function SiteSettingsForm( { site, activeTab }: { site: SiteDetails; acti
 				latestValue: '',
 				currentVersion:
 					installedWpVersion && installedWpVersion !== '-' ? installedWpVersion : undefined,
-				installedVersion: site.isWpAutoUpdating !== false ? installedWpVersion : undefined,
+				// Keyed off the current selection, not `site.isWpAutoUpdating`: the
+				// persisted flag lags a save by a site-updated event, which would
+				// drop the version from the label right after switching to
+				// auto-update.
+				installedVersion: data.wpVersion === '' ? installedWpVersion : undefined,
 				offline: isOffline,
 			} ),
 			{ ...adminUsernameField< FormData >(), Edit: AdminUsernameControl },
@@ -179,10 +183,10 @@ export function SiteSettingsForm( { site, activeTab }: { site: SiteDetails; acti
 			enableDebugDisplayField< FormData >(),
 		],
 		[
+			data.wpVersion,
 			existingDomainNames,
 			installedWpVersion,
 			isOffline,
-			site.isWpAutoUpdating,
 			wpVersions,
 			xdebugConflictSiteName,
 		]
diff --git a/apps/ui/src/data/queries/use-sites.ts b/apps/ui/src/data/queries/use-sites.ts
index 213530c938..4a8dcb5039 100644
--- a/apps/ui/src/data/queries/use-sites.ts
+++ b/apps/ui/src/data/queries/use-sites.ts
@@ -1,3 +1,4 @@
+import { DEFAULT_WORDPRESS_VERSION } from '@studio/common/constants';
 import { SITE_EVENTS } from '@studio/common/lib/cli-events';
 import { getSiteOperationNoun } from '@studio/common/lib/site-operation-labels';
 import { useIsMutating, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
@@ -222,8 +223,17 @@ export function useUpdateSite() {
 			// restarting the site after this resolves, and a disk read landing
 			// mid-restart still reports the pre-edit version, which would flash
 			// the old value back into the settings form.
-			if ( wpVersion ) {
+			//
+			// `latest` is the exception: it's the auto-update mode, not a version,
+			// so seeding it would store a non-version in a cache that means "the
+			// version on disk". Refetch instead — the CLI has already installed
+			// the release by the time this resolves, so the read reports it.
+			if ( wpVersion && wpVersion !== DEFAULT_WORDPRESS_VERSION ) {
 				queryClient.setQueryData( [ ...WP_VERSION_QUERY_KEY, site.id ], wpVersion );
+			} else if ( wpVersion ) {
+				void queryClient.invalidateQueries( {
+					queryKey: [ ...WP_VERSION_QUERY_KEY, site.id ],
+				} );
 			}
 			toast.success( __( 'Settings saved' ) );
 		},

From 4fe093678409bfc9374b024456370289faffd436 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gergely=20Cs=C3=A9csey?= <gcsecsey@gmail.com>
Date: Mon, 31 Aug 2026 12:07:06 +0100
Subject: [PATCH 04/15] Remove Playwright MCP page snapshots and ignore the
 directory

---
 .gitignore                                    |   4 +
 .../page-2026-08-27T10-42-54-487Z.yml         |   0
 .../page-2026-08-27T10-49-52-113Z.yml         |   0
 .../page-2026-08-27T10-54-50-604Z.yml         | 274 ------------------
 .../page-2026-08-27T10-55-23-761Z.yml         | 274 ------------------
 .../page-2026-08-27T10-57-13-335Z.yml         |   0
 6 files changed, 4 insertions(+), 548 deletions(-)
 delete mode 100644 .playwright-mcp/page-2026-08-27T10-42-54-487Z.yml
 delete mode 100644 .playwright-mcp/page-2026-08-27T10-49-52-113Z.yml
 delete mode 100644 .playwright-mcp/page-2026-08-27T10-54-50-604Z.yml
 delete mode 100644 .playwright-mcp/page-2026-08-27T10-55-23-761Z.yml
 delete mode 100644 .playwright-mcp/page-2026-08-27T10-57-13-335Z.yml

diff --git a/.gitignore b/.gitignore
index 8754f35657..ad09b5516e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -122,6 +122,10 @@ dist-local
 # Playwright traces
 test-results
 
+# Page snapshots written by the Playwright MCP browser tools. Throwaway debug
+# output, and it captures whatever is on screen — including site credentials.
+.playwright-mcp/
+
 # Data-heavy e2e fixtures downloaded by `npm run e2e:fixtures` (see test-fixtures/readme.md)
 test-fixtures/downloads/
 
diff --git a/.playwright-mcp/page-2026-08-27T10-42-54-487Z.yml b/.playwright-mcp/page-2026-08-27T10-42-54-487Z.yml
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/.playwright-mcp/page-2026-08-27T10-49-52-113Z.yml b/.playwright-mcp/page-2026-08-27T10-49-52-113Z.yml
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/.playwright-mcp/page-2026-08-27T10-54-50-604Z.yml b/.playwright-mcp/page-2026-08-27T10-54-50-604Z.yml
deleted file mode 100644
index 57883431f9..0000000000
--- a/.playwright-mcp/page-2026-08-27T10-54-50-604Z.yml
+++ /dev/null
@@ -1,274 +0,0 @@
-- generic [ref=f1e5]:
-  - complementary [ref=f1e6]:
-    - generic [ref=f1e8]:
-      - button "Add site" [ref=f1e11] [cursor=pointer]
-      - generic [ref=f1e15]:
-        - generic [ref=f1e18] [cursor=pointer]:
-          - button "Barion WP70 Test" [ref=f1e20]
-          - generic [ref=f1e22]:
-            - button "Site overview" [ref=f1e23]
-            - 'button "Site status: Running. Stop site" [ref=f1e27]'
-        - generic [ref=f1e34] [cursor=pointer]:
-          - button "Catnap" [ref=f1e36]
-          - generic [ref=f1e38]:
-            - button "Site overview" [ref=f1e39]
-            - 'button "Site status: Stopped. Start site" [ref=f1e43]'
-        - generic [ref=f1e50] [cursor=pointer]:
-          - button "Chat to Blog" [ref=f1e52]
-          - generic [ref=f1e54]:
-            - button "Site overview" [ref=f1e55]
-            - 'button "Site status: Stopped. Start site" [ref=f1e59]'
-        - generic [ref=f1e66] [cursor=pointer]:
-          - button "Cool Beans" [ref=f1e68]
-          - generic [ref=f1e70]:
-            - button "Site overview" [ref=f1e71]
-            - 'button "Site status: Stopped. Start site" [ref=f1e75]'
-        - generic [ref=f1e82] [cursor=pointer]:
-          - button "Ecommerce import" [ref=f1e84]
-          - generic [ref=f1e86]:
-            - button "Site overview" [ref=f1e87]
-            - 'button "Site status: Stopped. Start site" [ref=f1e91]'
-        - generic [ref=f1e98] [cursor=pointer]:
-          - button "Ecommerce offline import" [ref=f1e100]
-          - generic [ref=f1e102]:
-            - button "Site overview" [ref=f1e103]
-            - 'button "Site status: Stopped. Start site" [ref=f1e107]'
-        - generic [ref=f1e114] [cursor=pointer]:
-          - button "flip-test-b" [ref=f1e116]
-          - generic [ref=f1e118]:
-            - button "Site overview" [ref=f1e119]
-            - 'button "Site status: Stopped. Start site" [ref=f1e123]'
-        - generic [ref=f1e130] [cursor=pointer]:
-          - button "Friends plugin" [ref=f1e132]
-          - generic [ref=f1e134]:
-            - button "Site overview" [ref=f1e135]
-            - 'button "Site status: Stopped. Start site" [ref=f1e139]'
-        - generic [ref=f1e146] [cursor=pointer]:
-          - button "Gergely Csécsey" [ref=f1e148]
-          - generic [ref=f1e150]:
-            - button "Site overview" [ref=f1e151]
-            - 'button "Site status: Stopped. Start site" [ref=f1e155]'
-        - generic [ref=f1e162] [cursor=pointer]:
-          - button "Invalid" [ref=f1e164]
-          - generic [ref=f1e166]:
-            - button "Site overview" [ref=f1e167]
-            - 'button "Site status: Stopped. Start site" [ref=f1e171]'
-        - generic [ref=f1e178] [cursor=pointer]:
-          - button "Jetpack backup" [ref=f1e180]
-          - generic [ref=f1e182]:
-            - button "Site overview" [ref=f1e183]
-            - 'button "Site status: Stopped. Start site" [ref=f1e187]'
-        - generic [ref=f1e194] [cursor=pointer]:
-          - button "Local backup" [ref=f1e196]
-          - generic [ref=f1e198]:
-            - button "Site overview" [ref=f1e199]
-            - 'button "Site status: Stopped. Start site" [ref=f1e203]'
-        - generic [ref=f1e210] [cursor=pointer]:
-          - button "My WordPress Website 17" [ref=f1e212]
-          - generic [ref=f1e214]:
-            - button "Site overview" [ref=f1e215]
-            - 'button "Site status: Stopped. Start site" [ref=f1e219]'
-        - generic [ref=f1e226] [cursor=pointer]:
-          - button "My WordPress Website 19" [ref=f1e228]
-          - generic [ref=f1e230]:
-            - button "Site overview" [ref=f1e231]
-            - 'button "Site status: Stopped. Start site" [ref=f1e235]'
-        - generic [ref=f1e242] [cursor=pointer]:
-          - button "My WordPress Website 20" [ref=f1e244]
-          - generic [ref=f1e246]:
-            - button "Site overview" [ref=f1e247]
-            - 'button "Site status: Stopped. Start site" [ref=f1e251]'
-        - generic [ref=f1e258] [cursor=pointer]:
-          - button "My WordPress Website 21" [ref=f1e260]
-          - generic [ref=f1e262]:
-            - button "Site overview" [ref=f1e263]
-            - 'button "Site status: Stopped. Start site" [ref=f1e267]'
-        - generic [ref=f1e274] [cursor=pointer]:
-          - button "My WordPress Website 22" [ref=f1e276]
-          - generic [ref=f1e278]:
-            - button "Site overview" [ref=f1e279]
-            - 'button "Site status: Running. Stop site" [ref=f1e283]'
-        - generic [ref=f1e290] [cursor=pointer]:
-          - button "My WordPress Website 23" [ref=f1e292]
-          - generic [ref=f1e294]:
-            - button "Site overview" [ref=f1e295]
-            - 'button "Site status: Running. Stop site" [ref=f1e299]'
-        - generic [ref=f1e306] [cursor=pointer]:
-          - button "Niche Coffee" [ref=f1e308]
-          - generic [ref=f1e310]:
-            - button "Site overview" [ref=f1e311]
-            - 'button "Site status: Stopped. Start site" [ref=f1e315]'
-        - generic [ref=f1e322] [cursor=pointer]:
-          - button "Pasta La Vista" [ref=f1e324]
-          - generic [ref=f1e326]:
-            - button "Site overview" [ref=f1e327]
-            - 'button "Site status: Stopped. Start site" [ref=f1e331]'
-        - generic [ref=f1e338] [cursor=pointer]:
-          - button "Playground backup" [ref=f1e340]
-          - generic [ref=f1e342]:
-            - button "Site overview" [ref=f1e343]
-            - 'button "Site status: Stopped. Start site" [ref=f1e347]'
-        - generic [ref=f1e354] [cursor=pointer]:
-          - button "Rosa Tattoo" [ref=f1e356]
-          - generic [ref=f1e358]:
-            - button "Site overview" [ref=f1e359]
-            - 'button "Site status: Stopped. Start site" [ref=f1e363]'
-        - generic [ref=f1e370] [cursor=pointer]:
-          - button "Seedlet" [ref=f1e372]
-          - generic [ref=f1e374]:
-            - button "Site overview" [ref=f1e375]
-            - 'button "Site status: Stopped. Start site" [ref=f1e379]'
-        - generic [ref=f1e386] [cursor=pointer]:
-          - button "sqlite-fix-test" [ref=f1e388]
-          - generic [ref=f1e390]:
-            - button "Site overview" [ref=f1e391]
-            - 'button "Site status: Stopped. Start site" [ref=f1e395]'
-        - generic [ref=f1e402] [cursor=pointer]:
-          - button "Start/stop test" [ref=f1e404]
-          - generic [ref=f1e406]:
-            - button "Site overview" [ref=f1e407]
-            - 'button "Site status: Stopped. Start site" [ref=f1e411]'
-        - generic [ref=f1e418] [cursor=pointer]:
-          - button "STU-1821 Sandbox" [ref=f1e420]
-          - generic [ref=f1e422]:
-            - button "Site overview" [ref=f1e423]
-            - 'button "Site status: Stopped. Start site" [ref=f1e427]'
-        - generic [ref=f1e434] [cursor=pointer]:
-          - button "STU2348 Aged" [ref=f1e436]
-          - generic [ref=f1e438]:
-            - button "Site overview" [ref=f1e439]
-            - 'button "Site status: Stopped. Start site" [ref=f1e443]'
-        - generic [ref=f1e450] [cursor=pointer]:
-          - button "STU2348 Aged2" [ref=f1e452]
-          - generic [ref=f1e454]:
-            - button "Site overview" [ref=f1e455]
-            - 'button "Site status: Stopped. Start site" [ref=f1e459]'
-        - generic [ref=f1e466] [cursor=pointer]:
-          - button "STU2348 Aged3" [ref=f1e468]
-          - generic [ref=f1e470]:
-            - button "Site overview" [ref=f1e471]
-            - 'button "Site status: Stopped. Start site" [ref=f1e475]'
-        - generic [ref=f1e482] [cursor=pointer]:
-          - button "STU2348 Aged4" [ref=f1e484]
-          - generic [ref=f1e486]:
-            - button "Site overview" [ref=f1e487]
-            - 'button "Site status: Stopped. Start site" [ref=f1e491]'
-        - generic [ref=f1e498] [cursor=pointer]:
-          - button "STU2348 Aged5" [ref=f1e500]
-          - generic [ref=f1e502]:
-            - button "Site overview" [ref=f1e503]
-            - 'button "Site status: Stopped. Start site" [ref=f1e507]'
-        - generic [ref=f1e514] [cursor=pointer]:
-          - button "STU2348 Cron" [ref=f1e516]
-          - generic [ref=f1e518]:
-            - button "Site overview" [ref=f1e519]
-            - 'button "Site status: Stopped. Start site" [ref=f1e523]'
-        - generic [ref=f1e530] [cursor=pointer]:
-          - button "STU2348 Flip" [ref=f1e532]
-          - generic [ref=f1e534]:
-            - button "Site overview" [pressed] [ref=f1e535]
-            - 'button "Site status: Stopped. Start site" [ref=f1e539]'
-        - generic [ref=f1e546] [cursor=pointer]:
-          - button "STU2348 Latest" [ref=f1e548]
-          - generic [ref=f1e550]:
-            - button "Site overview" [ref=f1e551]
-            - 'button "Site status: Stopped. Start site" [ref=f1e555]'
-        - generic [ref=f1e562] [cursor=pointer]:
-          - button "Test-reprint-overwrite" [ref=f1e564]
-          - generic [ref=f1e566]:
-            - button "Site overview" [ref=f1e567]
-            - 'button "Site status: Stopped. Start site" [ref=f1e571]'
-        - generic [ref=f1e578] [cursor=pointer]:
-          - button "VL test" [ref=f1e580]
-          - generic [ref=f1e582]:
-            - button "Site overview" [ref=f1e583]
-            - 'button "Site status: Stopped. Start site" [ref=f1e587]'
-      - generic [ref=f1e592]:
-        - button "Studio Beta options" [ref=f1e594] [cursor=pointer]:
-          - generic [ref=f1e595]: Beta
-        - generic [ref=f1e597]:
-          - button "App settings" [ref=f1e598] [cursor=pointer]
-          - button "Hide sidebar" [ref=f1e601] [cursor=pointer]
-  - separator "Resize sidebar" [ref=f1e605]
-  - main [ref=f1e607]:
-    - generic [ref=f1e608]:
-      - generic [ref=f1e612]:
-        - button "STU2348 Flip Local preview" [ref=f1e615] [cursor=pointer]:
-          - generic [ref=f1e618]:
-            - generic [ref=f1e619]: STU2348 Flip
-            - generic [ref=f1e620]: Local preview
-        - generic [ref=f1e624]:
-          - tablist [ref=f1e627]:
-            - tab "Overview" [ref=f1e628] [cursor=pointer]
-            - tab "Settings" [selected] [ref=f1e630] [cursor=pointer]
-            - tab "Debugging" [ref=f1e632] [cursor=pointer]
-          - main [ref=f1e635]:
-            - generic [ref=f1e636]:
-              - tabpanel "Settings" [ref=f1e637]:
-                - generic [ref=f1e638]:
-                  - generic [ref=f1e643]:
-                    - generic [ref=f1e644]: Site name
-                    - textbox "Site name" [ref=f1e647]: STU2348 Flip
-                  - generic [ref=f1e649]:
-                    - generic [ref=f1e655] [cursor=pointer]:
-                      - generic [ref=f1e656]: PHP version
-                      - combobox "PHP version" [ref=f1e659]:
-                        - option "8.5"
-                        - option "8.4" [selected]
-                        - option "8.3"
-                        - option "8.2"
-                    - generic [ref=f1e664] [cursor=pointer]:
-                      - generic [ref=f1e665]: WordPress version
-                      - combobox "WordPress version" [ref=f1e668]:
-                        - option "Auto-update"
-                        - option "nightly"
-                        - option "7.1"
-                        - option "7.0"
-                        - option "6.9" [selected]
-                        - option "6.8"
-                        - option "6.7"
-                        - option "6.6"
-                        - option "6.5"
-                        - option "6.4"
-                        - option "6.3"
-                        - option "6.2"
-                  - generic [ref=f1e670]:
-                    - generic [ref=f1e676]:
-                      - generic [ref=f1e677]: Admin username
-                      - generic [ref=f1e679]:
-                        - textbox "Admin username" [ref=f1e680]: admin
-                        - generic [ref=f1e684]:
-                          - button "Copy admin username" [ref=f1e685] [cursor=pointer]
-                          - status [ref=f1e688]
-                    - generic [ref=f1e694]:
-                      - generic [ref=f1e695]: Admin password
-                      - generic [ref=f1e697]:
-                        - textbox "Admin password" [ref=f1e698]: e2)q6zs@XYFtBU!RgpXKKVi8
-                        - generic [ref=f1e701]:
-                          - button "Show password" [ref=f1e702] [cursor=pointer]
-                          - generic [ref=f1e705]:
-                            - button "Copy admin password" [ref=f1e706] [cursor=pointer]
-                            - status [ref=f1e709]
-                  - generic [ref=f1e714]:
-                    - generic [ref=f1e715]: Admin email
-                    - generic [ref=f1e717]:
-                      - textbox "Admin email" [ref=f1e718]: admin@localhost.com
-                      - generic [ref=f1e722]:
-                        - button "Copy admin email" [ref=f1e723] [cursor=pointer]
-                        - status [ref=f1e726]
-                  - generic [ref=f1e729]:
-                    - generic [ref=f1e731]:
-                      - checkbox "Use custom domain" [ref=f1e733] [cursor=pointer]
-                      - generic [ref=f1e734] [cursor=pointer]: Use custom domain
-                    - paragraph [ref=f1e735]:
-                      - generic [ref=f1e736]: Your system password will be required to set up the domain.
-              - button "Save settings" [disabled] [ref=f1e738]
-        - button "Hide preview" [ref=f1e739] [cursor=pointer]
-      - complementary "Site preview" [ref=f1e743]:
-        - generic [ref=f1e746]:
-          - button "Open in Browser" [disabled] [ref=f1e747]
-          - button "Open in…" [ref=f1e750] [cursor=pointer]
-        - generic [ref=f1e757]:
-          - paragraph [ref=f1e758]: Start the site to see a live preview.
-          - button "Start site" [ref=f1e759] [cursor=pointer]
-      - separator "Resize site preview" [ref=f1e763]
\ No newline at end of file
diff --git a/.playwright-mcp/page-2026-08-27T10-55-23-761Z.yml b/.playwright-mcp/page-2026-08-27T10-55-23-761Z.yml
deleted file mode 100644
index 6fdc67e721..0000000000
--- a/.playwright-mcp/page-2026-08-27T10-55-23-761Z.yml
+++ /dev/null
@@ -1,274 +0,0 @@
-- generic [ref=f2e5]:
-  - complementary [ref=f2e6]:
-    - generic [ref=f2e8]:
-      - button "Add site" [ref=f2e11] [cursor=pointer]
-      - generic [ref=f2e15]:
-        - generic [ref=f2e18] [cursor=pointer]:
-          - button "Barion WP70 Test" [ref=f2e20]
-          - generic [ref=f2e22]:
-            - button "Site overview" [ref=f2e23]
-            - 'button "Site status: Stopped. Start site" [ref=f2e27]'
-        - generic [ref=f2e34] [cursor=pointer]:
-          - button "Catnap" [ref=f2e36]
-          - generic [ref=f2e38]:
-            - button "Site overview" [ref=f2e39]
-            - 'button "Site status: Stopped. Start site" [ref=f2e43]'
-        - generic [ref=f2e50] [cursor=pointer]:
-          - button "Chat to Blog" [ref=f2e52]
-          - generic [ref=f2e54]:
-            - button "Site overview" [ref=f2e55]
-            - 'button "Site status: Stopped. Start site" [ref=f2e59]'
-        - generic [ref=f2e66] [cursor=pointer]:
-          - button "Cool Beans" [ref=f2e68]
-          - generic [ref=f2e70]:
-            - button "Site overview" [ref=f2e71]
-            - 'button "Site status: Stopped. Start site" [ref=f2e75]'
-        - generic [ref=f2e82] [cursor=pointer]:
-          - button "Ecommerce import" [ref=f2e84]
-          - generic [ref=f2e86]:
-            - button "Site overview" [ref=f2e87]
-            - 'button "Site status: Stopped. Start site" [ref=f2e91]'
-        - generic [ref=f2e98] [cursor=pointer]:
-          - button "Ecommerce offline import" [ref=f2e100]
-          - generic [ref=f2e102]:
-            - button "Site overview" [ref=f2e103]
-            - 'button "Site status: Stopped. Start site" [ref=f2e107]'
-        - generic [ref=f2e114] [cursor=pointer]:
-          - button "flip-test-b" [ref=f2e116]
-          - generic [ref=f2e118]:
-            - button "Site overview" [ref=f2e119]
-            - 'button "Site status: Stopped. Start site" [ref=f2e123]'
-        - generic [ref=f2e130] [cursor=pointer]:
-          - button "Friends plugin" [ref=f2e132]
-          - generic [ref=f2e134]:
-            - button "Site overview" [ref=f2e135]
-            - 'button "Site status: Stopped. Start site" [ref=f2e139]'
-        - generic [ref=f2e146] [cursor=pointer]:
-          - button "Gergely Csécsey" [ref=f2e148]
-          - generic [ref=f2e150]:
-            - button "Site overview" [ref=f2e151]
-            - 'button "Site status: Stopped. Start site" [ref=f2e155]'
-        - generic [ref=f2e162] [cursor=pointer]:
-          - button "Invalid" [ref=f2e164]
-          - generic [ref=f2e166]:
-            - button "Site overview" [ref=f2e167]
-            - 'button "Site status: Stopped. Start site" [ref=f2e171]'
-        - generic [ref=f2e178] [cursor=pointer]:
-          - button "Jetpack backup" [ref=f2e180]
-          - generic [ref=f2e182]:
-            - button "Site overview" [ref=f2e183]
-            - 'button "Site status: Stopped. Start site" [ref=f2e187]'
-        - generic [ref=f2e194] [cursor=pointer]:
-          - button "Local backup" [ref=f2e196]
-          - generic [ref=f2e198]:
-            - button "Site overview" [ref=f2e199]
-            - 'button "Site status: Stopped. Start site" [ref=f2e203]'
-        - generic [ref=f2e210] [cursor=pointer]:
-          - button "My WordPress Website 17" [ref=f2e212]
-          - generic [ref=f2e214]:
-            - button "Site overview" [ref=f2e215]
-            - 'button "Site status: Stopped. Start site" [ref=f2e219]'
-        - generic [ref=f2e226] [cursor=pointer]:
-          - button "My WordPress Website 19" [ref=f2e228]
-          - generic [ref=f2e230]:
-            - button "Site overview" [ref=f2e231]
-            - 'button "Site status: Stopped. Start site" [ref=f2e235]'
-        - generic [ref=f2e242] [cursor=pointer]:
-          - button "My WordPress Website 20" [ref=f2e244]
-          - generic [ref=f2e246]:
-            - button "Site overview" [ref=f2e247]
-            - 'button "Site status: Stopped. Start site" [ref=f2e251]'
-        - generic [ref=f2e258] [cursor=pointer]:
-          - button "My WordPress Website 21" [ref=f2e260]
-          - generic [ref=f2e262]:
-            - button "Site overview" [ref=f2e263]
-            - 'button "Site status: Stopped. Start site" [ref=f2e267]'
-        - generic [ref=f2e274] [cursor=pointer]:
-          - button "My WordPress Website 22" [ref=f2e276]
-          - generic [ref=f2e278]:
-            - button "Site overview" [ref=f2e279]
-            - 'button "Site status: Stopped. Start site" [ref=f2e283]'
-        - generic [ref=f2e290] [cursor=pointer]:
-          - button "My WordPress Website 23" [ref=f2e292]
-          - generic [ref=f2e294]:
-            - button "Site overview" [ref=f2e295]
-            - 'button "Site status: Stopped. Start site" [ref=f2e299]'
-        - generic [ref=f2e306] [cursor=pointer]:
-          - button "Niche Coffee" [ref=f2e308]
-          - generic [ref=f2e310]:
-            - button "Site overview" [ref=f2e311]
-            - 'button "Site status: Stopped. Start site" [ref=f2e315]'
-        - generic [ref=f2e322] [cursor=pointer]:
-          - button "Pasta La Vista" [ref=f2e324]
-          - generic [ref=f2e326]:
-            - button "Site overview" [ref=f2e327]
-            - 'button "Site status: Stopped. Start site" [ref=f2e331]'
-        - generic [ref=f2e338] [cursor=pointer]:
-          - button "Playground backup" [ref=f2e340]
-          - generic [ref=f2e342]:
-            - button "Site overview" [ref=f2e343]
-            - 'button "Site status: Stopped. Start site" [ref=f2e347]'
-        - generic [ref=f2e354] [cursor=pointer]:
-          - button "Rosa Tattoo" [ref=f2e356]
-          - generic [ref=f2e358]:
-            - button "Site overview" [ref=f2e359]
-            - 'button "Site status: Stopped. Start site" [ref=f2e363]'
-        - generic [ref=f2e370] [cursor=pointer]:
-          - button "Seedlet" [ref=f2e372]
-          - generic [ref=f2e374]:
-            - button "Site overview" [ref=f2e375]
-            - 'button "Site status: Stopped. Start site" [ref=f2e379]'
-        - generic [ref=f2e386] [cursor=pointer]:
-          - button "sqlite-fix-test" [ref=f2e388]
-          - generic [ref=f2e390]:
-            - button "Site overview" [ref=f2e391]
-            - 'button "Site status: Stopped. Start site" [ref=f2e395]'
-        - generic [ref=f2e402] [cursor=pointer]:
-          - button "Start/stop test" [ref=f2e404]
-          - generic [ref=f2e406]:
-            - button "Site overview" [ref=f2e407]
-            - 'button "Site status: Stopped. Start site" [ref=f2e411]'
-        - generic [ref=f2e418] [cursor=pointer]:
-          - button "STU-1821 Sandbox" [ref=f2e420]
-          - generic [ref=f2e422]:
-            - button "Site overview" [ref=f2e423]
-            - 'button "Site status: Stopped. Start site" [ref=f2e427]'
-        - generic [ref=f2e434] [cursor=pointer]:
-          - button "STU2348 Aged" [ref=f2e436]
-          - generic [ref=f2e438]:
-            - button "Site overview" [ref=f2e439]
-            - 'button "Site status: Stopped. Start site" [ref=f2e443]'
-        - generic [ref=f2e450] [cursor=pointer]:
-          - button "STU2348 Aged2" [ref=f2e452]
-          - generic [ref=f2e454]:
-            - button "Site overview" [ref=f2e455]
-            - 'button "Site status: Stopped. Start site" [ref=f2e459]'
-        - generic [ref=f2e466] [cursor=pointer]:
-          - button "STU2348 Aged3" [ref=f2e468]
-          - generic [ref=f2e470]:
-            - button "Site overview" [ref=f2e471]
-            - 'button "Site status: Stopped. Start site" [ref=f2e475]'
-        - generic [ref=f2e482] [cursor=pointer]:
-          - button "STU2348 Aged4" [ref=f2e484]
-          - generic [ref=f2e486]:
-            - button "Site overview" [ref=f2e487]
-            - 'button "Site status: Stopped. Start site" [ref=f2e491]'
-        - generic [ref=f2e498] [cursor=pointer]:
-          - button "STU2348 Aged5" [ref=f2e500]
-          - generic [ref=f2e502]:
-            - button "Site overview" [ref=f2e503]
-            - 'button "Site status: Stopped. Start site" [ref=f2e507]'
-        - generic [ref=f2e514] [cursor=pointer]:
-          - button "STU2348 Cron" [ref=f2e516]
-          - generic [ref=f2e518]:
-            - button "Site overview" [ref=f2e519]
-            - 'button "Site status: Stopped. Start site" [ref=f2e523]'
-        - generic [ref=f2e530] [cursor=pointer]:
-          - button "STU2348 Flip" [ref=f2e532]
-          - generic [ref=f2e534]:
-            - button "Site overview" [pressed] [ref=f2e535]
-            - 'button "Site status: Stopped. Start site" [ref=f2e539]'
-        - generic [ref=f2e546] [cursor=pointer]:
-          - button "STU2348 Latest" [ref=f2e548]
-          - generic [ref=f2e550]:
-            - button "Site overview" [ref=f2e551]
-            - 'button "Site status: Stopped. Start site" [ref=f2e555]'
-        - generic [ref=f2e562] [cursor=pointer]:
-          - button "Test-reprint-overwrite" [ref=f2e564]
-          - generic [ref=f2e566]:
-            - button "Site overview" [ref=f2e567]
-            - 'button "Site status: Stopped. Start site" [ref=f2e571]'
-        - generic [ref=f2e578] [cursor=pointer]:
-          - button "VL test" [ref=f2e580]
-          - generic [ref=f2e582]:
-            - button "Site overview" [ref=f2e583]
-            - 'button "Site status: Stopped. Start site" [ref=f2e587]'
-      - generic [ref=f2e592]:
-        - button "Studio Beta options" [ref=f2e594] [cursor=pointer]:
-          - generic [ref=f2e595]: Beta
-        - generic [ref=f2e597]:
-          - button "App settings" [ref=f2e598] [cursor=pointer]
-          - button "Hide sidebar" [ref=f2e601] [cursor=pointer]
-  - separator "Resize sidebar" [ref=f2e605]
-  - main [ref=f2e607]:
-    - generic [ref=f2e608]:
-      - generic [ref=f2e612]:
-        - button "STU2348 Flip Local preview" [ref=f2e615] [cursor=pointer]:
-          - generic [ref=f2e618]:
-            - generic [ref=f2e619]: STU2348 Flip
-            - generic [ref=f2e620]: Local preview
-        - generic [ref=f2e624]:
-          - tablist [ref=f2e627]:
-            - tab "Overview" [ref=f2e628] [cursor=pointer]
-            - tab "Settings" [selected] [ref=f2e630] [cursor=pointer]
-            - tab "Debugging" [ref=f2e632] [cursor=pointer]
-          - main [ref=f2e635]:
-            - generic [ref=f2e636]:
-              - tabpanel "Settings" [ref=f2e637]:
-                - generic [ref=f2e638]:
-                  - generic [ref=f2e643]:
-                    - generic [ref=f2e644]: Site name
-                    - textbox "Site name" [ref=f2e647]: STU2348 Flip
-                  - generic [ref=f2e649]:
-                    - generic [ref=f2e655] [cursor=pointer]:
-                      - generic [ref=f2e656]: PHP version
-                      - combobox "PHP version" [ref=f2e659]:
-                        - option "8.5"
-                        - option "8.4" [selected]
-                        - option "8.3"
-                        - option "8.2"
-                    - generic [ref=f2e664] [cursor=pointer]:
-                      - generic [ref=f2e665]: WordPress version
-                      - combobox "WordPress version" [ref=f2e668]:
-                        - option "Auto-update"
-                        - option "nightly"
-                        - option "7.1" [selected]
-                        - option "7.0"
-                        - option "6.9"
-                        - option "6.8"
-                        - option "6.7"
-                        - option "6.6"
-                        - option "6.5"
-                        - option "6.4"
-                        - option "6.3"
-                        - option "6.2"
-                  - generic [ref=f2e670]:
-                    - generic [ref=f2e676]:
-                      - generic [ref=f2e677]: Admin username
-                      - generic [ref=f2e679]:
-                        - textbox "Admin username" [ref=f2e680]: admin
-                        - generic [ref=f2e684]:
-                          - button "Copy admin username" [ref=f2e685] [cursor=pointer]
-                          - status [ref=f2e688]
-                    - generic [ref=f2e694]:
-                      - generic [ref=f2e695]: Admin password
-                      - generic [ref=f2e697]:
-                        - textbox "Admin password" [ref=f2e698]: e2)q6zs@XYFtBU!RgpXKKVi8
-                        - generic [ref=f2e701]:
-                          - button "Show password" [ref=f2e702] [cursor=pointer]
-                          - generic [ref=f2e705]:
-                            - button "Copy admin password" [ref=f2e706] [cursor=pointer]
-                            - status [ref=f2e709]
-                  - generic [ref=f2e714]:
-                    - generic [ref=f2e715]: Admin email
-                    - generic [ref=f2e717]:
-                      - textbox "Admin email" [ref=f2e718]: admin@localhost.com
-                      - generic [ref=f2e722]:
-                        - button "Copy admin email" [ref=f2e723] [cursor=pointer]
-                        - status [ref=f2e726]
-                  - generic [ref=f2e729]:
-                    - generic [ref=f2e731]:
-                      - checkbox "Use custom domain" [ref=f2e733] [cursor=pointer]
-                      - generic [ref=f2e734] [cursor=pointer]: Use custom domain
-                    - paragraph [ref=f2e735]:
-                      - generic [ref=f2e736]: Your system password will be required to set up the domain.
-              - button "Save settings" [disabled] [ref=f2e738]
-        - button "Hide preview" [ref=f2e739] [cursor=pointer]
-      - complementary "Site preview" [ref=f2e743]:
-        - generic [ref=f2e746]:
-          - button "Open in Browser" [disabled] [ref=f2e747]
-          - button "Open in…" [ref=f2e750] [cursor=pointer]
-        - generic [ref=f2e757]:
-          - paragraph [ref=f2e758]: Start the site to see a live preview.
-          - button "Start site" [ref=f2e759] [cursor=pointer]
-      - separator "Resize site preview" [ref=f2e763]
\ No newline at end of file
diff --git a/.playwright-mcp/page-2026-08-27T10-57-13-335Z.yml b/.playwright-mcp/page-2026-08-27T10-57-13-335Z.yml
deleted file mode 100644
index e69de29bb2..0000000000

From eccd3a63575e35b122910b74586f046590112fb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gergely=20Cs=C3=A9csey?= <gcsecsey@gmail.com>
Date: Tue, 1 Sep 2026 16:01:24 +0100
Subject: [PATCH 05/15] Show the installed version as soon as a pinned site
 selects Auto-update

---
 .../site-settings/edit-site-details.tsx       |  4 +++-
 .../tests/edit-site-details.test.tsx          | 24 +++++++++++++++----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/apps/studio/src/modules/site-settings/edit-site-details.tsx b/apps/studio/src/modules/site-settings/edit-site-details.tsx
index 0aafee3ffe..8af4d01fdf 100644
--- a/apps/studio/src/modules/site-settings/edit-site-details.tsx
+++ b/apps/studio/src/modules/site-settings/edit-site-details.tsx
@@ -441,7 +441,9 @@ const EditSiteDetails = ( { currentWpVersion, onSave }: EditSiteDetailsProps ) =
 													disabled={ isEditingSite }
 													errorMessage={ errorUpdatingWpVersion }
 													installedVersion={
-														selectedSite?.isWpAutoUpdating !== false ? currentWpVersion : undefined
+														selectedWpVersion === DEFAULT_WORDPRESS_VERSION
+															? currentWpVersion
+															: undefined
 													}
 													extraOptions={ [
 														{
diff --git a/apps/studio/src/modules/site-settings/tests/edit-site-details.test.tsx b/apps/studio/src/modules/site-settings/tests/edit-site-details.test.tsx
index c5e69cbb0b..e198357714 100644
--- a/apps/studio/src/modules/site-settings/tests/edit-site-details.test.tsx
+++ b/apps/studio/src/modules/site-settings/tests/edit-site-details.test.tsx
@@ -149,8 +149,6 @@ describe( 'EditSiteDetails', () => {
 		expect( screen.getByLabelText( 'Site name' ) ).toHaveValue( 'Test Site' );
 		expect( screen.getByLabelText( 'PHP version' ) ).toHaveValue( '8.4' );
 		expect( screen.getByLabelText( 'WordPress version' ) ).toHaveValue( 'latest' );
-		// The auto-update option names the version the site runs now, so
-		// "latest" can't be read as "already on the newest release" (STU-2348).
 		expect( screen.getByRole( 'option', { name: 'Auto-update (6.3)' } ) ).toBeInTheDocument();
 		expect( screen.getByRole( 'group', { name: 'Stable Versions' } ) ).toBeInTheDocument();
 	} );
@@ -170,12 +168,30 @@ describe( 'EditSiteDetails', () => {
 			expect( screen.getByRole( 'dialog' ) ).toBeInTheDocument();
 		} );
 
-		// Naming a version next to "Auto-update" on a pinned site would read as
-		// if auto-updates were already on.
 		expect( screen.getByRole( 'option', { name: 'Auto-update' } ) ).toBeInTheDocument();
 		expect( screen.queryByRole( 'option', { name: 'Auto-update (6.3)' } ) ).not.toBeInTheDocument();
 	} );
 
+	it( 'should name the installed version as soon as a pinned site selects auto-update', async () => {
+		vi.mocked( useSiteDetails ).mockReturnValue(
+			createMock< ReturnType< typeof useSiteDetails > >( {
+				...baseMockSiteDetails,
+				selectedSite: { ...baseMockSiteDetails.selectedSite, isWpAutoUpdating: false },
+				isEditModalOpen: true,
+			} )
+		);
+
+		renderWithProvider( <EditSiteDetails { ...defaultProps } /> );
+
+		await waitFor( () => {
+			expect( screen.getByRole( 'dialog' ) ).toBeInTheDocument();
+		} );
+
+		await userEvent.setup().selectOptions( screen.getByLabelText( 'WordPress version' ), 'latest' );
+
+		expect( screen.getByRole( 'option', { name: 'Auto-update (6.3)' } ) ).toBeInTheDocument();
+	} );
+
 	it( 'should close the modal when cancel button is clicked', async () => {
 		renderWithProvider( <EditSiteDetails { ...defaultProps } /> );
 		await waitFor( () => {

From a4671b0c11a07aa4fcfcee84f5c18885f17b7333 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gergely=20Cs=C3=A9csey?= <gcsecsey@gmail.com>
Date: Tue, 1 Sep 2026 16:01:24 +0100
Subject: [PATCH 06/15] Trim narrating comments and name the Auto-update string
 for translators

---
 .../components/wp-version-selector/index.tsx  |  1 -
 .../site-fields/wp-version-control.tsx        |  2 --
 .../site-overview-view/index.test.tsx         |  4 ----
 .../components/site-settings-view/index.tsx   |  7 +++---
 apps/ui/src/data/queries/use-sites.ts         | 13 ++++-------
 .../common/lib/wordpress-version-labels.ts    | 23 ++++++++-----------
 6 files changed, 16 insertions(+), 34 deletions(-)

diff --git a/apps/studio/src/components/wp-version-selector/index.tsx b/apps/studio/src/components/wp-version-selector/index.tsx
index d38c078f45..6229e375ab 100644
--- a/apps/studio/src/components/wp-version-selector/index.tsx
+++ b/apps/studio/src/components/wp-version-selector/index.tsx
@@ -106,7 +106,6 @@ export const WPVersionSelector = ( {
 				>
 					{ wpVersions.length > 0 ? (
 						<>
-							{ /* Ungrouped: the option names the mode itself. */ }
 							<option key={ DEFAULT_WORDPRESS_VERSION } value={ DEFAULT_WORDPRESS_VERSION }>
 								{ getAutoUpdateVersionLabel( installedVersion ) }
 							</option>
diff --git a/apps/ui/src/components/site-fields/wp-version-control.tsx b/apps/ui/src/components/site-fields/wp-version-control.tsx
index 6ee2a2c4f3..cebb23f481 100644
--- a/apps/ui/src/components/site-fields/wp-version-control.tsx
+++ b/apps/ui/src/components/site-fields/wp-version-control.tsx
@@ -42,8 +42,6 @@ export function WpVersionControl< Item >( {
 	const value = field.getValue( { item: data } ) ?? '';
 	const disabled = field.isDisabled( { item: data, field } );
 	const options = ( field.elements ?? [] ) as WpVersionOption[];
-	// The auto-update option carries its own explanation, so it needs no
-	// heading; HTML allows plain options before the first optgroup.
 	const autoUpdateOptions = options.filter( ( option ) => option.group === 'latest' );
 	const groups = [
 		{
diff --git a/apps/ui/src/components/site-overview-view/index.test.tsx b/apps/ui/src/components/site-overview-view/index.test.tsx
index 5c530f3373..d58ea7553c 100644
--- a/apps/ui/src/components/site-overview-view/index.test.tsx
+++ b/apps/ui/src/components/site-overview-view/index.test.tsx
@@ -489,8 +489,6 @@ describe( 'SiteOverviewView', () => {
 		const select = screen.getByLabelText( 'WordPress version' );
 		expect( select.tagName ).toBe( 'SELECT' );
 		expect( select ).toHaveValue( '' );
-		// The auto-update option names the version the site runs now, so
-		// "latest" can't be read as "already on the newest release" (STU-2348).
 		expect( screen.getByRole( 'option', { name: 'Auto-update (6.7.2)' } ) ).toBeInTheDocument();
 		expect( screen.getByRole( 'group', { name: 'Stable Versions' } ) ).toBeInTheDocument();
 	} );
@@ -504,8 +502,6 @@ describe( 'SiteOverviewView', () => {
 
 		renderView( 'general' );
 
-		// Naming a version next to "Auto-update" on a pinned site would read as
-		// if auto-updates were already on.
 		expect( screen.getByRole( 'option', { name: 'Auto-update' } ) ).toBeInTheDocument();
 		expect(
 			screen.queryByRole( 'option', { name: 'Auto-update (6.7.2)' } )
diff --git a/apps/ui/src/components/site-settings-view/index.tsx b/apps/ui/src/components/site-settings-view/index.tsx
index b6304f9aad..396ac3dfee 100644
--- a/apps/ui/src/components/site-settings-view/index.tsx
+++ b/apps/ui/src/components/site-settings-view/index.tsx
@@ -159,10 +159,9 @@ export function SiteSettingsForm( { site, activeTab }: { site: SiteDetails; acti
 				latestValue: '',
 				currentVersion:
 					installedWpVersion && installedWpVersion !== '-' ? installedWpVersion : undefined,
-				// Keyed off the current selection, not `site.isWpAutoUpdating`: the
-				// persisted flag lags a save by a site-updated event, which would
-				// drop the version from the label right after switching to
-				// auto-update.
+				// Current selection, not `site.isWpAutoUpdating`: the persisted flag
+				// lags a save by a site-updated event, which would drop the version
+				// from the label right after switching to auto-update.
 				installedVersion: data.wpVersion === '' ? installedWpVersion : undefined,
 				offline: isOffline,
 			} ),
diff --git a/apps/ui/src/data/queries/use-sites.ts b/apps/ui/src/data/queries/use-sites.ts
index 4a8dcb5039..d81cfb9481 100644
--- a/apps/ui/src/data/queries/use-sites.ts
+++ b/apps/ui/src/data/queries/use-sites.ts
@@ -219,15 +219,10 @@ export function useUpdateSite() {
 			// in-memory details.
 		},
 		onSuccess: ( _data, { site, wpVersion } ) => {
-			// Seed the applied version rather than refetching it: the CLI keeps
-			// restarting the site after this resolves, and a disk read landing
-			// mid-restart still reports the pre-edit version, which would flash
-			// the old value back into the settings form.
-			//
-			// `latest` is the exception: it's the auto-update mode, not a version,
-			// so seeding it would store a non-version in a cache that means "the
-			// version on disk". Refetch instead — the CLI has already installed
-			// the release by the time this resolves, so the read reports it.
+			// Seed the applied version rather than refetching, which can still
+			// report the pre-edit version and flash it back into the form.
+			// `latest` is the auto-update mode, not a version, so there is
+			// nothing to seed — refetch and let the read report what landed.
 			if ( wpVersion && wpVersion !== DEFAULT_WORDPRESS_VERSION ) {
 				queryClient.setQueryData( [ ...WP_VERSION_QUERY_KEY, site.id ], wpVersion );
 			} else if ( wpVersion ) {
diff --git a/packages/common/lib/wordpress-version-labels.ts b/packages/common/lib/wordpress-version-labels.ts
index cc158c12c4..6d67d290ca 100644
--- a/packages/common/lib/wordpress-version-labels.ts
+++ b/packages/common/lib/wordpress-version-labels.ts
@@ -1,24 +1,19 @@
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
- * Label for the auto-updating WordPress version option, shared by the agentic
- * UI and the Classic renderer so translators only see one phrasing.
+ * Label for the auto-updating WordPress version option, shared by the agentic UI
+ * and the Classic renderer so translators only see one phrasing.
  *
- * "latest" is a mode, not a version: Studio enables WordPress core auto-updates
- * for those sites and pins every other choice. The old "latest" label read as a
- * promise that the site already runs the newest release, so wp-admin's update
- * notice looked like a contradiction (STU-2348).
- *
- * @param installedVersion The version the site runs right now, when it is known.
- *                         Omit it on the create-site form, and for sites that
- *                         are pinned — naming a version next to "Auto-update"
- *                         would read as if auto-updates were already on.
- *                         Anything that isn't a concrete version number (`-`,
- *                         `latest`) falls back to the bare label, since
- *                         "Auto-update (latest)" would say nothing.
+ * @param installedVersion Version the site runs right now. Pass it only when
+ *                         auto-update is the selected mode — the brackets are a
+ *                         readout of the current state, so on a pinned site they
+ *                         would name a version auto-update is not keeping you on.
+ *                         A value that is not a concrete version number (`-`,
+ *                         `latest`) falls back to the bare label.
  */
 export function getAutoUpdateVersionLabel( installedVersion?: string ): string {
 	if ( ! installedVersion || ! /^\d/.test( installedVersion ) ) {
+		/* translators: WordPress version dropdown option. Names the auto-update mode, not a version. */
 		return __( 'Auto-update' );
 	}
 	return sprintf(

From 2f1e1b52eb73b9f9dca6fe8319c357541d066a9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gergely=20Cs=C3=A9csey?= <gcsecsey@gmail.com>
Date: Tue, 1 Sep 2026 16:46:37 +0100
Subject: [PATCH 07/15] Accept --wp auto-update as the CLI name for the
 auto-update mode

---
 apps/cli/commands/blueprint/use.ts           | 10 +++-
 apps/cli/commands/config/set.ts              | 34 ++---------
 apps/cli/commands/site/create.ts             | 52 +++++-----------
 apps/cli/lib/tests/wp-version-option.test.ts | 46 +++++++++++++++
 apps/cli/lib/wp-version-option.ts            | 62 ++++++++++++++++++++
 skills/studio-cli/SKILL.md                   |  2 +-
 6 files changed, 138 insertions(+), 68 deletions(-)
 create mode 100644 apps/cli/lib/tests/wp-version-option.test.ts
 create mode 100644 apps/cli/lib/wp-version-option.ts

diff --git a/apps/cli/commands/blueprint/use.ts b/apps/cli/commands/blueprint/use.ts
index f5b04e8bd1..a721b94db4 100644
--- a/apps/cli/commands/blueprint/use.ts
+++ b/apps/cli/commands/blueprint/use.ts
@@ -18,6 +18,11 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 import { runCommand as runCreateSiteCommand } from 'cli/commands/site/create';
 import { getDefaultSitePath } from 'cli/lib/site-paths';
 import { untildify } from 'cli/lib/utils';
+import {
+	CLI_AUTO_UPDATE_WP_VERSION,
+	coerceWpVersionOption,
+	getWpVersionOptionDescription,
+} from 'cli/lib/wp-version-option';
 import { Logger, LoggerError } from 'cli/logger';
 import { StudioArgv } from 'cli/types';
 
@@ -162,8 +167,9 @@ export const registerCommand = ( yargs: StudioArgv ) => {
 				} )
 				.option( 'wp', {
 					type: 'string',
-					describe: __( 'WordPress version' ),
-					defaultDescription: DEFAULT_WORDPRESS_VERSION,
+					describe: getWpVersionOptionDescription(),
+					defaultDescription: CLI_AUTO_UPDATE_WP_VERSION,
+					coerce: coerceWpVersionOption,
 				} )
 				.option( 'php', {
 					type: 'string',
diff --git a/apps/cli/commands/config/set.ts b/apps/cli/commands/config/set.ts
index 55e9f208a4..3e9bb0dbe7 100644
--- a/apps/cli/commands/config/set.ts
+++ b/apps/cli/commands/config/set.ts
@@ -1,4 +1,4 @@
-import { DEFAULT_WORDPRESS_VERSION, MINIMUM_WORDPRESS_VERSION } from '@studio/common/constants';
+import { DEFAULT_WORDPRESS_VERSION } from '@studio/common/constants';
 import { SITE_EVENTS } from '@studio/common/lib/cli-events';
 import { getDomainNameValidationError } from '@studio/common/lib/domains';
 import { arePathsEqual } from '@studio/common/lib/fs-utils';
@@ -24,11 +24,7 @@ import {
 	siteRuntimeFromMode,
 	type SiteMode,
 } from '@studio/common/lib/site-runtime';
-import {
-	getWordPressVersionUrl,
-	isValidWordPressVersion,
-	isWordPressVersionAtLeast,
-} from '@studio/common/lib/wordpress-version-utils';
+import { getWordPressVersionUrl } from '@studio/common/lib/wordpress-version-utils';
 import { SiteCommandLoggerAction as LoggerAction } from '@studio/common/logger-actions';
 import { SupportedPHPVersions } from '@studio/common/types/php-versions';
 import { __, sprintf } from '@wordpress/i18n';
@@ -46,12 +42,12 @@ import { validateSupportedPhpVersion } from 'cli/lib/php-versions';
 import { runWpCliCommand } from 'cli/lib/run-wp-cli-command';
 import { withSiteOperation } from 'cli/lib/site-operations';
 import { setupCustomDomain } from 'cli/lib/site-utils';
-import { ValidationError } from 'cli/lib/validation-error';
 import {
 	isServerRunning,
 	startWordPressServer,
 	stopWordPressServer,
 } from 'cli/lib/wordpress-server-manager';
+import { coerceWpVersionOption, getWpVersionOptionDescription } from 'cli/lib/wp-version-option';
 import { Logger, LoggerError } from 'cli/logger';
 import { StudioArgv } from 'cli/types';
 
@@ -423,28 +419,8 @@ export const registerCommand = ( yargs: StudioArgv ) => {
 				} )
 				.option( 'wp', {
 					type: 'string',
-					description: __(
-						'WordPress version. Use "latest" to let the site auto-update, or pin a version (e.g., "6.4", "6.4.1")'
-					),
-					coerce: ( value: string ) => {
-						if ( ! isValidWordPressVersion( value ) ) {
-							throw new ValidationError(
-								'wp',
-								value,
-								__(
-									'Must be: "latest", "nightly", or a valid version number (e.g., "6.4", "6.4.1", "6.4-beta1")'
-								)
-							);
-						}
-						if ( ! isWordPressVersionAtLeast( value, MINIMUM_WORDPRESS_VERSION ) ) {
-							throw new ValidationError(
-								'wp',
-								value,
-								sprintf( __( 'Must be: at least %s' ), MINIMUM_WORDPRESS_VERSION )
-							);
-						}
-						return value;
-					},
+					description: getWpVersionOptionDescription(),
+					coerce: coerceWpVersionOption,
 				} )
 				.option( 'runtime', {
 					type: 'string',
diff --git a/apps/cli/commands/site/create.ts b/apps/cli/commands/site/create.ts
index 0f30bf4335..b141f19362 100644
--- a/apps/cli/commands/site/create.ts
+++ b/apps/cli/commands/site/create.ts
@@ -2,7 +2,7 @@ import crypto from 'crypto';
 import fs from 'fs';
 import path from 'path';
 import { confirm, input, password, select } from '@inquirer/prompts';
-import { DEFAULT_WORDPRESS_VERSION, MINIMUM_WORDPRESS_VERSION } from '@studio/common/constants';
+import { DEFAULT_WORDPRESS_VERSION } from '@studio/common/constants';
 import { installAiInstructionsToSite } from '@studio/common/lib/agent-skills';
 import {
 	createBlueprintTempDirSync,
@@ -53,10 +53,6 @@ import {
 } from '@studio/common/lib/site-runtime';
 import { sortSites } from '@studio/common/lib/sort-sites';
 import { getServerFilesPath } from '@studio/common/lib/well-known-paths';
-import {
-	isValidWordPressVersion,
-	isWordPressVersionAtLeast,
-} from '@studio/common/lib/wordpress-version-utils';
 import { fetchWordPressVersions } from '@studio/common/lib/wordpress-versions';
 import { SiteCommandLoggerAction as LoggerAction } from '@studio/common/logger-actions';
 import {
@@ -98,6 +94,11 @@ import { StatsGroup } from 'cli/lib/types/bump-stats';
 import { untildify } from 'cli/lib/utils';
 import { ValidationError } from 'cli/lib/validation-error';
 import { runBlueprint, startWordPressServer } from 'cli/lib/wordpress-server-manager';
+import {
+	CLI_AUTO_UPDATE_WP_VERSION,
+	coerceWpVersionOption,
+	getWpVersionOptionDescription,
+} from 'cli/lib/wp-version-option';
 import { Logger, LoggerError } from 'cli/logger';
 import { StudioArgv } from 'cli/types';
 
@@ -1110,28 +1111,6 @@ function coerceSiteId( value: string ) {
 	return value;
 }
 
-function coerceWpVersion( value: string ) {
-	if ( ! isValidWordPressVersion( value ) ) {
-		throw new ValidationError(
-			'wp',
-			value,
-			__(
-				'Must be: "latest", "nightly", or a valid version number (e.g., "6.4", "6.4.1", "6.4-beta1")'
-			)
-		);
-	}
-
-	if ( ! isWordPressVersionAtLeast( value, MINIMUM_WORDPRESS_VERSION ) ) {
-		throw new ValidationError(
-			'wp',
-			value,
-			sprintf( __( 'Must be: at least %s' ), MINIMUM_WORDPRESS_VERSION )
-		);
-	}
-
-	return value;
-}
-
 export const registerCommand = ( yargs: StudioArgv ) => {
 	return yargs.command( {
 		command: 'create',
@@ -1150,11 +1129,9 @@ export const registerCommand = ( yargs: StudioArgv ) => {
 				} )
 				.option( 'wp', {
 					type: 'string',
-					describe: __(
-						'WordPress version. Use "latest" to let the site auto-update, or pin a version (e.g., "6.4", "6.4.1")'
-					),
-					defaultDescription: DEFAULT_WORDPRESS_VERSION,
-					coerce: coerceWpVersion,
+					describe: getWpVersionOptionDescription(),
+					defaultDescription: CLI_AUTO_UPDATE_WP_VERSION,
+					coerce: coerceWpVersionOption,
 				} )
 				.option( 'php', {
 					type: 'string',
@@ -1379,15 +1356,18 @@ export const registerCommand = ( yargs: StudioArgv ) => {
 						try {
 							const versions = await fetchWordPressVersions();
 							wpChoices = versions.map( ( v ) => ( {
-								name: v.value === 'latest' ? `latest (${ v.label })` : v.label,
+								name:
+									v.value === DEFAULT_WORDPRESS_VERSION
+										? sprintf( __( 'Auto-update (%s)' ), v.label )
+										: v.label,
 								value: v.value,
 							} ) );
 						} catch {
-							// Offline or API failure — offer only "latest"
+							// Offline or API failure — offer only the auto-update mode
 							wpChoices = [
 								{
-									name: __( 'Latest (recommended)' ),
-									value: 'latest',
+									name: __( 'Auto-update (recommended)' ),
+									value: DEFAULT_WORDPRESS_VERSION,
 								},
 							];
 						}
diff --git a/apps/cli/lib/tests/wp-version-option.test.ts b/apps/cli/lib/tests/wp-version-option.test.ts
new file mode 100644
index 0000000000..bd6467a544
--- /dev/null
+++ b/apps/cli/lib/tests/wp-version-option.test.ts
@@ -0,0 +1,46 @@
+import { DEFAULT_WORDPRESS_VERSION } from '@studio/common/constants';
+import { ValidationError } from 'cli/lib/validation-error';
+import {
+	CLI_AUTO_UPDATE_WP_VERSION,
+	coerceWpVersionOption,
+	normalizeCliWpVersion,
+} from 'cli/lib/wp-version-option';
+
+describe( 'normalizeCliWpVersion', () => {
+	it( 'resolves the auto-update alias to the internal mode value', () => {
+		expect( normalizeCliWpVersion( CLI_AUTO_UPDATE_WP_VERSION ) ).toBe( DEFAULT_WORDPRESS_VERSION );
+	} );
+
+	it( 'passes every other value through untouched', () => {
+		for ( const value of [ 'latest', 'nightly', '6.4', '6.4.1', '6.4-beta1' ] ) {
+			expect( normalizeCliWpVersion( value ) ).toBe( value );
+		}
+	} );
+} );
+
+describe( 'coerceWpVersionOption', () => {
+	it( 'accepts the auto-update value and returns the internal mode', () => {
+		expect( coerceWpVersionOption( CLI_AUTO_UPDATE_WP_VERSION ) ).toBe( DEFAULT_WORDPRESS_VERSION );
+	} );
+
+	it( 'still accepts `latest`, so existing scripts keep working', () => {
+		expect( coerceWpVersionOption( 'latest' ) ).toBe( DEFAULT_WORDPRESS_VERSION );
+	} );
+
+	it( 'accepts pinned versions and nightly', () => {
+		expect( coerceWpVersionOption( '6.4.1' ) ).toBe( '6.4.1' );
+		expect( coerceWpVersionOption( 'nightly' ) ).toBe( 'nightly' );
+	} );
+
+	it( 'rejects an unknown value', () => {
+		expect( () => coerceWpVersionOption( 'auto' ) ).toThrow( ValidationError );
+	} );
+
+	it( 'rejects a version below the supported minimum', () => {
+		expect( () => coerceWpVersionOption( '4.9' ) ).toThrow( ValidationError );
+	} );
+
+	it( 'reports the value the user typed, not the resolved one', () => {
+		expect( () => coerceWpVersionOption( 'auto-updates' ) ).toThrow( /auto-updates/ );
+	} );
+} );
diff --git a/apps/cli/lib/wp-version-option.ts b/apps/cli/lib/wp-version-option.ts
new file mode 100644
index 0000000000..29af448b8e
--- /dev/null
+++ b/apps/cli/lib/wp-version-option.ts
@@ -0,0 +1,62 @@
+import { DEFAULT_WORDPRESS_VERSION, MINIMUM_WORDPRESS_VERSION } from '@studio/common/constants';
+import {
+	isValidWordPressVersion,
+	isWordPressVersionAtLeast,
+} from '@studio/common/lib/wordpress-version-utils';
+import { __, sprintf } from '@wordpress/i18n';
+import { ValidationError } from 'cli/lib/validation-error';
+
+/**
+ * CLI-facing name for the auto-update mode, matching the "Auto-update" option in
+ * the apps.
+ *
+ * Internally the mode stays `latest`: it names a cache directory, a segment of
+ * the wordpress.org download URL, and the persisted `wpVersion`. The alias is
+ * resolved here so it never reaches storage, and `latest` keeps working for
+ * existing scripts.
+ */
+export const CLI_AUTO_UPDATE_WP_VERSION = 'auto-update';
+
+export function normalizeCliWpVersion( value: string ): string {
+	return value === CLI_AUTO_UPDATE_WP_VERSION ? DEFAULT_WORDPRESS_VERSION : value;
+}
+
+/** Description for the `--wp` option, shared so both commands read alike. */
+export function getWpVersionOptionDescription(): string {
+	return sprintf(
+		/* translators: %s: the literal CLI value "auto-update", do not translate. */
+		__(
+			'WordPress version. Use "%s" to let the site auto-update, or pin a version (e.g., "6.4", "6.4.1"). "latest" is accepted as an alias.'
+		),
+		CLI_AUTO_UPDATE_WP_VERSION
+	);
+}
+
+/** Resolves the auto-update alias, then validates. Returns the internal value. */
+export function coerceWpVersionOption( value: string ): string {
+	const version = normalizeCliWpVersion( value );
+
+	if ( ! isValidWordPressVersion( version ) ) {
+		throw new ValidationError(
+			'wp',
+			value,
+			sprintf(
+				/* translators: %s: the literal CLI value "auto-update", do not translate. */
+				__(
+					'Must be: "%s", "nightly", or a valid version number (e.g., "6.4", "6.4.1", "6.4-beta1")'
+				),
+				CLI_AUTO_UPDATE_WP_VERSION
+			)
+		);
+	}
+
+	if ( ! isWordPressVersionAtLeast( version, MINIMUM_WORDPRESS_VERSION ) ) {
+		throw new ValidationError(
+			'wp',
+			value,
+			sprintf( __( 'Must be: at least %s' ), MINIMUM_WORDPRESS_VERSION )
+		);
+	}
+
+	return version;
+}
diff --git a/skills/studio-cli/SKILL.md b/skills/studio-cli/SKILL.md
index 22870b6682..10228da10f 100644
--- a/skills/studio-cli/SKILL.md
+++ b/skills/studio-cli/SKILL.md
@@ -33,7 +33,7 @@ studio config    # Get/set site settings (config get | config set)
 studio create --name "My Site" --path ~/Studio/my-site
 ```
 
-**Options:** `--name`, `--wp` (default: "latest", min: 6.2.1), `--php` (default: 8.4, choices: 8.5/8.4/8.3/8.2/8.1/8.0/7.4), `--domain`, `--https`, `--blueprint` (local JSON file path), `--admin-username` (default: "admin"), `--admin-password` (auto-generated if omitted), `--admin-email` (default: "admin@localhost.com"), `--start` (default: true, use `--no-start` to skip), `--skip-browser`, `--skip-log-details`.
+**Options:** `--name`, `--wp` (default: "auto-update", which keeps WordPress core auto-updating; "latest" is accepted as an alias; pin with a version number, min: 6.2.1), `--php` (default: 8.4, choices: 8.5/8.4/8.3/8.2/8.1/8.0/7.4), `--domain`, `--https`, `--blueprint` (local JSON file path), `--admin-username` (default: "admin"), `--admin-password` (auto-generated if omitted), `--admin-email` (default: "admin@localhost.com"), `--start` (default: true, use `--no-start` to skip), `--skip-browser`, `--skip-log-details`.
 
 Without flags in a TTY, the CLI prompts interactively for name, path, WP/PHP versions, and domain.
 

From 5b4398d95df632ee8610dc651791e94181b1a98e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gergely=20Cs=C3=A9csey?= <gcsecsey@gmail.com>
Date: Tue, 1 Sep 2026 17:03:34 +0100
Subject: [PATCH 08/15] Split the WordPress version setting into an update mode
 and a pinned version

---
 .../src/components/site-fields/index.test.ts  |  25 ++--
 apps/ui/src/components/site-fields/index.ts   |  11 +-
 .../components/site-fields/style.module.css   |  20 +++
 .../site-fields/wp-version-control.tsx        | 118 ++++++++++++++++--
 .../site-overview-view/index.test.tsx         |  45 ++++---
 apps/ui/src/index.css                         |  11 ++
 6 files changed, 192 insertions(+), 38 deletions(-)

diff --git a/apps/ui/src/components/site-fields/index.test.ts b/apps/ui/src/components/site-fields/index.test.ts
index c1960d43a6..eec0b15675 100644
--- a/apps/ui/src/components/site-fields/index.test.ts
+++ b/apps/ui/src/components/site-fields/index.test.ts
@@ -28,12 +28,21 @@ describe( 'wpVersionField', () => {
 			installedVersion: '6.9.7',
 		} );
 
-		expect( autoUpdateLabels( field ) ).toEqual( [
-			'Auto-update (6.9.7)',
-			// The hidden `latest` fallback has to match, or a pinned site whose
-			// files can't be read renders a differently worded option.
-			'Auto-update (6.9.7)',
-		] );
+		expect( autoUpdateLabels( field ) ).toEqual( [ 'Auto-update (6.9.7)' ] );
+	} );
+
+	it( 'keeps the seed for a pinned site out of the auto-update group', () => {
+		const field = wpVersionField( DEFAULT_WORDPRESS_VERSION, VERSIONS, { latestValue: '' } );
+
+		// The settings form seeds this value when a pinned site's installed
+		// version can't be read. It has to stay selectable and unoffered, and it
+		// must not claim the site auto-updates.
+		expect( optionsOf( field ) ).toContainEqual( {
+			value: DEFAULT_WORDPRESS_VERSION,
+			label: 'Unknown version',
+			group: 'stable',
+			hidden: true,
+		} );
 	} );
 
 	it( 'falls back to the bare mode name when the installed version is unknown', () => {
@@ -44,7 +53,7 @@ describe( 'wpVersionField', () => {
 				installedVersion,
 			} );
 
-			expect( autoUpdateLabels( field ) ).toEqual( [ 'Auto-update', 'Auto-update' ] );
+			expect( autoUpdateLabels( field ) ).toEqual( [ 'Auto-update' ] );
 		}
 	} );
 
@@ -59,7 +68,7 @@ describe( 'wpVersionField', () => {
 		const options = optionsOf( field );
 
 		expect( options.filter( ( option ) => option.group === 'prerelease' ) ).toEqual( [
-			{ value: '7.2-alpha-63347', label: 'nightly', group: 'prerelease' },
+			{ value: '7.2-alpha-63347', label: 'nightly', group: 'prerelease', current: false },
 		] );
 		expect(
 			options.filter( ( option ) => option.group === 'stable' ).map( ( o ) => o.value )
diff --git a/apps/ui/src/components/site-fields/index.ts b/apps/ui/src/components/site-fields/index.ts
index 6189b69b6c..9e67cfe496 100644
--- a/apps/ui/src/components/site-fields/index.ts
+++ b/apps/ui/src/components/site-fields/index.ts
@@ -117,6 +117,7 @@ export function wpVersionField< T extends { wpVersion: string } >(
 				value: version.value,
 				label: version.label,
 				group: 'prerelease' as const,
+				current: version.value === currentVersion,
 			} ) );
 		let stable: WpVersionOption[] = offers
 			.filter(
@@ -127,6 +128,7 @@ export function wpVersionField< T extends { wpVersion: string } >(
 				value: version.value,
 				label: version.label,
 				group: 'stable' as const,
+				current: version.value === currentVersion,
 			} ) );
 		// The site's installed version may predate the fetched offers — keep it
 		// selectable, sorted into the right group, like the legacy selector's
@@ -136,6 +138,7 @@ export function wpVersionField< T extends { wpVersion: string } >(
 				value: currentVersion,
 				label: currentVersion,
 				group: 'stable',
+				current: true,
 			};
 			if ( isWordPressBetaVersion( currentVersion ) || isWordPressDevVersion( currentVersion ) ) {
 				prerelease = addVersionOption( { ...option, group: 'prerelease' }, prerelease );
@@ -153,11 +156,13 @@ export function wpVersionField< T extends { wpVersion: string } >(
 			// The settings form maps "latest" to '' (auto-update) but falls back
 			// to seeding pinned sites with DEFAULT_WORDPRESS_VERSION when their
 			// installed version can't be read. Keep that seed renderable without
-			// offering it.
+			// offering it, and out of the auto-update group: the site is pinned,
+			// so an "Auto-update" readout there would be wrong.
 			options.push( {
 				value: DEFAULT_WORDPRESS_VERSION,
-				label: autoUpdateLabel,
-				group: 'latest',
+				/* translators: WordPress version option for a pinned site whose installed version Studio cannot read. */
+				label: __( 'Unknown version' ),
+				group: 'stable',
 				hidden: true,
 			} );
 		}
diff --git a/apps/ui/src/components/site-fields/style.module.css b/apps/ui/src/components/site-fields/style.module.css
index 7aff2c6ae3..996c9339b3 100644
--- a/apps/ui/src/components/site-fields/style.module.css
+++ b/apps/ui/src/components/site-fields/style.module.css
@@ -9,3 +9,23 @@
 	flex-shrink: 0;
 	fill: currentColor;
 }
+
+.updateModeControl {
+	display: flex;
+	flex-direction: column;
+	gap: var(--wpds-dimension-padding-sm);
+	min-inline-size: 0;
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+
+.updateModeControl :global(.components-radio-control) {
+	display: flex;
+	flex-direction: column;
+	gap: var(--wpds-dimension-padding-lg);
+}
+
+.pinnedVersionSelect {
+	width: min(180px, 100%);
+}
diff --git a/apps/ui/src/components/site-fields/wp-version-control.tsx b/apps/ui/src/components/site-fields/wp-version-control.tsx
index cebb23f481..b1236c3e79 100644
--- a/apps/ui/src/components/site-fields/wp-version-control.tsx
+++ b/apps/ui/src/components/site-fields/wp-version-control.tsx
@@ -1,5 +1,5 @@
-import { SelectControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { BaseControl, SelectControl } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
 import { Tooltip } from '@wordpress/ui';
 import { useState } from 'react';
@@ -21,6 +21,7 @@ const offlineIcon = (
 export type WpVersionOption = Option & {
 	group: 'latest' | 'prerelease' | 'stable';
 	hidden?: boolean;
+	current?: boolean;
 };
 
 /**
@@ -42,7 +43,24 @@ export function WpVersionControl< Item >( {
 	const value = field.getValue( { item: data } ) ?? '';
 	const disabled = field.isDisabled( { item: data, field } );
 	const options = ( field.elements ?? [] ) as WpVersionOption[];
-	const autoUpdateOptions = options.filter( ( option ) => option.group === 'latest' );
+	const autoUpdateOption = options.find(
+		( option ) => option.group === 'latest' && ! option.hidden
+	);
+	const pinnedOptions = options.filter(
+		( option ) => option.group !== 'latest' && ! option.hidden
+	);
+	const currentVersion = pinnedOptions.find( ( option ) => option.current );
+	// Without a version list there is nothing to pin to, so the settings form
+	// keeps the plain dropdown rather than offering an empty picker.
+	const usesUpdateModeControl = autoUpdateOption?.value === '' && pinnedOptions.length > 0;
+	const automaticUpdates = value === autoUpdateOption?.value;
+	const modeControlName = `${ String( field.id ) }-update-mode`;
+	// Outside the update-mode control the auto-update option carries its own
+	// explanation, so it needs no heading; HTML allows plain options before the
+	// first optgroup.
+	const autoUpdateOptions = usesUpdateModeControl
+		? []
+		: options.filter( ( option ) => option.group === 'latest' );
 	const groups = [
 		{
 			label: __( 'Beta & Nightly' ),
@@ -54,15 +72,21 @@ export function WpVersionControl< Item >( {
 		},
 	].filter( ( group ) => group.options.length > 0 );
 
-	const select = (
+	const updateValue = ( newValue: string ) =>
+		onChange( field.setValue( { item: data, value: newValue } ) );
+	const selectedVersion =
+		usesUpdateModeControl && automaticUpdates
+			? currentVersion?.value ?? pinnedOptions[ 0 ]?.value ?? value
+			: value;
+	const versionSelect = (
 		<SelectControl
 			__next40pxDefaultSize
 			__nextHasNoMarginBottom
-			label={ field.label }
-			hideLabelFromVision={ hideLabelFromVision }
-			value={ value }
+			label={ usesUpdateModeControl ? __( 'Version' ) : field.label }
+			hideLabelFromVision={ usesUpdateModeControl ? true : hideLabelFromVision }
+			value={ selectedVersion }
 			disabled={ disabled }
-			onChange={ ( newValue ) => onChange( field.setValue( { item: data, value: newValue } ) ) }
+			onChange={ updateValue }
 		>
 			{ autoUpdateOptions.map( ( option ) => (
 				<option key={ option.value } value={ option.value } hidden={ option.hidden }>
@@ -80,6 +104,80 @@ export function WpVersionControl< Item >( {
 			) ) }
 		</SelectControl>
 	);
+	const control = usesUpdateModeControl ? (
+		<BaseControl
+			__nextHasNoMarginBottom
+			label={ field.label }
+			hideLabelFromVision={ hideLabelFromVision }
+		>
+			<fieldset
+				className={ styles.updateModeControl }
+				disabled={ disabled }
+				aria-label={ field.label }
+			>
+				<div className="components-radio-control">
+					<div className="components-radio-control__option">
+						<input
+							id={ `${ modeControlName }-automatic` }
+							className="components-radio-control__input"
+							type="radio"
+							name={ modeControlName }
+							value="automatic"
+							checked={ automaticUpdates }
+							onChange={ () => {
+								if ( autoUpdateOption ) updateValue( autoUpdateOption.value );
+							} }
+						/>
+						<label
+							htmlFor={ `${ modeControlName }-automatic` }
+							className="components-radio-control__label"
+						>
+							{ __( 'Automatic updates' ) }
+						</label>
+						<p className="components-radio-control__option-description">
+							{ /* Naming a version on a pinned site would read as if
+							     auto-update were keeping it there. */ }
+							{ automaticUpdates && currentVersion
+								? sprintf(
+										/* translators: %s: WordPress version the site runs now, e.g. 6.9.7 */
+										__(
+											'WordPress installs updates on its own schedule. Currently using version %s.'
+										),
+										currentVersion.value
+								  )
+								: __( 'WordPress installs updates on its own schedule.' ) }
+						</p>
+					</div>
+					<div className="components-radio-control__option">
+						<input
+							id={ `${ modeControlName }-pinned` }
+							className="components-radio-control__input"
+							type="radio"
+							name={ modeControlName }
+							value="pinned"
+							checked={ ! automaticUpdates }
+							onChange={ () =>
+								updateValue( currentVersion?.value ?? pinnedOptions[ 0 ]?.value ?? value )
+							}
+						/>
+						<label
+							htmlFor={ `${ modeControlName }-pinned` }
+							className="components-radio-control__label"
+						>
+							{ __( 'Select a version' ) }
+						</label>
+						<div
+							className={ `${ styles.pinnedVersionSelect } components-radio-control__option-description` }
+						>
+							{ versionSelect }
+						</div>
+					</div>
+				</div>
+			</fieldset>
+		</BaseControl>
+	) : (
+		versionSelect
+	);
 
 	if ( disabled && field.description ) {
 		// wpds narrows Tooltip.Root's props to hover-only usage; the runtime
@@ -98,7 +196,7 @@ export function WpVersionControl< Item >( {
 							onMouseEnter={ () => setShowTooltip( true ) }
 							onMouseLeave={ () => setShowTooltip( false ) }
 						>
-							<div style={ { pointerEvents: 'none' } }>{ select }</div>
+							<div style={ { pointerEvents: 'none' } }>{ control }</div>
 						</div>
 					}
 				/>
@@ -112,5 +210,5 @@ export function WpVersionControl< Item >( {
 			</Tooltip.Root>
 		);
 	}
-	return select;
+	return control;
 }
diff --git a/apps/ui/src/components/site-overview-view/index.test.tsx b/apps/ui/src/components/site-overview-view/index.test.tsx
index d58ea7553c..65bdb8b02c 100644
--- a/apps/ui/src/components/site-overview-view/index.test.tsx
+++ b/apps/ui/src/components/site-overview-view/index.test.tsx
@@ -480,20 +480,23 @@ describe( 'SiteOverviewView', () => {
 		).not.toHaveClass( settingsStyles.emailControl );
 	} );
 
-	it( 'renders the WordPress version dropdown with auto-update preselected for auto-updating sites', () => {
+	it( 'preselects automatic updates and names the installed version for auto-updating sites', () => {
 		useWordPressVersionsMock.mockReturnValue( { data: WP_VERSIONS } );
 		useWpVersionMock.mockReturnValue( { data: '6.7.2' } );
 
 		renderView( 'general' );
 
-		const select = screen.getByLabelText( 'WordPress version' );
+		expect( screen.getByRole( 'radio', { name: 'Automatic updates' } ) ).toBeChecked();
+		// The mode names the version the site runs now, so "latest" can't be
+		// read as "already on the newest release" (STU-2348).
+		expect( screen.getByText( /Currently using version 6\.7\.2\./ ) ).toBeVisible();
+		const select = screen.getByLabelText( 'Version' );
 		expect( select.tagName ).toBe( 'SELECT' );
-		expect( select ).toHaveValue( '' );
-		expect( screen.getByRole( 'option', { name: 'Auto-update (6.7.2)' } ) ).toBeInTheDocument();
+		expect( select ).toHaveValue( '6.7.2' );
 		expect( screen.getByRole( 'group', { name: 'Stable Versions' } ) ).toBeInTheDocument();
 	} );
 
-	it( 'omits the installed version from the auto-update option for pinned sites', () => {
+	it( 'preselects the version picker for pinned sites', () => {
 		useWordPressVersionsMock.mockReturnValue( { data: WP_VERSIONS } );
 		useWpVersionMock.mockReturnValue( { data: '6.7.2' } );
 		useSitesMock.mockReturnValue( {
@@ -502,10 +505,11 @@ describe( 'SiteOverviewView', () => {
 
 		renderView( 'general' );
 
-		expect( screen.getByRole( 'option', { name: 'Auto-update' } ) ).toBeInTheDocument();
-		expect(
-			screen.queryByRole( 'option', { name: 'Auto-update (6.7.2)' } )
-		).not.toBeInTheDocument();
+		expect( screen.getByRole( 'radio', { name: 'Select a version' } ) ).toBeChecked();
+		expect( screen.getByLabelText( 'Version' ) ).toHaveValue( '6.7.2' );
+		// Naming the version under "Automatic updates" on a pinned site would
+		// read as if auto-update were keeping the site on it (STU-2348).
+		expect( screen.queryByText( /Currently using version/ ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'saves a pinned WordPress version picked from the dropdown', () => {
@@ -515,7 +519,7 @@ describe( 'SiteOverviewView', () => {
 
 		renderView( 'general' );
 
-		fireEvent.change( screen.getByLabelText( 'WordPress version' ), {
+		fireEvent.change( screen.getByLabelText( 'Version' ), {
 			target: { value: '6.7.2' },
 		} );
 		fireEvent.click( screen.getByRole( 'button', { name: 'Save settings' } ) );
@@ -539,7 +543,7 @@ describe( 'SiteOverviewView', () => {
 
 		renderView( 'general' );
 
-		const select = screen.getByLabelText( 'WordPress version' );
+		const select = screen.getByLabelText( 'Version' );
 		expect( select ).toHaveValue( '6.5.2' );
 		expect( screen.getByRole( 'option', { name: '6.5.2' } ) ).toBeInTheDocument();
 	} );
@@ -584,7 +588,7 @@ describe( 'SiteOverviewView', () => {
 
 		const { showSite } = renderView( 'general' );
 
-		fireEvent.change( screen.getByLabelText( 'WordPress version' ), {
+		fireEvent.change( screen.getByLabelText( 'Version' ), {
 			target: { value: '6.7.2' },
 		} );
 
@@ -595,7 +599,7 @@ describe( 'SiteOverviewView', () => {
 		} );
 		showSite( 'site-1' );
 
-		expect( screen.getByLabelText( 'WordPress version' ) ).toHaveValue( '6.7.2' );
+		expect( screen.getByLabelText( 'Version' ) ).toHaveValue( '6.7.2' );
 	} );
 
 	it( 'keeps a pinned site pinned when saving other settings while offline', () => {
@@ -627,9 +631,12 @@ describe( 'SiteOverviewView', () => {
 	it( 'keeps the version field a dropdown when the version list is unavailable', () => {
 		renderView( 'general' );
 
+		// Nothing to pin to, so the update mode stays a plain dropdown rather
+		// than an empty picker.
 		const select = screen.getByLabelText( 'WordPress version' );
 		expect( select.tagName ).toBe( 'SELECT' );
 		expect( select ).toHaveValue( '' );
+		expect( screen.queryByRole( 'radio' ) ).not.toBeInTheDocument();
 	} );
 
 	// Offline only blocks *changing* the version, so the field stays on the
@@ -644,7 +651,7 @@ describe( 'SiteOverviewView', () => {
 
 		renderView( 'general' );
 
-		const select = screen.getByLabelText( 'WordPress version' );
+		const select = screen.getByLabelText( 'Version' );
 		expect( select.tagName ).toBe( 'SELECT' );
 		expect( select ).toBeDisabled();
 		expect( select ).toHaveValue( '6.5.2' );
@@ -673,10 +680,14 @@ describe( 'SiteOverviewView', () => {
 
 		renderView( 'general' );
 
-		const select = screen.getByLabelText( 'WordPress version' );
-		expect( select ).toHaveValue( 'latest' );
+		expect( screen.getByRole( 'radio', { name: 'Select a version' } ) ).toBeChecked();
+		// The site is pinned to files Studio can't read a version from, so the
+		// picker says so instead of showing a version the site may not run.
+		const picker = screen.getByLabelText( 'Version' ) as HTMLSelectElement;
+		expect( picker ).toHaveValue( 'latest' );
+		expect( picker.selectedOptions[ 0 ] ).toHaveTextContent( 'Unknown version' );
 
-		fireEvent.change( select, { target: { value: '' } } );
+		fireEvent.click( screen.getByRole( 'radio', { name: 'Automatic updates' } ) );
 		fireEvent.click( screen.getByRole( 'button', { name: 'Save settings' } ) );
 
 		// 'latest' has to reach the CLI so it actually installs the newest
diff --git a/apps/ui/src/index.css b/apps/ui/src/index.css
index 9723811f38..e0c4a9aab9 100644
--- a/apps/ui/src/index.css
+++ b/apps/ui/src/index.css
@@ -267,11 +267,22 @@ input[type='checkbox']:focus:not( :focus-visible ) {
 	fill: var( --wpds-color-fg-content-neutral-weak );
 }
 
+select optgroup,
 select option {
 	background-color: var( --wpds-color-bg-surface-neutral );
 	color: var( --wpds-color-fg-content-neutral );
 }
 
+[data-wpds-theme-provider-id] .components-radio-control__input[type='radio']:not(:checked) {
+	border-color: var( --wpds-color-stroke-surface-neutral-strong );
+	background: transparent;
+}
+
+[data-wpds-theme-provider-id] .components-radio-control__option-description {
+	color: var( --wpds-color-fg-content-neutral-weak );
+	unicode-bidi: plaintext;
+}
+
 /* @wordpress/components ships its RTL fixups in a separate style-rtl.css
    that this app doesn't load, so its physical checkbox margins put the
    label gap on the wrong side in RTL and shift the input over the label.

From a7d0b6ee03e97001601861468cf9b976be17fd97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gergely=20Cs=C3=A9csey?= <gcsecsey@gmail.com>
Date: Wed, 2 Sep 2026 16:05:02 +0100
Subject: [PATCH 09/15] Show the WordPress update mode as an Automatic updates
 toggle in both UIs

---
 .../components/wp-version-selector/index.tsx  | 152 +++++++++++----
 .../modules/add-site/tests/add-site.test.tsx  |  23 +--
 .../site-settings/edit-site-details.tsx       |   6 +-
 .../tests/edit-site-details.test.tsx          |  58 +++---
 .../create-site-form/index.test.tsx           |  25 ++-
 .../src/components/site-fields/index.test.ts  |  25 +--
 apps/ui/src/components/site-fields/index.ts   |  39 ++--
 .../components/site-fields/style.module.css   |  11 +-
 .../site-fields/wp-version-control.tsx        | 175 +++++++-----------
 .../site-overview-view/index.test.tsx         |  46 +++--
 .../components/site-settings-view/index.tsx   |  13 +-
 apps/ui/src/index.css                         |  11 +-
 .../common/lib/wordpress-version-labels.ts    |  43 +++--
 13 files changed, 332 insertions(+), 295 deletions(-)

diff --git a/apps/studio/src/components/wp-version-selector/index.tsx b/apps/studio/src/components/wp-version-selector/index.tsx
index 6229e375ab..89cf290080 100644
--- a/apps/studio/src/components/wp-version-selector/index.tsx
+++ b/apps/studio/src/components/wp-version-selector/index.tsx
@@ -1,7 +1,11 @@
 import { DEFAULT_WORDPRESS_VERSION, MINIMUM_WORDPRESS_VERSION } from '@studio/common/constants';
-import { getAutoUpdateVersionLabel } from '@studio/common/lib/wordpress-version-labels';
+import {
+	getAutoUpdatesHelpText,
+	getAutoUpdatesToggleLabel,
+	getInstalledVersionLabel,
+} from '@studio/common/lib/wordpress-version-labels';
 import { isWordPressBetaVersion } from '@studio/common/lib/wordpress-version-utils';
-import { SelectControl, Icon } from '@wordpress/components';
+import { FormToggle, SelectControl, Icon } from '@wordpress/components';
 import { info } from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
 import { useEffect } from 'react';
@@ -9,7 +13,7 @@ import offlineIcon from 'src/components/offline-icon';
 import { Tooltip } from 'src/components/tooltip';
 import { useOffline } from 'src/hooks/use-offline';
 import { cx } from 'src/lib/cx';
-import { isWordPressDevVersion } from 'src/lib/version-utils';
+import { getLatestStableWpVersion, isWordPressDevVersion } from 'src/lib/version-utils';
 import { useGetWordPressVersions } from 'src/stores/wordpress-versions-api';
 import { addWpVersionToList } from './add-wp-version-to-list';
 
@@ -24,7 +28,10 @@ type WPVersionSelectorProps = {
 	fallbackOptions: { label: string; value: string }[];
 	/** Custom message to show when offline. If not provided, will use the default message */
 	offlineMessage?: string;
-	/** Shown in the auto-update label. Only pass it for auto-updating sites. */
+	/**
+	 * The version the site runs right now. Reported under the "Automatic
+	 * updates" toggle, and seeds the dropdown when the site leaves it.
+	 */
 	installedVersion?: string;
 };
 
@@ -76,11 +83,109 @@ export const WPVersionSelector = ( {
 		}
 	} );
 
+	// Without a fetched version list there is nothing to pin to, so the control
+	// degrades to a plain dropdown over `fallbackOptions`.
+	const usesUpdateMode = wpVersions.length > 0;
+	const automaticUpdates = selectedValue === DEFAULT_WORDPRESS_VERSION;
+
+	// A function, not an element: auto-update is the default in both forms, and
+	// there the dropdown is never rendered.
+	const renderVersionSelect = () => (
+		<SelectControl
+			className={ cx( errorMessage && 'error-select-control' ) }
+			disabled={ disabled || isOffline }
+			value={ selectedValue }
+			onChange={ onChange }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+		>
+			{ usesUpdateMode ? (
+				<>
+					<optgroup label={ __( 'Beta & Nightly' ) }>
+						{ betaVersions.map( ( { label, value } ) => (
+							<option key={ value } value={ value }>
+								{ label }
+							</option>
+						) ) }
+					</optgroup>
+					<optgroup label={ __( 'Stable Versions' ) }>
+						{ stableVersions.map( ( { label, value } ) => (
+							<option key={ value } value={ value }>
+								{ label }
+							</option>
+						) ) }
+					</optgroup>
+				</>
+			) : (
+				fallbackOptions.map( ( { label, value } ) => (
+					<option key={ value } value={ value }>
+						{ label }
+					</option>
+				) )
+			) }
+		</SelectControl>
+	);
+
+	if ( usesUpdateMode ) {
+		// Leaving auto-update lands on the version the site already runs, or on
+		// the newest stable release for a site that doesn't exist yet.
+		const pinnedFallback =
+			installedVersion || getLatestStableWpVersion( wpVersions ) || DEFAULT_WORDPRESS_VERSION;
+		return (
+			<div
+				role="group"
+				aria-label={ __( 'WordPress version' ) }
+				className="flex flex-1 flex-col gap-1.5 leading-4"
+			>
+				<span className="font-semibold">{ __( 'WordPress version' ) }</span>
+				<Tooltip
+					disabled={ ! isOffline }
+					icon={ offlineIcon }
+					text={ message }
+					placement="top-start"
+					className="flex flex-1 flex-col gap-1.5"
+				>
+					<div className="flex justify-start items-start gap-2">
+						<FormToggle
+							className="mt-0.5"
+							id="wp-auto-update-toggle"
+							checked={ automaticUpdates }
+							disabled={ disabled || isOffline }
+							onChange={ ( event ) =>
+								onChange( event.target.checked ? DEFAULT_WORDPRESS_VERSION : pinnedFallback )
+							}
+						/>
+						<div className="flex flex-col gap-1">
+							<label htmlFor="wp-auto-update-toggle">{ getAutoUpdatesToggleLabel() }</label>
+							<div className="a8c-body-small text-frame-text-secondary">
+								{ getAutoUpdatesHelpText( automaticUpdates ) }
+							</div>
+						</div>
+					</div>
+					{ /* Naming a version while the site is pinned would read as if
+					     auto-update were keeping it there — the dropdown says it. */ }
+					{ automaticUpdates ? (
+						installedVersion && (
+							<div className="a8c-body-small text-frame-text-secondary">
+								{ getInstalledVersionLabel( installedVersion ) }
+							</div>
+						)
+					) : (
+						<label className="flex flex-col gap-1.5 leading-4">
+							<span className="font-semibold">{ __( 'Version' ) }</span>
+							{ renderVersionSelect() }
+						</label>
+					) }
+				</Tooltip>
+			</div>
+		);
+	}
+
 	return (
 		<label className="flex flex-1 flex-col gap-1.5 leading-4">
 			<span className="font-semibold flex items-center gap-0.5">
 				{ __( 'WordPress version' ) }
-				{ selectedValue !== DEFAULT_WORDPRESS_VERSION && (
+				{ ! automaticUpdates && (
 					<Tooltip
 						text={ __( 'WordPress Core automatic updates will be disabled for this site.' ) }
 						placement="top-start"
@@ -96,42 +201,7 @@ export const WPVersionSelector = ( {
 				placement="top-start"
 				className="flex flex-1 flex-col"
 			>
-				<SelectControl
-					className={ cx( errorMessage && 'error-select-control' ) }
-					disabled={ disabled || isOffline }
-					value={ selectedValue }
-					onChange={ onChange }
-					__next40pxDefaultSize
-					__nextHasNoMarginBottom
-				>
-					{ wpVersions.length > 0 ? (
-						<>
-							<option key={ DEFAULT_WORDPRESS_VERSION } value={ DEFAULT_WORDPRESS_VERSION }>
-								{ getAutoUpdateVersionLabel( installedVersion ) }
-							</option>
-							<optgroup label={ __( 'Beta & Nightly' ) }>
-								{ betaVersions.map( ( { label, value } ) => (
-									<option key={ value } value={ value }>
-										{ label }
-									</option>
-								) ) }
-							</optgroup>
-							<optgroup label={ __( 'Stable Versions' ) }>
-								{ stableVersions.map( ( { label, value } ) => (
-									<option key={ value } value={ value }>
-										{ label }
-									</option>
-								) ) }
-							</optgroup>
-						</>
-					) : (
-						fallbackOptions.map( ( { label, value } ) => (
-							<option key={ value } value={ value }>
-								{ label }
-							</option>
-						) )
-					) }
-				</SelectControl>
+				{ renderVersionSelect() }
 			</Tooltip>
 		</label>
 	);
diff --git a/apps/studio/src/modules/add-site/tests/add-site.test.tsx b/apps/studio/src/modules/add-site/tests/add-site.test.tsx
index a792e92606..1698ea9351 100644
--- a/apps/studio/src/modules/add-site/tests/add-site.test.tsx
+++ b/apps/studio/src/modules/add-site/tests/add-site.test.tsx
@@ -405,13 +405,12 @@ describe( 'AddSite', () => {
 
 		expect( screen.getByText( 'WordPress version' ) ).toBeInTheDocument();
 
-		const comboboxes = screen.getAllByRole( 'combobox' );
-		expect( comboboxes.length ).toBeGreaterThanOrEqual( 2 );
-
-		const wpVersionDropdown = comboboxes[ 1 ];
-		expect( wpVersionDropdown ).toBeInTheDocument();
+		// New sites auto-update, so the picker only appears once that is off.
+		expect( screen.getByLabelText( 'Automatic updates' ) ).toBeChecked();
+		expect( screen.queryByLabelText( 'Version' ) ).not.toBeInTheDocument();
 
-		await user.selectOptions( wpVersionDropdown, '6.3.3' );
+		await user.click( screen.getByLabelText( 'Automatic updates' ) );
+		await user.selectOptions( screen.getByLabelText( 'Version' ), '6.3.3' );
 
 		mockShowOpenFolderDialog.mockResolvedValue( {
 			path: 'test',
@@ -556,8 +555,7 @@ describe( 'AddSite', () => {
 		await user.click( screen.getByRole( 'button', { name: 'Continue' } ) );
 		await user.click( screen.getByRole( 'button', { name: 'Advanced settings' } ) );
 
-		const wpVersionSelect = screen.getByLabelText( 'WordPress version' );
-		expect( wpVersionSelect ).toBeDisabled();
+		expect( screen.getByLabelText( 'Automatic updates' ) ).toBeDisabled();
 	} );
 
 	it( 'should enable WordPress version field when online', async () => {
@@ -572,8 +570,7 @@ describe( 'AddSite', () => {
 		await user.click( screen.getByRole( 'button', { name: 'Continue' } ) );
 		await user.click( screen.getByRole( 'button', { name: 'Advanced settings' } ) );
 
-		const wpVersionSelect = screen.getByLabelText( 'WordPress version' );
-		expect( wpVersionSelect ).toBeEnabled();
+		expect( screen.getByLabelText( 'Automatic updates' ) ).toBeEnabled();
 	} );
 
 	it( 'should show tooltip with offline message when hovering over disabled WordPress version field', async () => {
@@ -588,8 +585,7 @@ describe( 'AddSite', () => {
 		await user.click( screen.getByRole( 'button', { name: 'Continue' } ) );
 		await user.click( screen.getByRole( 'button', { name: 'Advanced settings' } ) );
 
-		const wpVersionSelect = screen.getByLabelText( 'WordPress version' );
-		await user.hover( wpVersionSelect );
+		await user.hover( screen.getByLabelText( 'Automatic updates' ) );
 
 		expect(
 			screen.getByText(
@@ -610,8 +606,7 @@ describe( 'AddSite', () => {
 		await user.click( screen.getByRole( 'button', { name: 'Continue' } ) );
 		await user.click( screen.getByRole( 'button', { name: 'Advanced settings' } ) );
 
-		const wpVersionSelect = screen.getByLabelText( 'WordPress version' );
-		await user.hover( wpVersionSelect );
+		await user.hover( screen.getByLabelText( 'Automatic updates' ) );
 
 		expect(
 			screen.queryByText(
diff --git a/apps/studio/src/modules/site-settings/edit-site-details.tsx b/apps/studio/src/modules/site-settings/edit-site-details.tsx
index 8af4d01fdf..f8a7460b75 100644
--- a/apps/studio/src/modules/site-settings/edit-site-details.tsx
+++ b/apps/studio/src/modules/site-settings/edit-site-details.tsx
@@ -440,11 +440,7 @@ const EditSiteDetails = ( { currentWpVersion, onSave }: EditSiteDetailsProps ) =
 													onChange={ setSelectedWpVersion }
 													disabled={ isEditingSite }
 													errorMessage={ errorUpdatingWpVersion }
-													installedVersion={
-														selectedWpVersion === DEFAULT_WORDPRESS_VERSION
-															? currentWpVersion
-															: undefined
-													}
+													installedVersion={ currentWpVersion }
 													extraOptions={ [
 														{
 															label: currentWpVersion,
diff --git a/apps/studio/src/modules/site-settings/tests/edit-site-details.test.tsx b/apps/studio/src/modules/site-settings/tests/edit-site-details.test.tsx
index e198357714..2aa1324463 100644
--- a/apps/studio/src/modules/site-settings/tests/edit-site-details.test.tsx
+++ b/apps/studio/src/modules/site-settings/tests/edit-site-details.test.tsx
@@ -69,6 +69,15 @@ vi.mock( 'src/hooks/use-offline', () => ( {
 	useOffline: vi.fn().mockReturnValue( false ),
 } ) );
 
+/** New sites and auto-updating sites hide the picker behind the toggle. */
+const pinVersion = async (
+	user: ReturnType< typeof userEvent.setup >,
+	version: string
+): Promise< void > => {
+	await user.click( screen.getByLabelText( 'Automatic updates' ) );
+	await user.selectOptions( screen.getByLabelText( 'Version' ), version );
+};
+
 const renderWithProvider = ( children: React.ReactElement ) => {
 	const store = createTestStore( {
 		preloadedState: {
@@ -148,12 +157,13 @@ describe( 'EditSiteDetails', () => {
 
 		expect( screen.getByLabelText( 'Site name' ) ).toHaveValue( 'Test Site' );
 		expect( screen.getByLabelText( 'PHP version' ) ).toHaveValue( '8.4' );
-		expect( screen.getByLabelText( 'WordPress version' ) ).toHaveValue( 'latest' );
-		expect( screen.getByRole( 'option', { name: 'Auto-update (6.3)' } ) ).toBeInTheDocument();
-		expect( screen.getByRole( 'group', { name: 'Stable Versions' } ) ).toBeInTheDocument();
+		expect( screen.getByLabelText( 'Automatic updates' ) ).toBeChecked();
+		expect( screen.getByText( /Installed version/ ) ).toHaveTextContent( 'Installed version: 6.3' );
+		// Nothing to pick while WordPress owns the version.
+		expect( screen.queryByLabelText( 'Version' ) ).not.toBeInTheDocument();
 	} );
 
-	it( 'should omit the installed version from the auto-update option for pinned sites', async () => {
+	it( 'should show the version picker for pinned sites', async () => {
 		vi.mocked( useSiteDetails ).mockReturnValue(
 			createMock< ReturnType< typeof useSiteDetails > >( {
 				...baseMockSiteDetails,
@@ -168,11 +178,15 @@ describe( 'EditSiteDetails', () => {
 			expect( screen.getByRole( 'dialog' ) ).toBeInTheDocument();
 		} );
 
-		expect( screen.getByRole( 'option', { name: 'Auto-update' } ) ).toBeInTheDocument();
-		expect( screen.queryByRole( 'option', { name: 'Auto-update (6.3)' } ) ).not.toBeInTheDocument();
+		expect( screen.getByLabelText( 'Automatic updates' ) ).not.toBeChecked();
+		expect( screen.getByLabelText( 'Version' ) ).toHaveValue( '6.3' );
+		expect( screen.getByRole( 'group', { name: 'Stable Versions' } ) ).toBeInTheDocument();
+		// Naming the installed version beside "Automatic updates" on a pinned
+		// site would read as if auto-update were keeping it there (STU-2348).
+		expect( screen.queryByText( /Installed version/ ) ).not.toBeInTheDocument();
 	} );
 
-	it( 'should name the installed version as soon as a pinned site selects auto-update', async () => {
+	it( 'should name the installed version as soon as a pinned site turns auto-update on', async () => {
 		vi.mocked( useSiteDetails ).mockReturnValue(
 			createMock< ReturnType< typeof useSiteDetails > >( {
 				...baseMockSiteDetails,
@@ -187,9 +201,9 @@ describe( 'EditSiteDetails', () => {
 			expect( screen.getByRole( 'dialog' ) ).toBeInTheDocument();
 		} );
 
-		await userEvent.setup().selectOptions( screen.getByLabelText( 'WordPress version' ), 'latest' );
+		await userEvent.setup().click( screen.getByLabelText( 'Automatic updates' ) );
 
-		expect( screen.getByRole( 'option', { name: 'Auto-update (6.3)' } ) ).toBeInTheDocument();
+		expect( screen.getByText( /Installed version/ ) ).toHaveTextContent( 'Installed version: 6.3' );
 	} );
 
 	it( 'should close the modal when cancel button is clicked', async () => {
@@ -314,8 +328,7 @@ describe( 'EditSiteDetails', () => {
 		} );
 		const user = userEvent.setup();
 
-		const wpVersionSelect = screen.getByLabelText( 'WordPress version' );
-		await user.selectOptions( wpVersionSelect, '6.4' );
+		await pinVersion( user, '6.4' );
 
 		expect( screen.getByRole( 'button', { name: 'Save' } ) ).toBeEnabled();
 	} );
@@ -403,8 +416,7 @@ describe( 'EditSiteDetails', () => {
 		} );
 		const user = userEvent.setup();
 
-		const wpVersionSelect = screen.getByLabelText( 'WordPress version' );
-		await user.selectOptions( wpVersionSelect, '6.4' );
+		await pinVersion( user, '6.4' );
 
 		await user.click( screen.getByRole( 'button', { name: 'Save' } ) );
 
@@ -430,8 +442,7 @@ describe( 'EditSiteDetails', () => {
 		} );
 		const user = userEvent.setup();
 
-		const wpVersionSelect = screen.getByLabelText( 'WordPress version' );
-		await user.selectOptions( wpVersionSelect, '6.8-beta1' );
+		await pinVersion( user, '6.8-beta1' );
 
 		await user.click( screen.getByRole( 'button', { name: 'Save' } ) );
 
@@ -457,8 +468,7 @@ describe( 'EditSiteDetails', () => {
 		} );
 		const user = userEvent.setup();
 
-		const wpVersionSelect = screen.getByLabelText( 'WordPress version' );
-		await user.selectOptions( wpVersionSelect, '6.4' );
+		await pinVersion( user, '6.4' );
 
 		await user.click( screen.getByRole( 'button', { name: 'Save' } ) );
 
@@ -503,7 +513,7 @@ describe( 'EditSiteDetails', () => {
 		} );
 		expect( screen.getByLabelText( 'Site name' ) ).toBeDisabled();
 		expect( screen.getByLabelText( 'PHP version' ) ).toBeDisabled();
-		expect( screen.getByLabelText( 'WordPress version' ) ).toBeDisabled();
+		expect( screen.getByLabelText( 'Automatic updates' ) ).toBeDisabled();
 		expect( screen.getByRole( 'button', { name: 'Cancel' } ) ).toBeDisabled();
 
 		resolveUpdate();
@@ -528,8 +538,7 @@ describe( 'EditSiteDetails', () => {
 			expect( screen.getByRole( 'dialog' ) ).toBeInTheDocument();
 		} );
 
-		const wpVersionSelect = screen.getByLabelText( 'WordPress version' );
-		expect( wpVersionSelect ).toBeDisabled();
+		expect( screen.getByLabelText( 'Automatic updates' ) ).toBeDisabled();
 	} );
 
 	it( 'should enable WordPress version field when online', async () => {
@@ -546,8 +555,7 @@ describe( 'EditSiteDetails', () => {
 			expect( screen.getByRole( 'dialog' ) ).toBeInTheDocument();
 		} );
 
-		const wpVersionSelect = screen.getByLabelText( 'WordPress version' );
-		expect( wpVersionSelect ).toBeEnabled();
+		expect( screen.getByLabelText( 'Automatic updates' ) ).toBeEnabled();
 	} );
 
 	it( 'should show tooltip with offline message when hovering over disabled WordPress version field', async () => {
@@ -565,8 +573,7 @@ describe( 'EditSiteDetails', () => {
 		} );
 		const user = userEvent.setup();
 
-		const wpVersionSelect = screen.getByLabelText( 'WordPress version' );
-		await user.hover( wpVersionSelect );
+		await user.hover( screen.getByLabelText( 'Automatic updates' ) );
 
 		expect(
 			screen.getByText( 'Changing WordPress version requires an internet connection.' )
@@ -585,8 +592,7 @@ describe( 'EditSiteDetails', () => {
 		renderWithProvider( <EditSiteDetails { ...defaultProps } /> );
 		const user = userEvent.setup();
 
-		const wpVersionSelect = screen.getByLabelText( 'WordPress version' );
-		await user.hover( wpVersionSelect );
+		await user.hover( screen.getByLabelText( 'Automatic updates' ) );
 
 		expect(
 			screen.queryByText( 'Changing WordPress version requires an internet connection.' )
diff --git a/apps/ui/src/components/create-site-form/index.test.tsx b/apps/ui/src/components/create-site-form/index.test.tsx
index 59399170a7..d0d1d3791b 100644
--- a/apps/ui/src/components/create-site-form/index.test.tsx
+++ b/apps/ui/src/components/create-site-form/index.test.tsx
@@ -465,9 +465,11 @@ describe( 'CreateSiteForm', () => {
 		renderForm( { name: 'Old Blueprint', wpVersion: '4.9' } );
 		openAdvancedSettings();
 
+		// Auto-update is the default, so no version is pinned and the picker stays away.
 		await waitFor( () =>
-			expect( screen.getByLabelText( 'WordPress version' ) ).toHaveValue( 'latest' )
+			expect( screen.getByRole( 'checkbox', { name: 'Automatic updates' } ) ).toBeChecked()
 		);
+		expect( screen.queryByLabelText( 'Version' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'uses a stable select control for long WordPress version lists', () => {
@@ -484,8 +486,27 @@ describe( 'CreateSiteForm', () => {
 		} );
 		renderForm( { name: 'Versioned site' } );
 		openAdvancedSettings();
+		fireEvent.click( screen.getByRole( 'checkbox', { name: 'Automatic updates' } ) );
 
-		expect( screen.getByLabelText( 'WordPress version' ).tagName ).toBe( 'SELECT' );
+		expect( screen.getByLabelText( 'Version' ).tagName ).toBe( 'SELECT' );
+	} );
+
+	it( 'pins to the newest stable release when automatic updates are turned off', () => {
+		useWordPressVersionsMock.mockReturnValue( {
+			data: [
+				{ label: '6.9', value: 'latest', isBeta: false, isDevelopment: false },
+				{ label: '7.0-beta1', value: '7.0-beta1', isBeta: true, isDevelopment: false },
+				{ label: '6.9', value: '6.9', isBeta: false, isDevelopment: false },
+				{ label: '6.8', value: '6.8', isBeta: false, isDevelopment: false },
+			],
+		} );
+		renderForm( { name: 'Pinned site' } );
+		openAdvancedSettings();
+		fireEvent.click( screen.getByRole( 'checkbox', { name: 'Automatic updates' } ) );
+
+		// The list is newest-first, so the first stable entry is the newest one —
+		// a prerelease would be a surprising default for a new site.
+		expect( screen.getByLabelText( 'Version' ) ).toHaveValue( '6.9' );
 	} );
 
 	it( 'locks the WordPress version to a disabled "latest" select while offline', async () => {
diff --git a/apps/ui/src/components/site-fields/index.test.ts b/apps/ui/src/components/site-fields/index.test.ts
index eec0b15675..d682d233ba 100644
--- a/apps/ui/src/components/site-fields/index.test.ts
+++ b/apps/ui/src/components/site-fields/index.test.ts
@@ -22,15 +22,6 @@ function autoUpdateLabels( field: ReturnType< typeof wpVersionField > ): string[
 }
 
 describe( 'wpVersionField', () => {
-	it( 'names the installed version in the auto-update option', () => {
-		const field = wpVersionField( DEFAULT_WORDPRESS_VERSION, VERSIONS, {
-			latestValue: '',
-			installedVersion: '6.9.7',
-		} );
-
-		expect( autoUpdateLabels( field ) ).toEqual( [ 'Auto-update (6.9.7)' ] );
-	} );
-
 	it( 'keeps the seed for a pinned site out of the auto-update group', () => {
 		const field = wpVersionField( DEFAULT_WORDPRESS_VERSION, VERSIONS, { latestValue: '' } );
 
@@ -45,19 +36,9 @@ describe( 'wpVersionField', () => {
 		} );
 	} );
 
-	it( 'falls back to the bare mode name when the installed version is unknown', () => {
-		// `latest` is the mode, not a version — "Auto-update (latest)" says nothing.
-		for ( const installedVersion of [ undefined, '', '-', 'latest' ] ) {
-			const field = wpVersionField( DEFAULT_WORDPRESS_VERSION, VERSIONS, {
-				latestValue: '',
-				installedVersion,
-			} );
-
-			expect( autoUpdateLabels( field ) ).toEqual( [ 'Auto-update' ] );
-		}
-	} );
-
-	it( 'uses the bare mode name on the create form, which has no site yet', () => {
+	it( 'names the auto-update option after the mode, not a version', () => {
+		// The settings form hides this option behind the Automatic updates
+		// toggle; only the create form's plain dropdown renders it.
 		const field = wpVersionField( DEFAULT_WORDPRESS_VERSION, VERSIONS );
 
 		expect( autoUpdateLabels( field ) ).toEqual( [ 'Auto-update' ] );
diff --git a/apps/ui/src/components/site-fields/index.ts b/apps/ui/src/components/site-fields/index.ts
index 9e67cfe496..5679ab3f6f 100644
--- a/apps/ui/src/components/site-fields/index.ts
+++ b/apps/ui/src/components/site-fields/index.ts
@@ -80,14 +80,11 @@ export function wpVersionField< T extends { wpVersion: string } >(
 	{
 		latestValue = DEFAULT_WORDPRESS_VERSION,
 		currentVersion,
-		installedVersion,
 		offline = false,
 		offlineMessage = __( 'Changing WordPress version requires an internet connection.' ),
 	}: {
 		latestValue?: string;
 		currentVersion?: string;
-		/** Shown in the auto-update label. Only pass it for auto-updating sites. */
-		installedVersion?: string;
 		offline?: boolean;
 		offlineMessage?: string;
 	} = {}
@@ -111,44 +108,32 @@ export function wpVersionField< T extends { wpVersion: string } >(
 	// only versions we can actually install. Otherwise the create form keeps
 	// its free-text fallback.
 	if ( offers.length || latestValue !== DEFAULT_WORDPRESS_VERSION || offline ) {
-		let prerelease: WpVersionOption[] = offers
+		const toOption = (
+			{ value, label }: { value: string; label: string },
+			group: WpVersionOption[ 'group' ]
+		): WpVersionOption => ( { value, label, group, current: value === currentVersion } );
+		let prerelease = offers
 			.filter( ( version ) => version.isBeta || version.isDevelopment )
-			.map( ( version ) => ( {
-				value: version.value,
-				label: version.label,
-				group: 'prerelease' as const,
-				current: version.value === currentVersion,
-			} ) );
-		let stable: WpVersionOption[] = offers
+			.map( ( version ) => toOption( version, 'prerelease' ) );
+		let stable = offers
 			.filter(
 				( version ) =>
 					version.value !== DEFAULT_WORDPRESS_VERSION && ! version.isBeta && ! version.isDevelopment
 			)
-			.map( ( version ) => ( {
-				value: version.value,
-				label: version.label,
-				group: 'stable' as const,
-				current: version.value === currentVersion,
-			} ) );
+			.map( ( version ) => toOption( version, 'stable' ) );
 		// The site's installed version may predate the fetched offers — keep it
 		// selectable, sorted into the right group, like the legacy selector's
 		// extraOptions.
 		if ( currentVersion && ! offers.some( ( version ) => version.value === currentVersion ) ) {
-			const option: WpVersionOption = {
-				value: currentVersion,
-				label: currentVersion,
-				group: 'stable',
-				current: true,
-			};
+			const offer = { value: currentVersion, label: currentVersion };
 			if ( isWordPressBetaVersion( currentVersion ) || isWordPressDevVersion( currentVersion ) ) {
-				prerelease = addVersionOption( { ...option, group: 'prerelease' }, prerelease );
+				prerelease = addVersionOption( toOption( offer, 'prerelease' ), prerelease );
 			} else {
-				stable = addVersionOption( option, stable );
+				stable = addVersionOption( toOption( offer, 'stable' ), stable );
 			}
 		}
-		const autoUpdateLabel = getAutoUpdateVersionLabel( installedVersion );
 		const options: WpVersionOption[] = [
-			{ value: latestValue, label: autoUpdateLabel, group: 'latest' },
+			{ value: latestValue, label: getAutoUpdateVersionLabel(), group: 'latest' },
 			...prerelease,
 			...stable,
 		];
diff --git a/apps/ui/src/components/site-fields/style.module.css b/apps/ui/src/components/site-fields/style.module.css
index 996c9339b3..e5ccd766e7 100644
--- a/apps/ui/src/components/site-fields/style.module.css
+++ b/apps/ui/src/components/site-fields/style.module.css
@@ -20,12 +20,7 @@
 	border: 0;
 }
 
-.updateModeControl :global(.components-radio-control) {
-	display: flex;
-	flex-direction: column;
-	gap: var(--wpds-dimension-padding-lg);
-}
-
-.pinnedVersionSelect {
-	width: min(180px, 100%);
+.installedVersion {
+	margin: 0;
+	color: var(--wpds-color-fg-content-neutral-weak);
 }
diff --git a/apps/ui/src/components/site-fields/wp-version-control.tsx b/apps/ui/src/components/site-fields/wp-version-control.tsx
index b1236c3e79..49451bc298 100644
--- a/apps/ui/src/components/site-fields/wp-version-control.tsx
+++ b/apps/ui/src/components/site-fields/wp-version-control.tsx
@@ -1,5 +1,10 @@
-import { BaseControl, SelectControl } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import {
+	getAutoUpdatesHelpText,
+	getAutoUpdatesToggleLabel,
+	getInstalledVersionLabel,
+} from '@studio/common/lib/wordpress-version-labels';
+import { BaseControl, SelectControl, ToggleControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
 import { Tooltip } from '@wordpress/ui';
 import { useState } from 'react';
@@ -25,10 +30,12 @@ export type WpVersionOption = Option & {
 };
 
 /**
- * WordPress version dropdown: the auto-update option first, then the pinned
- * versions in optgroups. When the field is disabled with a description
- * (offline), the description shows as a hover tooltip like the legacy UI
- * instead of inline help text.
+ * WordPress version control. Whenever there are versions to pin to, it splits
+ * into an "Automatic updates" toggle and a version dropdown that only appears
+ * once the site leaves auto-update; without a version list it degrades to a
+ * single dropdown carrying the auto-update option. When the field is disabled
+ * with a description (offline), the description shows as a hover tooltip like
+ * the legacy UI instead of inline help text.
  */
 export function WpVersionControl< Item >( {
 	data,
@@ -43,24 +50,23 @@ export function WpVersionControl< Item >( {
 	const value = field.getValue( { item: data } ) ?? '';
 	const disabled = field.isDisabled( { item: data, field } );
 	const options = ( field.elements ?? [] ) as WpVersionOption[];
-	const autoUpdateOption = options.find(
-		( option ) => option.group === 'latest' && ! option.hidden
-	);
+	const autoUpdateOption = options.find( ( option ) => option.group === 'latest' );
 	const pinnedOptions = options.filter(
 		( option ) => option.group !== 'latest' && ! option.hidden
 	);
 	const currentVersion = pinnedOptions.find( ( option ) => option.current );
-	// Without a version list there is nothing to pin to, so the settings form
-	// keeps the plain dropdown rather than offering an empty picker.
-	const usesUpdateModeControl = autoUpdateOption?.value === '' && pinnedOptions.length > 0;
+	// Leaving auto-update lands on the version the site already runs, or on the
+	// newest stable release for a site that doesn't exist yet. The list is
+	// newest-first, so the first stable entry is the newest one — a prerelease
+	// would be a surprising default.
+	const defaultPinnedOption =
+		currentVersion ??
+		pinnedOptions.find( ( option ) => option.group === 'stable' ) ??
+		pinnedOptions[ 0 ];
+	// Without a version list there is nothing to pin to, so the form keeps the
+	// plain dropdown rather than offering an empty picker.
+	const usesUpdateModeControl = !! autoUpdateOption && !! defaultPinnedOption;
 	const automaticUpdates = value === autoUpdateOption?.value;
-	const modeControlName = `${ String( field.id ) }-update-mode`;
-	// Outside the update-mode control the auto-update option carries its own
-	// explanation, so it needs no heading; HTML allows plain options before the
-	// first optgroup.
-	const autoUpdateOptions = usesUpdateModeControl
-		? []
-		: options.filter( ( option ) => option.group === 'latest' );
 	const groups = [
 		{
 			label: __( 'Beta & Nightly' ),
@@ -74,25 +80,24 @@ export function WpVersionControl< Item >( {
 
 	const updateValue = ( newValue: string ) =>
 		onChange( field.setValue( { item: data, value: newValue } ) );
-	const selectedVersion =
-		usesUpdateModeControl && automaticUpdates
-			? currentVersion?.value ?? pinnedOptions[ 0 ]?.value ?? value
-			: value;
-	const versionSelect = (
+	// A function, not an element: auto-update is the default in both forms, and
+	// there the dropdown is never rendered.
+	const renderVersionSelect = () => (
 		<SelectControl
 			__next40pxDefaultSize
 			__nextHasNoMarginBottom
 			label={ usesUpdateModeControl ? __( 'Version' ) : field.label }
-			hideLabelFromVision={ usesUpdateModeControl ? true : hideLabelFromVision }
-			value={ selectedVersion }
+			hideLabelFromVision={ usesUpdateModeControl ? undefined : hideLabelFromVision }
+			value={ value }
 			disabled={ disabled }
 			onChange={ updateValue }
 		>
-			{ autoUpdateOptions.map( ( option ) => (
-				<option key={ option.value } value={ option.value } hidden={ option.hidden }>
-					{ option.label }
-				</option>
-			) ) }
+			{ /* Outside the update-mode control the auto-update option carries its own
+			     explanation, so it needs no heading; HTML allows plain options before
+			     the first optgroup. */ }
+			{ ! usesUpdateModeControl && autoUpdateOption && (
+				<option value={ autoUpdateOption.value }>{ autoUpdateOption.label }</option>
+			) }
 			{ groups.map( ( group ) => (
 				<optgroup key={ group.label } label={ group.label }>
 					{ group.options.map( ( option ) => (
@@ -104,80 +109,42 @@ export function WpVersionControl< Item >( {
 			) ) }
 		</SelectControl>
 	);
-	const control = usesUpdateModeControl ? (
-		<BaseControl
-			__nextHasNoMarginBottom
-			label={ field.label }
-			hideLabelFromVision={ hideLabelFromVision }
-		>
-			<fieldset
-				className={ styles.updateModeControl }
-				disabled={ disabled }
-				aria-label={ field.label }
+	const control =
+		autoUpdateOption && defaultPinnedOption ? (
+			<BaseControl
+				__nextHasNoMarginBottom
+				label={ field.label }
+				hideLabelFromVision={ hideLabelFromVision }
 			>
-				<div className="components-radio-control">
-					<div className="components-radio-control__option">
-						<input
-							id={ `${ modeControlName }-automatic` }
-							className="components-radio-control__input"
-							type="radio"
-							name={ modeControlName }
-							value="automatic"
-							checked={ automaticUpdates }
-							onChange={ () => {
-								if ( autoUpdateOption ) updateValue( autoUpdateOption.value );
-							} }
-						/>
-						<label
-							htmlFor={ `${ modeControlName }-automatic` }
-							className="components-radio-control__label"
-						>
-							{ __( 'Automatic updates' ) }
-						</label>
-						<p className="components-radio-control__option-description">
-							{ /* Naming a version on a pinned site would read as if
-							     auto-update were keeping it there. */ }
-							{ automaticUpdates && currentVersion
-								? sprintf(
-										/* translators: %s: WordPress version the site runs now, e.g. 6.9.7 */
-										__(
-											'WordPress installs updates on its own schedule. Currently using version %s.'
-										),
-										currentVersion.value
-								  )
-								: __( 'WordPress installs updates on its own schedule.' ) }
-						</p>
-					</div>
-					<div className="components-radio-control__option">
-						<input
-							id={ `${ modeControlName }-pinned` }
-							className="components-radio-control__input"
-							type="radio"
-							name={ modeControlName }
-							value="pinned"
-							checked={ ! automaticUpdates }
-							onChange={ () =>
-								updateValue( currentVersion?.value ?? pinnedOptions[ 0 ]?.value ?? value )
-							}
-						/>
-						<label
-							htmlFor={ `${ modeControlName }-pinned` }
-							className="components-radio-control__label"
-						>
-							{ __( 'Select a version' ) }
-						</label>
-						<div
-							className={ `${ styles.pinnedVersionSelect } components-radio-control__option-description` }
-						>
-							{ versionSelect }
-						</div>
-					</div>
-				</div>
-			</fieldset>
-		</BaseControl>
-	) : (
-		versionSelect
-	);
+				<fieldset
+					className={ styles.updateModeControl }
+					disabled={ disabled }
+					aria-label={ field.label }
+				>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ getAutoUpdatesToggleLabel() }
+						checked={ automaticUpdates }
+						disabled={ disabled }
+						help={ getAutoUpdatesHelpText( automaticUpdates ) }
+						onChange={ ( checked ) =>
+							updateValue( checked ? autoUpdateOption.value : defaultPinnedOption.value )
+						}
+					/>
+					{ /* Naming a version while the site is pinned would read as if
+				     auto-update were keeping it there — the dropdown says it. */ }
+					{ automaticUpdates
+						? currentVersion && (
+								<p className={ styles.installedVersion }>
+									{ getInstalledVersionLabel( currentVersion.value ) }
+								</p>
+						  )
+						: renderVersionSelect() }
+				</fieldset>
+			</BaseControl>
+		) : (
+			renderVersionSelect()
+		);
 
 	if ( disabled && field.description ) {
 		// wpds narrows Tooltip.Root's props to hover-only usage; the runtime
diff --git a/apps/ui/src/components/site-overview-view/index.test.tsx b/apps/ui/src/components/site-overview-view/index.test.tsx
index 65bdb8b02c..ef9d008a26 100644
--- a/apps/ui/src/components/site-overview-view/index.test.tsx
+++ b/apps/ui/src/components/site-overview-view/index.test.tsx
@@ -486,14 +486,14 @@ describe( 'SiteOverviewView', () => {
 
 		renderView( 'general' );
 
-		expect( screen.getByRole( 'radio', { name: 'Automatic updates' } ) ).toBeChecked();
-		// The mode names the version the site runs now, so "latest" can't be
+		expect( screen.getByRole( 'checkbox', { name: 'Automatic updates' } ) ).toBeChecked();
+		// The readout names the version the site runs now, so "latest" can't be
 		// read as "already on the newest release" (STU-2348).
-		expect( screen.getByText( /Currently using version 6\.7\.2\./ ) ).toBeVisible();
-		const select = screen.getByLabelText( 'Version' );
-		expect( select.tagName ).toBe( 'SELECT' );
-		expect( select ).toHaveValue( '6.7.2' );
-		expect( screen.getByRole( 'group', { name: 'Stable Versions' } ) ).toBeInTheDocument();
+		expect( screen.getByText( /Installed version/ ) ).toHaveTextContent(
+			'Installed version: 6.7.2'
+		);
+		// Nothing to pick while WordPress owns the version.
+		expect( screen.queryByLabelText( 'Version' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'preselects the version picker for pinned sites', () => {
@@ -505,11 +505,26 @@ describe( 'SiteOverviewView', () => {
 
 		renderView( 'general' );
 
-		expect( screen.getByRole( 'radio', { name: 'Select a version' } ) ).toBeChecked();
+		expect( screen.getByRole( 'checkbox', { name: 'Automatic updates' } ) ).not.toBeChecked();
+		expect( screen.getByLabelText( 'Version' ) ).toHaveValue( '6.7.2' );
+		expect( screen.getByRole( 'group', { name: 'Stable Versions' } ) ).toBeInTheDocument();
+		// Naming the installed version beside "Automatic updates" on a pinned
+		// site would read as if auto-update were keeping it there (STU-2348).
+		expect( screen.queryByText( /Installed version/ ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'reveals the version picker when automatic updates are turned off', () => {
+		useWordPressVersionsMock.mockReturnValue( { data: WP_VERSIONS } );
+		useWpVersionMock.mockReturnValue( { data: '6.7.2' } );
+
+		renderView( 'general' );
+
+		fireEvent.click( screen.getByRole( 'checkbox', { name: 'Automatic updates' } ) );
+
+		// Seeded with the version the site already runs, so leaving auto-update
+		// doesn't quietly propose a different release.
 		expect( screen.getByLabelText( 'Version' ) ).toHaveValue( '6.7.2' );
-		// Naming the version under "Automatic updates" on a pinned site would
-		// read as if auto-update were keeping the site on it (STU-2348).
-		expect( screen.queryByText( /Currently using version/ ) ).not.toBeInTheDocument();
+		expect( screen.queryByText( /Installed version/ ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'saves a pinned WordPress version picked from the dropdown', () => {
@@ -519,6 +534,7 @@ describe( 'SiteOverviewView', () => {
 
 		renderView( 'general' );
 
+		fireEvent.click( screen.getByRole( 'checkbox', { name: 'Automatic updates' } ) );
 		fireEvent.change( screen.getByLabelText( 'Version' ), {
 			target: { value: '6.7.2' },
 		} );
@@ -636,7 +652,9 @@ describe( 'SiteOverviewView', () => {
 		const select = screen.getByLabelText( 'WordPress version' );
 		expect( select.tagName ).toBe( 'SELECT' );
 		expect( select ).toHaveValue( '' );
-		expect( screen.queryByRole( 'radio' ) ).not.toBeInTheDocument();
+		expect(
+			screen.queryByRole( 'checkbox', { name: 'Automatic updates' } )
+		).not.toBeInTheDocument();
 	} );
 
 	// Offline only blocks *changing* the version, so the field stays on the
@@ -680,14 +698,14 @@ describe( 'SiteOverviewView', () => {
 
 		renderView( 'general' );
 
-		expect( screen.getByRole( 'radio', { name: 'Select a version' } ) ).toBeChecked();
+		expect( screen.getByRole( 'checkbox', { name: 'Automatic updates' } ) ).not.toBeChecked();
 		// The site is pinned to files Studio can't read a version from, so the
 		// picker says so instead of showing a version the site may not run.
 		const picker = screen.getByLabelText( 'Version' ) as HTMLSelectElement;
 		expect( picker ).toHaveValue( 'latest' );
 		expect( picker.selectedOptions[ 0 ] ).toHaveTextContent( 'Unknown version' );
 
-		fireEvent.click( screen.getByRole( 'radio', { name: 'Automatic updates' } ) );
+		fireEvent.click( screen.getByRole( 'checkbox', { name: 'Automatic updates' } ) );
 		fireEvent.click( screen.getByRole( 'button', { name: 'Save settings' } ) );
 
 		// 'latest' has to reach the CLI so it actually installs the newest
diff --git a/apps/ui/src/components/site-settings-view/index.tsx b/apps/ui/src/components/site-settings-view/index.tsx
index 396ac3dfee..9796bcdf6f 100644
--- a/apps/ui/src/components/site-settings-view/index.tsx
+++ b/apps/ui/src/components/site-settings-view/index.tsx
@@ -159,10 +159,6 @@ export function SiteSettingsForm( { site, activeTab }: { site: SiteDetails; acti
 				latestValue: '',
 				currentVersion:
 					installedWpVersion && installedWpVersion !== '-' ? installedWpVersion : undefined,
-				// Current selection, not `site.isWpAutoUpdating`: the persisted flag
-				// lags a save by a site-updated event, which would drop the version
-				// from the label right after switching to auto-update.
-				installedVersion: data.wpVersion === '' ? installedWpVersion : undefined,
 				offline: isOffline,
 			} ),
 			{ ...adminUsernameField< FormData >(), Edit: AdminUsernameControl },
@@ -181,14 +177,7 @@ export function SiteSettingsForm( { site, activeTab }: { site: SiteDetails; acti
 			enableDebugLogField< FormData >(),
 			enableDebugDisplayField< FormData >(),
 		],
-		[
-			data.wpVersion,
-			existingDomainNames,
-			installedWpVersion,
-			isOffline,
-			wpVersions,
-			xdebugConflictSiteName,
-		]
+		[ existingDomainNames, installedWpVersion, isOffline, wpVersions, xdebugConflictSiteName ]
 	);
 
 	const generalForm = useMemo< Form >(
diff --git a/apps/ui/src/index.css b/apps/ui/src/index.css
index e0c4a9aab9..b1f6da2505 100644
--- a/apps/ui/src/index.css
+++ b/apps/ui/src/index.css
@@ -273,14 +273,15 @@ select option {
 	color: var( --wpds-color-fg-content-neutral );
 }
 
-[data-wpds-theme-provider-id] .components-radio-control__input[type='radio']:not(:checked) {
+/* FormToggle hardcodes a white track and a near-black thumb for its unchecked
+   state, which inverts against the dark palette. */
+[data-wpds-theme-provider-id] .components-form-toggle:not( .is-checked ) .components-form-toggle__track {
+	background-color: var( --wpds-color-bg-surface-neutral );
 	border-color: var( --wpds-color-stroke-surface-neutral-strong );
-	background: transparent;
 }
 
-[data-wpds-theme-provider-id] .components-radio-control__option-description {
-	color: var( --wpds-color-fg-content-neutral-weak );
-	unicode-bidi: plaintext;
+[data-wpds-theme-provider-id] .components-form-toggle:not( .is-checked ) .components-form-toggle__thumb {
+	background-color: var( --wpds-color-fg-content-neutral );
 }
 
 /* @wordpress/components ships its RTL fixups in a separate style-rtl.css
diff --git a/packages/common/lib/wordpress-version-labels.ts b/packages/common/lib/wordpress-version-labels.ts
index 6d67d290ca..4248b4fdce 100644
--- a/packages/common/lib/wordpress-version-labels.ts
+++ b/packages/common/lib/wordpress-version-labels.ts
@@ -1,24 +1,37 @@
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
- * Label for the auto-updating WordPress version option, shared by the agentic UI
- * and the Classic renderer so translators only see one phrasing.
- *
- * @param installedVersion Version the site runs right now. Pass it only when
- *                         auto-update is the selected mode — the brackets are a
- *                         readout of the current state, so on a pinned site they
- *                         would name a version auto-update is not keeping you on.
- *                         A value that is not a concrete version number (`-`,
- *                         `latest`) falls back to the bare label.
+ * Copy for the WordPress version controls, shared by the agentic UI and the
+ * Classic renderer so translators only see one phrasing. Each one is a function
+ * so the Classic renderer, which swaps locale data live, re-reads it on render.
  */
-export function getAutoUpdateVersionLabel( installedVersion?: string ): string {
-	if ( ! installedVersion || ! /^\d/.test( installedVersion ) ) {
-		/* translators: WordPress version dropdown option. Names the auto-update mode, not a version. */
-		return __( 'Auto-update' );
-	}
+
+/**
+ * Names the auto-update mode in the plain version dropdown. Only the fallback
+ * for a missing version list renders it — everywhere else the mode lives behind
+ * the "Automatic updates" toggle.
+ */
+export function getAutoUpdateVersionLabel(): string {
+	/* translators: WordPress version dropdown option. Names the auto-update mode, not a version. */
+	return __( 'Auto-update' );
+}
+
+export function getAutoUpdatesToggleLabel(): string {
+	return __( 'Automatic updates' );
+}
+
+export function getAutoUpdatesHelpText( automaticUpdates: boolean ): string {
+	return automaticUpdates
+		? __(
+				'WordPress updates this site on its own schedule. New releases may not be installed immediately.'
+		  )
+		: __( 'This site stays on the version you choose.' );
+}
+
+export function getInstalledVersionLabel( installedVersion: string ): string {
 	return sprintf(
 		/* translators: %s: WordPress version the site runs now, e.g. 6.9.7 */
-		__( 'Auto-update (%s)' ),
+		__( 'Installed version: %s' ),
 		installedVersion
 	);
 }

From 470f605875afc5dd59801b77ecaa249ef3e4780b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gergely=20Cs=C3=A9csey?= <gcsecsey@gmail.com>
Date: Wed, 2 Sep 2026 16:26:16 +0100
Subject: [PATCH 10/15] Associate both toggle description lines with the
 Automatic updates control

---
 .../components/wp-version-selector/index.tsx  | 23 +++++++++++----
 .../tests/edit-site-details.test.tsx          |  7 ++++-
 .../components/site-fields/style.module.css   | 17 +++++++++--
 .../site-fields/wp-version-control.tsx        | 28 ++++++++++++-------
 .../site-overview-view/index.test.tsx         |  9 ++++--
 5 files changed, 63 insertions(+), 21 deletions(-)

diff --git a/apps/studio/src/components/wp-version-selector/index.tsx b/apps/studio/src/components/wp-version-selector/index.tsx
index 89cf290080..b306b526f5 100644
--- a/apps/studio/src/components/wp-version-selector/index.tsx
+++ b/apps/studio/src/components/wp-version-selector/index.tsx
@@ -8,7 +8,7 @@ import { isWordPressBetaVersion } from '@studio/common/lib/wordpress-version-uti
 import { FormToggle, SelectControl, Icon } from '@wordpress/components';
 import { info } from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
-import { useEffect } from 'react';
+import { useEffect, useId } from 'react';
 import offlineIcon from 'src/components/offline-icon';
 import { Tooltip } from 'src/components/tooltip';
 import { useOffline } from 'src/hooks/use-offline';
@@ -47,6 +47,9 @@ export const WPVersionSelector = ( {
 }: WPVersionSelectorProps ) => {
 	const { __ } = useI18n();
 	const isOffline = useOffline();
+	// Unique per instance, so two selectors on one screen keep their own label
+	// and description associations.
+	const toggleId = useId();
 	const defaultOfflineMessage = __( 'Changing WordPress version requires an internet connection.' );
 	const message = offlineMessage || defaultOfflineMessage;
 	const { data: wpVersions = [] } = useGetWordPressVersions( {
@@ -131,6 +134,9 @@ export const WPVersionSelector = ( {
 		// the newest stable release for a site that doesn't exist yet.
 		const pinnedFallback =
 			installedVersion || getLatestStableWpVersion( wpVersions ) || DEFAULT_WORDPRESS_VERSION;
+		const helpId = `${ toggleId }-help`;
+		const installedVersionId = `${ toggleId }-installed-version`;
+		const showsInstalledVersion = automaticUpdates && !! installedVersion;
 		return (
 			<div
 				role="group"
@@ -148,16 +154,21 @@ export const WPVersionSelector = ( {
 					<div className="flex justify-start items-start gap-2">
 						<FormToggle
 							className="mt-0.5"
-							id="wp-auto-update-toggle"
+							id={ toggleId }
 							checked={ automaticUpdates }
 							disabled={ disabled || isOffline }
+							// Forms mode announces only the label and the description, so
+							// both lines below the toggle have to be named here.
+							aria-describedby={
+								showsInstalledVersion ? `${ helpId } ${ installedVersionId }` : helpId
+							}
 							onChange={ ( event ) =>
 								onChange( event.target.checked ? DEFAULT_WORDPRESS_VERSION : pinnedFallback )
 							}
 						/>
 						<div className="flex flex-col gap-1">
-							<label htmlFor="wp-auto-update-toggle">{ getAutoUpdatesToggleLabel() }</label>
-							<div className="a8c-body-small text-frame-text-secondary">
+							<label htmlFor={ toggleId }>{ getAutoUpdatesToggleLabel() }</label>
+							<div id={ helpId } className="a8c-body-small text-frame-text-secondary">
 								{ getAutoUpdatesHelpText( automaticUpdates ) }
 							</div>
 						</div>
@@ -165,8 +176,8 @@ export const WPVersionSelector = ( {
 					{ /* Naming a version while the site is pinned would read as if
 					     auto-update were keeping it there — the dropdown says it. */ }
 					{ automaticUpdates ? (
-						installedVersion && (
-							<div className="a8c-body-small text-frame-text-secondary">
+						showsInstalledVersion && (
+							<div id={ installedVersionId } className="a8c-body-small text-frame-text-secondary">
 								{ getInstalledVersionLabel( installedVersion ) }
 							</div>
 						)
diff --git a/apps/studio/src/modules/site-settings/tests/edit-site-details.test.tsx b/apps/studio/src/modules/site-settings/tests/edit-site-details.test.tsx
index 2aa1324463..27b3a00914 100644
--- a/apps/studio/src/modules/site-settings/tests/edit-site-details.test.tsx
+++ b/apps/studio/src/modules/site-settings/tests/edit-site-details.test.tsx
@@ -157,8 +157,13 @@ describe( 'EditSiteDetails', () => {
 
 		expect( screen.getByLabelText( 'Site name' ) ).toHaveValue( 'Test Site' );
 		expect( screen.getByLabelText( 'PHP version' ) ).toHaveValue( '8.4' );
-		expect( screen.getByLabelText( 'Automatic updates' ) ).toBeChecked();
+		const toggle = screen.getByLabelText( 'Automatic updates' );
+		expect( toggle ).toBeChecked();
 		expect( screen.getByText( /Installed version/ ) ).toHaveTextContent( 'Installed version: 6.3' );
+		// Forms mode announces only the control's label and description, so both
+		// lines under the toggle have to be part of that description.
+		expect( toggle ).toHaveAccessibleDescription( /Installed version: 6\.3/ );
+		expect( toggle ).toHaveAccessibleDescription( /on its own schedule/ );
 		// Nothing to pick while WordPress owns the version.
 		expect( screen.queryByLabelText( 'Version' ) ).not.toBeInTheDocument();
 	} );
diff --git a/apps/ui/src/components/site-fields/style.module.css b/apps/ui/src/components/site-fields/style.module.css
index e5ccd766e7..7838848bfd 100644
--- a/apps/ui/src/components/site-fields/style.module.css
+++ b/apps/ui/src/components/site-fields/style.module.css
@@ -20,7 +20,20 @@
 	border: 0;
 }
 
+/* Both description lines live in ToggleControl's help so they reach the
+   toggle's accessible description. Let the help block span the full width and
+   re-apply its own 40px label indent to the sentence alone, so the installed
+   version still starts at the field's edge. */
+.updateModeControl :global(.components-toggle-control__help) {
+	display: block;
+	margin-inline-start: 0;
+}
+
+.toggleHelpText {
+	display: block;
+	margin-inline-start: 40px;
+}
+
 .installedVersion {
-	margin: 0;
-	color: var(--wpds-color-fg-content-neutral-weak);
+	display: block;
 }
diff --git a/apps/ui/src/components/site-fields/wp-version-control.tsx b/apps/ui/src/components/site-fields/wp-version-control.tsx
index 49451bc298..ee2aba09d3 100644
--- a/apps/ui/src/components/site-fields/wp-version-control.tsx
+++ b/apps/ui/src/components/site-fields/wp-version-control.tsx
@@ -126,20 +126,28 @@ export function WpVersionControl< Item >( {
 						label={ getAutoUpdatesToggleLabel() }
 						checked={ automaticUpdates }
 						disabled={ disabled }
-						help={ getAutoUpdatesHelpText( automaticUpdates ) }
+						// Both lines go through `help` so ToggleControl points the
+						// toggle's aria-describedby at them: forms mode announces only
+						// the control's own label and description.
+						help={
+							<>
+								<span className={ styles.toggleHelpText }>
+									{ getAutoUpdatesHelpText( automaticUpdates ) }
+								</span>
+								{ /* Naming a version while the site is pinned would read as if
+								     auto-update were keeping it there — the dropdown says it. */ }
+								{ automaticUpdates && currentVersion && (
+									<span className={ styles.installedVersion }>
+										{ getInstalledVersionLabel( currentVersion.value ) }
+									</span>
+								) }
+							</>
+						}
 						onChange={ ( checked ) =>
 							updateValue( checked ? autoUpdateOption.value : defaultPinnedOption.value )
 						}
 					/>
-					{ /* Naming a version while the site is pinned would read as if
-				     auto-update were keeping it there — the dropdown says it. */ }
-					{ automaticUpdates
-						? currentVersion && (
-								<p className={ styles.installedVersion }>
-									{ getInstalledVersionLabel( currentVersion.value ) }
-								</p>
-						  )
-						: renderVersionSelect() }
+					{ ! automaticUpdates && renderVersionSelect() }
 				</fieldset>
 			</BaseControl>
 		) : (
diff --git a/apps/ui/src/components/site-overview-view/index.test.tsx b/apps/ui/src/components/site-overview-view/index.test.tsx
index ef9d008a26..844df029ca 100644
--- a/apps/ui/src/components/site-overview-view/index.test.tsx
+++ b/apps/ui/src/components/site-overview-view/index.test.tsx
@@ -486,12 +486,17 @@ describe( 'SiteOverviewView', () => {
 
 		renderView( 'general' );
 
-		expect( screen.getByRole( 'checkbox', { name: 'Automatic updates' } ) ).toBeChecked();
+		const toggle = screen.getByRole( 'checkbox', { name: 'Automatic updates' } );
+		expect( toggle ).toBeChecked();
 		// The readout names the version the site runs now, so "latest" can't be
-		// read as "already on the newest release" (STU-2348).
+		// read as "already on the newest release" (STU-2348). It has to reach
+		// screen readers in forms mode too, where only the control's own label
+		// and description are announced.
 		expect( screen.getByText( /Installed version/ ) ).toHaveTextContent(
 			'Installed version: 6.7.2'
 		);
+		expect( toggle ).toHaveAccessibleDescription( /Installed version: 6\.7\.2/ );
+		expect( toggle ).toHaveAccessibleDescription( /on its own schedule/ );
 		// Nothing to pick while WordPress owns the version.
 		expect( screen.queryByLabelText( 'Version' ) ).not.toBeInTheDocument();
 	} );

From da6c1dc48aaadc9bc4e5cbdd3d6b6ec3c75fcf8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gergely=20Cs=C3=A9csey?= <gcsecsey@gmail.com>
Date: Tue, 1 Sep 2026 16:46:37 +0100
Subject: [PATCH 11/15] Accept --wp auto-update as the CLI name for the
 auto-update mode

---
 apps/cli/commands/blueprint/use.ts           | 10 +++-
 apps/cli/commands/config/set.ts              | 34 ++---------
 apps/cli/commands/site/create.ts             | 52 +++++-----------
 apps/cli/lib/tests/wp-version-option.test.ts | 46 +++++++++++++++
 apps/cli/lib/wp-version-option.ts            | 62 ++++++++++++++++++++
 skills/studio-cli/SKILL.md                   |  2 +-
 6 files changed, 138 insertions(+), 68 deletions(-)
 create mode 100644 apps/cli/lib/tests/wp-version-option.test.ts
 create mode 100644 apps/cli/lib/wp-version-option.ts

diff --git a/apps/cli/commands/blueprint/use.ts b/apps/cli/commands/blueprint/use.ts
index f5b04e8bd1..a721b94db4 100644
--- a/apps/cli/commands/blueprint/use.ts
+++ b/apps/cli/commands/blueprint/use.ts
@@ -18,6 +18,11 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 import { runCommand as runCreateSiteCommand } from 'cli/commands/site/create';
 import { getDefaultSitePath } from 'cli/lib/site-paths';
 import { untildify } from 'cli/lib/utils';
+import {
+	CLI_AUTO_UPDATE_WP_VERSION,
+	coerceWpVersionOption,
+	getWpVersionOptionDescription,
+} from 'cli/lib/wp-version-option';
 import { Logger, LoggerError } from 'cli/logger';
 import { StudioArgv } from 'cli/types';
 
@@ -162,8 +167,9 @@ export const registerCommand = ( yargs: StudioArgv ) => {
 				} )
 				.option( 'wp', {
 					type: 'string',
-					describe: __( 'WordPress version' ),
-					defaultDescription: DEFAULT_WORDPRESS_VERSION,
+					describe: getWpVersionOptionDescription(),
+					defaultDescription: CLI_AUTO_UPDATE_WP_VERSION,
+					coerce: coerceWpVersionOption,
 				} )
 				.option( 'php', {
 					type: 'string',
diff --git a/apps/cli/commands/config/set.ts b/apps/cli/commands/config/set.ts
index 55e9f208a4..3e9bb0dbe7 100644
--- a/apps/cli/commands/config/set.ts
+++ b/apps/cli/commands/config/set.ts
@@ -1,4 +1,4 @@
-import { DEFAULT_WORDPRESS_VERSION, MINIMUM_WORDPRESS_VERSION } from '@studio/common/constants';
+import { DEFAULT_WORDPRESS_VERSION } from '@studio/common/constants';
 import { SITE_EVENTS } from '@studio/common/lib/cli-events';
 import { getDomainNameValidationError } from '@studio/common/lib/domains';
 import { arePathsEqual } from '@studio/common/lib/fs-utils';
@@ -24,11 +24,7 @@ import {
 	siteRuntimeFromMode,
 	type SiteMode,
 } from '@studio/common/lib/site-runtime';
-import {
-	getWordPressVersionUrl,
-	isValidWordPressVersion,
-	isWordPressVersionAtLeast,
-} from '@studio/common/lib/wordpress-version-utils';
+import { getWordPressVersionUrl } from '@studio/common/lib/wordpress-version-utils';
 import { SiteCommandLoggerAction as LoggerAction } from '@studio/common/logger-actions';
 import { SupportedPHPVersions } from '@studio/common/types/php-versions';
 import { __, sprintf } from '@wordpress/i18n';
@@ -46,12 +42,12 @@ import { validateSupportedPhpVersion } from 'cli/lib/php-versions';
 import { runWpCliCommand } from 'cli/lib/run-wp-cli-command';
 import { withSiteOperation } from 'cli/lib/site-operations';
 import { setupCustomDomain } from 'cli/lib/site-utils';
-import { ValidationError } from 'cli/lib/validation-error';
 import {
 	isServerRunning,
 	startWordPressServer,
 	stopWordPressServer,
 } from 'cli/lib/wordpress-server-manager';
+import { coerceWpVersionOption, getWpVersionOptionDescription } from 'cli/lib/wp-version-option';
 import { Logger, LoggerError } from 'cli/logger';
 import { StudioArgv } from 'cli/types';
 
@@ -423,28 +419,8 @@ export const registerCommand = ( yargs: StudioArgv ) => {
 				} )
 				.option( 'wp', {
 					type: 'string',
-					description: __(
-						'WordPress version. Use "latest" to let the site auto-update, or pin a version (e.g., "6.4", "6.4.1")'
-					),
-					coerce: ( value: string ) => {
-						if ( ! isValidWordPressVersion( value ) ) {
-							throw new ValidationError(
-								'wp',
-								value,
-								__(
-									'Must be: "latest", "nightly", or a valid version number (e.g., "6.4", "6.4.1", "6.4-beta1")'
-								)
-							);
-						}
-						if ( ! isWordPressVersionAtLeast( value, MINIMUM_WORDPRESS_VERSION ) ) {
-							throw new ValidationError(
-								'wp',
-								value,
-								sprintf( __( 'Must be: at least %s' ), MINIMUM_WORDPRESS_VERSION )
-							);
-						}
-						return value;
-					},
+					description: getWpVersionOptionDescription(),
+					coerce: coerceWpVersionOption,
 				} )
 				.option( 'runtime', {
 					type: 'string',
diff --git a/apps/cli/commands/site/create.ts b/apps/cli/commands/site/create.ts
index 0f30bf4335..b141f19362 100644
--- a/apps/cli/commands/site/create.ts
+++ b/apps/cli/commands/site/create.ts
@@ -2,7 +2,7 @@ import crypto from 'crypto';
 import fs from 'fs';
 import path from 'path';
 import { confirm, input, password, select } from '@inquirer/prompts';
-import { DEFAULT_WORDPRESS_VERSION, MINIMUM_WORDPRESS_VERSION } from '@studio/common/constants';
+import { DEFAULT_WORDPRESS_VERSION } from '@studio/common/constants';
 import { installAiInstructionsToSite } from '@studio/common/lib/agent-skills';
 import {
 	createBlueprintTempDirSync,
@@ -53,10 +53,6 @@ import {
 } from '@studio/common/lib/site-runtime';
 import { sortSites } from '@studio/common/lib/sort-sites';
 import { getServerFilesPath } from '@studio/common/lib/well-known-paths';
-import {
-	isValidWordPressVersion,
-	isWordPressVersionAtLeast,
-} from '@studio/common/lib/wordpress-version-utils';
 import { fetchWordPressVersions } from '@studio/common/lib/wordpress-versions';
 import { SiteCommandLoggerAction as LoggerAction } from '@studio/common/logger-actions';
 import {
@@ -98,6 +94,11 @@ import { StatsGroup } from 'cli/lib/types/bump-stats';
 import { untildify } from 'cli/lib/utils';
 import { ValidationError } from 'cli/lib/validation-error';
 import { runBlueprint, startWordPressServer } from 'cli/lib/wordpress-server-manager';
+import {
+	CLI_AUTO_UPDATE_WP_VERSION,
+	coerceWpVersionOption,
+	getWpVersionOptionDescription,
+} from 'cli/lib/wp-version-option';
 import { Logger, LoggerError } from 'cli/logger';
 import { StudioArgv } from 'cli/types';
 
@@ -1110,28 +1111,6 @@ function coerceSiteId( value: string ) {
 	return value;
 }
 
-function coerceWpVersion( value: string ) {
-	if ( ! isValidWordPressVersion( value ) ) {
-		throw new ValidationError(
-			'wp',
-			value,
-			__(
-				'Must be: "latest", "nightly", or a valid version number (e.g., "6.4", "6.4.1", "6.4-beta1")'
-			)
-		);
-	}
-
-	if ( ! isWordPressVersionAtLeast( value, MINIMUM_WORDPRESS_VERSION ) ) {
-		throw new ValidationError(
-			'wp',
-			value,
-			sprintf( __( 'Must be: at least %s' ), MINIMUM_WORDPRESS_VERSION )
-		);
-	}
-
-	return value;
-}
-
 export const registerCommand = ( yargs: StudioArgv ) => {
 	return yargs.command( {
 		command: 'create',
@@ -1150,11 +1129,9 @@ export const registerCommand = ( yargs: StudioArgv ) => {
 				} )
 				.option( 'wp', {
 					type: 'string',
-					describe: __(
-						'WordPress version. Use "latest" to let the site auto-update, or pin a version (e.g., "6.4", "6.4.1")'
-					),
-					defaultDescription: DEFAULT_WORDPRESS_VERSION,
-					coerce: coerceWpVersion,
+					describe: getWpVersionOptionDescription(),
+					defaultDescription: CLI_AUTO_UPDATE_WP_VERSION,
+					coerce: coerceWpVersionOption,
 				} )
 				.option( 'php', {
 					type: 'string',
@@ -1379,15 +1356,18 @@ export const registerCommand = ( yargs: StudioArgv ) => {
 						try {
 							const versions = await fetchWordPressVersions();
 							wpChoices = versions.map( ( v ) => ( {
-								name: v.value === 'latest' ? `latest (${ v.label })` : v.label,
+								name:
+									v.value === DEFAULT_WORDPRESS_VERSION
+										? sprintf( __( 'Auto-update (%s)' ), v.label )
+										: v.label,
 								value: v.value,
 							} ) );
 						} catch {
-							// Offline or API failure — offer only "latest"
+							// Offline or API failure — offer only the auto-update mode
 							wpChoices = [
 								{
-									name: __( 'Latest (recommended)' ),
-									value: 'latest',
+									name: __( 'Auto-update (recommended)' ),
+									value: DEFAULT_WORDPRESS_VERSION,
 								},
 							];
 						}
diff --git a/apps/cli/lib/tests/wp-version-option.test.ts b/apps/cli/lib/tests/wp-version-option.test.ts
new file mode 100644
index 0000000000..bd6467a544
--- /dev/null
+++ b/apps/cli/lib/tests/wp-version-option.test.ts
@@ -0,0 +1,46 @@
+import { DEFAULT_WORDPRESS_VERSION } from '@studio/common/constants';
+import { ValidationError } from 'cli/lib/validation-error';
+import {
+	CLI_AUTO_UPDATE_WP_VERSION,
+	coerceWpVersionOption,
+	normalizeCliWpVersion,
+} from 'cli/lib/wp-version-option';
+
+describe( 'normalizeCliWpVersion', () => {
+	it( 'resolves the auto-update alias to the internal mode value', () => {
+		expect( normalizeCliWpVersion( CLI_AUTO_UPDATE_WP_VERSION ) ).toBe( DEFAULT_WORDPRESS_VERSION );
+	} );
+
+	it( 'passes every other value through untouched', () => {
+		for ( const value of [ 'latest', 'nightly', '6.4', '6.4.1', '6.4-beta1' ] ) {
+			expect( normalizeCliWpVersion( value ) ).toBe( value );
+		}
+	} );
+} );
+
+describe( 'coerceWpVersionOption', () => {
+	it( 'accepts the auto-update value and returns the internal mode', () => {
+		expect( coerceWpVersionOption( CLI_AUTO_UPDATE_WP_VERSION ) ).toBe( DEFAULT_WORDPRESS_VERSION );
+	} );
+
+	it( 'still accepts `latest`, so existing scripts keep working', () => {
+		expect( coerceWpVersionOption( 'latest' ) ).toBe( DEFAULT_WORDPRESS_VERSION );
+	} );
+
+	it( 'accepts pinned versions and nightly', () => {
+		expect( coerceWpVersionOption( '6.4.1' ) ).toBe( '6.4.1' );
+		expect( coerceWpVersionOption( 'nightly' ) ).toBe( 'nightly' );
+	} );
+
+	it( 'rejects an unknown value', () => {
+		expect( () => coerceWpVersionOption( 'auto' ) ).toThrow( ValidationError );
+	} );
+
+	it( 'rejects a version below the supported minimum', () => {
+		expect( () => coerceWpVersionOption( '4.9' ) ).toThrow( ValidationError );
+	} );
+
+	it( 'reports the value the user typed, not the resolved one', () => {
+		expect( () => coerceWpVersionOption( 'auto-updates' ) ).toThrow( /auto-updates/ );
+	} );
+} );
diff --git a/apps/cli/lib/wp-version-option.ts b/apps/cli/lib/wp-version-option.ts
new file mode 100644
index 0000000000..29af448b8e
--- /dev/null
+++ b/apps/cli/lib/wp-version-option.ts
@@ -0,0 +1,62 @@
+import { DEFAULT_WORDPRESS_VERSION, MINIMUM_WORDPRESS_VERSION } from '@studio/common/constants';
+import {
+	isValidWordPressVersion,
+	isWordPressVersionAtLeast,
+} from '@studio/common/lib/wordpress-version-utils';
+import { __, sprintf } from '@wordpress/i18n';
+import { ValidationError } from 'cli/lib/validation-error';
+
+/**
+ * CLI-facing name for the auto-update mode, matching the "Auto-update" option in
+ * the apps.
+ *
+ * Internally the mode stays `latest`: it names a cache directory, a segment of
+ * the wordpress.org download URL, and the persisted `wpVersion`. The alias is
+ * resolved here so it never reaches storage, and `latest` keeps working for
+ * existing scripts.
+ */
+export const CLI_AUTO_UPDATE_WP_VERSION = 'auto-update';
+
+export function normalizeCliWpVersion( value: string ): string {
+	return value === CLI_AUTO_UPDATE_WP_VERSION ? DEFAULT_WORDPRESS_VERSION : value;
+}
+
+/** Description for the `--wp` option, shared so both commands read alike. */
+export function getWpVersionOptionDescription(): string {
+	return sprintf(
+		/* translators: %s: the literal CLI value "auto-update", do not translate. */
+		__(
+			'WordPress version. Use "%s" to let the site auto-update, or pin a version (e.g., "6.4", "6.4.1"). "latest" is accepted as an alias.'
+		),
+		CLI_AUTO_UPDATE_WP_VERSION
+	);
+}
+
+/** Resolves the auto-update alias, then validates. Returns the internal value. */
+export function coerceWpVersionOption( value: string ): string {
+	const version = normalizeCliWpVersion( value );
+
+	if ( ! isValidWordPressVersion( version ) ) {
+		throw new ValidationError(
+			'wp',
+			value,
+			sprintf(
+				/* translators: %s: the literal CLI value "auto-update", do not translate. */
+				__(
+					'Must be: "%s", "nightly", or a valid version number (e.g., "6.4", "6.4.1", "6.4-beta1")'
+				),
+				CLI_AUTO_UPDATE_WP_VERSION
+			)
+		);
+	}
+
+	if ( ! isWordPressVersionAtLeast( version, MINIMUM_WORDPRESS_VERSION ) ) {
+		throw new ValidationError(
+			'wp',
+			value,
+			sprintf( __( 'Must be: at least %s' ), MINIMUM_WORDPRESS_VERSION )
+		);
+	}
+
+	return version;
+}
diff --git a/skills/studio-cli/SKILL.md b/skills/studio-cli/SKILL.md
index 22870b6682..10228da10f 100644
--- a/skills/studio-cli/SKILL.md
+++ b/skills/studio-cli/SKILL.md
@@ -33,7 +33,7 @@ studio config    # Get/set site settings (config get | config set)
 studio create --name "My Site" --path ~/Studio/my-site
 ```
 
-**Options:** `--name`, `--wp` (default: "latest", min: 6.2.1), `--php` (default: 8.4, choices: 8.5/8.4/8.3/8.2/8.1/8.0/7.4), `--domain`, `--https`, `--blueprint` (local JSON file path), `--admin-username` (default: "admin"), `--admin-password` (auto-generated if omitted), `--admin-email` (default: "admin@localhost.com"), `--start` (default: true, use `--no-start` to skip), `--skip-browser`, `--skip-log-details`.
+**Options:** `--name`, `--wp` (default: "auto-update", which keeps WordPress core auto-updating; "latest" is accepted as an alias; pin with a version number, min: 6.2.1), `--php` (default: 8.4, choices: 8.5/8.4/8.3/8.2/8.1/8.0/7.4), `--domain`, `--https`, `--blueprint` (local JSON file path), `--admin-username` (default: "admin"), `--admin-password` (auto-generated if omitted), `--admin-email` (default: "admin@localhost.com"), `--start` (default: true, use `--no-start` to skip), `--skip-browser`, `--skip-log-details`.
 
 Without flags in a TTY, the CLI prompts interactively for name, path, WP/PHP versions, and domain.
 

From 537ba04d9dde6497f930f8577d8033d6f4f484a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gergely=20Cs=C3=A9csey?= <gcsecsey@gmail.com>
Date: Thu, 3 Sep 2026 11:10:48 +0100
Subject: [PATCH 12/15] Describe "latest" as the legacy name for the
 auto-update mode

---
 apps/cli/lib/wp-version-option.ts | 15 ++++++++-------
 skills/studio-cli/SKILL.md        |  2 +-
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/apps/cli/lib/wp-version-option.ts b/apps/cli/lib/wp-version-option.ts
index 29af448b8e..8b9d40ab60 100644
--- a/apps/cli/lib/wp-version-option.ts
+++ b/apps/cli/lib/wp-version-option.ts
@@ -10,10 +10,10 @@ import { ValidationError } from 'cli/lib/validation-error';
  * CLI-facing name for the auto-update mode, matching the "Auto-update" option in
  * the apps.
  *
- * Internally the mode stays `latest`: it names a cache directory, a segment of
- * the wordpress.org download URL, and the persisted `wpVersion`. The alias is
- * resolved here so it never reaches storage, and `latest` keeps working for
- * existing scripts.
+ * `latest` is the legacy spelling. It stays the internal value — it names a cache
+ * directory, a segment of the wordpress.org download URL, and the persisted
+ * `wpVersion` — so `auto-update` is resolved to it here, at the boundary, and
+ * never reaches storage. Passing `latest` keeps working for existing scripts.
  */
 export const CLI_AUTO_UPDATE_WP_VERSION = 'auto-update';
 
@@ -24,11 +24,12 @@ export function normalizeCliWpVersion( value: string ): string {
 /** Description for the `--wp` option, shared so both commands read alike. */
 export function getWpVersionOptionDescription(): string {
 	return sprintf(
-		/* translators: %s: the literal CLI value "auto-update", do not translate. */
+		/* translators: 1: the CLI value "auto-update". 2: the legacy CLI value "latest". Do not translate either. */
 		__(
-			'WordPress version. Use "%s" to let the site auto-update, or pin a version (e.g., "6.4", "6.4.1"). "latest" is accepted as an alias.'
+			'WordPress version. Use "%1$s" to let the site auto-update, or pin a version (e.g., "6.4", "6.4.1"). Replaces the legacy "%2$s" option, which still works.'
 		),
-		CLI_AUTO_UPDATE_WP_VERSION
+		CLI_AUTO_UPDATE_WP_VERSION,
+		DEFAULT_WORDPRESS_VERSION
 	);
 }
 
diff --git a/skills/studio-cli/SKILL.md b/skills/studio-cli/SKILL.md
index 10228da10f..98bd52e508 100644
--- a/skills/studio-cli/SKILL.md
+++ b/skills/studio-cli/SKILL.md
@@ -33,7 +33,7 @@ studio config    # Get/set site settings (config get | config set)
 studio create --name "My Site" --path ~/Studio/my-site
 ```
 
-**Options:** `--name`, `--wp` (default: "auto-update", which keeps WordPress core auto-updating; "latest" is accepted as an alias; pin with a version number, min: 6.2.1), `--php` (default: 8.4, choices: 8.5/8.4/8.3/8.2/8.1/8.0/7.4), `--domain`, `--https`, `--blueprint` (local JSON file path), `--admin-username` (default: "admin"), `--admin-password` (auto-generated if omitted), `--admin-email` (default: "admin@localhost.com"), `--start` (default: true, use `--no-start` to skip), `--skip-browser`, `--skip-log-details`.
+**Options:** `--name`, `--wp` (default: "auto-update", which keeps WordPress core auto-updating; replaces the legacy "latest" option, which still works; pin with a version number, min: 6.2.1), `--php` (default: 8.4, choices: 8.5/8.4/8.3/8.2/8.1/8.0/7.4), `--domain`, `--https`, `--blueprint` (local JSON file path), `--admin-username` (default: "admin"), `--admin-password` (auto-generated if omitted), `--admin-email` (default: "admin@localhost.com"), `--start` (default: true, use `--no-start` to skip), `--skip-browser`, `--skip-log-details`.
 
 Without flags in a TTY, the CLI prompts interactively for name, path, WP/PHP versions, and domain.
 

From 132f4f6c93a7d02abcfe9144a0864e640f632ff2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gergely=20Cs=C3=A9csey?= <gcsecsey@gmail.com>
Date: Thu, 3 Sep 2026 12:32:42 +0100
Subject: [PATCH 13/15] Use radio buttons for the WordPress update mode and
 give the field its own row

---
 .../components/wp-version-selector/index.tsx  | 115 ++++++++++--------
 apps/studio/src/index.css                     |  12 ++
 .../add-site/components/create-site-form.tsx  |   2 +
 .../modules/add-site/tests/add-site.test.tsx  |  15 ++-
 .../site-settings/edit-site-details.tsx       |   8 +-
 .../tests/edit-site-details.test.tsx          |  44 ++++---
 .../create-site-form/index.test.tsx           |   9 +-
 .../src/components/create-site-form/index.tsx |   7 +-
 .../components/site-fields/style.module.css   |  20 +--
 .../site-fields/wp-version-control.tsx        | 102 ++++++++++------
 .../site-overview-view/index.test.tsx         |  49 +++-----
 .../components/site-settings-view/index.tsx   |   7 +-
 apps/ui/src/index.css                         |  11 +-
 .../common/lib/wordpress-version-labels.ts    |  27 ++--
 14 files changed, 229 insertions(+), 199 deletions(-)

diff --git a/apps/studio/src/components/wp-version-selector/index.tsx b/apps/studio/src/components/wp-version-selector/index.tsx
index b306b526f5..cd0b665117 100644
--- a/apps/studio/src/components/wp-version-selector/index.tsx
+++ b/apps/studio/src/components/wp-version-selector/index.tsx
@@ -1,11 +1,11 @@
 import { DEFAULT_WORDPRESS_VERSION, MINIMUM_WORDPRESS_VERSION } from '@studio/common/constants';
 import {
-	getAutoUpdatesHelpText,
-	getAutoUpdatesToggleLabel,
-	getInstalledVersionLabel,
+	getAutomaticUpdatesDescription,
+	getAutomaticUpdatesLabel,
+	getSelectAVersionLabel,
 } from '@studio/common/lib/wordpress-version-labels';
 import { isWordPressBetaVersion } from '@studio/common/lib/wordpress-version-utils';
-import { FormToggle, SelectControl, Icon } from '@wordpress/components';
+import { SelectControl, Icon } from '@wordpress/components';
 import { info } from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
 import { useEffect, useId } from 'react';
@@ -47,9 +47,9 @@ export const WPVersionSelector = ( {
 }: WPVersionSelectorProps ) => {
 	const { __ } = useI18n();
 	const isOffline = useOffline();
-	// Unique per instance, so two selectors on one screen keep their own label
-	// and description associations.
-	const toggleId = useId();
+	// Unique per instance, so two selectors on one screen keep their own radio
+	// group and their own label/description associations.
+	const modeControlName = useId();
 	const defaultOfflineMessage = __( 'Changing WordPress version requires an internet connection.' );
 	const message = offlineMessage || defaultOfflineMessage;
 	const { data: wpVersions = [] } = useGetWordPressVersions( {
@@ -90,14 +90,25 @@ export const WPVersionSelector = ( {
 	// degrades to a plain dropdown over `fallbackOptions`.
 	const usesUpdateMode = wpVersions.length > 0;
 	const automaticUpdates = selectedValue === DEFAULT_WORDPRESS_VERSION;
+	// Leaving auto-update lands on the version the site already runs, or on the
+	// newest stable release for a site that doesn't exist yet.
+	const pinnedFallback =
+		installedVersion || getLatestStableWpVersion( wpVersions ) || DEFAULT_WORDPRESS_VERSION;
 
 	// A function, not an element: auto-update is the default in both forms, and
 	// there the dropdown is never rendered.
 	const renderVersionSelect = () => (
 		<SelectControl
 			className={ cx( errorMessage && 'error-select-control' ) }
+			// In update mode the "Select a version" radio introduces the dropdown
+			// visually, but it still needs its own accessible name. Outside it, the
+			// wrapping <label> already names the control.
+			label={ usesUpdateMode ? __( 'Version' ) : undefined }
+			hideLabelFromVision={ usesUpdateMode }
 			disabled={ disabled || isOffline }
-			value={ selectedValue }
+			// While "Automatic updates" is chosen the value is the mode, not a
+			// version, so preview the version the radio below would pin to.
+			value={ usesUpdateMode && automaticUpdates ? pinnedFallback : selectedValue }
 			onChange={ onChange }
 			__next40pxDefaultSize
 			__nextHasNoMarginBottom
@@ -130,13 +141,9 @@ export const WPVersionSelector = ( {
 	);
 
 	if ( usesUpdateMode ) {
-		// Leaving auto-update lands on the version the site already runs, or on
-		// the newest stable release for a site that doesn't exist yet.
-		const pinnedFallback =
-			installedVersion || getLatestStableWpVersion( wpVersions ) || DEFAULT_WORDPRESS_VERSION;
-		const helpId = `${ toggleId }-help`;
-		const installedVersionId = `${ toggleId }-installed-version`;
-		const showsInstalledVersion = automaticUpdates && !! installedVersion;
+		const automaticId = `${ modeControlName }-automatic`;
+		const automaticDescriptionId = `${ automaticId }-description`;
+		const pinnedId = `${ modeControlName }-pinned`;
 		return (
 			<div
 				role="group"
@@ -149,44 +156,54 @@ export const WPVersionSelector = ( {
 					icon={ offlineIcon }
 					text={ message }
 					placement="top-start"
-					className="flex flex-1 flex-col gap-1.5"
+					className="flex flex-1 flex-col"
 				>
-					<div className="flex justify-start items-start gap-2">
-						<FormToggle
-							className="mt-0.5"
-							id={ toggleId }
-							checked={ automaticUpdates }
-							disabled={ disabled || isOffline }
-							// Forms mode announces only the label and the description, so
-							// both lines below the toggle have to be named here.
-							aria-describedby={
-								showsInstalledVersion ? `${ helpId } ${ installedVersionId }` : helpId
-							}
-							onChange={ ( event ) =>
-								onChange( event.target.checked ? DEFAULT_WORDPRESS_VERSION : pinnedFallback )
-							}
-						/>
-						<div className="flex flex-col gap-1">
-							<label htmlFor={ toggleId }>{ getAutoUpdatesToggleLabel() }</label>
-							<div id={ helpId } className="a8c-body-small text-frame-text-secondary">
-								{ getAutoUpdatesHelpText( automaticUpdates ) }
+					<div className="components-radio-control">
+						<div className="components-radio-control__option">
+							<input
+								id={ automaticId }
+								className="components-radio-control__input"
+								type="radio"
+								name={ modeControlName }
+								checked={ automaticUpdates }
+								disabled={ disabled || isOffline }
+								// Forms mode announces only the radio's label and
+								// description, so the description has to be named here.
+								aria-describedby={ automaticDescriptionId }
+								onChange={ () => onChange( DEFAULT_WORDPRESS_VERSION ) }
+							/>
+							<label htmlFor={ automaticId } className="components-radio-control__label">
+								{ getAutomaticUpdatesLabel() }
+							</label>
+							<p
+								id={ automaticDescriptionId }
+								className="components-radio-control__option-description"
+							>
+								{ /* Naming a version on a pinned site would read as if
+								     auto-update were keeping it there. */ }
+								{ getAutomaticUpdatesDescription(
+									automaticUpdates ? installedVersion : undefined
+								) }
+							</p>
+						</div>
+						<div className="components-radio-control__option">
+							<input
+								id={ pinnedId }
+								className="components-radio-control__input"
+								type="radio"
+								name={ modeControlName }
+								checked={ ! automaticUpdates }
+								disabled={ disabled || isOffline }
+								onChange={ () => onChange( pinnedFallback ) }
+							/>
+							<label htmlFor={ pinnedId } className="components-radio-control__label">
+								{ getSelectAVersionLabel() }
+							</label>
+							<div className="components-radio-control__option-description max-w-[180px]">
+								{ renderVersionSelect() }
 							</div>
 						</div>
 					</div>
-					{ /* Naming a version while the site is pinned would read as if
-					     auto-update were keeping it there — the dropdown says it. */ }
-					{ automaticUpdates ? (
-						showsInstalledVersion && (
-							<div id={ installedVersionId } className="a8c-body-small text-frame-text-secondary">
-								{ getInstalledVersionLabel( installedVersion ) }
-							</div>
-						)
-					) : (
-						<label className="flex flex-col gap-1.5 leading-4">
-							<span className="font-semibold">{ __( 'Version' ) }</span>
-							{ renderVersionSelect() }
-						</label>
-					) }
 				</Tooltip>
 			</div>
 		);
diff --git a/apps/studio/src/index.css b/apps/studio/src/index.css
index d9839371fb..b546b863e2 100644
--- a/apps/studio/src/index.css
+++ b/apps/studio/src/index.css
@@ -616,6 +616,18 @@ div:has( > progress ) > div:first-child {
 		color: var( --color-frame-text-secondary );
 	}
 
+	/* Radio — the update-mode control is the app's only radio group, so the
+	   unchecked state has no dark treatment from anywhere else. The `p` rule
+	   above paints every paragraph in primary text, which would make the option
+	   descriptions read as body copy. */
+	.components-radio-control__input[type='radio']:not( :checked ) {
+		border-color: var( --color-frame-border );
+		background-color: var( --color-frame-surface );
+	}
+	.components-radio-control__option-description {
+		color: var( --color-frame-text-secondary );
+	}
+
 	/* Checkbox / Toggle */
 	.components-checkbox-control__input[type='checkbox'],
 	input[type='checkbox'] {
diff --git a/apps/studio/src/modules/add-site/components/create-site-form.tsx b/apps/studio/src/modules/add-site/components/create-site-form.tsx
index 1fc9c3ff4e..5ed283e450 100644
--- a/apps/studio/src/modules/add-site/components/create-site-form.tsx
+++ b/apps/studio/src/modules/add-site/components/create-site-form.tsx
@@ -514,7 +514,9 @@ export const CreateSiteForm = ( {
 											__nextHasNoMarginBottom
 										/>
 									</div>
+								</div>
 
+								<div className="mt-4">
 									<WPVersionSelector
 										selectedValue={ wpVersion }
 										onChange={ setWpVersion }
diff --git a/apps/studio/src/modules/add-site/tests/add-site.test.tsx b/apps/studio/src/modules/add-site/tests/add-site.test.tsx
index 1698ea9351..e2da996f49 100644
--- a/apps/studio/src/modules/add-site/tests/add-site.test.tsx
+++ b/apps/studio/src/modules/add-site/tests/add-site.test.tsx
@@ -405,11 +405,10 @@ describe( 'AddSite', () => {
 
 		expect( screen.getByText( 'WordPress version' ) ).toBeInTheDocument();
 
-		// New sites auto-update, so the picker only appears once that is off.
-		expect( screen.getByLabelText( 'Automatic updates' ) ).toBeChecked();
-		expect( screen.queryByLabelText( 'Version' ) ).not.toBeInTheDocument();
+		// New sites auto-update until the user picks a version.
+		expect( screen.getByRole( 'radio', { name: 'Automatic updates' } ) ).toBeChecked();
 
-		await user.click( screen.getByLabelText( 'Automatic updates' ) );
+		await user.click( screen.getByRole( 'radio', { name: 'Select a version' } ) );
 		await user.selectOptions( screen.getByLabelText( 'Version' ), '6.3.3' );
 
 		mockShowOpenFolderDialog.mockResolvedValue( {
@@ -555,7 +554,7 @@ describe( 'AddSite', () => {
 		await user.click( screen.getByRole( 'button', { name: 'Continue' } ) );
 		await user.click( screen.getByRole( 'button', { name: 'Advanced settings' } ) );
 
-		expect( screen.getByLabelText( 'Automatic updates' ) ).toBeDisabled();
+		expect( screen.getByRole( 'radio', { name: 'Automatic updates' } ) ).toBeDisabled();
 	} );
 
 	it( 'should enable WordPress version field when online', async () => {
@@ -570,7 +569,7 @@ describe( 'AddSite', () => {
 		await user.click( screen.getByRole( 'button', { name: 'Continue' } ) );
 		await user.click( screen.getByRole( 'button', { name: 'Advanced settings' } ) );
 
-		expect( screen.getByLabelText( 'Automatic updates' ) ).toBeEnabled();
+		expect( screen.getByRole( 'radio', { name: 'Automatic updates' } ) ).toBeEnabled();
 	} );
 
 	it( 'should show tooltip with offline message when hovering over disabled WordPress version field', async () => {
@@ -585,7 +584,7 @@ describe( 'AddSite', () => {
 		await user.click( screen.getByRole( 'button', { name: 'Continue' } ) );
 		await user.click( screen.getByRole( 'button', { name: 'Advanced settings' } ) );
 
-		await user.hover( screen.getByLabelText( 'Automatic updates' ) );
+		await user.hover( screen.getByRole( 'radio', { name: 'Automatic updates' } ) );
 
 		expect(
 			screen.getByText(
@@ -606,7 +605,7 @@ describe( 'AddSite', () => {
 		await user.click( screen.getByRole( 'button', { name: 'Continue' } ) );
 		await user.click( screen.getByRole( 'button', { name: 'Advanced settings' } ) );
 
-		await user.hover( screen.getByLabelText( 'Automatic updates' ) );
+		await user.hover( screen.getByRole( 'radio', { name: 'Automatic updates' } ) );
 
 		expect(
 			screen.queryByText(
diff --git a/apps/studio/src/modules/site-settings/edit-site-details.tsx b/apps/studio/src/modules/site-settings/edit-site-details.tsx
index f8a7460b75..744919084b 100644
--- a/apps/studio/src/modules/site-settings/edit-site-details.tsx
+++ b/apps/studio/src/modules/site-settings/edit-site-details.tsx
@@ -397,10 +397,12 @@ const EditSiteDetails = ( { currentWpVersion, onSave }: EditSiteDetailsProps ) =
 												></TextControlComponent>
 											</label>
 
-											<div className="flex flex-row gap-x-6">
+											{ /* A grid, not a flex row: the WordPress version control moved to
+											     its own block below, and flex-1 would stretch PHP to full width. */ }
+											<div className="grid grid-cols-2 gap-x-6">
 												<label
 													htmlFor="php-version-select"
-													className="flex flex-1 flex-col gap-1.5 leading-4"
+													className="flex flex-col gap-1.5 leading-4"
 												>
 													<span className="inline-flex items-center gap-2 font-semibold">
 														{ __( 'PHP version' ) }
@@ -434,7 +436,9 @@ const EditSiteDetails = ( { currentWpVersion, onSave }: EditSiteDetailsProps ) =
 														__nextHasNoMarginBottom
 													/>
 												</label>
+											</div>
 
+											<div className="mt-4">
 												<WPVersionSelector
 													selectedValue={ selectedWpVersion }
 													onChange={ setSelectedWpVersion }
diff --git a/apps/studio/src/modules/site-settings/tests/edit-site-details.test.tsx b/apps/studio/src/modules/site-settings/tests/edit-site-details.test.tsx
index 27b3a00914..8f93dfc06d 100644
--- a/apps/studio/src/modules/site-settings/tests/edit-site-details.test.tsx
+++ b/apps/studio/src/modules/site-settings/tests/edit-site-details.test.tsx
@@ -69,12 +69,12 @@ vi.mock( 'src/hooks/use-offline', () => ( {
 	useOffline: vi.fn().mockReturnValue( false ),
 } ) );
 
-/** New sites and auto-updating sites hide the picker behind the toggle. */
+/** The picker only applies once "Select a version" is the chosen mode. */
 const pinVersion = async (
 	user: ReturnType< typeof userEvent.setup >,
 	version: string
 ): Promise< void > => {
-	await user.click( screen.getByLabelText( 'Automatic updates' ) );
+	await user.click( screen.getByRole( 'radio', { name: 'Select a version' } ) );
 	await user.selectOptions( screen.getByLabelText( 'Version' ), version );
 };
 
@@ -157,15 +157,13 @@ describe( 'EditSiteDetails', () => {
 
 		expect( screen.getByLabelText( 'Site name' ) ).toHaveValue( 'Test Site' );
 		expect( screen.getByLabelText( 'PHP version' ) ).toHaveValue( '8.4' );
-		const toggle = screen.getByLabelText( 'Automatic updates' );
-		expect( toggle ).toBeChecked();
-		expect( screen.getByText( /Installed version/ ) ).toHaveTextContent( 'Installed version: 6.3' );
-		// Forms mode announces only the control's label and description, so both
-		// lines under the toggle have to be part of that description.
-		expect( toggle ).toHaveAccessibleDescription( /Installed version: 6\.3/ );
-		expect( toggle ).toHaveAccessibleDescription( /on its own schedule/ );
-		// Nothing to pick while WordPress owns the version.
-		expect( screen.queryByLabelText( 'Version' ) ).not.toBeInTheDocument();
+		const automatic = screen.getByRole( 'radio', { name: 'Automatic updates' } );
+		expect( automatic ).toBeChecked();
+		// Forms mode announces only the radio's label and description.
+		expect( automatic ).toHaveAccessibleDescription(
+			'WordPress installs updates on its own schedule. Currently using version 6.3.'
+		);
+		expect( screen.getByLabelText( 'Version' ) ).toHaveValue( '6.3' );
 	} );
 
 	it( 'should show the version picker for pinned sites', async () => {
@@ -183,15 +181,15 @@ describe( 'EditSiteDetails', () => {
 			expect( screen.getByRole( 'dialog' ) ).toBeInTheDocument();
 		} );
 
-		expect( screen.getByLabelText( 'Automatic updates' ) ).not.toBeChecked();
+		expect( screen.getByRole( 'radio', { name: 'Select a version' } ) ).toBeChecked();
 		expect( screen.getByLabelText( 'Version' ) ).toHaveValue( '6.3' );
 		expect( screen.getByRole( 'group', { name: 'Stable Versions' } ) ).toBeInTheDocument();
-		// Naming the installed version beside "Automatic updates" on a pinned
-		// site would read as if auto-update were keeping it there (STU-2348).
-		expect( screen.queryByText( /Installed version/ ) ).not.toBeInTheDocument();
+		// Naming the version under "Automatic updates" on a pinned site would
+		// read as if auto-update were keeping the site on it (STU-2348).
+		expect( screen.queryByText( /Currently using version/ ) ).not.toBeInTheDocument();
 	} );
 
-	it( 'should name the installed version as soon as a pinned site turns auto-update on', async () => {
+	it( 'should name the installed version as soon as a pinned site selects auto-update', async () => {
 		vi.mocked( useSiteDetails ).mockReturnValue(
 			createMock< ReturnType< typeof useSiteDetails > >( {
 				...baseMockSiteDetails,
@@ -206,9 +204,9 @@ describe( 'EditSiteDetails', () => {
 			expect( screen.getByRole( 'dialog' ) ).toBeInTheDocument();
 		} );
 
-		await userEvent.setup().click( screen.getByLabelText( 'Automatic updates' ) );
+		await userEvent.setup().click( screen.getByRole( 'radio', { name: 'Automatic updates' } ) );
 
-		expect( screen.getByText( /Installed version/ ) ).toHaveTextContent( 'Installed version: 6.3' );
+		expect( screen.getByText( /Currently using version 6\.3\./ ) ).toBeInTheDocument();
 	} );
 
 	it( 'should close the modal when cancel button is clicked', async () => {
@@ -518,7 +516,7 @@ describe( 'EditSiteDetails', () => {
 		} );
 		expect( screen.getByLabelText( 'Site name' ) ).toBeDisabled();
 		expect( screen.getByLabelText( 'PHP version' ) ).toBeDisabled();
-		expect( screen.getByLabelText( 'Automatic updates' ) ).toBeDisabled();
+		expect( screen.getByRole( 'radio', { name: 'Automatic updates' } ) ).toBeDisabled();
 		expect( screen.getByRole( 'button', { name: 'Cancel' } ) ).toBeDisabled();
 
 		resolveUpdate();
@@ -543,7 +541,7 @@ describe( 'EditSiteDetails', () => {
 			expect( screen.getByRole( 'dialog' ) ).toBeInTheDocument();
 		} );
 
-		expect( screen.getByLabelText( 'Automatic updates' ) ).toBeDisabled();
+		expect( screen.getByRole( 'radio', { name: 'Automatic updates' } ) ).toBeDisabled();
 	} );
 
 	it( 'should enable WordPress version field when online', async () => {
@@ -560,7 +558,7 @@ describe( 'EditSiteDetails', () => {
 			expect( screen.getByRole( 'dialog' ) ).toBeInTheDocument();
 		} );
 
-		expect( screen.getByLabelText( 'Automatic updates' ) ).toBeEnabled();
+		expect( screen.getByRole( 'radio', { name: 'Automatic updates' } ) ).toBeEnabled();
 	} );
 
 	it( 'should show tooltip with offline message when hovering over disabled WordPress version field', async () => {
@@ -578,7 +576,7 @@ describe( 'EditSiteDetails', () => {
 		} );
 		const user = userEvent.setup();
 
-		await user.hover( screen.getByLabelText( 'Automatic updates' ) );
+		await user.hover( screen.getByRole( 'radio', { name: 'Automatic updates' } ) );
 
 		expect(
 			screen.getByText( 'Changing WordPress version requires an internet connection.' )
@@ -597,7 +595,7 @@ describe( 'EditSiteDetails', () => {
 		renderWithProvider( <EditSiteDetails { ...defaultProps } /> );
 		const user = userEvent.setup();
 
-		await user.hover( screen.getByLabelText( 'Automatic updates' ) );
+		await user.hover( screen.getByRole( 'radio', { name: 'Automatic updates' } ) );
 
 		expect(
 			screen.queryByText( 'Changing WordPress version requires an internet connection.' )
diff --git a/apps/ui/src/components/create-site-form/index.test.tsx b/apps/ui/src/components/create-site-form/index.test.tsx
index d0d1d3791b..85a455b1a8 100644
--- a/apps/ui/src/components/create-site-form/index.test.tsx
+++ b/apps/ui/src/components/create-site-form/index.test.tsx
@@ -465,11 +465,10 @@ describe( 'CreateSiteForm', () => {
 		renderForm( { name: 'Old Blueprint', wpVersion: '4.9' } );
 		openAdvancedSettings();
 
-		// Auto-update is the default, so no version is pinned and the picker stays away.
+		// Auto-update is the default, so no version is pinned.
 		await waitFor( () =>
-			expect( screen.getByRole( 'checkbox', { name: 'Automatic updates' } ) ).toBeChecked()
+			expect( screen.getByRole( 'radio', { name: 'Automatic updates' } ) ).toBeChecked()
 		);
-		expect( screen.queryByLabelText( 'Version' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'uses a stable select control for long WordPress version lists', () => {
@@ -486,8 +485,6 @@ describe( 'CreateSiteForm', () => {
 		} );
 		renderForm( { name: 'Versioned site' } );
 		openAdvancedSettings();
-		fireEvent.click( screen.getByRole( 'checkbox', { name: 'Automatic updates' } ) );
-
 		expect( screen.getByLabelText( 'Version' ).tagName ).toBe( 'SELECT' );
 	} );
 
@@ -502,7 +499,7 @@ describe( 'CreateSiteForm', () => {
 		} );
 		renderForm( { name: 'Pinned site' } );
 		openAdvancedSettings();
-		fireEvent.click( screen.getByRole( 'checkbox', { name: 'Automatic updates' } ) );
+		fireEvent.click( screen.getByRole( 'radio', { name: 'Select a version' } ) );
 
 		// The list is newest-first, so the first stable entry is the newest one —
 		// a prerelease would be a surprising default for a new site.
diff --git a/apps/ui/src/components/create-site-form/index.tsx b/apps/ui/src/components/create-site-form/index.tsx
index 57e49087cb..0a0f443b6e 100644
--- a/apps/ui/src/components/create-site-form/index.tsx
+++ b/apps/ui/src/components/create-site-form/index.tsx
@@ -501,11 +501,8 @@ export function CreateSiteForm( {
 					id: 'path',
 					layout: { type: 'regular', labelPosition: 'top' },
 				},
-				{
-					id: 'versions',
-					layout: { type: 'row', alignment: 'start' },
-					children: [ 'phpVersion', 'wpVersion' ],
-				},
+				'phpVersion',
+				'wpVersion',
 				{
 					id: 'adminCredentials',
 					layout: { type: 'row', alignment: 'start' },
diff --git a/apps/ui/src/components/site-fields/style.module.css b/apps/ui/src/components/site-fields/style.module.css
index 7838848bfd..996c9339b3 100644
--- a/apps/ui/src/components/site-fields/style.module.css
+++ b/apps/ui/src/components/site-fields/style.module.css
@@ -20,20 +20,12 @@
 	border: 0;
 }
 
-/* Both description lines live in ToggleControl's help so they reach the
-   toggle's accessible description. Let the help block span the full width and
-   re-apply its own 40px label indent to the sentence alone, so the installed
-   version still starts at the field's edge. */
-.updateModeControl :global(.components-toggle-control__help) {
-	display: block;
-	margin-inline-start: 0;
-}
-
-.toggleHelpText {
-	display: block;
-	margin-inline-start: 40px;
+.updateModeControl :global(.components-radio-control) {
+	display: flex;
+	flex-direction: column;
+	gap: var(--wpds-dimension-padding-lg);
 }
 
-.installedVersion {
-	display: block;
+.pinnedVersionSelect {
+	width: min(180px, 100%);
 }
diff --git a/apps/ui/src/components/site-fields/wp-version-control.tsx b/apps/ui/src/components/site-fields/wp-version-control.tsx
index ee2aba09d3..912610985e 100644
--- a/apps/ui/src/components/site-fields/wp-version-control.tsx
+++ b/apps/ui/src/components/site-fields/wp-version-control.tsx
@@ -1,13 +1,13 @@
 import {
-	getAutoUpdatesHelpText,
-	getAutoUpdatesToggleLabel,
-	getInstalledVersionLabel,
+	getAutomaticUpdatesDescription,
+	getAutomaticUpdatesLabel,
+	getSelectAVersionLabel,
 } from '@studio/common/lib/wordpress-version-labels';
-import { BaseControl, SelectControl, ToggleControl } from '@wordpress/components';
+import { BaseControl, SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
 import { Tooltip } from '@wordpress/ui';
-import { useState } from 'react';
+import { useId, useState } from 'react';
 import styles from './style.module.css';
 import type { DataFormControlProps, Option } from '@wordpress/dataviews';
 
@@ -31,8 +31,8 @@ export type WpVersionOption = Option & {
 
 /**
  * WordPress version control. Whenever there are versions to pin to, it splits
- * into an "Automatic updates" toggle and a version dropdown that only appears
- * once the site leaves auto-update; without a version list it degrades to a
+ * into "Automatic updates" and "Select a version" radios, with the version
+ * dropdown nested under the second one; without a version list it degrades to a
  * single dropdown carrying the auto-update option. When the field is disabled
  * with a description (offline), the description shows as a hover tooltip like
  * the legacy UI instead of inline help text.
@@ -47,6 +47,9 @@ export function WpVersionControl< Item >( {
 	// selector) because Base UI's hover detection doesn't fire over a
 	// disabled form control.
 	const [ showTooltip, setShowTooltip ] = useState( false );
+	// Unique per instance so two controls on one screen keep their own radio
+	// group and their own label/description associations.
+	const modeControlName = useId();
 	const value = field.getValue( { item: data } ) ?? '';
 	const disabled = field.isDisabled( { item: data, field } );
 	const options = ( field.elements ?? [] ) as WpVersionOption[];
@@ -80,15 +83,15 @@ export function WpVersionControl< Item >( {
 
 	const updateValue = ( newValue: string ) =>
 		onChange( field.setValue( { item: data, value: newValue } ) );
-	// A function, not an element: auto-update is the default in both forms, and
-	// there the dropdown is never rendered.
 	const renderVersionSelect = () => (
 		<SelectControl
 			__next40pxDefaultSize
 			__nextHasNoMarginBottom
 			label={ usesUpdateModeControl ? __( 'Version' ) : field.label }
-			hideLabelFromVision={ usesUpdateModeControl ? undefined : hideLabelFromVision }
-			value={ value }
+			hideLabelFromVision={ usesUpdateModeControl ? true : hideLabelFromVision }
+			// While "Automatic updates" is chosen the field value is the mode, not
+			// a version, so preview the version the radio below would pin to.
+			value={ usesUpdateModeControl && automaticUpdates ? defaultPinnedOption.value : value }
 			disabled={ disabled }
 			onChange={ updateValue }
 		>
@@ -121,33 +124,58 @@ export function WpVersionControl< Item >( {
 					disabled={ disabled }
 					aria-label={ field.label }
 				>
-					<ToggleControl
-						__nextHasNoMarginBottom
-						label={ getAutoUpdatesToggleLabel() }
-						checked={ automaticUpdates }
-						disabled={ disabled }
-						// Both lines go through `help` so ToggleControl points the
-						// toggle's aria-describedby at them: forms mode announces only
-						// the control's own label and description.
-						help={
-							<>
-								<span className={ styles.toggleHelpText }>
-									{ getAutoUpdatesHelpText( automaticUpdates ) }
-								</span>
-								{ /* Naming a version while the site is pinned would read as if
-								     auto-update were keeping it there — the dropdown says it. */ }
-								{ automaticUpdates && currentVersion && (
-									<span className={ styles.installedVersion }>
-										{ getInstalledVersionLabel( currentVersion.value ) }
-									</span>
+					<div className="components-radio-control">
+						<div className="components-radio-control__option">
+							<input
+								id={ `${ modeControlName }-automatic` }
+								className="components-radio-control__input"
+								type="radio"
+								name={ modeControlName }
+								checked={ automaticUpdates }
+								// Forms mode announces only the radio's label and
+								// description, so the description has to be named here.
+								aria-describedby={ `${ modeControlName }-automatic-description` }
+								onChange={ () => updateValue( autoUpdateOption.value ) }
+							/>
+							<label
+								htmlFor={ `${ modeControlName }-automatic` }
+								className="components-radio-control__label"
+							>
+								{ getAutomaticUpdatesLabel() }
+							</label>
+							<p
+								id={ `${ modeControlName }-automatic-description` }
+								className="components-radio-control__option-description"
+							>
+								{ /* Naming a version on a pinned site would read as if
+								     auto-update were keeping it there. */ }
+								{ getAutomaticUpdatesDescription(
+									automaticUpdates ? currentVersion?.value : undefined
 								) }
-							</>
-						}
-						onChange={ ( checked ) =>
-							updateValue( checked ? autoUpdateOption.value : defaultPinnedOption.value )
-						}
-					/>
-					{ ! automaticUpdates && renderVersionSelect() }
+							</p>
+						</div>
+						<div className="components-radio-control__option">
+							<input
+								id={ `${ modeControlName }-pinned` }
+								className="components-radio-control__input"
+								type="radio"
+								name={ modeControlName }
+								checked={ ! automaticUpdates }
+								onChange={ () => updateValue( defaultPinnedOption.value ) }
+							/>
+							<label
+								htmlFor={ `${ modeControlName }-pinned` }
+								className="components-radio-control__label"
+							>
+								{ getSelectAVersionLabel() }
+							</label>
+							<div
+								className={ `${ styles.pinnedVersionSelect } components-radio-control__option-description` }
+							>
+								{ renderVersionSelect() }
+							</div>
+						</div>
+					</div>
 				</fieldset>
 			</BaseControl>
 		) : (
diff --git a/apps/ui/src/components/site-overview-view/index.test.tsx b/apps/ui/src/components/site-overview-view/index.test.tsx
index 844df029ca..027313f6b9 100644
--- a/apps/ui/src/components/site-overview-view/index.test.tsx
+++ b/apps/ui/src/components/site-overview-view/index.test.tsx
@@ -486,19 +486,19 @@ describe( 'SiteOverviewView', () => {
 
 		renderView( 'general' );
 
-		const toggle = screen.getByRole( 'checkbox', { name: 'Automatic updates' } );
-		expect( toggle ).toBeChecked();
+		const automatic = screen.getByRole( 'radio', { name: 'Automatic updates' } );
+		expect( automatic ).toBeChecked();
 		// The readout names the version the site runs now, so "latest" can't be
 		// read as "already on the newest release" (STU-2348). It has to reach
 		// screen readers in forms mode too, where only the control's own label
 		// and description are announced.
-		expect( screen.getByText( /Installed version/ ) ).toHaveTextContent(
-			'Installed version: 6.7.2'
+		expect( automatic ).toHaveAccessibleDescription(
+			'WordPress installs updates on its own schedule. Currently using version 6.7.2.'
 		);
-		expect( toggle ).toHaveAccessibleDescription( /Installed version: 6\.7\.2/ );
-		expect( toggle ).toHaveAccessibleDescription( /on its own schedule/ );
-		// Nothing to pick while WordPress owns the version.
-		expect( screen.queryByLabelText( 'Version' ) ).not.toBeInTheDocument();
+		const select = screen.getByLabelText( 'Version' );
+		expect( select.tagName ).toBe( 'SELECT' );
+		expect( select ).toHaveValue( '6.7.2' );
+		expect( screen.getByRole( 'group', { name: 'Stable Versions' } ) ).toBeInTheDocument();
 	} );
 
 	it( 'preselects the version picker for pinned sites', () => {
@@ -510,26 +510,11 @@ describe( 'SiteOverviewView', () => {
 
 		renderView( 'general' );
 
-		expect( screen.getByRole( 'checkbox', { name: 'Automatic updates' } ) ).not.toBeChecked();
+		expect( screen.getByRole( 'radio', { name: 'Select a version' } ) ).toBeChecked();
 		expect( screen.getByLabelText( 'Version' ) ).toHaveValue( '6.7.2' );
-		expect( screen.getByRole( 'group', { name: 'Stable Versions' } ) ).toBeInTheDocument();
-		// Naming the installed version beside "Automatic updates" on a pinned
-		// site would read as if auto-update were keeping it there (STU-2348).
-		expect( screen.queryByText( /Installed version/ ) ).not.toBeInTheDocument();
-	} );
-
-	it( 'reveals the version picker when automatic updates are turned off', () => {
-		useWordPressVersionsMock.mockReturnValue( { data: WP_VERSIONS } );
-		useWpVersionMock.mockReturnValue( { data: '6.7.2' } );
-
-		renderView( 'general' );
-
-		fireEvent.click( screen.getByRole( 'checkbox', { name: 'Automatic updates' } ) );
-
-		// Seeded with the version the site already runs, so leaving auto-update
-		// doesn't quietly propose a different release.
-		expect( screen.getByLabelText( 'Version' ) ).toHaveValue( '6.7.2' );
-		expect( screen.queryByText( /Installed version/ ) ).not.toBeInTheDocument();
+		// Naming the version under "Automatic updates" on a pinned site would
+		// read as if auto-update were keeping the site on it (STU-2348).
+		expect( screen.queryByText( /Currently using version/ ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'saves a pinned WordPress version picked from the dropdown', () => {
@@ -539,7 +524,7 @@ describe( 'SiteOverviewView', () => {
 
 		renderView( 'general' );
 
-		fireEvent.click( screen.getByRole( 'checkbox', { name: 'Automatic updates' } ) );
+		fireEvent.click( screen.getByRole( 'radio', { name: 'Select a version' } ) );
 		fireEvent.change( screen.getByLabelText( 'Version' ), {
 			target: { value: '6.7.2' },
 		} );
@@ -657,9 +642,7 @@ describe( 'SiteOverviewView', () => {
 		const select = screen.getByLabelText( 'WordPress version' );
 		expect( select.tagName ).toBe( 'SELECT' );
 		expect( select ).toHaveValue( '' );
-		expect(
-			screen.queryByRole( 'checkbox', { name: 'Automatic updates' } )
-		).not.toBeInTheDocument();
+		expect( screen.queryByRole( 'radio' ) ).not.toBeInTheDocument();
 	} );
 
 	// Offline only blocks *changing* the version, so the field stays on the
@@ -703,14 +686,14 @@ describe( 'SiteOverviewView', () => {
 
 		renderView( 'general' );
 
-		expect( screen.getByRole( 'checkbox', { name: 'Automatic updates' } ) ).not.toBeChecked();
+		expect( screen.getByRole( 'radio', { name: 'Select a version' } ) ).toBeChecked();
 		// The site is pinned to files Studio can't read a version from, so the
 		// picker says so instead of showing a version the site may not run.
 		const picker = screen.getByLabelText( 'Version' ) as HTMLSelectElement;
 		expect( picker ).toHaveValue( 'latest' );
 		expect( picker.selectedOptions[ 0 ] ).toHaveTextContent( 'Unknown version' );
 
-		fireEvent.click( screen.getByRole( 'checkbox', { name: 'Automatic updates' } ) );
+		fireEvent.click( screen.getByRole( 'radio', { name: 'Automatic updates' } ) );
 		fireEvent.click( screen.getByRole( 'button', { name: 'Save settings' } ) );
 
 		// 'latest' has to reach the CLI so it actually installs the newest
diff --git a/apps/ui/src/components/site-settings-view/index.tsx b/apps/ui/src/components/site-settings-view/index.tsx
index 9796bcdf6f..30da4507ee 100644
--- a/apps/ui/src/components/site-settings-view/index.tsx
+++ b/apps/ui/src/components/site-settings-view/index.tsx
@@ -185,11 +185,8 @@ export function SiteSettingsForm( { site, activeTab }: { site: SiteDetails; acti
 			layout: { type: 'regular', labelPosition: 'top' },
 			fields: [
 				'name',
-				{
-					id: 'versions',
-					layout: { type: 'row', alignment: 'start' },
-					children: [ 'phpVersion', 'wpVersion' ],
-				},
+				'phpVersion',
+				'wpVersion',
 				{
 					id: 'adminCredentials',
 					layout: { type: 'row', alignment: 'start' },
diff --git a/apps/ui/src/index.css b/apps/ui/src/index.css
index b1f6da2505..e0c4a9aab9 100644
--- a/apps/ui/src/index.css
+++ b/apps/ui/src/index.css
@@ -273,15 +273,14 @@ select option {
 	color: var( --wpds-color-fg-content-neutral );
 }
 
-/* FormToggle hardcodes a white track and a near-black thumb for its unchecked
-   state, which inverts against the dark palette. */
-[data-wpds-theme-provider-id] .components-form-toggle:not( .is-checked ) .components-form-toggle__track {
-	background-color: var( --wpds-color-bg-surface-neutral );
+[data-wpds-theme-provider-id] .components-radio-control__input[type='radio']:not(:checked) {
 	border-color: var( --wpds-color-stroke-surface-neutral-strong );
+	background: transparent;
 }
 
-[data-wpds-theme-provider-id] .components-form-toggle:not( .is-checked ) .components-form-toggle__thumb {
-	background-color: var( --wpds-color-fg-content-neutral );
+[data-wpds-theme-provider-id] .components-radio-control__option-description {
+	color: var( --wpds-color-fg-content-neutral-weak );
+	unicode-bidi: plaintext;
 }
 
 /* @wordpress/components ships its RTL fixups in a separate style-rtl.css
diff --git a/packages/common/lib/wordpress-version-labels.ts b/packages/common/lib/wordpress-version-labels.ts
index 4248b4fdce..62130aea07 100644
--- a/packages/common/lib/wordpress-version-labels.ts
+++ b/packages/common/lib/wordpress-version-labels.ts
@@ -8,30 +8,35 @@ import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Names the auto-update mode in the plain version dropdown. Only the fallback
- * for a missing version list renders it — everywhere else the mode lives behind
- * the "Automatic updates" toggle.
+ * for a missing version list renders it — everywhere else the mode is one of
+ * the update-mode radios.
  */
 export function getAutoUpdateVersionLabel(): string {
 	/* translators: WordPress version dropdown option. Names the auto-update mode, not a version. */
 	return __( 'Auto-update' );
 }
 
-export function getAutoUpdatesToggleLabel(): string {
+export function getAutomaticUpdatesLabel(): string {
 	return __( 'Automatic updates' );
 }
 
-export function getAutoUpdatesHelpText( automaticUpdates: boolean ): string {
-	return automaticUpdates
-		? __(
-				'WordPress updates this site on its own schedule. New releases may not be installed immediately.'
-		  )
-		: __( 'This site stays on the version you choose.' );
+export function getSelectAVersionLabel(): string {
+	return __( 'Select a version' );
 }
 
-export function getInstalledVersionLabel( installedVersion: string ): string {
+/**
+ * @param installedVersion Version the site runs right now. Pass it only while
+ *                         auto-update is the selected mode: on a pinned site it
+ *                         would read as if auto-update were keeping the site on
+ *                         that version (STU-2348).
+ */
+export function getAutomaticUpdatesDescription( installedVersion?: string ): string {
+	if ( ! installedVersion ) {
+		return __( 'WordPress installs updates on its own schedule.' );
+	}
 	return sprintf(
 		/* translators: %s: WordPress version the site runs now, e.g. 6.9.7 */
-		__( 'Installed version: %s' ),
+		__( 'WordPress installs updates on its own schedule. Currently using version %s.' ),
 		installedVersion
 	);
 }

From 60f4bb3021dfb6db1100fd508dbe699cd402a4cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gergely=20Cs=C3=A9csey?= <gcsecsey@gmail.com>
Date: Thu, 3 Sep 2026 13:01:33 +0100
Subject: [PATCH 14/15] Separate the WordPress update mode radios in Studio
 Classic

---
 apps/studio/src/components/wp-version-selector/index.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/studio/src/components/wp-version-selector/index.tsx b/apps/studio/src/components/wp-version-selector/index.tsx
index 1b59dbb2cf..4bb961fd8a 100644
--- a/apps/studio/src/components/wp-version-selector/index.tsx
+++ b/apps/studio/src/components/wp-version-selector/index.tsx
@@ -155,7 +155,10 @@ export const WPVersionSelector = ( {
 					placement="top-start"
 					className="flex flex-1 flex-col"
 				>
-					<div className="components-radio-control">
+					{ /* `.components-radio-control` sets no gap of its own, so the first
+					     option's description would butt against the second radio.
+					     16px matches the agentic UI's --wpds-dimension-padding-lg. */ }
+					<div className="components-radio-control flex flex-col gap-4">
 						<div className="components-radio-control__option">
 							<input
 								id={ automaticId }

From fc37fea4bef1cd9ddf0b2a342a1d2a9e82f86074 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gergely=20Cs=C3=A9csey?= <gcsecsey@gmail.com>
Date: Thu, 3 Sep 2026 15:58:41 +0100
Subject: [PATCH 15/15] Group site creation and settings fields into labeled
 sections

---
 .../src/components/settings-section.tsx       |  25 ++
 .../components/wp-version-selector/index.tsx  |   2 +-
 .../add-site/components/create-site-form.tsx  | 355 +++++++++---------
 .../modules/add-site/tests/add-site.test.tsx  |  12 +-
 .../site-settings/edit-site-details.tsx       | 189 +++++-----
 .../src/components/create-site-form/index.tsx |  34 +-
 .../site-fields/compact-select-control.tsx    |  32 ++
 apps/ui/src/components/site-fields/index.ts   |   2 +
 .../components/site-fields/style.module.css   |   4 +
 .../components/site-settings-view/index.tsx   |  32 +-
 apps/ui/src/index.css                         |  22 +-
 11 files changed, 402 insertions(+), 307 deletions(-)
 create mode 100644 apps/studio/src/components/settings-section.tsx
 create mode 100644 apps/ui/src/components/site-fields/compact-select-control.tsx

diff --git a/apps/studio/src/components/settings-section.tsx b/apps/studio/src/components/settings-section.tsx
new file mode 100644
index 0000000000..c97f02c60f
--- /dev/null
+++ b/apps/studio/src/components/settings-section.tsx
@@ -0,0 +1,25 @@
+import { cx } from 'src/lib/cx';
+import type { ReactNode } from 'react';
+
+/**
+ * One titled group of settings, separated from the previous group by a rule.
+ * The first section omits the rule so a form doesn't open with a stray line.
+ */
+export function SettingsSection( {
+	title,
+	isFirst = false,
+	children,
+}: {
+	title: string;
+	isFirst?: boolean;
+	children: ReactNode;
+} ) {
+	return (
+		<section
+			className={ cx( 'flex flex-col', ! isFirst && 'mt-6 border-t border-frame-border pt-6' ) }
+		>
+			<h2 className="a8c-subtitle-small mb-3">{ title }</h2>
+			{ children }
+		</section>
+	);
+}
diff --git a/apps/studio/src/components/wp-version-selector/index.tsx b/apps/studio/src/components/wp-version-selector/index.tsx
index 4bb961fd8a..17e62d8af7 100644
--- a/apps/studio/src/components/wp-version-selector/index.tsx
+++ b/apps/studio/src/components/wp-version-selector/index.tsx
@@ -158,7 +158,7 @@ export const WPVersionSelector = ( {
 					{ /* `.components-radio-control` sets no gap of its own, so the first
 					     option's description would butt against the second radio.
 					     16px matches the agentic UI's --wpds-dimension-padding-lg. */ }
-					<div className="components-radio-control flex flex-col gap-4">
+					<div className="components-radio-control flex flex-col gap-4 pt-1">
 						<div className="components-radio-control__option">
 							<input
 								id={ automaticId }
diff --git a/apps/studio/src/modules/add-site/components/create-site-form.tsx b/apps/studio/src/modules/add-site/components/create-site-form.tsx
index 5ed283e450..d7df319bc4 100644
--- a/apps/studio/src/modules/add-site/components/create-site-form.tsx
+++ b/apps/studio/src/modules/add-site/components/create-site-form.tsx
@@ -34,6 +34,7 @@ import Button from 'src/components/button';
 import { FormPathInputComponent } from 'src/components/form-path-input';
 import { LearnMoreLink, LearnHowLink } from 'src/components/learn-more';
 import PasswordControl from 'src/components/password-control';
+import { SettingsSection } from 'src/components/settings-section';
 import { SiteFormError } from 'src/components/site-form-error';
 import TextControlComponent from 'src/components/text-control';
 import { WPVersionSelector } from 'src/components/wp-version-selector';
@@ -472,32 +473,50 @@ export const CreateSiteForm = ( {
 								isAdvancedSettingsVisible ? 'h-auto opacity-100' : 'h-0 opacity-0'
 							) }
 						>
-							<div className="flex flex-col gap-1.5 leading-4 py-4">
-								<label className="font-semibold" htmlFor="local-path">
-									{ __( 'Local path' ) }
-								</label>
-								<span className="text-frame-text-secondary text-xs">
-									{ createInterpolateElement(
-										__(
-											'Select an empty directory or a directory with an existing WordPress site. <learn_more_link />'
-										),
-										{
-											learn_more_link: <LearnMoreLink docsLinksKey="docsSites" />,
+							<SettingsSection title={ __( 'Site details' ) } isFirst>
+								<div className="flex flex-col gap-1.5 leading-4">
+									<label className="font-semibold" htmlFor="local-path">
+										{ __( 'Local path' ) }
+									</label>
+									<span className="text-frame-text-secondary text-xs">
+										{ createInterpolateElement(
+											__(
+												'Select an empty directory or a directory with an existing WordPress site. <learn_more_link />'
+											),
+											{
+												learn_more_link: <LearnMoreLink docsLinksKey="docsSites" />,
+											}
+										) }
+									</span>
+									<FormPathInputComponent
+										tipMessage={
+											doesPathContainWordPress
+												? __( 'The existing WordPress site at this path will be added.' )
+												: ''
 										}
-									) }
-								</span>
-								<FormPathInputComponent
-									tipMessage={
-										doesPathContainWordPress
-											? __( 'The existing WordPress site at this path will be added.' )
-											: ''
-									}
-									error={ pathError }
-									value={ sitePath }
-									onClick={ handleSelectPath }
-									id="local-path"
-								/>
-								<div className="grid grid-cols-2 gap-4 mt-4">
+										error={ pathError }
+										value={ sitePath }
+										onClick={ handleSelectPath }
+										id="local-path"
+									/>
+								</div>
+
+								<div className="mt-4">
+									<WPVersionSelector
+										selectedValue={ wpVersion }
+										onChange={ setWpVersion }
+										fallbackOptions={ [
+											{ label: getAutoUpdateVersionLabel(), 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>
+							</SettingsSection>
+
+							<SettingsSection title={ __( 'PHP environment' ) }>
+								<div className="flex flex-col gap-4">
 									<div className="flex flex-col gap-1.5 leading-4">
 										<label className="font-semibold" htmlFor="php-version-select">
 											{ __( 'PHP version' ) }
@@ -514,22 +533,6 @@ export const CreateSiteForm = ( {
 											__nextHasNoMarginBottom
 										/>
 									</div>
-								</div>
-
-								<div className="mt-4">
-									<WPVersionSelector
-										selectedValue={ wpVersion }
-										onChange={ setWpVersion }
-										fallbackOptions={ [
-											{ label: getAutoUpdateVersionLabel(), 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>
-
-								<div className="grid grid-cols-2 gap-4 mt-4">
 									<div className="flex flex-col gap-1.5 leading-4">
 										<label className="font-semibold" htmlFor="php-runtime-select">
 											{ __( 'PHP runtime' ) }
@@ -579,153 +582,153 @@ export const CreateSiteForm = ( {
 										</span>
 									</div>
 								</div>
+							</SettingsSection>
 
-								<div className="flex flex-col gap-2 mt-4">
-									<span className="font-semibold">{ __( 'Admin credentials' ) }</span>
-									<div className="grid grid-cols-2 gap-4">
-										<div className="flex flex-col gap-1.5 leading-4">
-											<label className="text-sm" htmlFor="admin-username">
-												{ __( 'Username' ) }
-											</label>
-											<TextControlComponent
-												id="admin-username"
-												value={ adminUsername }
-												onChange={ ( value: string ) => {
-													hasUserEditedCredentials.current = true;
-													setAdminUsername( value );
-												} }
-												className={ adminUsernameError ? '[&_input]:!border-red-500' : '' }
-											/>
-										</div>
-
-										<div className="flex flex-col gap-1.5 leading-4">
-											<label className="text-sm" htmlFor="admin-password">
-												{ __( 'Password' ) }
-											</label>
-											<PasswordControl
-												id="admin-password"
-												value={ adminPassword }
-												onChange={ ( value: string ) => {
-													hasUserEditedCredentials.current = true;
-													setAdminPassword( value );
-												} }
-												className={ adminPasswordError ? '[&_input]:!border-red-500' : '' }
-											/>
-										</div>
+							<div className="flex flex-col gap-2 mt-4">
+								<span className="font-semibold">{ __( 'Admin credentials' ) }</span>
+								<div className="grid grid-cols-2 gap-4">
+									<div className="flex flex-col gap-1.5 leading-4">
+										<label className="text-sm" htmlFor="admin-username">
+											{ __( 'Username' ) }
+										</label>
+										<TextControlComponent
+											id="admin-username"
+											value={ adminUsername }
+											onChange={ ( value: string ) => {
+												hasUserEditedCredentials.current = true;
+												setAdminUsername( value );
+											} }
+											className={ adminUsernameError ? '[&_input]:!border-red-500' : '' }
+										/>
 									</div>
-									{ ( adminUsernameError || adminPasswordError ) && (
-										<span className="text-red-500 text-xs">
-											{ adminUsernameError || adminPasswordError }
-										</span>
-									) }
-								</div>
 
-								<div className="flex flex-col gap-1.5 leading-4 mt-4">
-									<label className="text-sm" htmlFor="admin-email">
-										{ __( 'Email' ) }
-									</label>
-									<TextControlComponent
-										id="admin-email"
-										value={ adminEmail }
-										onChange={ ( value: string ) => {
-											hasUserEditedCredentials.current = true;
-											setAdminEmail( value );
-										} }
-										placeholder="admin@localhost.com"
-										className={ adminEmailError ? '[&_input]:!border-red-500' : '' }
-									/>
-									{ adminEmailError && (
-										<span className="text-red-500 text-xs">{ adminEmailError }</span>
-									) }
+									<div className="flex flex-col gap-1.5 leading-4">
+										<label className="text-sm" htmlFor="admin-password">
+											{ __( 'Password' ) }
+										</label>
+										<PasswordControl
+											id="admin-password"
+											value={ adminPassword }
+											onChange={ ( value: string ) => {
+												hasUserEditedCredentials.current = true;
+												setAdminPassword( value );
+											} }
+											className={ adminPasswordError ? '[&_input]:!border-red-500' : '' }
+										/>
+									</div>
 								</div>
-
-								{ showBlueprintVersionWarning && (
-									<Notice status="warning" isDismissible={ false } className="mt-4">
-										<strong>{ __( 'Version differs from Blueprint recommendation' ) }</strong>
-										<br />
-										{ __( 'This Blueprint recommends:' ) }
-										<ul className="my-2 pl-4">
-											{ showPhpVersionWarning && (
-												<li>
-													{ sprintf(
-														/* translators: %1$s: recommended PHP version, %2$s: default PHP version */
-														__( 'PHP %s (selected is %s)' ),
-														blueprintPreferredVersions?.php as string,
-														phpVersion
-													) }
-												</li>
-											) }
-											{ showWpVersionWarning && (
-												<li>
-													{ sprintf(
-														/* translators: %1$s: recommended WordPress version, %2$s: default WordPress version */
-														__( 'WordPress %s (selected is %s)' ),
-														blueprintPreferredVersions?.wp as string,
-														wpVersion
-													) }
-												</li>
-											) }
-										</ul>
-										{ __( 'Using different versions may cause compatibility issues.' ) }
-									</Notice>
+								{ ( adminUsernameError || adminPasswordError ) && (
+									<span className="text-red-500 text-xs">
+										{ adminUsernameError || adminPasswordError }
+									</span>
 								) }
+							</div>
 
-								<div className="flex items-center gap-2 mt-4">
-									<input
-										type="checkbox"
-										id="use-custom-domain"
-										checked={ useCustomDomain }
-										disabled={ blueprintRequiresCustomDomain }
-										onChange={ ( e ) => setUseCustomDomain( e.target.checked ) }
-									/>
-									<label htmlFor="use-custom-domain">{ __( 'Use custom domain' ) }</label>
-								</div>
-
-								{ blueprintRequiresCustomDomain && (
-									<Notice status="warning" isDismissible={ false } className="mt-2">
-										{ __( 'WordPress multisite requires a custom domain.' ) }
-									</Notice>
+							<div className="flex flex-col gap-1.5 leading-4 mt-4">
+								<label className="text-sm" htmlFor="admin-email">
+									{ __( 'Email' ) }
+								</label>
+								<TextControlComponent
+									id="admin-email"
+									value={ adminEmail }
+									onChange={ ( value: string ) => {
+										hasUserEditedCredentials.current = true;
+										setAdminEmail( value );
+									} }
+									placeholder="admin@localhost.com"
+									className={ adminEmailError ? '[&_input]:!border-red-500' : '' }
+								/>
+								{ adminEmailError && (
+									<span className="text-red-500 text-xs">{ adminEmailError }</span>
 								) }
+							</div>
 
-								<div className="text-frame-text-secondary text-xs mt-2">
-									{ __( 'Your system password will be required to set up the domain.' ) }
-								</div>
+							{ showBlueprintVersionWarning && (
+								<Notice status="warning" isDismissible={ false } className="mt-4">
+									<strong>{ __( 'Version differs from Blueprint recommendation' ) }</strong>
+									<br />
+									{ __( 'This Blueprint recommends:' ) }
+									<ul className="my-2 pl-4">
+										{ showPhpVersionWarning && (
+											<li>
+												{ sprintf(
+													/* translators: %1$s: recommended PHP version, %2$s: default PHP version */
+													__( 'PHP %s (selected is %s)' ),
+													blueprintPreferredVersions?.php as string,
+													phpVersion
+												) }
+											</li>
+										) }
+										{ showWpVersionWarning && (
+											<li>
+												{ sprintf(
+													/* translators: %1$s: recommended WordPress version, %2$s: default WordPress version */
+													__( 'WordPress %s (selected is %s)' ),
+													blueprintPreferredVersions?.wp as string,
+													wpVersion
+												) }
+											</li>
+										) }
+									</ul>
+									{ __( 'Using different versions may cause compatibility issues.' ) }
+								</Notice>
+							) }
 
-								{ useCustomDomain && (
-									<>
-										<div className="flex flex-col gap-2 mt-4">
-											<label htmlFor="custom-domain" className="font-semibold">
-												{ __( 'Domain name' ) }
-											</label>
-											<TextControlComponent
-												id="custom-domain"
-												value={ customDomain !== null ? customDomain : generatedDomainName }
-												onChange={ handleCustomDomainChange }
-											/>
-											{ customDomainError && <SiteFormError error={ customDomainError } /> }
-										</div>
+							<div className="flex items-center gap-2 mt-4">
+								<input
+									type="checkbox"
+									id="use-custom-domain"
+									checked={ useCustomDomain }
+									disabled={ blueprintRequiresCustomDomain }
+									onChange={ ( e ) => setUseCustomDomain( e.target.checked ) }
+								/>
+								<label htmlFor="use-custom-domain">{ __( 'Use custom domain' ) }</label>
+							</div>
 
-										<div className="flex items-center gap-2 mt-4">
-											<input
-												type="checkbox"
-												id="enable-https"
-												checked={ enableHttps }
-												onChange={ ( e ) => setEnableHttps( e.target.checked ) }
-											/>
-											<label htmlFor="enable-https">{ __( 'Enable HTTPS' ) }</label>
-										</div>
+							{ blueprintRequiresCustomDomain && (
+								<Notice status="warning" isDismissible={ false } className="mt-2">
+									{ __( 'WordPress multisite requires a custom domain.' ) }
+								</Notice>
+							) }
 
-										{ ! isCertificateTrusted && (
-											<div className="text-frame-text-secondary text-xs mt-2">
-												{ __(
-													'You need to manually add the Studio root certificate authority to your keychain and trust it to enable HTTPS.'
-												) }{ ' ' }
-												<LearnHowLink docsLinksKey="docsSslInStudio" />
-											</div>
-										) }
-									</>
-								) }
+							<div className="text-frame-text-secondary text-xs mt-2">
+								{ __( 'Your system password will be required to set up the domain.' ) }
 							</div>
+
+							{ useCustomDomain && (
+								<>
+									<div className="flex flex-col gap-2 mt-4">
+										<label htmlFor="custom-domain" className="font-semibold">
+											{ __( 'Domain name' ) }
+										</label>
+										<TextControlComponent
+											id="custom-domain"
+											value={ customDomain !== null ? customDomain : generatedDomainName }
+											onChange={ handleCustomDomainChange }
+										/>
+										{ customDomainError && <SiteFormError error={ customDomainError } /> }
+									</div>
+
+									<div className="flex items-center gap-2 mt-4">
+										<input
+											type="checkbox"
+											id="enable-https"
+											checked={ enableHttps }
+											onChange={ ( e ) => setEnableHttps( e.target.checked ) }
+										/>
+										<label htmlFor="enable-https">{ __( 'Enable HTTPS' ) }</label>
+									</div>
+
+									{ ! isCertificateTrusted && (
+										<div className="text-frame-text-secondary text-xs mt-2">
+											{ __(
+												'You need to manually add the Studio root certificate authority to your keychain and trust it to enable HTTPS.'
+											) }{ ' ' }
+											<LearnHowLink docsLinksKey="docsSslInStudio" />
+										</div>
+									) }
+								</>
+							) }
 						</div>
 					</>
 				) }
diff --git a/apps/studio/src/modules/add-site/tests/add-site.test.tsx b/apps/studio/src/modules/add-site/tests/add-site.test.tsx
index 7b99e3f273..b59432585d 100644
--- a/apps/studio/src/modules/add-site/tests/add-site.test.tsx
+++ b/apps/studio/src/modules/add-site/tests/add-site.test.tsx
@@ -541,15 +541,9 @@ describe( 'AddSite', () => {
 
 		await user.click( screen.getByRole( 'button', { name: 'Advanced settings' } ) );
 
-		expect( screen.getByText( 'PHP version' ) ).toBeInTheDocument();
-
-		const comboboxes = screen.getAllByRole( 'combobox' );
-		expect( comboboxes.length ).toBeGreaterThanOrEqual( 2 );
-
-		const phpVersionDropdown = comboboxes[ 0 ];
-		expect( phpVersionDropdown ).toBeInTheDocument();
-
-		await user.selectOptions( phpVersionDropdown, '8.2' );
+		// By label, not by position: the WordPress version control sits above
+		// PHP version now, so a positional lookup picks the wrong select.
+		await user.selectOptions( screen.getByLabelText( 'PHP version' ), '8.2' );
 
 		mockShowOpenFolderDialog.mockResolvedValue( {
 			path: 'test',
diff --git a/apps/studio/src/modules/site-settings/edit-site-details.tsx b/apps/studio/src/modules/site-settings/edit-site-details.tsx
index 8dcbf4f21b..d49e59245f 100644
--- a/apps/studio/src/modules/site-settings/edit-site-details.tsx
+++ b/apps/studio/src/modules/site-settings/edit-site-details.tsx
@@ -39,6 +39,7 @@ import { ErrorInformation } from 'src/components/error-information';
 import { LearnMoreLink, LearnHowLink } from 'src/components/learn-more';
 import Modal from 'src/components/modal';
 import PasswordControl from 'src/components/password-control';
+import { SettingsSection } from 'src/components/settings-section';
 import { AgentInstructionsPanel, WordPressSkillsPanel } from 'src/components/site-settings-panels';
 import TextControlComponent from 'src/components/text-control';
 import { Tooltip } from 'src/components/tooltip';
@@ -388,18 +389,43 @@ const EditSiteDetails = ( { currentWpVersion, onSave }: EditSiteDetailsProps ) =
 								<div className="mt-6 px-8 flex flex-col">
 									{ name === 'general' && (
 										<>
-											<label className="flex flex-col gap-1.5 leading-4 mb-6">
-												<span className="font-semibold">{ __( 'Site name' ) }</span>
-												<TextControlComponent
-													disabled={ isEditingSite }
-													onChange={ setSiteName }
-													value={ siteName }
-												></TextControlComponent>
-											</label>
-
-											{ /* A grid, not a flex row: the WordPress version control moved to
-											     its own block below, and flex-1 would stretch PHP to full width. */ }
-											<div className="grid grid-cols-2 gap-x-6">
+											<SettingsSection title={ __( 'Site details' ) } isFirst>
+												<label className="flex flex-col gap-1.5 leading-4">
+													<span className="font-semibold">{ __( 'Site name' ) }</span>
+													<TextControlComponent
+														disabled={ isEditingSite }
+														onChange={ setSiteName }
+														value={ siteName }
+													></TextControlComponent>
+												</label>
+
+												<div className="mt-4">
+													<WPVersionSelector
+														selectedValue={ selectedWpVersion }
+														onChange={ setSelectedWpVersion }
+														disabled={ isEditingSite }
+														errorMessage={ errorUpdatingWpVersion }
+														autoUpdateVersion={
+															selectedWpVersion === DEFAULT_WORDPRESS_VERSION
+																? currentWpVersion
+																: undefined
+														}
+														extraOptions={ [
+															{ label: currentWpVersion, value: currentWpVersion },
+														] }
+														fallbackOptions={ [
+															{ label: currentWpVersion, value: currentWpVersion },
+														] }
+													/>
+												</div>
+												{ errorUpdatingWpVersion && (
+													<ErrorInformation className="mt-2">
+														{ errorUpdatingWpVersion }
+													</ErrorInformation>
+												) }
+											</SettingsSection>
+
+											<SettingsSection title={ __( 'PHP environment' ) }>
 												<label
 													htmlFor="php-version-select"
 													className="flex flex-col gap-1.5 leading-4"
@@ -436,94 +462,63 @@ const EditSiteDetails = ( { currentWpVersion, onSave }: EditSiteDetailsProps ) =
 														__nextHasNoMarginBottom
 													/>
 												</label>
-											</div>
 
-											<div className="mt-4">
-												<WPVersionSelector
-													selectedValue={ selectedWpVersion }
-													onChange={ setSelectedWpVersion }
-													disabled={ isEditingSite }
-													errorMessage={ errorUpdatingWpVersion }
-													autoUpdateVersion={
-														selectedWpVersion === DEFAULT_WORDPRESS_VERSION
-															? currentWpVersion
-															: undefined
-													}
-													extraOptions={ [
-														{
-															label: currentWpVersion,
-															value: currentWpVersion,
-														},
-													] }
-													fallbackOptions={ [
-														{
-															label: currentWpVersion,
-															value: currentWpVersion,
-														},
-													] }
-												/>
-											</div>
-											{ errorUpdatingWpVersion && (
-												<ErrorInformation className="mt-2">
-													{ errorUpdatingWpVersion }
-												</ErrorInformation>
-											) }
-
-											<div className="flex flex-row gap-x-6 mt-4">
-												<label
-													htmlFor="php-runtime-select"
-													className="flex flex-1 flex-col gap-1.5 leading-4"
-												>
-													<span className="font-semibold">{ __( 'PHP runtime' ) }</span>
-													<SelectControl< SiteRuntime >
-														id="php-runtime-select"
-														disabled={ isEditingSite }
-														value={ selectedRuntime }
-														options={ [
-															/* translators: PHP runtime option, paired with "Sandbox". The compiled PHP binary that Studio bundles and runs natively on the machine. */
-															{ label: __( 'Native' ), value: SITE_RUNTIME_NATIVE_PHP },
-															/* translators: PHP runtime option, paired with "Native". Runs the site in an isolated WordPress Playground sandbox. */
-															{ label: __( 'Sandbox' ), value: SITE_RUNTIME_PLAYGROUND },
-														] }
-														onChange={ ( value ) => setSelectedRuntime( value ) }
-														__next40pxDefaultSize
-														__nextHasNoMarginBottom
-													/>
-													<span className="text-frame-text-secondary text-xs">
-														<RuntimeDescription runtime={ selectedRuntime } learnMoreLink />
-													</span>
-												</label>
+												<div className="flex flex-col gap-4 mt-4">
+													<label
+														htmlFor="php-runtime-select"
+														className="flex flex-col gap-1.5 leading-4"
+													>
+														<span className="font-semibold">{ __( 'PHP runtime' ) }</span>
+														<SelectControl< SiteRuntime >
+															id="php-runtime-select"
+															disabled={ isEditingSite }
+															value={ selectedRuntime }
+															options={ [
+																/* translators: PHP runtime option, paired with "Sandbox". The compiled PHP binary that Studio bundles and runs natively on the machine. */
+																{ label: __( 'Native' ), value: SITE_RUNTIME_NATIVE_PHP },
+																/* translators: PHP runtime option, paired with "Native". Runs the site in an isolated WordPress Playground sandbox. */
+																{ label: __( 'Sandbox' ), value: SITE_RUNTIME_PLAYGROUND },
+															] }
+															onChange={ ( value ) => setSelectedRuntime( value ) }
+															__next40pxDefaultSize
+															__nextHasNoMarginBottom
+														/>
+														<span className="text-frame-text-secondary text-xs">
+															<RuntimeDescription runtime={ selectedRuntime } learnMoreLink />
+														</span>
+													</label>
 
-												<label
-													htmlFor="file-access-select"
-													className="flex flex-1 flex-col gap-1.5 leading-4"
-												>
-													<span className="font-semibold">{ __( 'File access' ) }</span>
-													<SelectControl< SiteFileAccess >
-														id="file-access-select"
-														disabled={
-															isEditingSite || selectedRuntime === SITE_RUNTIME_PLAYGROUND
-														}
-														value={ usedFileAccess }
-														options={ [
-															{
-																label: __( 'Site directory' ),
-																value: SITE_FILE_ACCESS_SITE_DIRECTORY,
-															},
-															{ label: __( 'All files' ), value: SITE_FILE_ACCESS_ALL_FILES },
-														] }
-														onChange={ ( value ) => setSelectedFileAccess( value ) }
-														__next40pxDefaultSize
-														__nextHasNoMarginBottom
-													/>
-													<span className="text-frame-text-secondary text-xs">
-														<FileAccessDescription
-															runtime={ selectedRuntime }
-															fileAccess={ usedFileAccess }
+													<label
+														htmlFor="file-access-select"
+														className="flex flex-col gap-1.5 leading-4"
+													>
+														<span className="font-semibold">{ __( 'File access' ) }</span>
+														<SelectControl< SiteFileAccess >
+															id="file-access-select"
+															disabled={
+																isEditingSite || selectedRuntime === SITE_RUNTIME_PLAYGROUND
+															}
+															value={ usedFileAccess }
+															options={ [
+																{
+																	label: __( 'Site directory' ),
+																	value: SITE_FILE_ACCESS_SITE_DIRECTORY,
+																},
+																{ label: __( 'All files' ), value: SITE_FILE_ACCESS_ALL_FILES },
+															] }
+															onChange={ ( value ) => setSelectedFileAccess( value ) }
+															__next40pxDefaultSize
+															__nextHasNoMarginBottom
 														/>
-													</span>
-												</label>
-											</div>
+														<span className="text-frame-text-secondary text-xs">
+															<FileAccessDescription
+																runtime={ selectedRuntime }
+																fileAccess={ usedFileAccess }
+															/>
+														</span>
+													</label>
+												</div>
+											</SettingsSection>
 
 											<div className="flex flex-col gap-2 mt-4">
 												<div className="flex items-center gap-2">
diff --git a/apps/ui/src/components/create-site-form/index.tsx b/apps/ui/src/components/create-site-form/index.tsx
index b93debcb30..1e25e20977 100644
--- a/apps/ui/src/components/create-site-form/index.tsx
+++ b/apps/ui/src/components/create-site-form/index.tsx
@@ -502,20 +502,32 @@ export function CreateSiteForm( {
 			layout: { type: 'regular', labelPosition: 'top' },
 			fields: [
 				{
-					id: 'path',
-					layout: { type: 'regular', labelPosition: 'top' },
+					id: 'siteDetails',
+					label: __( 'Site details' ),
+					layout: { type: 'card', withHeader: true, isCollapsible: false },
+					children: [
+						{ id: 'path', layout: { type: 'regular', labelPosition: 'top' } },
+						'wpVersion',
+					],
 				},
-				'phpVersion',
-				'wpVersion',
 				{
-					id: 'adminCredentials',
-					layout: { type: 'row', alignment: 'start' },
-					children: [ 'adminUsername', 'adminPassword' ],
+					id: 'phpEnvironment',
+					label: __( 'PHP environment' ),
+					layout: { type: 'card', withHeader: true, isCollapsible: false },
+					children: [ 'phpVersion' ],
+				},
+				{
+					id: 'wordpressAdmin',
+					label: __( 'WordPress admin' ),
+					layout: { type: 'card', withHeader: true, isCollapsible: false },
+					children: [ 'adminUsername', 'adminPassword', 'adminEmail' ],
+				},
+				{
+					id: 'domain',
+					label: __( 'Domain' ),
+					layout: { type: 'card', withHeader: true, isCollapsible: false },
+					children: [ 'useCustomDomain', 'customDomain', 'enableHttps' ],
 				},
-				'adminEmail',
-				'useCustomDomain',
-				'customDomain',
-				'enableHttps',
 			],
 		} ),
 		[]
diff --git a/apps/ui/src/components/site-fields/compact-select-control.tsx b/apps/ui/src/components/site-fields/compact-select-control.tsx
new file mode 100644
index 0000000000..7f8a17ac3b
--- /dev/null
+++ b/apps/ui/src/components/site-fields/compact-select-control.tsx
@@ -0,0 +1,32 @@
+import { SelectControl } from '@wordpress/components';
+import styles from './style.module.css';
+import type { DataFormControlProps, Option } from '@wordpress/dataviews';
+
+/**
+ * Select for fields whose values are only a few characters wide, like a version
+ * number. The default control spans the form, which leaves the value stranded
+ * beside a long empty box and breaks the column rhythm on wide screens.
+ */
+export function CompactSelectControl< Item >( {
+	data,
+	field,
+	onChange,
+	hideLabelFromVision,
+}: DataFormControlProps< Item > ) {
+	const value = field.getValue( { item: data } ) ?? '';
+	return (
+		<SelectControl
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			className={ styles.compactSelect }
+			label={ field.label }
+			hideLabelFromVision={ hideLabelFromVision }
+			value={ value }
+			disabled={ field.isDisabled( { item: data, field } ) }
+			onChange={ ( newValue: string ) =>
+				onChange( field.setValue( { item: data, value: newValue } ) )
+			}
+			options={ ( field.elements ?? [] ) as Option[] }
+		/>
+	);
+}
diff --git a/apps/ui/src/components/site-fields/index.ts b/apps/ui/src/components/site-fields/index.ts
index 99e957dadf..33b4b359b7 100644
--- a/apps/ui/src/components/site-fields/index.ts
+++ b/apps/ui/src/components/site-fields/index.ts
@@ -19,6 +19,7 @@ import {
 } from '@studio/common/lib/wordpress-version-utils';
 import { SupportedPHPVersions } from '@studio/common/types/php-versions';
 import { __ } from '@wordpress/i18n';
+import { CompactSelectControl } from '@/components/site-fields/compact-select-control';
 import { WpVersionControl } from '@/components/site-fields/wp-version-control';
 import type { WpVersionOption } from '@/components/site-fields/wp-version-control';
 import type { WordPressVersion } from '@studio/common/lib/wordpress-versions';
@@ -45,6 +46,7 @@ export function phpVersionField< T extends { phpVersion: SupportedPHPVersion } >
 		type: 'text',
 		label: __( 'PHP version' ),
 		elements: PHP_VERSION_ELEMENTS,
+		Edit: CompactSelectControl,
 	};
 }
 
diff --git a/apps/ui/src/components/site-fields/style.module.css b/apps/ui/src/components/site-fields/style.module.css
index 996c9339b3..200770e3db 100644
--- a/apps/ui/src/components/site-fields/style.module.css
+++ b/apps/ui/src/components/site-fields/style.module.css
@@ -29,3 +29,7 @@
 .pinnedVersionSelect {
 	width: min(180px, 100%);
 }
+
+.compactSelect {
+	width: min(180px, 100%);
+}
diff --git a/apps/ui/src/components/site-settings-view/index.tsx b/apps/ui/src/components/site-settings-view/index.tsx
index 14013aff8b..4b62fc25fb 100644
--- a/apps/ui/src/components/site-settings-view/index.tsx
+++ b/apps/ui/src/components/site-settings-view/index.tsx
@@ -195,18 +195,30 @@ export function SiteSettingsForm( { site, activeTab }: { site: SiteDetails; acti
 		() => ( {
 			layout: { type: 'regular', labelPosition: 'top' },
 			fields: [
-				'name',
-				'phpVersion',
-				'wpVersion',
 				{
-					id: 'adminCredentials',
-					layout: { type: 'row', alignment: 'start' },
-					children: [ 'adminUsername', 'adminPassword' ],
+					id: 'siteDetails',
+					label: __( 'Site details' ),
+					layout: { type: 'card', withHeader: true, isCollapsible: false },
+					children: [ 'name', 'wpVersion' ],
+				},
+				{
+					id: 'phpEnvironment',
+					label: __( 'PHP environment' ),
+					layout: { type: 'card', withHeader: true, isCollapsible: false },
+					children: [ 'phpVersion' ],
+				},
+				{
+					id: 'wordpressAdmin',
+					label: __( 'WordPress admin' ),
+					layout: { type: 'card', withHeader: true, isCollapsible: false },
+					children: [ 'adminUsername', 'adminPassword', 'adminEmail' ],
+				},
+				{
+					id: 'domain',
+					label: __( 'Domain' ),
+					layout: { type: 'card', withHeader: true, isCollapsible: false },
+					children: [ 'useCustomDomain', 'customDomain', 'enableHttps' ],
 				},
-				'adminEmail',
-				'useCustomDomain',
-				'customDomain',
-				'enableHttps',
 			],
 		} ),
 		[]
diff --git a/apps/ui/src/index.css b/apps/ui/src/index.css
index 7b55571439..34e409d8db 100644
--- a/apps/ui/src/index.css
+++ b/apps/ui/src/index.css
@@ -83,6 +83,22 @@ body:lang( ckb ) [class*='components-'] {
 	color: var( --wpds-color-foreground-content-neutral-weak ) !important;
 }
 
+/* Section grouping for the site forms. The `card` layout gives the sections
+   their headings declaratively, but its panel chrome reads as four stacked
+   boxes; flattening it to a hairline rule between sections matches the
+   settings design and keeps one rhythm down the form. */
+form .dataforms-layouts-card__field {
+	border: 0;
+	border-radius: 0;
+	background: transparent;
+	box-shadow: none;
+	padding-inline: 0;
+}
+
+form .dataforms-layouts-card__field + .dataforms-layouts-card__field {
+	border-top: 1px solid var( --wpds-color-stroke-surface-neutral );
+}
+
 /* Universal heading styles derived from the design system's font-size /
    line-height ramp. Each level steps down one token (h1 = 2xl, h6 = xs),
    keeping the rest of the type contract — family, weight, color, zero
@@ -277,12 +293,12 @@ select option {
 	color: var( --wpds-color-foreground-content-neutral );
 }
 
-[data-wpds-theme-provider-id] .components-radio-control__input[type='radio']:not(:checked) {
-	border-color: var( --wpds-color-stroke-surface-neutral );
+[data-wpds-root-provider] .components-radio-control__input[type='radio']:not(:checked) {
+	border-color: var( --wpds-color-stroke-interactive-neutral );
 	background: transparent;
 }
 
-[data-wpds-theme-provider-id] .components-radio-control__option-description {
+[data-wpds-root-provider] .components-radio-control__option-description {
 	color: var( --wpds-color-foreground-content-neutral-weak );
 	unicode-bidi: plaintext;
 }