Add phpMyAdmin support

apps/cli/lib/server-files.ts

@@ -23,3 +23,7 @@ export function getLanguagePacksPath(): string {
 export function getAiInstructionsPath(): string {
 	return path.join( getServerFilesPath(), 'skills' );
 }
+
+export function getPhpMyAdminPath(): string {
+	return path.join( getServerFilesPath(), 'phpmyadmin' );
+}

apps/cli/patches/@wp-playground+tools+3.1.12.patch

@@ -0,0 +1,50 @@
+diff --git a/node_modules/@wp-playground/tools/DbiMysqli-CmlcCdDi.js b/node_modules/@wp-playground/tools/DbiMysqli-CmlcCdDi.js
+index f17cbe9..7319b2c 100644
+--- a/node_modules/@wp-playground/tools/DbiMysqli-CmlcCdDi.js
++++ b/node_modules/@wp-playground/tools/DbiMysqli-CmlcCdDi.js
+@@ -22,8 +22,18 @@ use Throwable;
+ use WP_SQLite_Connection;
+ use WP_SQLite_Driver;
+
+-// Load the SQLite driver.
+-require_once '/internal/shared/sqlite-database-integration/wp-pdo-mysql-on-sqlite.php';
++// Load the SQLite driver from the first available location.
++// The path varies depending on the environment (Playground, Studio, etc.).
++$sqlite_driver_locations = array(
++	'/internal/shared/sqlite-database-integration/wp-pdo-mysql-on-sqlite.php',
++	defined( 'WP_SQLITE_LOCATION' ) ? WP_SQLITE_LOCATION . '/wp-pdo-mysql-on-sqlite.php' : false,
++);
++foreach ($sqlite_driver_locations as $sqlite_driver_path) {
++	if ($sqlite_driver_path && file_exists($sqlite_driver_path)) {
++		require_once $sqlite_driver_path;
++		break;
++	}
++}
+
+ // Supress the following phpMyAdmin warning:
+ //   "The mysqlnd extension is missing. Please check your PHP configuration."
+diff --git a/node_modules/@wp-playground/tools/DbiMysqli-IfZRkV2V.cjs b/node_modules/@wp-playground/tools/DbiMysqli-IfZRkV2V.cjs
+index 02572b2..c958d5d 100644
+--- a/node_modules/@wp-playground/tools/DbiMysqli-IfZRkV2V.cjs
++++ b/node_modules/@wp-playground/tools/DbiMysqli-IfZRkV2V.cjs
+@@ -22,8 +22,18 @@ use Throwable;
+ use WP_SQLite_Connection;
+ use WP_SQLite_Driver;
+
+-// Load the SQLite driver.
+-require_once '/internal/shared/sqlite-database-integration/wp-pdo-mysql-on-sqlite.php';
++// Load the SQLite driver from the first available location.
++// The path varies depending on the environment (Playground, Studio, etc.).
++$sqlite_driver_locations = array(
++	'/internal/shared/sqlite-database-integration/wp-pdo-mysql-on-sqlite.php',
++	defined( 'WP_SQLITE_LOCATION' ) ? WP_SQLITE_LOCATION . '/wp-pdo-mysql-on-sqlite.php' : false,
++);
++foreach ($sqlite_driver_locations as $sqlite_driver_path) {
++	if ($sqlite_driver_path && file_exists($sqlite_driver_path)) {
++		require_once $sqlite_driver_path;
++		break;
++	}
++}
+
+ // Supress the following phpMyAdmin warning:
+ //   "The mysqlnd extension is missing. Please check your PHP configuration."

apps/cli/wordpress-server-child.ts

@@ -27,9 +27,10 @@ import {
 	InMemoryFilesystem,
 } from '@wp-playground/storage';
 import { WordPressInstallMode } from '@wp-playground/wordpress';
+import fs from 'fs-extra';
 import { z } from 'zod';
 import { sanitizeRunCLIArgs } from 'cli/lib/cli-args-sanitizer';
-import { getSqliteCommandPath, getWpCliPharPath } from 'cli/lib/server-files';
+import { getPhpMyAdminPath, getSqliteCommandPath, getWpCliPharPath } from 'cli/lib/server-files';
 import { isSqliteIntegrationInstalled } from 'cli/lib/sqlite-integration';
 import {
 	ServerConfig,
@@ -179,8 +180,9 @@ async function getBaseRunCLIArgs(
 	const enableDebugLog = config.enableDebugLog ?? false;
 	const enableDebugDisplay = config.enableDebugDisplay ?? false;
 
-	const defaultConstants: Record< string, boolean > = {
+	const defaultConstants: Record< string, boolean | string > = {
 		WP_SQLITE_AST_DRIVER: true,
+		WP_SQLITE_LOCATION: '/wordpress/wp-content/mu-plugins/sqlite-database-integration',
 		WP_DEBUG: enableDebugLog || enableDebugDisplay,
 		WP_DEBUG_LOG: enableDebugLog,
 		WP_DEBUG_DISPLAY: enableDebugDisplay,
@@ -259,6 +261,18 @@ async function getBaseRunCLIArgs(
 		args.xdebug = true;
 	}
 
+	const phpMyAdminHostPath = getPhpMyAdminPath();
+	if ( await fs.pathExists( phpMyAdminHostPath ) ) {
+		mounts.push( {
+			hostPath: phpMyAdminHostPath,
+			vfsPath: '/tools/phpmyadmin',
+		} );
+		logToConsole( 'Mounting bundled phpMyAdmin' );
+	} else {
+		logToConsole( 'Bundled phpMyAdmin not found, falling back to Playground download' );
+	}
+	args.phpmyadmin = true;
+
 	lastCliArgs = sanitizeRunCLIArgs( args );
 	return args;
 }

apps/studio/e2e/overview-customize-links.test.ts

@@ -69,29 +69,30 @@ test.describe( 'Overview customize links', () => {
 		}
 		return decoded;
 	};
-	test.describe( 'Block theme customize shortcut links', () => {
-		test.beforeAll( async () => {
-			await session.launch();
 
-			const onboarding = new Onboarding( session.mainWindow );
-			await onboarding.completeOnboarding( { customSiteName: siteName } );
-			await onboarding.closeWhatsNew();
+	test.beforeAll( async () => {
+		await session.launch();
 
-			const siteContent = new SiteContent( session.mainWindow, siteName );
-			await expect( siteContent.siteNameHeading ).toBeVisible( { timeout: 120_000 } );
-		} );
+		const onboarding = new Onboarding( session.mainWindow );
+		await onboarding.completeOnboarding( { customSiteName: siteName } );
+		await onboarding.closeWhatsNew();
 
-		test.afterEach( async ( { page: _page }, testInfo ) => {
-			await session.reportMainProcessLogsOnFailure( testInfo );
-		} );
+		const siteContent = new SiteContent( session.mainWindow, siteName );
+		await expect( siteContent.siteNameHeading ).toBeVisible( { timeout: 120_000 } );
+	} );
 
-		test.afterAll( async () => {
-			if ( session.electronApp ) {
-				await restoreOpenExternal();
-			}
-			await session.cleanup();
-		} );
+	test.afterEach( async ( { page: _page }, testInfo ) => {
+		await session.reportMainProcessLogsOnFailure( testInfo );
+	} );
+
+	test.afterAll( async () => {
+		if ( session.electronApp ) {
+			await restoreOpenExternal();
+		}
+		await session.cleanup();
+	} );
 
+	test.describe( 'Block theme customize shortcut links', () => {
 		test( 'shows overview shortcuts for a new site', async () => {
 			const siteContent = new SiteContent( session.mainWindow, siteName );
 			await expect( siteContent.runningButton ).toBeAttached( { timeout: 120_000 } );
@@ -185,4 +186,21 @@ test.describe( 'Overview customize links', () => {
 			await expect( headingLocator ).toBeVisible( { timeout: 120_000 } );
 		} );
 	} );
+
+	test.describe( 'phpMyAdmin shortcut link', () => {
+		test( 'phpMyAdmin button is visible and enabled for a new site', async () => {
+			const siteContent = new SiteContent( session.mainWindow, siteName );
+			const phpMyAdminButton = siteContent.locator.getByRole( 'button', { name: 'phpMyAdmin' } );
+			await expect( phpMyAdminButton ).toBeVisible( { timeout: 120_000 } );
+			await expect( phpMyAdminButton ).toBeEnabled();
+		} );
+
+		test( 'opens phpMyAdmin shortcut', async ( { page } ) => {
+			const redirectUrl = await openShortcut( page, 'phpMyAdmin' );
+			expect( redirectUrl ).toContain( '/phpmyadmin/' );
+
+			// phpMyAdmin renders a table of database tables
+			await expect( page.locator( '#pma_navigation' ) ).toBeVisible( { timeout: 120_000 } );
+		} );
+	} );
 } );

apps/studio/src/components/content-tab-overview.tsx

@@ -4,6 +4,7 @@ import {
 	archive,
 	code,
 	desktop,
+	grid,
 	pencil,
 	layout,
 	navigation,
@@ -134,6 +135,8 @@ function CustomizeSection( {
 function ShortcutsSection( { selectedSite }: Pick< ContentTabOverviewProps, 'selectedSite' > ) {
 	const { data: editor } = useGetUserEditorQuery();
 	const { data: terminal } = useGetUserTerminalQuery();
+	const { startServer, loadingServer } = useSiteDetails();
+	const isServerLoading = loadingServer[ selectedSite.id ];
 
 	const buttonsArray: ButtonsSectionProps[ 'buttonsArray' ] = [
 		{
@@ -176,6 +179,23 @@ function ShortcutsSection( { selectedSite }: Pick< ContentTabOverviewProps, 'sel
 			}
 		},
 	} );
+
+	buttonsArray.push( {
+		label: __( 'phpMyAdmin' ),
+		className: 'text-nowrap',
+		icon: grid,
+		disabled: isServerLoading,
+		onClick: async () => {
+			if ( ! selectedSite.running ) {
+				await startServer( selectedSite );
+			}
+			getIpcApi().openSiteURL(
+				selectedSite.id,
+				'/phpmyadmin/index.php?route=/database/structure&db=wordpress'
+			);
+		},
+	} );
+
 	return <ButtonsSection buttonsArray={ buttonsArray } title={ __( 'Open in…' ) } />;
 }
 

apps/studio/src/components/content-tab-settings.tsx

@@ -182,7 +182,6 @@ export function ContentTabSettings( { selectedSite }: ContentTabSettingsProps )
 					<SettingsRow label={ __( 'Debug display' ) }>
 						<span>{ selectedSite.enableDebugDisplay ? __( 'Enabled' ) : __( 'Disabled' ) }</span>
 					</SettingsRow>
-
 					<tr>
 						<th colSpan={ 2 } className="pb-4 ltr:text-left rtl:text-right">
 							<h3 className="text-frame-text text-sm font-semibold mt-4">{ __( 'WP Admin' ) }</h3>

apps/studio/src/lib/server-files-paths.ts

@@ -78,3 +78,10 @@ export function getLanguagePacksPath(): string {
 export function getAiInstructionsPath(): string {
 	return path.join( getBasePath(), 'skills' );
 }
+
+/**
+ * The path where bundled phpMyAdmin files are stored.
+ */
+export function getPhpMyAdminPath(): string {
+	return path.join( getBasePath(), 'phpmyadmin' );
+}

apps/studio/src/setup-wp-server-files.ts

@@ -6,6 +6,7 @@ import { updateLatestWPCliVersion } from 'src/lib/download-utils';
 import {
 	getAiInstructionsPath,
 	getLanguagePacksPath,
+	getPhpMyAdminPath,
 	getWordPressVersionPath,
 	getSqlitePath,
 	getWpCliPath,
@@ -121,6 +122,15 @@ async function copyBundledAiInstructions() {
 	await recursiveCopyDirectory( bundledAiInstructionsPath, getAiInstructionsPath() );
 }
 
+async function copyBundledPhpMyAdmin() {
+	const bundledPath = path.join( getWpFilesPath(), 'phpmyadmin' );
+	if ( ! ( await fs.pathExists( bundledPath ) ) ) {
+		return;
+	}
+	// Always copy to ensure files are complete and up-to-date
+	await recursiveCopyDirectory( bundledPath, getPhpMyAdminPath() );
+}
+
 async function copyBundledLanguagePacks() {
 	const bundledLanguagePacksPath = path.join( getWpFilesPath(), 'latest', 'languages' );
 	if ( ! ( await fs.pathExists( bundledLanguagePacksPath ) ) ) {
@@ -140,6 +150,7 @@ export async function setupWPServerFiles() {
 		[ 'translations', copyBundledTranslations ],
 		[ 'language packs', copyBundledLanguagePacks ],
 		[ 'AI instructions', copyBundledAiInstructions ],
+		[ 'phpMyAdmin', copyBundledPhpMyAdmin ],
 	];
 
 	for ( const [ name, step ] of steps ) {

scripts/download-wp-server-files.ts

@@ -4,6 +4,11 @@ import fs from 'fs-extra';
 import { extractZip } from '../tools/common/lib/extract-zip';
 import { getLatestSQLiteCommandRelease } from '../apps/studio/src/lib/sqlite-command-release';
 import { SQLITE_DATABASE_INTEGRATION_RELEASE_URL } from '../apps/studio/src/constants';
+import {
+	PHPMYADMIN_DOWNLOAD_URL,
+	PHPMYADMIN_VERSION,
+	getPhpMyAdminInstallSteps,
+} from '@wp-playground/tools';
 
 const WP_SERVER_FILES_PATH = path.join( __dirname, '..', 'wp-files' );
 
@@ -42,6 +47,12 @@ const FILES_TO_DOWNLOAD: FileToDownload[] = [
 		},
 		destinationPath: path.join( WP_SERVER_FILES_PATH, 'sqlite-command' ),
 	},
+	{
+		name: 'phpmyadmin',
+		description: 'phpMyAdmin',
+		getUrl: () => PHPMYADMIN_DOWNLOAD_URL,
+		destinationPath: path.join( WP_SERVER_FILES_PATH, 'phpmyadmin' ),
+	},
 ];
 
 async function downloadFile( file: FileToDownload ): Promise< void > {
@@ -90,6 +101,39 @@ async function downloadFile( file: FileToDownload ): Promise< void > {
 			}
 			fs.renameSync( sourcePath, targetPath );
 		}
+	} else if ( name === 'phpmyadmin' ) {
+		/**
+		 * phpMyAdmin is extracted into a folder like phpMyAdmin-5.2.3-english.
+		 * We extract to a temp dir, rename to the destination, then inject the
+		 * Playground-specific config and SQLite adapter from @wp-playground/tools.
+		 */
+		console.log( `[${ name }] Extracting files from zip ...` );
+		const tmpExtractPath = path.join( os.tmpdir(), 'phpmyadmin-extract' );
+		if ( fs.existsSync( tmpExtractPath ) ) {
+			fs.rmSync( tmpExtractPath, { recursive: true, force: true } );
+		}
+		await extractZip( zipPath, tmpExtractPath );
+
+		const innerFolder = `phpMyAdmin-${ PHPMYADMIN_VERSION }-english`;
+		const sourcePath = path.join( tmpExtractPath, innerFolder );
+		if ( fs.existsSync( extractedPath ) ) {
+			fs.rmSync( extractedPath, { recursive: true, force: true } );
+		}
+		fs.renameSync( sourcePath, extractedPath );
+		fs.rmSync( tmpExtractPath, { recursive: true, force: true } );
+
+		// Inject Playground-specific config and SQLite adapter
+		console.log( `[${ name }] Injecting Playground-specific files ...` );
+		const installSteps = await getPhpMyAdminInstallSteps();
+		for ( const step of installSteps ) {
+			if ( step.step === 'writeFile' && typeof step.data === 'string' ) {
+				// step.path is like /tools/phpmyadmin/config.inc.php — strip the /tools/phpmyadmin prefix
+				const relativePath = step.path.replace( '/tools/phpmyadmin/', '' );
+				const destFile = path.join( extractedPath, relativePath );
+				await fs.ensureDir( path.dirname( destFile ) );
+				await fs.writeFile( destFile, step.data );
+			}
+		}
 	} else {
 		console.log( `[${ name }] Extracting files from zip ...` );
 		await extractZip( zipPath, extractedPath );