Skip to content

Commit

Permalink
Website: Remove "small window mode" (#1540)
Browse files Browse the repository at this point in the history 
Playground was initially displayed in a small window taking only a part
of the screen. This mode was then made optional, with the full screen
becoming the default. Looking back, the small window mode doesn't seem
to be useful for anything – let's remove it.

This change was inspired by @sirreall who reported a slight UX issue
with CSS transitions that was caused by still supporting the small
window mode:


#824 (comment)

Closes #1534

 ## Testing instructions

* Open Playground
* Confirm all three buttons in the upper left corner are gray and
non-interactive
* Confirm that Playground is resized together with the window, not in a
delayed way as on the video below


https://github.com/WordPress/wordpress-playground/assets/841763/a201b16f-0e4d-4a52-bd93-34b6f7bf40d9
  • Loading branch information
@adamziel
adamziel authored Jun 26, 2024
1 parent 4c8b417 commit a629b3c
Show file tree
Hide file tree
Showing 4 changed files with 20 additions and 31 deletions.
36 changes: 18 additions & 18 deletions packages/docs/site/docs/08-query-api/01-index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,24 +21,24 @@ You can go ahead and try it out. The Playground will automatically install the t

## Available options

| Option | Default Value | Description |
| ---------------------- | ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `php` | `8.0` | Loads the specified PHP version. Accepts `7.0`, `7.1`, `7.2`, `7.3`, `7.4`, `8.0`, `8.1`, `8.2`, `8.3`, or `latest`.|
| `wp` | `latest` | Loads the specified WordPress version. Accepts the last three major WordPress versions. As of June 1, 2024, that's `6.3`, `6.4`, or `6.5`. You can also use the generic values `latest`, `nightly`, or `beta`.|
| `blueprint-url` | | The URL of the Blueprint that will be used to configure this Playground instance. |
| `php-extension-bundle` | `light` | Loads a bundle of PHP extensions. Accepts `kitchen-sink` (for finfo, gd, mbstring, iconv, openssl, libxml, xml, dom, simplexml, xmlreader, xmlwriter) or `light`. `light` reduces downloads by 6 MB and loads none of the extensions in `kitchen-sink`. |
| `networking` | `no` | Enables or disables the networking support for Playground. Accepts `yes` or `no`.|
| `plugin` | | Installs the specified plugin. Use the plugin name from the WordPress Plugins Directory URL. For example, if the URL is `https://wordpress.org/plugins/wp-lazy-loading/`, the plugin name would be `wp-lazy-loading`. You can pre-install multiple plugins by saying `plugin=coblocks&plugin=wp-lazy-loading&…`. Installing a plugin automatically logs the user in as an admin. |
| `theme` | | Installs the specified theme. Use the theme name from the WordPress Themes Directory URL. For example, if the URL is `https://wordpress.org/themes/disco/`, the theme name would be `disco`. Installing a theme automatically logs the user in as an admin. |
| `url` | `/wp-admin/` | Load the specified initial WordPress page in this Playground instance. |
| `mode` | `browser-full-screen` | Determines how the WordPress instance is displayed. Either wrapped in a browser UI or full width as a seamless experience. Accepts `browser-full-screen`, `browser`, or `seamless`. |
| `lazy` | | Defer loading the Playground assets until someone clicks on the "Run" button. Does not accept any values. If `lazy` is added as a URL parameter, loading will be deferred. |
| `login` | `yes` | Log the user in as an admin. Accepts `yes` or `no`. |
| `multisite` | `no` | Enables the WordPress multisite mode. Accepts `yes` or `no`. |
| `storage` | `none` | Selects the storage for Playground: `none` gets erased on page refresh, `browser` is stored in the browser, and `device` is stored in the selected directory on a device. The last two protect the user from accidentally losing their work upon page refresh. |
| `import-site` | | Imports site files and database from a ZIP file specified by a URL. |
| `import-wxr` | | Imports site content from a WXR file specified by a URL. It uses the WordPress Importer plugin, so the default admin user must be logged in.|
| `site-slug` | | Selects which site to load from browser storage. This must be used in combination with `storage=browser`|
| Option | Default Value | Description |
| ---------------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `php` | `8.0` | Loads the specified PHP version. Accepts `7.0`, `7.1`, `7.2`, `7.3`, `7.4`, `8.0`, `8.1`, `8.2`, `8.3`, or `latest`. |
| `wp` | `latest` | Loads the specified WordPress version. Accepts the last three major WordPress versions. As of June 1, 2024, that's `6.3`, `6.4`, or `6.5`. You can also use the generic values `latest`, `nightly`, or `beta`. |
| `blueprint-url` | | The URL of the Blueprint that will be used to configure this Playground instance. |
| `php-extension-bundle` | `light` | Loads a bundle of PHP extensions. Accepts `kitchen-sink` (for finfo, gd, mbstring, iconv, openssl, libxml, xml, dom, simplexml, xmlreader, xmlwriter) or `light`. `light` reduces downloads by 6 MB and loads none of the extensions in `kitchen-sink`. |
| `networking` | `no` | Enables or disables the networking support for Playground. Accepts `yes` or `no`. |
| `plugin` | | Installs the specified plugin. Use the plugin name from the WordPress Plugins Directory URL. For example, if the URL is `https://wordpress.org/plugins/wp-lazy-loading/`, the plugin name would be `wp-lazy-loading`. You can pre-install multiple plugins by saying `plugin=coblocks&plugin=wp-lazy-loading&…`. Installing a plugin automatically logs the user in as an admin. |
| `theme` | | Installs the specified theme. Use the theme name from the WordPress Themes Directory URL. For example, if the URL is `https://wordpress.org/themes/disco/`, the theme name would be `disco`. Installing a theme automatically logs the user in as an admin. |
| `url` | `/wp-admin/` | Load the specified initial WordPress page in this Playground instance. |
| `mode` | `browser-full-screen` | Determines how the WordPress instance is displayed. Either wrapped in a browser UI or full width as a seamless experience. Accepts `browser-full-screen`, or `seamless`. |
| `lazy` | | Defer loading the Playground assets until someone clicks on the "Run" button. Does not accept any values. If `lazy` is added as a URL parameter, loading will be deferred. |
| `login` | `yes` | Log the user in as an admin. Accepts `yes` or `no`. |
| `multisite` | `no` | Enables the WordPress multisite mode. Accepts `yes` or `no`. |
| `storage` | `none` | Selects the storage for Playground: `none` gets erased on page refresh, `browser` is stored in the browser, and `device` is stored in the selected directory on a device. The last two protect the user from accidentally losing their work upon page refresh. |
| `import-site` | | Imports site files and database from a ZIP file specified by a URL. |
| `import-wxr` | | Imports site content from a WXR file specified by a URL. It uses the WordPress Importer plugin, so the default admin user must be logged in. |
| `site-slug` | | Selects which site to load from browser storage. This must be used in combination with `storage=browser` |

For example, the following code embeds a Playground with a preinstalled Gutenberg plugin and opens the post editor:

Expand Down
12 changes: 2 additions & 10 deletions packages/playground/website/src/components/browser-chrome/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ interface BrowserChromeProps {
toolbarButtons?: Array<React.ReactElement | false | null>;
url?: string;
showAddressBar?: boolean;
initialIsFullSize?: boolean;
onUrlChange?: (url: string) => void;
}

Expand All @@ -19,17 +18,11 @@ export default function BrowserChrome({
onUrlChange,
showAddressBar = true,
toolbarButtons,
initialIsFullSize = false,
}: BrowserChromeProps) {
const [isFullSize, setIsFullSize] = useState(initialIsFullSize);

const addressBarClass = classNames(css.addressBarSlot, {
[css.isHidden]: !showAddressBar,
});
const wrapperClass = classNames(css.wrapper, {
[css.hasSmallWindow]: !isFullSize,
[css.hasFullSizeWindow]: isFullSize,
});
const wrapperClass = classNames(css.wrapper, css.hasFullSizeWindow);

const [noticeHidden, setNoticeHidden] = useState(
document.cookie.includes('hideExperimentalNotice=true')
Expand Down Expand Up @@ -62,8 +55,7 @@ export default function BrowserChrome({
className={`${css.windowControl} ${css.isNeutral}`}
></div>
<div
className={`${css.windowControl} ${css.isGreen} ${css.isActive}`}
onClick={() => setIsFullSize(!isFullSize)}
className={`${css.windowControl} ${css.isNeutral}`}
></div>
</div>

Expand Down
1 change: 0 additions & 1 deletion packages/playground/website/src/components/browser-chrome/style.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,6 @@ body.is-embedded .fake-window-wrapper {
overflow: hidden;

animation: pulse 6s ease-in infinite;
transition: all ease-in 0.25s;
}

@keyframes pulse {
Expand Down
2 changes: 0 additions & 2 deletions packages/playground/website/src/components/playground-viewport/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { setupPostMessageRelay } from '@php-wasm/web';
import { usePlaygroundContext } from '../../playground-context';

export const supportedDisplayModes = [
'browser',
'browser-full-screen',
'seamless',
] as const;
Expand All @@ -32,7 +31,6 @@ export const PlaygroundViewport = React.forwardRef<
}
return (
<BrowserChrome
initialIsFullSize={displayMode === 'browser-full-screen'}
showAddressBar={!!playground}
url={url}
toolbarButtons={toolbarButtons}
Expand Down

0 comments on commit a629b3c

Please sign in to comment.