Renamed the param opfs-browser from Query API, to browser

packages/docs/site/docs/08-query-api/01-index.md

@@ -32,7 +32,7 @@ You can go ahead and try it out. The Playground will automatically install the t
 | `lazy`         |               | Defer loading the Playground assets until someone clicks on the "Run" button                                                                                                                                                                                                                                                                                   |
 | `login`        | `1`           | Logs the user in as an admin                                                                                                                                                                                                                                                                                                                                   |
 | `gutenberg-pr` |               | Loads the specified Gutenberg Pull Request                                                                                                                                                                                                                                                                                                                     |
-| `storage`      |               | Selects the storage for Playground: `temporary` gets erased on page refresh, `opfs-browser` is stored in the browser, and `opfs-host` is stored in the selected directory on a local computer. The last two protect the user from accidentally losing their work upon page refresh.                                                                            |
+| `storage`      |               | Selects the storage for Playground: `temporary` gets erased on page refresh, `browser` is stored in the browser, and `opfs-host` is stored in the selected directory on a device. The last two protect the user from accidentally losing their work upon page refresh.                                                                            |
 
 For example, the following code embeds a Playground with a preinstalled Gutenberg plugin, and opens the post editor:
 

packages/playground/remote/src/lib/worker-thread.ts

@@ -55,9 +55,9 @@ let virtualOpfsDir: FileSystemDirectoryHandle | undefined;
 let lastOpfsDir: FileSystemDirectoryHandle | undefined;
 let wordPressAvailableInOPFS = false;
 if (
-	startupOptions.storage === 'opfs-browser' &&
-	// @ts-ignore
-	typeof navigator?.storage?.getDirectory !== 'undefined'
+  (startupOptions.storage === 'opfs-browser' || startupOptions.storage === 'browser') &&
+  // @ts-ignore
+  typeof navigator?.storage?.getDirectory !== 'undefined'
 ) {
 	virtualOpfsRoot = await navigator.storage.getDirectory();
 	virtualOpfsDir = await virtualOpfsRoot.getDirectoryHandle('wordpress', {

packages/playground/website/src/components/playground-configuration-group/form.tsx

@@ -124,14 +124,14 @@ export function PlaygroundConfigurationForm({
 						<input
 							type="radio"
 							name="storage"
-							value="opfs-browser"
-							id="storage-opfs-browser"
+							value="browser"
+							id="storage-browser"
 							className={forms.radioInput}
 							onChange={handleStorageChange}
-							checked={storage === 'opfs-browser'}
+							checked={storage === 'browser'}
 						/>
 						<label
-							htmlFor="storage-opfs-browser"
+							htmlFor="storage-browser"
 							className={forms.radioLabel}
 						>
 							Persistent: stored in this browser

packages/playground/website/src/components/playground-configuration-group/index.tsx

@@ -144,7 +144,7 @@ export default function PlaygroundConfigurationGroup({
 			});
 			await playground.goTo('/');
 
-			// Read current querystring and replace storage=opfs-browser with storage=opfs-host.
+			// Read current querystring and replace storage=browser with storage=opfs-host.
 			const url = new URL(window.location.href);
 			url.searchParams.set('storage', 'opfs-host');
 			window.history.pushState({}, '', url.toString());
@@ -157,7 +157,7 @@ export default function PlaygroundConfigurationGroup({
 
 	async function handleSubmit(config: PlaygroundConfiguration) {
 		const playground = await playgroundRef.current!.promise;
-		if (config.resetSite && config.storage === 'opfs-browser') {
+		if (config.resetSite && config.storage === 'opfs-browser' || config.storage === 'browser') {
 			if (
 				!window.confirm(
 					'This will wipe out all stored data and start a new site. Do you want to proceed?'
@@ -176,14 +176,14 @@ export default function PlaygroundConfigurationGroup({
 				WP {runningWp || currentConfiguration.wp} {' - '}
 				{currentConfiguration.storage === 'opfs-host'
 					? `Local (${dirName})`
-					: currentConfiguration.storage === 'opfs-browser'
+					: currentConfiguration.storage === 'opfs-browser' || currentConfiguration.storage === 'browser'
 					? 'Persistent'
 					: '⚠️ Temporary'}
 			</Button>
 			{currentConfiguration.storage === 'opfs-host' ? (
 				<SyncLocalFilesButton />
 			) : null}
-			{currentConfiguration.storage === 'opfs-browser' ? (
+			{currentConfiguration.storage === 'opfs-browser' || currentConfiguration.storage === 'browser' ? (
 				<StartOverButton />
 			) : null}
 			{isResumeLastDirOpen ? (

packages/playground/website/src/components/playground-configuration-group/reload-with-new-configuration.ts

@@ -5,8 +5,8 @@ export async function reloadWithNewConfiguration(
 	playground: PlaygroundClient,
 	config: PlaygroundConfiguration
 ) {
-	if (config.resetSite && config.storage === 'opfs-browser') {
-		await playground?.resetVirtualOpfs();
+	if (config.resetSite && (config.storage === 'opfs-browser' || config.storage === 'browser')) {
+  		await playground?.resetVirtualOpfs();
 	}
 
 	const url = new URL(window.location.toString());

packages/playground/website/src/lib/hooks.ts

@@ -5,7 +5,7 @@ import { buildVersion } from './config';
 
 interface UsePlaygroundOptions {
 	blueprint?: Blueprint;
-	storage?: 'opfs-host' | 'opfs-browser' | 'temporary';
+	storage?: 'opfs-host' | 'opfs-browser' | 'browser' | 'temporary';
 }
 export function usePlayground({ blueprint, storage }: UsePlaygroundOptions) {
 	const iframeRef = useRef<HTMLIFrameElement>(null);

packages/playground/website/src/types.ts

@@ -1,2 +1,2 @@
-export const StorageTypes = ['opfs-browser', 'temporary', 'opfs-host'] as const;
+export const StorageTypes = ['browser', 'temporary', 'opfs-host', 'opfs-browser'] as const;
 export type StorageType = (typeof StorageTypes)[number];