Customize Studio site URL

src/components/content-tab-settings.tsx

@@ -2,6 +2,7 @@ import { useI18n } from '@wordpress/react-i18n';
 import { PropsWithChildren } from 'react';
 import { CopyTextButton } from 'src/components/copy-text-button';
 import DeleteSite from 'src/components/delete-site';
+import EditAbsoluteUrl from 'src/components/edit-absolute-url';
 import EditPhpVersion from 'src/components/edit-php-version';
 import EditSite from 'src/components/edit-site';
 import { useGetWpVersion } from 'src/hooks/use-get-wp-version';
@@ -29,6 +30,8 @@ export function ContentTabSettings( { selectedSite }: ContentTabSettingsProps )
 	const storedPassword = decodePassword( selectedSite.adminPassword ?? '' );
 	const password = storedPassword === '' ? 'password' : storedPassword;
 	const wpVersion = useGetWpVersion( selectedSite );
+	const url = selectedSite.absoluteUrl || `http://localhost:${ selectedSite.port }`;
+	const urlWihtoutProtocol = url.replace( /http(s)?:\/\//, '' );
 	return (
 		<div className="p-8">
 			<table className="mb-2 m-w-full" cellPadding={ 0 } cellSpacing={ 0 }>
@@ -44,14 +47,17 @@ export function ContentTabSettings( { selectedSite }: ContentTabSettingsProps )
 							<EditSite />
 						</div>
 					</SettingsRow>
-					<SettingsRow label={ __( 'Local URL' ) }>
-						<CopyTextButton
-							text={ `http://localhost:${ selectedSite.port }` }
-							label={ `localhost:${ selectedSite.port }, ${ __( 'Copy site url to clipboard' ) }` }
-							copyConfirmation={ __( 'Copied!' ) }
-						>
-							{ `localhost:${ selectedSite.port }` }
-						</CopyTextButton>
+					<SettingsRow label={ __( 'URL' ) }>
+						<div className="flex">
+							<CopyTextButton
+								text={ url }
+								label={ `${ urlWihtoutProtocol }, ${ __( 'Copy site url to clipboard' ) }` }
+								copyConfirmation={ __( 'Copied!' ) }
+							>
+								{ urlWihtoutProtocol }
+							</CopyTextButton>
+							<EditAbsoluteUrl key={ selectedSite.id } />
+						</div>
 					</SettingsRow>
 					<SettingsRow label={ __( 'Local path' ) }>
 						<div className="flex">

src/components/edit-absolute-url.tsx

@@ -0,0 +1,150 @@
+import { createInterpolateElement } from '@wordpress/element';
+import { useI18n } from '@wordpress/react-i18n';
+import { useCallback, useState } from 'react';
+import { useDocsLink } from 'src/hooks/use-docs-link';
+import { getIpcApi } from 'src/lib/get-ipc-api';
+import { useSiteDetails } from '../hooks/use-site-details';
+import Button from './button';
+import Modal from './modal';
+import TextControlComponent from './text-control';
+
+interface UrlState {
+	localUrl: string;
+	skipPort: boolean;
+}
+
+export default function EditAbsoluteUrl() {
+	const { __ } = useI18n();
+	const getDocsLink = useDocsLink();
+	const { updateSite, selectedSite, stopServer, startServer } = useSiteDetails();
+	const [ isEditingSite, setIsEditingSite ] = useState( false );
+	const [ showModal, setShowModal ] = useState( false );
+
+	// Initialize URL state from selected site
+	const initialUrlState = {
+		localUrl:
+			selectedSite?.absoluteUrl?.replace( `:${ selectedSite?.port }`, '' ) || 'http://localhost',
+		skipPort:
+			Boolean( selectedSite?.absoluteUrl ) &&
+			! selectedSite?.absoluteUrl?.includes( `:${ selectedSite?.port }` ),
+	};
+	const [ urlState, setUrlState ] = useState< UrlState >( initialUrlState );
+
+	// Compute absolute URL
+	const absoluteUrl =
+		! urlState.skipPort && selectedSite?.port
+			? `${ urlState.localUrl }:${ selectedSite.port }`
+			: urlState.localUrl;
+
+	const handleSubmit = useCallback(
+		async ( e: React.FormEvent ) => {
+			e.preventDefault();
+			if ( ! selectedSite || ! urlState.localUrl.trim() ) return;
+
+			setIsEditingSite( true );
+			try {
+				await updateSite( {
+					...selectedSite,
+					absoluteUrl,
+				} );
+
+				if ( selectedSite.running ) {
+					await stopServer( selectedSite.id );
+					await startServer( selectedSite.id );
+				}
+				setShowModal( false );
+			} finally {
+				setIsEditingSite( false );
+			}
+		},
+		[ absoluteUrl, selectedSite, startServer, stopServer, updateSite, urlState.localUrl ]
+	);
+
+	const closeModal = () => setShowModal( false );
+
+	return (
+		<>
+			<Button
+				disabled={ ! selectedSite }
+				className="!mx-4 shrink-0"
+				onClick={ () => selectedSite && setShowModal( true ) }
+				label={ __( 'Edit Local URL' ) }
+				variant="link"
+			>
+				{ __( 'Edit' ) }
+			</Button>
+
+			{ showModal && (
+				<Modal
+					size="medium"
+					title={ __( 'Edit Local URL' ) }
+					isDismissible
+					focusOnMount="firstContentElement"
+					onRequestClose={ closeModal }
+				>
+					<form onSubmit={ handleSubmit } className="flex flex-col gap-4">
+						<div className="flex flex-col gap-1.5 leading-4">
+							<label className="font-semibold" htmlFor="hostname-input">
+								{ __( 'Hostname' ) }
+							</label>
+							<TextControlComponent
+								id="hostname-input"
+								onChange={ ( value ) =>
+									setUrlState( ( prev ) => ( { ...prev, localUrl: value } ) )
+								}
+								value={ urlState.localUrl }
+								placeholder="http://localhost"
+							/>
+							<span className="text-a8c-gray-50 text-xs">
+								{ createInterpolateElement(
+									__(
+										"If you're using a TLD other than .localhost, you may need to update your hosts file. <button>Learn more.</button>"
+									),
+									{
+										button: (
+											<Button
+												variant="link"
+												className="text-xs"
+												onClick={ () => getIpcApi().openURL( getDocsLink( 'sites' ) ) }
+											/>
+										),
+									}
+								) }
+							</span>
+						</div>
+
+						<div className="flex flex-col gap-1.5 leading-4">
+							<span className="font-semibold">{ __( 'Your site URL' ) }</span>
+							<div className="px-3 py-1.5 bg-gray-100 rounded text-gray-600">{ absoluteUrl }</div>
+							<label className="flex items-center gap-2">
+								<input
+									type="checkbox"
+									checked={ urlState.skipPort }
+									onChange={ ( e ) =>
+										setUrlState( ( prev ) => ( { ...prev, skipPort: e.target.checked } ) )
+									}
+									className="form-checkbox"
+								/>
+								<span>{ __( 'Skip the port to use external routing like Ngrok.' ) }</span>
+							</label>
+						</div>
+
+						<div className="flex flex-row justify-end gap-x-5 mt-6">
+							<Button onClick={ closeModal } disabled={ isEditingSite } variant="tertiary">
+								{ __( 'Cancel' ) }
+							</Button>
+							<Button
+								type="submit"
+								variant="primary"
+								isBusy={ isEditingSite }
+								disabled={ isEditingSite || ! selectedSite || ! urlState.localUrl.trim() }
+							>
+								{ isEditingSite ? __( 'Restarting server…' ) : __( 'Save' ) }
+							</Button>
+						</div>
+					</form>
+				</Modal>
+			) }
+		</>
+	);
+}

src/ipc-types.d.ts

@@ -17,6 +17,7 @@ interface StoppedSiteDetails {
 	id: string;
 	name: string;
 	path: string;
+	absoluteUrl?: string;
 	port?: number;
 	phpVersion: string;
 	adminPassword?: string;

src/site-server.ts

@@ -87,8 +87,7 @@ export class SiteServer {
 			siteTitle: this.details.name,
 			php: this.details.phpVersion,
 		} );
-		const absoluteUrl = `http://localhost:${ port }`;
-		options.absoluteUrl = absoluteUrl;
+		options.absoluteUrl = this.details.absoluteUrl || `http://localhost:${ port }`;
 		options.siteLanguage = await getPreferredSiteLanguage( options.wordPressVersion );
 
 		if ( options.mode !== WPNowMode.WORDPRESS ) {
@@ -123,6 +122,7 @@ export class SiteServer {
 			name: site.name,
 			path: site.path,
 			phpVersion: site.phpVersion,
+			absoluteUrl: site.absoluteUrl,
 		};
 	}
 

src/storage/user-data.ts

@@ -102,29 +102,35 @@ export async function saveUserData( data: UserData ): Promise< void > {
 function toDiskFormat( { sites, ...rest }: UserData ): PersistedUserData {
 	return {
 		version: 1,
-		sites: sites.map( ( { id, path, adminPassword, port, phpVersion, name, themeDetails } ) => {
-			// No object spreading allowed. TypeScript's structural typing is too permissive and
-			// will permit us to persist properties that aren't in the type definition.
-			// Add each property explicitly instead.
-			const persistedSiteDetails: PersistedUserData[ 'sites' ][ number ] = {
-				id,
-				name,
-				path,
-				adminPassword,
-				port,
-				phpVersion,
-				themeDetails: {
-					name: themeDetails?.name || '',
-					path: themeDetails?.path || '',
-					slug: themeDetails?.slug || '',
-					isBlockTheme: themeDetails?.isBlockTheme || false,
-					supportsWidgets: themeDetails?.supportsWidgets || false,
-					supportsMenus: themeDetails?.supportsMenus || false,
-				},
-			};
+		sites: sites.map(
+			( { id, path, adminPassword, port, phpVersion, name, themeDetails, absoluteUrl } ) => {
+				// No object spreading allowed. TypeScript's structural typing is too permissive and
+				// will permit us to persist properties that aren't in the type definition.
+				// Add each property explicitly instead.
+				const persistedSiteDetails: PersistedUserData[ 'sites' ][ number ] = {
+					id,
+					name,
+					path,
+					adminPassword,
+					port,
+					phpVersion,
+					themeDetails: {
+						name: themeDetails?.name || '',
+						path: themeDetails?.path || '',
+						slug: themeDetails?.slug || '',
+						isBlockTheme: themeDetails?.isBlockTheme || false,
+						supportsWidgets: themeDetails?.supportsWidgets || false,
+						supportsMenus: themeDetails?.supportsMenus || false,
+					},
+				};
 
-			return persistedSiteDetails;
-		} ),
+				if ( absoluteUrl ) {
+					persistedSiteDetails.absoluteUrl = absoluteUrl;
+				}
+
+				return persistedSiteDetails;
+			}
+		),
 		...rest,
 	};
 }