Add site manager view and sidebar

CHANGELOG.md

@@ -4,66 +4,64 @@ All notable changes to this project are documented in this file by a CI job
 that runs on every NPM release. The file follows the [Keep a Changelog](https://keepachangelog.com/en/1.1.0/)
 format.
 
-## [v0.9.28] (2024-08-05) 
+## [v0.9.28] (2024-08-05)
 
 ### Blueprints
 
-- Add support for loading wpCli without running blueprint steps. ([#1629](https://github.com/WordPress/wordpress-playground/pull/1629))
+-  Add support for loading wpCli without running blueprint steps. ([#1629](https://github.com/WordPress/wordpress-playground/pull/1629))
 
 ### Documentation
 
-- Blueprints: Add resetData step to documentation. ([#1658](https://github.com/WordPress/wordpress-playground/pull/1658))
-- Docs: Redirect from /docs to https://wordpress.github.io/wordpress-playground. ([#1671](https://github.com/WordPress/wordpress-playground/pull/1671))
+-  Blueprints: Add resetData step to documentation. ([#1658](https://github.com/WordPress/wordpress-playground/pull/1658))
+-  Docs: Redirect from /docs to https://wordpress.github.io/wordpress-playground. ([#1671](https://github.com/WordPress/wordpress-playground/pull/1671))
 
 ### Website
 
-- Suppress unavoidable Deprecated notices - Networking. ([#1660](https://github.com/WordPress/wordpress-playground/pull/1660))
-- UI: Explain the Logs modal. ([#1666](https://github.com/WordPress/wordpress-playground/pull/1666))
+-  Suppress unavoidable Deprecated notices - Networking. ([#1660](https://github.com/WordPress/wordpress-playground/pull/1660))
+-  UI: Explain the Logs modal. ([#1666](https://github.com/WordPress/wordpress-playground/pull/1666))
 
 #### Blueprints
 
-- Precompile Ajv Blueprint validator to avoid CSP issues. ([#1649](https://github.com/WordPress/wordpress-playground/pull/1649))
+-  Precompile Ajv Blueprint validator to avoid CSP issues. ([#1649](https://github.com/WordPress/wordpress-playground/pull/1649))
 
 ### Internal
 
-- Reinstantiate Changelog generation in GitHub CI. ([#1657](https://github.com/WordPress/wordpress-playground/pull/1657))
+-  Reinstantiate Changelog generation in GitHub CI. ([#1657](https://github.com/WordPress/wordpress-playground/pull/1657))
 
 ### Various
 
-- Rollback artifact creation to enable downloading a pre-built package …. ([#1624](https://github.com/WordPress/wordpress-playground/pull/1624))
-- Update WordPress packages. ([#1672](https://github.com/WordPress/wordpress-playground/pull/1672))
-- Update `ws` package version to fix DOS vulnerability. ([#1635](https://github.com/WordPress/wordpress-playground/pull/1635))
+-  Rollback artifact creation to enable downloading a pre-built package …. ([#1624](https://github.com/WordPress/wordpress-playground/pull/1624))
+-  Update WordPress packages. ([#1672](https://github.com/WordPress/wordpress-playground/pull/1672))
+-  Update `ws` package version to fix DOS vulnerability. ([#1635](https://github.com/WordPress/wordpress-playground/pull/1635))
 
 ### Contributors
 
 The following contributors merged PRs in this release:
 
 @adamziel @bgrgicak @brandonpayton @PiotrPress
 
-
-## [v0.9.27] (2024-07-29) 
+## [v0.9.27] (2024-07-29)
 
 ### Enhancements
 
-- Support offline mode after the first Playground page load. ([#1643](https://github.com/WordPress/wordpress-playground/pull/1643))
+-  Support offline mode after the first Playground page load. ([#1643](https://github.com/WordPress/wordpress-playground/pull/1643))
 
 ### Devrel
 
-- Remove puzzle app package. ([#1642](https://github.com/WordPress/wordpress-playground/pull/1642))
+-  Remove puzzle app package. ([#1642](https://github.com/WordPress/wordpress-playground/pull/1642))
 
 ### PHP WebAssembly
 
-- Cache Playground assets to enable offline support. ([#1535](https://github.com/WordPress/wordpress-playground/pull/1535))
-- Rotate PHP runtime after runtime crash. ([#1628](https://github.com/WordPress/wordpress-playground/pull/1628))
-- Throw error when PHP run() receives no code to run. ([#1646](https://github.com/WordPress/wordpress-playground/pull/1646))
+-  Cache Playground assets to enable offline support. ([#1535](https://github.com/WordPress/wordpress-playground/pull/1535))
+-  Rotate PHP runtime after runtime crash. ([#1628](https://github.com/WordPress/wordpress-playground/pull/1628))
+-  Throw error when PHP run() receives no code to run. ([#1646](https://github.com/WordPress/wordpress-playground/pull/1646))
 
 ### Contributors
 
 The following contributors merged PRs in this release:
 
 @adamziel @bgrgicak @brandonpayton
 
-
 ## [v0.9.26] (2024-07-22)
 
 ### Blueprints

packages/docs/site/docs/17-changelog.md

@@ -9,66 +9,64 @@ All notable changes to this project are documented in this file by a CI job
 that runs on every NPM release. The file follows the [Keep a Changelog](https://keepachangelog.com/en/1.1.0/)
 format.
 
-## [v0.9.28] (2024-08-05) 
+## [v0.9.28] (2024-08-05)
 
 ### Blueprints
 
-- Add support for loading wpCli without running blueprint steps. ([#1629](https://github.com/WordPress/wordpress-playground/pull/1629))
+-  Add support for loading wpCli without running blueprint steps. ([#1629](https://github.com/WordPress/wordpress-playground/pull/1629))
 
 ### Documentation
 
-- Blueprints: Add resetData step to documentation. ([#1658](https://github.com/WordPress/wordpress-playground/pull/1658))
-- Docs: Redirect from /docs to https://wordpress.github.io/wordpress-playground. ([#1671](https://github.com/WordPress/wordpress-playground/pull/1671))
+-  Blueprints: Add resetData step to documentation. ([#1658](https://github.com/WordPress/wordpress-playground/pull/1658))
+-  Docs: Redirect from /docs to https://wordpress.github.io/wordpress-playground. ([#1671](https://github.com/WordPress/wordpress-playground/pull/1671))
 
 ### Website
 
-- Suppress unavoidable Deprecated notices - Networking. ([#1660](https://github.com/WordPress/wordpress-playground/pull/1660))
-- UI: Explain the Logs modal. ([#1666](https://github.com/WordPress/wordpress-playground/pull/1666))
+-  Suppress unavoidable Deprecated notices - Networking. ([#1660](https://github.com/WordPress/wordpress-playground/pull/1660))
+-  UI: Explain the Logs modal. ([#1666](https://github.com/WordPress/wordpress-playground/pull/1666))
 
 #### Blueprints
 
-- Precompile Ajv Blueprint validator to avoid CSP issues. ([#1649](https://github.com/WordPress/wordpress-playground/pull/1649))
+-  Precompile Ajv Blueprint validator to avoid CSP issues. ([#1649](https://github.com/WordPress/wordpress-playground/pull/1649))
 
 ### Internal
 
-- Reinstantiate Changelog generation in GitHub CI. ([#1657](https://github.com/WordPress/wordpress-playground/pull/1657))
+-  Reinstantiate Changelog generation in GitHub CI. ([#1657](https://github.com/WordPress/wordpress-playground/pull/1657))
 
 ### Various
 
-- Rollback artifact creation to enable downloading a pre-built package …. ([#1624](https://github.com/WordPress/wordpress-playground/pull/1624))
-- Update WordPress packages. ([#1672](https://github.com/WordPress/wordpress-playground/pull/1672))
-- Update `ws` package version to fix DOS vulnerability. ([#1635](https://github.com/WordPress/wordpress-playground/pull/1635))
+-  Rollback artifact creation to enable downloading a pre-built package …. ([#1624](https://github.com/WordPress/wordpress-playground/pull/1624))
+-  Update WordPress packages. ([#1672](https://github.com/WordPress/wordpress-playground/pull/1672))
+-  Update `ws` package version to fix DOS vulnerability. ([#1635](https://github.com/WordPress/wordpress-playground/pull/1635))
 
 ### Contributors
 
 The following contributors merged PRs in this release:
 
 @adamziel @bgrgicak @brandonpayton @PiotrPress
 
-
-## [v0.9.27] (2024-07-29) 
+## [v0.9.27] (2024-07-29)
 
 ### Enhancements
 
-- Support offline mode after the first Playground page load. ([#1643](https://github.com/WordPress/wordpress-playground/pull/1643))
+-  Support offline mode after the first Playground page load. ([#1643](https://github.com/WordPress/wordpress-playground/pull/1643))
 
 ### Devrel
 
-- Remove puzzle app package. ([#1642](https://github.com/WordPress/wordpress-playground/pull/1642))
+-  Remove puzzle app package. ([#1642](https://github.com/WordPress/wordpress-playground/pull/1642))
 
 ### PHP WebAssembly
 
-- Cache Playground assets to enable offline support. ([#1535](https://github.com/WordPress/wordpress-playground/pull/1535))
-- Rotate PHP runtime after runtime crash. ([#1628](https://github.com/WordPress/wordpress-playground/pull/1628))
-- Throw error when PHP run() receives no code to run. ([#1646](https://github.com/WordPress/wordpress-playground/pull/1646))
+-  Cache Playground assets to enable offline support. ([#1535](https://github.com/WordPress/wordpress-playground/pull/1535))
+-  Rotate PHP runtime after runtime crash. ([#1628](https://github.com/WordPress/wordpress-playground/pull/1628))
+-  Throw error when PHP run() receives no code to run. ([#1646](https://github.com/WordPress/wordpress-playground/pull/1646))
 
 ### Contributors
 
 The following contributors merged PRs in this release:
 
 @adamziel @bgrgicak @brandonpayton
 
-
 ## [v0.9.26] (2024-07-22)
 
 ### Blueprints

packages/playground/website/src/components/browser-chrome/index.tsx

@@ -3,13 +3,16 @@ import css from './style.module.css';
 import AddressBar from '../address-bar';
 import { close } from '@wordpress/icons';
 import classNames from 'classnames';
+import { OpenSiteManagerButton } from '../open-site-manager-button';
 
 interface BrowserChromeProps {
  children?: React.ReactNode;
  toolbarButtons?: Array<React.ReactElement | false | null>;
  url?: string;
  showAddressBar?: boolean;
  onUrlChange?: (url: string) => void;
+ hideToolbar?: boolean;
+ className?: string;
 }
 
 export default function BrowserChrome({
@@ -18,6 +21,8 @@ export default function BrowserChrome({
  onUrlChange,
  showAddressBar = true,
  toolbarButtons,
+ hideToolbar,
+ className,
 }: BrowserChromeProps) {
  const addressBarClass = classNames(css.addressBarSlot, {
  [css.isHidden]: !showAddressBar,
@@ -43,20 +48,42 @@ export default function BrowserChrome({
  [css.isHidden]: noticeHidden,
  });
 
+ /**
+ * Temporary feature flag to enable the site manager
+ * while using browser storage.
+ *
+ * TODO: Remove this once the site manager supports all storage options.
+ */
+ const query = new URLSearchParams(window.location.search);
+ const showSiteManager = query.get('storage') === 'browser';
+
  return (
- <div className={wrapperClass} data-cy="simulated-browser">
- <div className={css.window}>
- <header className={css.toolbar} aria-label="Playground toolbar">
+ <div
+ className={`${wrapperClass} ${className}`}
+ data-cy="simulated-browser"
+ >
+ <div className={`${css.window} browser-chrome-window`}>
+ <header
+ className={`${css.toolbar} ${
+ showSiteManager ? css.hasSiteManager : ''
+ } ${hideToolbar ? css.toolbarHidden : ''}`}
+ aria-label="Playground toolbar"
+ >
  <div className={css.windowControls}>
- <div
- className={`${css.windowControl} ${css.isNeutral}`}
- ></div>
- <div
- className={`${css.windowControl} ${css.isNeutral}`}
- ></div>
- <div
- className={`${css.windowControl} ${css.isNeutral}`}
- ></div>
+ {showSiteManager && <OpenSiteManagerButton />}
+ {!showSiteManager && (
+ <>
+ <div
+ className={`${css.windowControl} ${css.isNeutral}`}
+ ></div>
+ <div
+ className={`${css.windowControl} ${css.isNeutral}`}
+ ></div>
+ <div
+ className={`${css.windowControl} ${css.isNeutral}`}
+ ></div>
+ </>
+ )}
  </div>
 
  <div className={addressBarClass}>