[Website] Default demo content (#2412)

zaerl · adamziel · web-flow · commit 87cf8ae7d8b9 · 2025-08-08T11:30:44.000+02:00
## Motivation for the change, related issues See #2236 Set new default demo page if no other options are provided by the user and Playground is not running inside an `<iframe>`. Set to https://raw.githubusercontent.com/fellyph/blueprints-demos/refs/heads/main/demos/blueprint-import-wxr.json for testing. ## Implementation details ## Testing Instructions (or ideally a Blueprint) 1. `npm run dev` 2. Open http://127.0.0.1:5400/website-server/ 3. The new page should open 4. Try to add a blueprint, a `import-*`, a theme, a plugin on the URL. It should not open Try in an `iframe` ```html <!DOCTYPE html> <html lang="en"> <body> <iframe style="width: 600px; height: 600px; border: none;" src="http://127.0.0.1:5400/website-server/" title="WordPress Playground"></iframe> </body> </html> ``` <img width="1298" height="633" alt="immagine" src="https://github.com/user-attachments/assets/bda97f14-9650-4b24-8aab-c76530c9cec9" /> <img width="629" height="581" alt="immagine" src="https://github.com/user-attachments/assets/c3745baa-3bd2-4e22-91ca-433673cc37f3" /> --------- Co-authored-by: Adam Zieliński <adam@adamziel.com>
diff --git a/packages/playground/website/src/components/ensure-playground-site/ensure-playground-site-is-selected.tsx b/packages/playground/website/src/components/ensure-playground-site/ensure-playground-site-is-selected.tsx
@@ -159,7 +159,6 @@ function parseSearchParams(searchParams: URLSearchParams) {
 	}
 	return params;
 }
-
 async function createNewTemporarySite(
 	dispatch: ReturnType<typeof useAppDispatch>,
 	requestedSiteSlug?: string
@@ -168,9 +167,15 @@ async function createNewTemporarySite(
 	// Lean on the Query API parameters and the Blueprint API to
 	// create the new site.
 	const newUrl = new URL(window.location.href);
+	const defaultBlueprint =
+		'https://raw.githubusercontent.com/WordPress/blueprints/refs/heads/trunk/blueprints/welcome/blueprint.json';
 	let resolvedBlueprint: ResolvedBlueprint | undefined = undefined;
+
 	try {
-		resolvedBlueprint = await resolveBlueprintFromURL(newUrl);
+		resolvedBlueprint = await resolveBlueprintFromURL(
+			newUrl,
+			defaultBlueprint
+		);
 	} catch (e) {
 		logger.error('Error resolving blueprint:', e);
 	}
diff --git a/packages/playground/website/src/lib/state/url/resolve-blueprint-from-url.ts b/packages/playground/website/src/lib/state/url/resolve-blueprint-from-url.ts
@@ -31,18 +31,35 @@ export type ResolvedBlueprint = {
 };
 
 export async function resolveBlueprintFromURL(
-	url: URL
+	url: URL,
+	defaultBlueprint?: string
 ): Promise<ResolvedBlueprint> {
 	const query = url.searchParams;
 	const fragment = decodeURI(url.hash || '#').substring(1);
 
 	let blueprint: BlueprintDeclaration | BlueprintBundle;
 	let source: BlueprintSource;
-	/*
-	 * Support passing blueprints via query parameter, e.g.:
-	 * ?blueprint-url=https://example.com/blueprint.json
+
+	/**
+	 * If the URL has no parameters or fragment, and a default blueprint is provided,
+	 * use the default blueprint.
 	 */
-	if (query.has('blueprint-url')) {
+	if (
+		window.self === window.top &&
+		!query.size &&
+		!fragment.length &&
+		defaultBlueprint
+	) {
+		blueprint = await resolveRemoteBlueprint(defaultBlueprint);
+		source = {
+			type: 'remote-url',
+			url: defaultBlueprint,
+		};
+	} else if (query.has('blueprint-url')) {
+		/*
+		 * Support passing blueprints via query parameter, e.g.:
+		 * ?blueprint-url=https://example.com/blueprint.json
+		 */
 		blueprint = await resolveRemoteBlueprint(query.get('blueprint-url')!);
 		source = {
 			type: 'remote-url',
