Add site manager view and sidebar

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}>

packages/playground/website/src/components/browser-chrome/style.module.css

@@ -37,7 +37,7 @@ body.is-embedded .fake-window-wrapper {
 
 .wrapper {
 	height: 100%;
-	transition: padding ease-in 0.25s;
+	transition: padding ease-in-out 0.2s;
 }
 
 .wrapper.has-small-window {
@@ -58,7 +58,6 @@ body.is-embedded .fake-window-wrapper {
 	max-width: 100vw;
 	width: 100%;
 	height: 100%;
-	border-radius: 0;
 }
 
 .window {
@@ -67,7 +66,7 @@ body.is-embedded .fake-window-wrapper {
 	margin: 0 auto;
 	overflow: hidden;
 
-	animation: pulse 6s ease-in infinite;
+	animation: pulse 6s ease-in-out infinite;
 }
 
 @keyframes pulse {
@@ -103,6 +102,13 @@ body.is-embedded .fake-window-wrapper {
 	height: 50px;
 	flex-direction: row;
 	align-items: center;
+	max-height: 100px;
+	overflow: hidden;
+	transition: max-height 0.2s ease-in-out;
+}
+
+.toolbar-hidden {
+	max-height: 0;
 }
 
 .toolbar-buttons {
@@ -117,7 +123,7 @@ body.is-embedded .fake-window-wrapper {
 	margin-right: auto;
 	margin-left: 100px;
 	min-width: 200px;
-	width: 100%;
+	width: calc(100% - 36px);
 	opacity: 1;
 	transition: opacity ease-in 0.25s;
 }
@@ -188,6 +194,15 @@ body.is-embedded .fake-window-wrapper {
 	.window-controls {
 		display: none;
 	}
+	.has-site-manager {
+		.window-controls {
+			display: flex;
+			align-items: center;
+		}
+		.address-bar-slot {
+			margin-left: 36px;
+		}
+	}
 }
 
 @media (max-width: 902px) {
@@ -201,7 +216,7 @@ body.is-embedded .fake-window-wrapper {
 }
 
 @media (max-width: 812px) {
-	.toolbar {
+	.toolbar:not(.toolbar-hidden) {
 		padding: 10px;
 		flex-direction: column;
 		height: auto;

packages/playground/website/src/components/error-report-modal/index.tsx

@@ -119,7 +119,11 @@ export function ErrorReportModal(props: { blueprint: Blueprint }) {
 				<>
 					We were unable to submit the error report. Please try again
 					or open an{' '}
-					<a href="https://github.com/WordPress/wordpress-playground/issues/">
+					<a
+						href="https://github.com/WordPress/wordpress-playground/issues/"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
 						issue on GitHub.
 					</a>
 				</>
@@ -128,7 +132,11 @@ export function ErrorReportModal(props: { blueprint: Blueprint }) {
 			return (
 				<>
 					Your report has been submitted to the{' '}
-					<a href="https://wordpress.slack.com/archives/C06Q5DCKZ3L">
+					<a
+						href="https://wordpress.slack.com/archives/C06Q5DCKZ3L"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
 						Making WordPress #playground-logs Slack channel
 					</a>{' '}
 					and will be reviewed by the team.

packages/playground/website/src/components/open-site-manager-button/index.tsx

@@ -0,0 +1,34 @@
+import css from './style.module.css';
+
+import { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/components';
+
+function SiteManagerIcon() {
+	return (
+		<svg
+			width="14"
+			height="14"
+			viewBox="0 0 14 14"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M1.99967 1.58301H4.49967C4.72979 1.58301 4.91634 1.76956 4.91634 1.99967V4.49967C4.91634 4.72979 4.72979 4.91634 4.49967 4.91634H1.99967C1.76956 4.91634 1.58301 4.72979 1.58301 4.49967V1.99967C1.58301 1.76956 1.76956 1.58301 1.99967 1.58301ZM0.333008 1.99967C0.333008 1.0792 1.0792 0.333008 1.99967 0.333008H4.49967C5.42015 0.333008 6.16634 1.0792 6.16634 1.99967V4.49967C6.16634 5.42015 5.42015 6.16634 4.49967 6.16634H1.99967C1.0792 6.16634 0.333008 5.42015 0.333008 4.49967V1.99967ZM9.49967 1.58301H11.9997C12.2298 1.58301 12.4163 1.76956 12.4163 1.99967V4.49967C12.4163 4.72979 12.2298 4.91634 11.9997 4.91634H9.49967C9.26956 4.91634 9.08301 4.72979 9.08301 4.49967V1.99967C9.08301 1.76956 9.26956 1.58301 9.49967 1.58301ZM7.83301 1.99967C7.83301 1.0792 8.5792 0.333008 9.49967 0.333008H11.9997C12.9201 0.333008 13.6663 1.0792 13.6663 1.99967V4.49967C13.6663 5.42015 12.9201 6.16634 11.9997 6.16634H9.49967C8.5792 6.16634 7.83301 5.42015 7.83301 4.49967V1.99967ZM11.9997 9.08301H9.49967C9.26956 9.08301 9.08301 9.26956 9.08301 9.49967V11.9997C9.08301 12.2298 9.26956 12.4163 9.49967 12.4163H11.9997C12.2298 12.4163 12.4163 12.2298 12.4163 11.9997V9.49967C12.4163 9.26956 12.2298 9.08301 11.9997 9.08301ZM9.49967 7.83301C8.5792 7.83301 7.83301 8.5792 7.83301 9.49967V11.9997C7.83301 12.9201 8.5792 13.6663 9.49967 13.6663H11.9997C12.9201 13.6663 13.6663 12.9201 13.6663 11.9997V9.49967C13.6663 8.5792 12.9201 7.83301 11.9997 7.83301H9.49967ZM1.99967 9.08301H4.49967C4.72979 9.08301 4.91634 9.26956 4.91634 9.49967V11.9997C4.91634 12.2298 4.72979 12.4163 4.49967 12.4163H1.99967C1.76956 12.4163 1.58301 12.2298 1.58301 11.9997V9.49967C1.58301 9.26956 1.76956 9.08301 1.99967 9.08301ZM0.333008 9.49967C0.333008 8.5792 1.0792 7.83301 1.99967 7.83301H4.49967C5.42015 7.83301 6.16634 8.5792 6.16634 9.49967V11.9997C6.16634 12.9201 5.42015 13.6663 4.49967 13.6663H1.99967C1.0792 13.6663 0.333008 12.9201 0.333008 11.9997V9.49967Z"
+				fill="white"
+			/>
+		</svg>
+	);
+}
+
+export function OpenSiteManagerButton() {
+	return (
+		<NavigatorButton
+			path="/manager"
+			aria-label="Open Site Manager"
+			className={css.openSiteManagerButton}
+			iconSize={14}
+			icon={<SiteManagerIcon />}
+		></NavigatorButton>
+	);
+}

packages/playground/website/src/components/open-site-manager-button/style.module.css

@@ -0,0 +1,6 @@
+@media (max-width: 812px) {
+	.open-site-manager-button {
+		position: relative;
+		top: -4px;
+	}
+}

packages/playground/website/src/components/playground-viewport/index.tsx

@@ -17,35 +17,44 @@ interface PlaygroundViewportProps {
 	toolbarButtons?: Array<React.ReactElement | false | null>;
 	children?: React.ReactNode;
 	siteSlug?: string;
+	hideToolbar?: boolean;
+	className?: string;
 }
 
 export const PlaygroundViewport = React.forwardRef<
 	HTMLIFrameElement,
 	PlaygroundViewportProps
->(({ displayMode = 'browser', toolbarButtons }, ref) => {
-	const { playground, currentUrl: url } = usePlaygroundContext();
+>(
+	(
+		{ displayMode = 'browser', toolbarButtons, hideToolbar, className },
+		ref
+	) => {
+		const { playground, currentUrl: url } = usePlaygroundContext();
 
-	if (displayMode === 'seamless') {
-		// No need to boot the playground if seamless.
-		return <JustViewport iframeRef={ref} />;
+		if (displayMode === 'seamless') {
+			// No need to boot the playground if seamless.
+			return <JustViewport iframeRef={ref} />;
+		}
+		return (
+			<BrowserChrome
+				showAddressBar={!!playground}
+				url={url}
+				toolbarButtons={toolbarButtons}
+				onUrlChange={(url) => playground?.goTo(url)}
+				hideToolbar={hideToolbar}
+				className={className}
+			>
+				<JustViewport iframeRef={ref} />
+			</BrowserChrome>
+		);
 	}
-	return (
-		<BrowserChrome
-			showAddressBar={!!playground}
-			url={url}
-			toolbarButtons={toolbarButtons}
-			onUrlChange={(url) => playground?.goTo(url)}
-		>
-			<JustViewport iframeRef={ref} />
-		</BrowserChrome>
-	);
-});
+);
 
 interface JustViewportProps {
 	iframeRef: Ref<HTMLIFrameElement>;
 }
 
-const JustViewport = function LoadedViewportComponent({
+export const JustViewport = function LoadedViewportComponent({
 	iframeRef,
 }: JustViewportProps) {
 	useEffect(() => {

packages/playground/website/src/components/site-manager/icons.tsx

@@ -0,0 +1,75 @@
+export const Logo = (props?: React.SVGProps<SVGSVGElement>) => {
+	return (
+		<svg
+			width="32"
+			height="32"
+			viewBox="0 0 32 32"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			{...props}
+		>
+			<rect
+				width="10.4176"
+				height="10.4176"
+				rx="3.86258"
+				transform="matrix(0.829038 -0.559193 0.838671 0.544639 7.45703 24.1775)"
+				stroke="white"
+				strokeWidth="0.965644"
+			/>
+			<rect
+				width="13.2346"
+				height="13.2346"
+				rx="3.86258"
+				transform="matrix(0.829038 -0.559193 0.838671 0.544639 5.0918 18.9934)"
+				stroke="white"
+				strokeWidth="1.44847"
+			/>
+			<rect
+				width="17.451"
+				height="17.451"
+				rx="3.86258"
+				transform="matrix(0.829038 -0.559193 0.838671 0.544639 1.55371 11.6099)"
+				stroke="white"
+				strokeWidth="1.93129"
+			/>
+		</svg>
+	);
+};
+
+export const TemporaryStorageIcon = (props?: React.SVGProps<SVGSVGElement>) => {
+	return (
+		<svg
+			width="16"
+			height="17"
+			viewBox="0 0 16 17"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			{...props}
+		>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M8 15C4.41015 15 1.5 12.0899 1.5 8.5C1.5 4.91015 4.41015 2 8 2C11.5899 2 14.5 4.91015 14.5 8.5C14.5 12.0899 11.5899 15 8 15ZM0 8.5C0 4.08172 3.58172 0.5 8 0.5C12.4183 0.5 16 4.08172 16 8.5C16 12.9183 12.4183 16.5 8 16.5C3.58172 16.5 0 12.9183 0 8.5ZM9 9.5V4.5H7.5V8H5.5V9.5H9Z"
+				fill="#949494"
+			/>
+		</svg>
+	);
+};
+
+export const WordPressIcon = (props?: React.SVGProps<SVGSVGElement>) => {
+	return (
+		<svg
+			width="20"
+			height="21"
+			viewBox="0 0 20 21"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			{...props}
+		>
+			<path
+				d="M20 10.5C20 4.99 15.51 0.5 10 0.5C4.48 0.5 0 4.99 0 10.5C0 16.02 4.48 20.5 10 20.5C15.51 20.5 20 16.02 20 10.5ZM7.78 15.87L4.37 6.72C4.92 6.7 5.54 6.64 5.54 6.64C6.04 6.58 5.98 5.51 5.48 5.53C5.48 5.53 4.03 5.64 3.11 5.64C2.93 5.64 2.74 5.64 2.53 5.63C4.12 3.19 6.87 1.61 10 1.61C12.33 1.61 14.45 2.48 16.05 3.95C15.37 3.84 14.4 4.34 14.4 5.53C14.4 6.27 14.85 6.89 15.3 7.63C15.65 8.24 15.85 8.99 15.85 10.09C15.85 11.58 14.45 15.09 14.45 15.09L11.42 6.72C11.96 6.7 12.24 6.55 12.24 6.55C12.74 6.5 12.68 5.3 12.18 5.33C12.18 5.33 10.74 5.45 9.8 5.45C8.93 5.45 7.47 5.33 7.47 5.33C6.97 5.3 6.91 6.53 7.41 6.55L8.33 6.63L9.59 10.04L7.78 15.87ZM17.41 10.5C17.65 9.86 18.15 8.63 17.84 6.25C18.54 7.54 18.89 8.96 18.89 10.5C18.89 13.79 17.16 16.74 14.49 18.28C15.46 15.69 16.43 13.08 17.41 10.5ZM6.1 18.59C3.12 17.15 1.11 14.03 1.11 10.5C1.11 9.2 1.34 8.02 1.83 6.91C3.25 10.8 4.67 14.7 6.1 18.59ZM10.13 11.96L12.71 18.94C11.85 19.23 10.95 19.39 10 19.39C9.21 19.39 8.43 19.28 7.71 19.06C8.52 16.68 9.33 14.32 10.13 11.96Z"
+				fill="#ffffff"
+			/>
+		</svg>
+	);
+};