Add Xdebug support

src/components/content-tab-settings.tsx

@@ -8,7 +8,8 @@ import DeleteSite from 'src/components/delete-site';
 import { useGetWpVersion } from 'src/hooks/use-get-wp-version';
 import { getIpcApi } from 'src/lib/get-ipc-api';
 import EditSiteDetails from 'src/modules/site-settings/edit-site-details';
-import { useAppDispatch } from 'src/stores';
+import { useAppDispatch, useRootSelector } from 'src/stores';
+import { betaFeaturesSelectors } from 'src/stores/beta-features-slice';
 import {
 	certificateTrustApi,
 	useCheckCertificateTrustQuery,
@@ -33,6 +34,7 @@ export function ContentTabSettings( { selectedSite }: ContentTabSettingsProps )
 	const dispatch = useAppDispatch();
 	const { __ } = useI18n();
 	const { data: isCertificateTrusted } = useCheckCertificateTrustQuery();
+	const betaFeatures = useRootSelector( betaFeaturesSelectors.selectBetaFeatures );
 	const username = 'admin';
 	// Empty strings account for legacy sites lacking a stored password.
 	const storedPassword = decodePassword( selectedSite.adminPassword ?? '' );
@@ -132,6 +134,11 @@ export function ContentTabSettings( { selectedSite }: ContentTabSettingsProps )
 							<span className="line-clamp-1 break-all">{ selectedSite.phpVersion }</span>
 						</div>
 					</SettingsRow>
+					{ betaFeatures.xdebugSupport && (
+						<SettingsRow label={ __( 'Xdebug' ) }>
+							<span>{ selectedSite.enableXdebug ? __( 'Enabled' ) : __( 'Disabled' ) }</span>
+						</SettingsRow>
+					) }
 
 					<tr>
 						<th colSpan={ 2 } className="pb-4 ltr:text-left rtl:text-right">

src/components/tests/content-tab-settings.test.tsx

@@ -24,18 +24,19 @@ function snapshotTestReducer( state: RootState | undefined, action: UnknownActio
 		} );
 	}
 
-	// Use the test reducer but preserve provider constants
+	// Use the test reducer but preserve provider constants and beta features
 	const newState = testReducer( state, action );
 
-	// If we have provider constants in the current state, preserve them
+	// If we have provider constants or beta features in the current state, preserve them
+	const preservedState = { ...newState };
 	if ( state?.providerConstants ) {
-		return {
-			...newState,
-			providerConstants: state.providerConstants,
-		};
+		preservedState.providerConstants = state.providerConstants;
+	}
+	if ( state?.betaFeatures ) {
+		preservedState.betaFeatures = state.betaFeatures;
 	}
 
-	return newState;
+	return preservedState;
 }
 
 const snapshotTestActions = {
@@ -52,6 +53,16 @@ let testStore = createTestStore( {
 		allowedPhpVersions: [ '8.0', '8.1', '8.2', '8.3' ],
 		minimumWordPressVersion: '6.2.6',
 	},
+	preloadedState: {
+		betaFeatures: {
+			features: {
+				studioSitesCli: false,
+				multiWorkerSupport: false,
+				xdebugSupport: true,
+			},
+			loading: false,
+		},
+	},
 } );
 
 // We need to create a new store each time to avoid reducer conflicts
@@ -63,6 +74,16 @@ function createCustomTestStore() {
 			allowedPhpVersions: [ '8.0', '8.1', '8.2', '8.3' ],
 			minimumWordPressVersion: '6.2.6',
 		},
+		preloadedState: {
+			betaFeatures: {
+				features: {
+					studioSitesCli: false,
+					multiWorkerSupport: false,
+					xdebugSupport: true,
+				},
+				loading: false,
+			},
+		},
 	} );
 	store.replaceReducer( snapshotTestReducer );
 	return store;
@@ -116,6 +137,7 @@ describe( 'ContentTabSettings', () => {
 	const openLocalPath = jest.fn();
 	const generateProposedSitePath = jest.fn();
 	const getAllCustomDomains = jest.fn().mockResolvedValue( [] );
+	const getXdebugEnabledSite = jest.fn().mockResolvedValue( null );
 	const mockSnapshot = {
 		localSiteId: selectedSite.id,
 		url: 'http://localhost:8881',
@@ -137,6 +159,7 @@ describe( 'ContentTabSettings', () => {
 			openLocalPath,
 			generateProposedSitePath,
 			getAllCustomDomains,
+			getXdebugEnabledSite,
 			isCATrusted: jest.fn( () => Promise.resolve( true ) ),
 		} );
 
@@ -164,7 +187,9 @@ describe( 'ContentTabSettings', () => {
 			screen.getByRole( 'button', { name: 'localhost:8881, Copy site url to clipboard' } )
 		).toHaveTextContent( 'localhost:8881' );
 		expect( screen.getByText( 'HTTPS' ) ).toBeVisible();
-		expect( screen.getByText( 'Disabled' ) ).toBeVisible();
+		expect( screen.getByText( 'Xdebug' ) ).toBeVisible();
+		// Both HTTPS and Xdebug show "Disabled"
+		expect( screen.getAllByText( 'Disabled' ) ).toHaveLength( 2 );
 		expect( screen.getByRole( 'button', { name: 'Copy local path to clipboard' } ) ).toBeVisible();
 		expect( screen.getByText( '7.7.7' ) ).toBeVisible();
 		expect(
@@ -253,6 +278,43 @@ describe( 'ContentTabSettings', () => {
 		} );
 	} );
 
+	describe( 'Xdebug beta feature', () => {
+		it( 'hides Xdebug row when beta feature is disabled', async () => {
+			// Create a store with xdebugSupport disabled
+			const storeWithoutXdebug = createTestStore( {
+				providerConstants: {
+					defaultPhpVersion: '8.3',
+					defaultWordPressVersion: 'latest',
+					allowedPhpVersions: [ '8.0', '8.1', '8.2', '8.3' ],
+					minimumWordPressVersion: '6.2.6',
+				},
+				preloadedState: {
+					betaFeatures: {
+						features: {
+							studioSitesCli: false,
+							multiWorkerSupport: false,
+							xdebugSupport: false,
+						},
+						loading: false,
+					},
+				},
+			} );
+
+			render(
+				<Provider store={ storeWithoutXdebug }>
+					<ContentTabSettings selectedSite={ selectedSite } />
+				</Provider>
+			);
+
+			await waitFor( () => {
+				expect( getAllCustomDomains ).toHaveBeenCalled();
+			} );
+
+			// Xdebug row should not be visible
+			expect( screen.queryByText( 'Xdebug' ) ).not.toBeInTheDocument();
+		} );
+	} );
+
 	describe( 'PHP version', () => {
 		it( 'changes PHP version when site is not running', async () => {
 			const user = userEvent.setup();

src/ipc-handlers.ts

@@ -162,6 +162,18 @@ export async function getSiteDetails( _event: IpcMainInvokeEvent ): Promise< Sit
 	return mergeSiteDetailsWithRunningDetails( sites );
 }
 
+export async function getXdebugEnabledSite(
+	_event: IpcMainInvokeEvent
+): Promise< SiteDetails | null > {
+	const userData = await loadUserData();
+	const { sites } = userData;
+	const xdebugSite = sites.find( ( site ) => site.enableXdebug );
+	if ( ! xdebugSite ) {
+		return null;
+	}
+	return mergeSiteDetailsWithRunningDetails( [ xdebugSite ] )[ 0 ] || null;
+}
+
 export async function importSite(
 	event: IpcMainInvokeEvent,
 	{ id, backupFile }: { id: string; backupFile: BackupArchiveInfo }

src/ipc-types.d.ts

@@ -29,6 +29,7 @@ interface StoppedSiteDetails {
 	};
 	isAddingSite?: boolean;
 	autoStart?: boolean;
+	enableXdebug?: boolean;
 }
 
 interface StartedSiteDetails extends StoppedSiteDetails {
@@ -84,6 +85,7 @@ interface FeatureFlags {
 interface BetaFeatures {
 	studioSitesCli: boolean;
 	multiWorkerSupport: boolean;
+	xdebugSupport: boolean;
 }
 
 interface AppGlobals extends FeatureFlags {

src/lib/beta-features.ts

@@ -20,6 +20,12 @@ const BETA_FEATURES_DEFINITION: Record< keyof BetaFeatures, BetaFeatureDefinitio
 		default: false,
 		description: 'Enable multi-worker PHP processing for faster performance',
 	},
+	xdebugSupport: {
+		label: 'Xdebug Support',
+		key: 'xdebugSupport',
+		default: false,
+		description: 'Enable PHP debugging with Xdebug (one site at a time)',
+	},
 } as const;
 
 export const BETA_FEATURES: Record< keyof BetaFeatures, BetaFeatureDefinition > =

src/lib/wordpress-provider/playground-cli/playground-cli-provider.ts

@@ -28,6 +28,7 @@ export interface PlaygroundCliOptions {
 	wordpressInstallMode: WordPressInstallMode;
 	blueprint?: Blueprint;
 	enableMultiWorker?: boolean;
+	enableXdebug?: boolean;
 }
 
 export const PLAYGROUND_CLI_PROVIDER_NAME = 'playground-cli';
@@ -61,18 +62,23 @@ export class PlaygroundCliProvider implements WordPressProvider {
 		siteLanguage?: string;
 		wpCliPharPath?: string;
 		blueprint?: Blueprint;
+		enableXdebug?: boolean;
 	} ): Promise< WordPressServerInstance > {
 		const port = options.port;
 		const phpVersion = options.phpVersion || '8.3';
 		const hasWordPress = isWordPressDirectory( options.path );
 
-		// Get beta features to check if multi-worker support is enabled
+		// Get beta features to check if multi-worker and xdebug support are enabled
 		const betaFeatures = await getBetaFeatures();
 
 		if ( betaFeatures.multiWorkerSupport ) {
 			console.log( '[PlaygroundCliProvider] Multi-worker support is enabled via beta features' );
 		}
 
+		if ( betaFeatures.xdebugSupport && options.enableXdebug ) {
+			console.log( '[PlaygroundCliProvider] Xdebug support is enabled for this site' );
+		}
+
 		const playgroundOptions: PlaygroundCliOptions = {
 			port,
 			phpVersion,
@@ -83,6 +89,7 @@ export class PlaygroundCliProvider implements WordPressProvider {
 				: 'download-and-install',
 			blueprint: options.blueprint,
 			enableMultiWorker: betaFeatures.multiWorkerSupport,
+			enableXdebug: betaFeatures.xdebugSupport && options.enableXdebug,
 		};
 
 		const serverOptions: WordPressServerOptions = {

src/lib/wordpress-provider/playground-cli/playground-server-process-child.ts

@@ -228,6 +228,12 @@ async function startServer(
 			args.experimentalMultiWorker = workerCount;
 		}
 
+		// Enable Xdebug support if requested
+		if ( options.enableXdebug ) {
+			console.log( __( 'Enabling Xdebug support' ) );
+			args.xdebug = true;
+		}
+
 		if ( options.phpVersion ) {
 			args.php = options.phpVersion as SupportedPHPVersion;
 		}

src/lib/wordpress-provider/types.ts

@@ -14,6 +14,7 @@ export interface ServerOptions {
 	absoluteUrl?: string;
 	siteLanguage?: string;
 	blueprint?: Blueprint[ 'blueprint' ];
+	enableXdebug?: boolean;
 }
 
 export interface WordPressServerOptions {