Tweak the design

adamziel · adamziel · commit 42a3e060d89e · 2025-12-06T01:11:39.000+01:00
diff --git a/packages/playground/remote/remote.html b/packages/playground/remote/remote.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
 	<head>
 		<title>WordPress Playground</title>
diff --git a/packages/playground/remote/src/lib/boot-playground-remote.ts b/packages/playground/remote/src/lib/boot-playground-remote.ts
@@ -36,7 +36,9 @@ import workerV2Url from './playground-worker-endpoint-blueprints-v2.ts?worker&ur
 const origin = new URL('/', (import.meta || {}).url).origin;
 
 function getWorkerUrl(): string {
-	const runner = new URL(document.location.href).searchParams.get('blueprints-runner');
+	const runner = new URL(document.location.href).searchParams.get(
+		'blueprints-runner'
+	);
 	const isV2 = runner === 'v2';
 	const selected = isV2 ? workerV2Url : workerV1Url;
 	return new URL(selected, origin) + '';
diff --git a/packages/playground/website/src/components/layout/index.tsx b/packages/playground/website/src/components/layout/index.tsx
@@ -4,7 +4,6 @@ import { SiteManager } from '../site-manager';
 import { CSSTransition } from 'react-transition-group';
 import type { PlaygroundReduxState } from '../../lib/state/redux/store';
 import { useAppSelector } from '../../lib/state/redux/store';
-import type { BlueprintV1Declaration } from '@wp-playground/blueprints';
 import { useState, useRef } from 'react';
 import { acquireOAuthTokenIfNeeded } from '../../github/acquire-oauth-token-if-needed';
 import { GithubExportModal } from '../../github/github-export-form';
@@ -80,7 +79,7 @@ export function Layout() {
  * over other modals (e.g. connect to GitHub). Discuss whether modals should be declared at the
  * top level, like here, or contextual to where the "Show modal" button is rendered.
  */
-function Modals(blueprint: BlueprintV1Declaration) {
+function Modals() {
 	const query = new URL(document.location.href).searchParams;
 
 	const [githubExportFiles, setGithubExportFiles] = useState<any[]>();
diff --git a/packages/playground/website/src/components/playground-viewport/index.tsx b/packages/playground/website/src/components/playground-viewport/index.tsx
@@ -160,17 +160,12 @@ export const KeepAliveTemporarySitesViewport = () => {
 					</div>
 				</div>
 			)}
-			{!activeSite && activeSiteSlugIsSet && (
-				// Show a progress bar while the site is being created.
-				// Once the site exists and is being rendered, the iframe
-				// will show its own loading screen ("Preparing WordPress...").
-				<div className={css.loadingViewport}>
-					<h3 className={css.loadingCaption}>&nbsp;</h3>
-					<div className={css.progressWrapper}>
-						<div className={css.progressBar} />
-					</div>
+			<div className={css.loadingViewport}>
+				<h3 className={css.loadingCaption}>&nbsp;</h3>
+				<div className={css.progressWrapper}>
+					<div className={css.progressBar} />
 				</div>
-			)}
+			</div>
 			{slugsSeenSoFar.map((slug) => {
 				const site = sitesBySlug.get(slug);
 				const viewportKey = site
diff --git a/packages/playground/website/src/components/playground-viewport/style.module.css b/packages/playground/website/src/components/playground-viewport/style.module.css
@@ -9,10 +9,15 @@
 	border: 0;
 	margin: 0;
 	padding: 0;
+	background: #fff;
 }
 
 .loading-viewport {
-	position: relative;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
 	width: 100%;
 	height: 100%;
 	display: flex;
@@ -50,7 +55,7 @@
 	}
 
 	.progress-wrapper {
-		background: #32363a;
+		background: #1e1e1e;
 	}
 }
 

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<!DOCTYPE html>`
	`1`	`+<!doctype html>`
`2`	`2`	`<html>`
`3`	`3`	`<head>`
`4`	`4`	`<title>WordPress Playground</title>`
Original file line number	Diff line number	Diff line change
`@@ -9,10 +9,15 @@`
`9`	`9`	`border: 0;`
`10`	`10`	`margin: 0;`
`11`	`11`	`padding: 0;`
	`12`	`+ background: #fff;`
`12`	`13`	`}`
`13`	`14`
`14`	`15`	`.loading-viewport {`
`15`		`- position: relative;`
	`16`	`+ position: absolute;`
	`17`	`+ top: 0;`
	`18`	`+ left: 0;`
	`19`	`+ right: 0;`
	`20`	`+ bottom: 0;`
`16`	`21`	`width: 100%;`
`17`	`22`	`height: 100%;`
`18`	`23`	`display: flex;`
`@@ -50,7 +55,7 @@`
`50`	`55`	`}`
`51`	`56`
`52`	`57`	`.progress-wrapper {`
`53`		`- background: #32363a;`
	`58`	`+ background: #1e1e1e;`
`54`	`59`	`}`
`55`	`60`	`}`
`56`	`61`