wip

package.json

@@ -44,6 +44,8 @@
 		"@wordpress/block-library": "^9.7.0",
 		"@wordpress/blocks": "^13.7.0",
 		"@wp-playground/client": "^0.9.45",
+		"@wp-playground/storage": "^0.9.45",
+		"@wp-playground/common": "^0.9.45",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-router-dom": "^6.26.1"

src/ui/preview/Playground.tsx

@@ -4,8 +4,12 @@ import {
 	StartPlaygroundOptions,
 	startPlaygroundWeb,
 	StepDefinition,
+	MountDescriptor,
 } from '@wp-playground/client';
 
+// @ts-ignore
+import { directoryHandleFromMountDevice } from '@wp-playground/storage';
+
 const playgroundIframeId = 'playground';
 
 export function Playground( props: {
@@ -51,6 +55,27 @@ async function initPlayground(
 	slug: string,
 	blogName: string
 ): Promise< PlaygroundClient > {
+	const mountDescriptor: MountDescriptor = {
+		device: {
+			type: 'opfs',
+			path: '/try-wp-' + slug,
+		},
+		mountpoint: '/wordpress',
+	};
+
+	let isWordPressInstalled = false;
+	if ( mountDescriptor ) {
+		try {
+			isWordPressInstalled = await playgroundAvailableInOpfs(
+				await directoryHandleFromMountDevice( mountDescriptor.device )
+			);
+		} catch ( e ) {
+			console.error( e );
+		}
+	}
+
+	console.info( 'isWordPressInstalled', isWordPressInstalled );
+
 	const options: StartPlaygroundOptions = {
 		iframe,
 		remoteUrl: `https://playground.wordpress.net/remote.html`,
@@ -63,8 +88,7 @@ async function initPlayground(
 				mountpoint: '/wordpress',
 			},
 		],
-		// shouldInstallWordPress: false,
-		// siteSlug: slug,
+		shouldInstallWordPress: ! isWordPressInstalled,
 		blueprint: {
 			login: true,
 			steps: steps(),
@@ -198,3 +222,38 @@ $post_id = wp_insert_post(array(
 wp_set_object_terms($post_id, $term_id, 'wp_theme');
 `;
 }
+
+/**
+ * Copied from https://github.com/WordPress/wordpress-playground/blob/8140715a273cefc503b87604e8ae397e112bfe92/packages/playground/website/src/lib/state/redux/boot-site-client.ts#L225
+ * since its currently not exported in a public npm package
+ *
+ * @param dirHandle
+ */
+async function playgroundAvailableInOpfs(
+	dirHandle: FileSystemDirectoryHandle
+) {
+	// Run this loop just to trigger an exception if the directory handle is no good.
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	// for await ( const _ of dirHandle.keys() ) {
+	// 	break;
+	// }
+
+	try {
+		/**
+		 * Assume it's a Playground directory if these files exist:
+		 * - wp-config.php
+		 * - wp-content/database/.ht.sqlite
+		 */
+		await dirHandle.getFileHandle( 'wp-config.php', { create: false } );
+		const wpContent = await dirHandle.getDirectoryHandle( 'wp-content', {
+			create: false,
+		} );
+		const database = await wpContent.getDirectoryHandle( 'database', {
+			create: false,
+		} );
+		await database.getFileHandle( '.ht.sqlite', { create: false } );
+	} catch ( e ) {
+		return false;
+	}
+	return true;
+}