[PHP Playground] Attach client to https://playground.wordpress.net/remote.html

packages/playground/website-extras/src/php-playground/components/PlaygroundManager.tsx

@@ -3,7 +3,7 @@ import { startPlaygroundWeb } from '@wp-playground/client';
 import {
 	DEFAULT_URL_PREFIX,
 	DEFAULT_WORKSPACE_DIR,
-	DEFAULT_WP_REMOTE,
+	getRemoteUrl,
 } from '../constants';
 import { useAppDispatch, useAppSelector } from '../hooks';
 import {
@@ -120,7 +120,7 @@ export const PlaygroundManager = () => {
 			try {
 				const clientInstance = await startPlaygroundWeb({
 					iframe: previewIframe,
-					remoteUrl: DEFAULT_WP_REMOTE,
+					remoteUrl: getRemoteUrl().toString(),
 					// blueprint: {
 					// 	preferredVersions: {
 					// 		wp: wpVersionRef.current,

packages/playground/website-extras/src/php-playground/constants.ts

@@ -1,8 +1,5 @@
-export const DEFAULT_PHP_VERSION = '8.4';
-export const DEFAULT_WP_VERSION = '6.8';
-// @TODO: Use URL imported from vite build-time config
-export const DEFAULT_WP_REMOTE = 'http://127.0.0.1:5400/remote.html';
-// export const DEFAULT_WP_REMOTE = 'https://playground.wordpress.net/remote.html';
+// @ts-expect-error
+import { buildVersion } from 'virtual:website-config';
 
 // @TODO: Get rid of the hardcoded initial path, always source cwd from the client.
 export const DEFAULT_WORKSPACE_DIR = '/wordpress/workspace';
@@ -21,3 +18,10 @@ $html_processor = WP_HTML_Processor::create_fragment('<p><span>Hey!</span></p>')
 $html_processor->next_tag();
 var_dump($html_processor->get_tag());
 ?>`;
+
+export function getRemoteUrl() {
+	const remoteUrl = new URL(window.location.origin);
+	remoteUrl.pathname = '/remote.html';
+	remoteUrl.searchParams.set('v', buildVersion);
+	return remoteUrl;
+}

packages/playground/website-extras/src/php-playground/store.ts

@@ -6,7 +6,8 @@ import {
 import type { PlaygroundClient } from '@wp-playground/client';
 import { SupportedPHPVersionsList } from '@wp-playground/client';
 
-import { DEFAULT_CODE, DEFAULT_PHP_VERSION } from './constants';
+import { DEFAULT_CODE } from './constants';
+import { RecommendedPHPVersion } from '@wp-playground/common';
 
 export type BootStatus = 'idle' | 'booting' | 'ready' | 'error';
 
@@ -28,7 +29,7 @@ export interface PlaygroundState {
 const initialState: PlaygroundState = {
 	code: DEFAULT_CODE,
 	currentPath: null,
-	phpVersion: DEFAULT_PHP_VERSION,
+	phpVersion: RecommendedPHPVersion,
 	wpVersion: 'latest',
 	phpVersions: SupportedPHPVersionsList,
 	wpVersions: [],

packages/playground/wordpress/src/index.ts

@@ -597,7 +597,7 @@ export async function unzipWordPress(php: PHP, wpZip: File) {
 					'/'
 				);
 				logger.warn(
-					`Skipping ${wpPath} because something exists at the target path.`
+					`Cannot unzip WordPress files at ${target}: ${wpPath} already exists.`
 				);
 				return;
 			}