UX: clarify naming between site-level and app-level Settings

apps/studio/e2e/blueprints.test.ts

@@ -71,7 +71,7 @@ test.describe( 'Blueprints', () => {
 		await expect( siteContent.runningButton ).toBeAttached( { timeout: 120_000 } );
 
 		// Navigate to Settings tab to get admin URL
-		const settingsTab = await siteContent.navigateToTab( 'Settings' );
+		const settingsTab = await siteContent.navigateToTab( 'settings' );
 		const wpAdminUrl = await settingsTab.copyWPAdminUrlToClipboard( session.electronApp );
 
 		// Verify theme was installed
@@ -106,7 +106,7 @@ test.describe( 'Blueprints', () => {
 		await expect( siteContent.runningButton ).toBeAttached( { timeout: 120_000 } );
 
 		// Navigate to Settings tab to get admin URL
-		const settingsTab = await siteContent.navigateToTab( 'Settings' );
+		const settingsTab = await siteContent.navigateToTab( 'settings' );
 		const wpAdminUrl = await settingsTab.copyWPAdminUrlToClipboard( session.electronApp );
 
 		// Verify theme was activated
@@ -143,7 +143,7 @@ test.describe( 'Blueprints', () => {
 		await expect( siteContent.runningButton ).toBeAttached( { timeout: 120_000 } );
 
 		// Navigate to Settings tab to get admin URL
-		const settingsTab = await siteContent.navigateToTab( 'Settings' );
+		const settingsTab = await siteContent.navigateToTab( 'settings' );
 		const wpAdminUrl = await settingsTab.copyWPAdminUrlToClipboard( session.electronApp );
 
 		// Verify plugin was installed
@@ -178,7 +178,7 @@ test.describe( 'Blueprints', () => {
 		await expect( siteContent.runningButton ).toBeAttached( { timeout: 120_000 } );
 
 		// Navigate to Settings tab to get admin URL
-		const settingsTab = await siteContent.navigateToTab( 'Settings' );
+		const settingsTab = await siteContent.navigateToTab( 'settings' );
 		const wpAdminUrl = await settingsTab.copyWPAdminUrlToClipboard( session.electronApp );
 
 		// Verify plugin was activated
@@ -216,7 +216,7 @@ test.describe( 'Blueprints', () => {
 		await expect( siteContent.runningButton ).toBeAttached( { timeout: 120_000 } );
 
 		// Navigate to Settings tab to verify site is accessible
-		const settingsTab = await siteContent.navigateToTab( 'Settings' );
+		const settingsTab = await siteContent.navigateToTab( 'settings' );
 		const wpAdminUrl = await settingsTab.copyWPAdminUrlToClipboard( session.electronApp );
 
 		// Verify the site was created successfully and admin is accessible
@@ -254,7 +254,7 @@ test.describe( 'Blueprints', () => {
 		await expect( siteContent.runningButton ).toBeAttached( { timeout: 120_000 } );
 
 		// Navigate to Settings tab to verify site is accessible
-		const settingsTab = await siteContent.navigateToTab( 'Settings' );
+		const settingsTab = await siteContent.navigateToTab( 'settings' );
 		const wpAdminUrl = await settingsTab.copyWPAdminUrlToClipboard( session.electronApp );
 
 		// Verify the site was created successfully and admin is accessible

apps/studio/e2e/import-export.test.ts

@@ -37,7 +37,7 @@ test.describe( 'Import / Export', () => {
 		const siteContent = new SiteContent( session.mainWindow, defaultSiteName );
 
 		// Navigate to the Import / Export tab
-		const tab = await siteContent.navigateToTab( 'Import / Export' );
+		const tab = await siteContent.navigateToTab( 'import-export' );
 
 		// TypeScript doesn't narrow the union type, so we need to assert it
 		// We know it's ImportExportTab because we passed 'Import / Export'

apps/studio/e2e/import.test.ts

@@ -72,7 +72,7 @@ test.describe( 'Import', () => {
 
 		await expect( siteContent.siteNameHeading ).toHaveText( siteName );
 
-		const settingsTab = await siteContent.navigateToTab( 'Settings' );
+		const settingsTab = await siteContent.navigateToTab( 'settings' );
 		await expect( siteContent.siteNameHeading ).toHaveText( siteName );
 		const frontendUrl = await settingsTab.copySiteUrlToClipboard( session.electronApp );
 		expect( frontendUrl ).not.toBeNull();

apps/studio/e2e/localization.test.ts

@@ -149,7 +149,7 @@ test.describe( 'Localization', () => {
 		await expect( siteContent.siteNameHeading ).toBeVisible( { timeout: 120_000 } );
 		await expect( siteContent.runningButton ).toBeAttached( { timeout: 120_000 } );
 
-		const settingsTabButton = session.mainWindow.getByRole( 'tab', { name: /Settings|設定/i } );
+		const settingsTabButton = session.mainWindow.locator( '[role="tab"][id$="-settings"]' );
 		await settingsTabButton.click();
 		const copyWpAdminButton = session.mainWindow.getByTestId( 'copy-wp-admin-url' );
 		await expect( copyWpAdminButton ).toBeVisible();
@@ -175,7 +175,7 @@ test.describe( 'Localization', () => {
 		} );
 
 		const siteContentEnglish = new SiteContent( session.mainWindow, siteName );
-		const settingsTab = await siteContentEnglish.navigateToTab( 'Settings' );
+		const settingsTab = await siteContentEnglish.navigateToTab( 'settings' );
 		await settingsTab.openDeleteSiteModal();
 
 		// Wait for the confirmation dialog to be auto-confirmed and deletion to complete

apps/studio/e2e/page-objects/import-export-tab.ts

@@ -4,7 +4,7 @@ export default class ImportExportTab {
 	constructor( private page: Page ) {}
 
 	get locator() {
-		return this.page.getByRole( 'tabpanel', { name: 'Import / Export' } );
+		return this.page.locator( '[role="tabpanel"][id$="-import-export-view"]' );
 	}
 
 	get importDropZone() {

apps/studio/e2e/page-objects/settings-tab.ts

@@ -7,7 +7,7 @@ export default class SettingsTab {
 	) {}
 
 	get locator() {
-		return this.page.getByRole( 'tabpanel', { name: 'Settings' } );
+		return this.page.locator( '[role="tabpanel"][id$="-settings-view"]' );
 	}
 
 	get copyWPAdminButton() {

apps/studio/e2e/page-objects/site-content.ts

@@ -36,30 +36,30 @@ export default class SiteContent {
 		return this.locator.getByLabel( 'Copy site url', { exact: false } );
 	}
 
-	getTabButton( tabName: 'Preview' | 'Settings' | 'Import / Export' ) {
-		return this.locator.getByRole( 'tab', { name: tabName } );
+	getTabButton( tab: 'preview' | 'settings' | 'import-export' ) {
+		return this.locator.locator( `[role="tab"][id$="-${ tab }"]` );
 	}
 
-	async navigateToTab( tabName: 'Settings' ): Promise< SettingsTab >;
-	async navigateToTab( tabName: 'Import / Export' ): Promise< ImportExportTab >;
+	async navigateToTab( tab: 'settings' ): Promise< SettingsTab >;
+	async navigateToTab( tab: 'import-export' ): Promise< ImportExportTab >;
 	async navigateToTab(
-		tabName: 'Preview' | 'Settings' | 'Import / Export'
+		tab: 'preview' | 'settings' | 'import-export'
 	): Promise< SettingsTab | ImportExportTab > {
-		const tabButton = this.getTabButton( tabName );
+		const tabButton = this.getTabButton( tab );
 		await tabButton.click();
 
-		switch ( tabName ) {
-			case 'Preview':
+		switch ( tab ) {
+			case 'preview':
 				throw new Error( 'Not implemented' );
-			case 'Settings': {
-				const tab = new SettingsTab( this.page, this.siteName );
-				await expect( tab.locator ).toBeVisible();
-				return tab;
+			case 'settings': {
+				const settingsTab = new SettingsTab( this.page, this.siteName );
+				await expect( settingsTab.locator ).toBeVisible();
+				return settingsTab;
 			}
-			case 'Import / Export': {
-				const tab = new ImportExportTab( this.page );
-				await expect( tab.locator ).toBeVisible();
-				return tab;
+			case 'import-export': {
+				const importExportTab = new ImportExportTab( this.page );
+				await expect( importExportTab.locator ).toBeVisible();
+				return importExportTab;
 			}
 		}
 	}

apps/studio/e2e/site-navigation.test.ts

@@ -52,7 +52,7 @@ test.describe( 'Site Navigation', () => {
 		await expect( siteContent.siteNameHeading ).toBeVisible( { timeout: 120_000 } );
 
 		// Get site URLs for tests
-		const settingsTab = await siteContent.navigateToTab( 'Settings' );
+		const settingsTab = await siteContent.navigateToTab( 'settings' );
 		wpAdminUrl = await settingsTab.copyWPAdminUrlToClipboard( session.electronApp );
 		frontendUrl = await settingsTab.copySiteUrlToClipboard( session.electronApp );
 	} );

apps/studio/e2e/sites.test.ts

@@ -72,7 +72,7 @@ test.describe( 'Sites', () => {
 			// Check a WordPress site has been created
 			expect( await pathExists( path.join( localPath, 'wp-config.php' ) ) ).toBe( true );
 
-			await siteContent.navigateToTab( 'Settings' );
+			await siteContent.navigateToTab( 'settings' );
 
 			await expect( siteContent.frontendButton ).toBeVisible();
 			const frontendUrl = await siteContent.frontendButton.textContent();
@@ -89,7 +89,7 @@ test.describe( 'Sites', () => {
 		const newPhpVersion = ALLOWED_PHP_VERSIONS.find( ( v ) => v !== DEFAULT_PHP_VERSION ) || '8.2';
 
 		const siteContent = new SiteContent( session.mainWindow, DEFAULT_SITE_NAME );
-		const settingsTab = await siteContent.navigateToTab( 'Settings' );
+		const settingsTab = await siteContent.navigateToTab( 'settings' );
 
 		await settingsTab.editSiteButton.click();
 		await expect( settingsTab.editSiteDialog ).toBeVisible();
@@ -123,7 +123,7 @@ test.describe( 'Sites', () => {
 
 		const newSiteName = 'E2E-Test-Site-Renamed';
 		const siteContent = new SiteContent( session.mainWindow, siteName );
-		const settingsTab = await siteContent.navigateToTab( 'Settings' );
+		const settingsTab = await siteContent.navigateToTab( 'settings' );
 
 		await settingsTab.editSiteButton.click();
 		await expect( settingsTab.editSiteDialog ).toBeVisible();
@@ -143,7 +143,7 @@ test.describe( 'Sites', () => {
 		const { siteName } = await completeOnboardingWithParams();
 
 		const siteContent = new SiteContent( session.mainWindow, siteName );
-		const settingsTab = await siteContent.navigateToTab( 'Settings' );
+		const settingsTab = await siteContent.navigateToTab( 'settings' );
 
 		const wpAdminUrl = await settingsTab.copyWPAdminUrlToClipboard( session.electronApp );
 		const frontendUrl = await settingsTab.copySiteUrlToClipboard( session.electronApp );
@@ -165,7 +165,7 @@ test.describe( 'Sites', () => {
 		expect( await pathExists( path.join( localPath, 'wp-config.php' ) ) ).toBe( true );
 
 		const siteContent = new SiteContent( session.mainWindow, siteName );
-		const settingsTab = await siteContent.navigateToTab( 'Settings' );
+		const settingsTab = await siteContent.navigateToTab( 'settings' );
 
 		// Playwright lacks support for interacting with native dialogs, so we mock
 		// the dialog module to simulate the user clicking the "Delete site"
@@ -191,7 +191,7 @@ test.describe( 'Sites', () => {
 		const { siteName, localPath } = await completeOnboardingWithParams();
 
 		const siteContent = new SiteContent( session.mainWindow, siteName );
-		const settingsTab = await siteContent.navigateToTab( 'Settings' );
+		const settingsTab = await siteContent.navigateToTab( 'settings' );
 
 		// Playwright lacks support for interacting with native dialogs, so we mock
 		// the dialog module to simulate the user clicking the "Delete site"

apps/studio/src/components/tests/site-content-tabs.test.tsx

@@ -86,7 +86,7 @@ describe( 'SiteContentTabs', () => {
 			loadingServer: {},
 		} );
 		await act( async () => renderWithProvider( <SiteContentTabs /> ) );
-		expect( screen.getByRole( 'tab', { name: 'Settings' } ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'tab', { name: 'Site Settings' } ) ).toBeInTheDocument();
 		expect( screen.getByRole( 'tab', { name: 'Sync' } ) ).toBeInTheDocument();
 		expect( screen.getByRole( 'tab', { name: 'Previews' } ) ).toBeInTheDocument();
 		expect( screen.getByRole( 'tab', { name: 'Import / Export' } ) ).toBeInTheDocument();
@@ -104,7 +104,7 @@ describe( 'SiteContentTabs', () => {
 		expect( screen.queryByRole( 'tab', { name: 'Overview', selected: true } ) ).toBeVisible();
 		expect( screen.queryByRole( 'tab', { name: 'Sync', selected: false } ) ).toBeVisible();
 		expect( screen.queryByRole( 'tab', { name: 'Previews', selected: false } ) ).toBeVisible();
-		expect( screen.queryByRole( 'tab', { name: 'Settings', selected: false } ) ).toBeVisible();
+		expect( screen.queryByRole( 'tab', { name: 'Site Settings', selected: false } ) ).toBeVisible();
 		expect( screen.queryByRole( 'tab', { name: 'Studio Code', selected: false } ) ).toBeVisible();
 		expect(
 			screen.queryByRole( 'tab', { name: 'Backup', selected: false } )

apps/studio/src/hooks/use-content-tabs.tsx

@@ -37,7 +37,7 @@ function useTabs() {
 			{
 				order: 5,
 				name: 'settings',
-				title: __( 'Settings' ),
+				title: __( 'Site Settings' ),
 			}
 		);
 

tools/metrics/tests/site-editor.test.ts

@@ -47,7 +47,7 @@ test.describe( 'Site Editor Load Metrics', () => {
 		await expect( siteContent.runningButton ).toBeAttached( { timeout: 120_000 } );
 
 		// Get the WordPress admin URL from settings
-		const settingsTab = await siteContent.navigateToTab( 'Settings' );
+		const settingsTab = await siteContent.navigateToTab( 'settings' );
 		wpAdminUrl = await settingsTab.copyWPAdminUrlToClipboard( session.electronApp );
 		// Remove trailing slash if present
 		wpAdminUrl = wpAdminUrl.replace( /\/$/, '' );

tools/metrics/tests/site-startup.test.ts

@@ -79,7 +79,7 @@ test.describe( 'Startup Metrics', () => {
 
 		// Delete the site after test
 		await test.step( 'Delete the site', async () => {
-			const settingsTab = await siteContent.navigateToTab( 'Settings' );
+			const settingsTab = await siteContent.navigateToTab( 'settings' );
 			await session.electronApp.evaluate( ( { dialog } ) => {
 				dialog.showMessageBox = async () => {
 					return { response: 0, checkboxChecked: true };