[UX] Stored Playgrounds (no more data loss), multiple Playgrounds, UI WebApp Redesign

.eslintignore

@@ -10,4 +10,5 @@ packages/playground/sync/src/test/wp-*
 packages/php-wasm/node/src/test/__test*
 *.timestamp-1678999213403.mjs
 .local
-.vscode
+.vscode
+playwright-report

.github/workflows/ci.yml

@@ -43,7 +43,22 @@ jobs:
               with:
                   name: cypress-screenshots
                   path: dist/cypress/packages/playground/website/screenshots
-
+    test-e2e-playwright:
+        runs-on: ubuntu-latest
+        needs: [lint-and-typecheck]
+        # Run as root to allow node to bind to port 80
+        steps:
+            - uses: actions/checkout@v3
+            - uses: ./.github/actions/prepare-playground
+            - name: Install Playwright Browsers
+              run: sudo npx playwright install --with-deps
+            - name: Run Playwright tests
+              run: sudo CI=true npx nx run playground-website:e2e:playwright:ci
+            - uses: actions/upload-artifact@v4
+              if: ${{ !cancelled() }}
+              with:
+                  name: playwright-report
+                  path: playwright-report/
     build:
         runs-on: ubuntu-latest
         needs: [lint-and-typecheck]

.gitignore

@@ -56,3 +56,6 @@ Thumbs.db
 
 # Playground artifacts
 php.js.bak
+**/test-results/
+**/playwright-report/
+**/blob-report/

CHANGELOG.md

@@ -25,89 +25,83 @@ The following contributors merged PRs in this release:
 
 ### Documentation
 
-- Docs: Better paths for links. ([#1765](https://github.com/WordPress/wordpress-playground/pull/1765))
-- Docs: I18n setup. ([#1766](https://github.com/WordPress/wordpress-playground/pull/1766))
-- Docs: Remove the outdated "data rependencies" page. ([#1785](https://github.com/WordPress/wordpress-playground/pull/1785))
+-   Docs: Better paths for links. ([#1765](https://github.com/WordPress/wordpress-playground/pull/1765))
+-   Docs: I18n setup. ([#1766](https://github.com/WordPress/wordpress-playground/pull/1766))
+-   Docs: Remove the outdated "data rependencies" page. ([#1785](https://github.com/WordPress/wordpress-playground/pull/1785))
 
 ### Website
 
-- Fix troubleshoot-and-debug link. ([#1782](https://github.com/WordPress/wordpress-playground/pull/1782))
+-   Fix troubleshoot-and-debug link. ([#1782](https://github.com/WordPress/wordpress-playground/pull/1782))
 
 ### Various
 
-- Update link for contributor day. ([#1775](https://github.com/WordPress/wordpress-playground/pull/1775))
+-   Update link for contributor day. ([#1775](https://github.com/WordPress/wordpress-playground/pull/1775))
 
 ### Contributors
 
 The following contributors merged PRs in this release:
 
 @adamziel @bgrgicak @juanmaguitar @n8finch
 
-
-## [v0.9.42] (2024-09-17) 
+## [v0.9.42] (2024-09-17)
 
 ### PHP WebAssembly
 
-- FS: Use the correct rm/rmdir method when moving files between mounts. ([#1770](https://github.com/WordPress/wordpress-playground/pull/1770))
+-   FS: Use the correct rm/rmdir method when moving files between mounts. ([#1770](https://github.com/WordPress/wordpress-playground/pull/1770))
 
 ### Contributors
 
 The following contributors merged PRs in this release:
 
 @adamziel
 
+## [v0.9.41] (2024-09-16)
 
-## [v0.9.41] (2024-09-16) 
-
-
-
-
-## [v0.9.40] (2024-09-16) 
+## [v0.9.40] (2024-09-16)
 
 ### Enhancements
 
-- Extend allowable resources available via WordPress/WordPress. ([#1721](https://github.com/WordPress/wordpress-playground/pull/1721))
+-   Extend allowable resources available via WordPress/WordPress. ([#1721](https://github.com/WordPress/wordpress-playground/pull/1721))
 
 ### Tools
 
-- Update actions/upload-artifact version to 4. ([#1748](https://github.com/WordPress/wordpress-playground/pull/1748))
+-   Update actions/upload-artifact version to 4. ([#1748](https://github.com/WordPress/wordpress-playground/pull/1748))
 
 ### Documentation
 
-- Docs/Blueprints resources: Grammar and typo fixes. ([#1741](https://github.com/WordPress/wordpress-playground/pull/1741))
+-   Docs/Blueprints resources: Grammar and typo fixes. ([#1741](https://github.com/WordPress/wordpress-playground/pull/1741))
 
 ### PHP WebAssembly
 
-- @php-wasm/universal : Add Phar support in php-wasm. ([#1716](https://github.com/WordPress/wordpress-playground/pull/1716))
+-   @php-wasm/universal : Add Phar support in php-wasm. ([#1716](https://github.com/WordPress/wordpress-playground/pull/1716))
 
 ### Website
 
-- Add the `components` package with PathMappingControl. ([#1608](https://github.com/WordPress/wordpress-playground/pull/1608))
+-   Add the `components` package with PathMappingControl. ([#1608](https://github.com/WordPress/wordpress-playground/pull/1608))
 
 ### Bug Fixes
 
-- Fix CLI --skipWordPressSetup option. ([#1760](https://github.com/WordPress/wordpress-playground/pull/1760))
+-   Fix CLI --skipWordPressSetup option. ([#1760](https://github.com/WordPress/wordpress-playground/pull/1760))
 
 ### Reliability
 
-- Improve Playground CLI logging and fix quiet mode. ([#1751](https://github.com/WordPress/wordpress-playground/pull/1751))
+-   Improve Playground CLI logging and fix quiet mode. ([#1751](https://github.com/WordPress/wordpress-playground/pull/1751))
 
 ### Various
 
-- Docs/Guides: Guides introductions and some minor adjustments. ([#1754](https://github.com/WordPress/wordpress-playground/pull/1754))
-- Docs/Guides: Normalized and fixed guides links. ([#1756](https://github.com/WordPress/wordpress-playground/pull/1756))
-- Docs/Guides: Providing content for your demo. ([#1747](https://github.com/WordPress/wordpress-playground/pull/1747))
-- Docs/Guides: WordPress Playground for plugin developers. ([#1750](https://github.com/WordPress/wordpress-playground/pull/1750))
-- Docs/Guides: WordPress Playground for theme developers. ([#1732](https://github.com/WordPress/wordpress-playground/pull/1732))
-- Docs: Links redirections. ([#1758](https://github.com/WordPress/wordpress-playground/pull/1758))
+-   Docs/Guides: Guides introductions and some minor adjustments. ([#1754](https://github.com/WordPress/wordpress-playground/pull/1754))
+-   Docs/Guides: Normalized and fixed guides links. ([#1756](https://github.com/WordPress/wordpress-playground/pull/1756))
+-   Docs/Guides: Providing content for your demo. ([#1747](https://github.com/WordPress/wordpress-playground/pull/1747))
+-   Docs/Guides: WordPress Playground for plugin developers. ([#1750](https://github.com/WordPress/wordpress-playground/pull/1750))
+-   Docs/Guides: WordPress Playground for theme developers. ([#1732](https://github.com/WordPress/wordpress-playground/pull/1732))
+-   Docs: Links redirections. ([#1758](https://github.com/WordPress/wordpress-playground/pull/1758))
 
 ### Contributors
 
 The following contributors merged PRs in this release:
 
 @adamziel @bgrgicak @brandonpayton @juanmaguitar @mho22 @peterwilsoncc
 
-
 ## [v0.9.39] (2024-09-09)
 
 ### Bug Fixes

package.json

@@ -72,11 +72,13 @@
 		"octokit-plugin-create-pull-request": "5.1.1",
 		"react": "^18.2.25",
 		"react-dom": "^18.2.25",
+		"react-hook-form": "7.53.0",
 		"react-modal": "^3.16.1",
 		"react-redux": "8.1.3",
 		"react-transition-group": "4.4.5",
 		"unzipper": "0.10.11",
 		"vite-plugin-api": "1.0.4",
+		"wouter": "3.3.5",
 		"xterm": "5.3.0",
 		"xterm-addon-fit": "0.8.0",
 		"yargs": "17.7.2"
@@ -104,6 +106,7 @@
 		"@nx/web": "16.9.0",
 		"@nx/webpack": "16.9.0",
 		"@nx/workspace": "16.9.0",
+		"@playwright/test": "1.47.1",
 		"@rollup/plugin-url": "^8.0.1",
 		"@swc-node/register": "~1.6.7",
 		"@swc/core": "~1.3.85",

packages/docs/site/docs/developers/06-apis/query-api/01-index.md

@@ -35,10 +35,9 @@ You can go ahead and try it out. The Playground will automatically install the t
 | `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`.                                                                                                                                                                                                                                                                        |
+| `site-slug`            |                       | Selects which site to load from browser storage.                                                                                                                                                                                                                                                                                                                                 |
 | `language`             | `en_US`               | Sets the locale for the WordPress instance. This must be used in combination with `networking=yes` otherwise WordPress won't be able to download translations.                                                                                                                                                                                                                   |
 
 For example, the following code embeds a Playground with a preinstalled Gutenberg plugin and opens the post editor:

packages/docs/site/docs/developers/24-limitations/01-index.md

@@ -16,7 +16,7 @@ Playground [disables network connections](/blueprints/data-format#features) by d
 
 ### Temporary by design
 
-As Playground [streams rather than serves](/about#streamed-not-served) WordPress, all database changes and uploads will be gone when you refresh the page. To avoid losing your work, either [export your work](/quick-start-guide#save-your-site) before or enable storage in the browser/device via the [Query API](/developers/apis/query-api#available-options) or the UI.
+As Playground [streams rather than serves](/about#streamed-not-served) WordPress, all database changes and uploads will be gone when you refresh the page. To avoid losing your work, either [export your work](/quick-start-guide#save-your-site) before or enable storage in the browser/device via the "Save" button in the UI.
 
 ## When developing with Playground