Website: Playground configuration modal

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

@@ -26,6 +26,7 @@ import {
 } from './opfs/opfs-memfs';
 import { applyWordPressPatches } from '@wp-playground/blueprints';
 import { journalMemfsToOpfs } from './opfs/journal-memfs-to-opfs';
+import { phpVar } from '@php-wasm/util';
 
 const startupOptions = parseWorkerStartupOptions<{
 wpVersion?: string;
@@ -109,9 +110,18 @@ export class PlaygroundWorkerEndpoint extends WebPHPEndpoint {
  * @returns WordPress module details, including the static assets directory and default theme.
  */
 async getWordPressModuleDetails() {
-const version = await this.wordPressVersion;
+const path = phpVar(`${this.documentRoot}/wp-includes/version.php`);
+const majorVersion = (
+await this.run({
+code: `<?php
+require(${path});
+echo substr($wp_version, 0, 3);
+`,
+})
+).text;
 return {
-staticAssetsDirectory: `wp-${version.replace('_', '.')}`,
+majorVersion,
+staticAssetsDirectory: `wp-${majorVersion.replace('_', '.')}`,
 defaultTheme: (await wordPressModule)?.defaultThemeName,
 };
 }

packages/playground/website/src/components/button/index.tsx

@@ -0,0 +1,8 @@
+import type { ButtonHTMLAttributes } from 'react';
+import css from './style.module.css';
+
+export default function Button(props: ButtonHTMLAttributes<HTMLButtonElement>) {
+return (
+<button {...props} className={css.button + ' ' + props?.className} />
+);
+}

packages/playground/website/src/components/button/style.module.css

@@ -0,0 +1,11 @@
+.button {
+flex-grow: 1;
+padding: 0px 15px;
+font-family: 'San Francisco', Helvetica, Arial, sans-serif;
+font-size: 16px;
+font-weight: 50;
+height: 26px;
+white-space: nowrap;
+cursor: pointer;
+color-scheme: dark;
+}

packages/playground/website/src/components/import-button/index.tsx

@@ -1,14 +1,13 @@
 import type { PlaygroundClient } from '@wp-playground/client';
 
 import { useState } from 'react';
-import Modal from 'react-modal';
 import css from './style.module.css';
 import ImportForm from '../import-form';
+import Modal from '../modal';
 
 interface ExportButtonProps {
 playground?: PlaygroundClient;
 }
-Modal.setAppElement('#root');
 export default function ImportButton({ playground }: ExportButtonProps) {
 const [isOpen, setOpen] = useState(false);
 const openModal = () => setOpen(true);
@@ -54,26 +53,6 @@ export default function ImportButton({ playground }: ExportButtonProps) {
 Playground". Pressing the Close Import Window will close
 the modal and bring you back to where you were on the page.'
 onRequestClose={closeModal}
-style={{
-content: {
-top: '50%',
-left: '50%',
-right: 'auto',
-bottom: 'auto',
-marginRight: '-50%',
-transform: 'translate(-50%, -50%)',
-width: 400,
-zIndex: 200,
-textAlign: 'center',
-color: '#000',
-border: '#000 1px solid',
-borderRadius: '6px',
-background: '#fff',
-},
-overlay: {
-background: '#1e2327d0',
-},
-}}
 >
 <ImportForm
 playground={playground!}

packages/playground/website/src/components/import-form/index.tsx

@@ -3,6 +3,7 @@ import { useRef, useState } from 'react';
 import type { PlaygroundClient } from '@wp-playground/client';
 
 import css from './style.module.css';
+import forms from '../../forms.module.css';
 import { replaceSite } from '@wp-playground/client';
 
 interface ImportFormProps {
@@ -50,79 +51,50 @@ export default function ImportForm({
 }
 
 return (
-<div className={css.modalInner}>
-<form
-id="import-playground-form"
-ref={form}
-onSubmit={handleSubmit}
->
-<button
-id="import-close-modal--btn"
-onClick={onClose}
-className={`${css.btn} ${css.btnClose}`}
-aria-label="Close import window"
+<form id="import-playground-form" ref={form} onSubmit={handleSubmit}>
+<h2 tabIndex={0}>Import Playground</h2>
+<p className={css.modalText}>
+You may replace the current WordPress Playground site with a
+previously exported one.
+</p>
+<div className={forms.formGroup}>
+<input
+type="file"
+id="import-select-file"
+onChange={handleSelectFile}
+style={{ display: 'none' }}
+ref={fileInputRef}
+accept="application/zip"
+/>
+<label
+htmlFor="import-select-file"
+className={forms.fileInputLabel}
+onClick={handleImportSelectFileClick}
 >
-<svg
-xmlns="http://www.w3.org/2000/svg"
-viewBox="0 0 24 24"
-width="32"
-height="32"
-aria-hidden="true"
-focusable="false"
->
-<path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path>
-</svg>
-</button>
-<h2 tabIndex={0}>Import Playground</h2>
-<p className={css.modalText}>
-You may replace the current WordPress Playground site with a
-previously exported one.
-</p>
-<p className={css.modalText}>
-<strong>Known Limitations</strong>
-</p>
-<div className={css.inputsContainer}>
-<input
-type="file"
-id="import-select-file"
-onChange={handleSelectFile}
-style={{ display: 'none' }}
-ref={fileInputRef}
-accept="application/zip"
-/>
-<label
-htmlFor="import-select-file"
-className={css.fileInputLabel}
-onClick={handleImportSelectFileClick}
->
-<div
-id="import-select-file--text"
-className={css.fileInputText}
->
-{error ? (
-<span className={css.error}>{error}</span>
-) : file ? (
-file.name
-) : (
-'No File Selected'
-)}
-</div>
-<button
-id="import-select-file--btn"
-className={css.btn}
->
-Choose File
-</button>
-</label>
-<button
-id="import-submit--btn"
-className={css.btn}
-disabled={!file}
+<div
+id="import-select-file--text"
+className={forms.fileInputText}
 >
-Import
+{error ? (
+<span className={forms.error}>{error}</span>
+) : file ? (
+file.name
+) : (
+'No File Selected'
+)}
+</div>
+<button id="import-select-file--btn" className={forms.btn}>
+Choose File
 </button>
-</div>
-</form>
-</div>
+</label>
+<button
+id="import-submit--btn"
+className={forms.btn}
+disabled={!file}
+>
+Import
+</button>
+</div>
+</form>
 );
 }

packages/playground/website/src/components/import-form/style.module.css

@@ -2,28 +2,6 @@
 display: none;
 }
 
-.btn {
-cursor: pointer;
-background: none;
-border: none;
-}
-
-.btn:hover,
-.btn:active {
-opacity: 0.8;
-}
-
-.btn-close {
-position: absolute;
-top: 5px;
-right: 5px;
-}
-
-.modal-inner {
-position: relative;
-padding: 20px;
-}
-
 .modal-text,
 .modal-text-list {
 text-align: left;
@@ -32,40 +10,3 @@
 .modal-text-list {
 padding-left: 15px;
 }
-
-.inputs-container {
-display: flex;
-flex-direction: column;
-margin-bottom: 20px;
-}
-
-.inputs-container {
-display: flex;
-flex-direction: column;
-margin-bottom: 20px;
-}
-
-.inputs-container .btn {
-background: #1e2327;
-color: #fff;
-height: 40px;
-border-radius: 6px;
-margin: 5px 0;
-}
-
-.inputs-container .btn[disabled] {
-opacity: 0.5;
-}
-
-.file-input-text {
-margin-top: 5px;
-margin-bottom: 15px;
-}
-
-.file-input-label .btn {
-width: 100%;
-}
-
-.error {
-color: red;
-}

packages/playground/website/src/components/modal/index.tsx

@@ -0,0 +1,54 @@
+import ReactModal from 'react-modal';
+import css from './style.module.css';
+
+ReactModal.setAppElement('#root');
+
+interface ModalProps extends ReactModal.Props {
+mergeStyles?: boolean;
+}
+export const defaultStyles: ReactModal.Styles = {
+content: {
+top: '50%',
+left: '50%',
+right: 'auto',
+bottom: 'auto',
+marginRight: '-50%',
+transform: 'translate(-50%, -50%)',
+width: 400,
+zIndex: 200,
+textAlign: 'center',
+color: '#000',
+border: '#000 1px solid',
+borderRadius: '6px',
+background: '#fff',
+},
+overlay: {
+background: '#1e2327d0',
+},
+};
+export default function Modal(props: ModalProps) {
+return (
+<ReactModal style={defaultStyles} {...props}>
+<div className={css.modalInner}>
+<button
+id="import-close-modal--btn"
+onClick={props.onRequestClose}
+className={`${css.btn} ${css.btnClose}`}
+aria-label="Close import window"
+>
+<svg
+xmlns="http://www.w3.org/2000/svg"
+viewBox="0 0 24 24"
+width="32"
+height="32"
+aria-hidden="true"
+focusable="false"
+>
+<path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path>
+</svg>
+</button>
+{props.children}
+</div>
+</ReactModal>
+);
+}

packages/playground/website/src/components/modal/style.module.css

@@ -0,0 +1,22 @@
+.btn {
+cursor: pointer;
+background: none;
+border: none;
+}
+
+.btn:hover,
+.btn:active {
+opacity: 0.8;
+}
+
+.btn-close {
+position: absolute;
+top: 5px;
+right: 5px;
+}
+
+.modal-inner {
+position: relative;
+padding: 20px;
+text-align: left;
+}