Close Playground Manager by default (#1831)

## Motivation for the change, related issues

Users are accustomed to seeing WordPress fill most of the page when
loading WordPress Playground, and after we launched the Playground
Manager, we received feedback indicating it might be better to leave it
closed by default.

We are concerned that users won't be able to find the button to open the
Playground Manager, but we can work to make that button clearer in a
separate PR.

Closes #1815

## Implementation details

We update the redux `siteManagerIsOpen` state default to `false` while
preserving specific reasons it should be false, even if the overall
default is changed back to `true`.

## Testing Instructions (or ideally a Blueprint)

- CI
- Run `npm run dev`, open Playground web app in a desktop browser,
confirm that the Playground Manager UI is closed.

packages/playground/website/playwright/e2e/website-ui.spec.ts

@@ -14,7 +14,7 @@ test('should reflect the URL update from the navigation bar in the WordPress sit
 }) => {
 	await website.goto('./?url=/wp-admin');
 
-	await website.expandSiteView();
+	await website.ensureSiteViewIsExpanded();
 
 	await expect(website.page.locator('input[value="/wp-admin/"]')).toHaveValue(
 		'/wp-admin/'
@@ -24,6 +24,7 @@ test('should reflect the URL update from the navigation bar in the WordPress sit
 test('should switch between sites', async ({ website }) => {
 	await website.goto('./');
 
+	await website.ensureSiteManagerIsOpen();
 	await website.openNewSiteModal();
 
 	const newSiteName = await website.page
@@ -111,13 +112,16 @@ test('should display networking as inactive by default', async ({
 }) => {
 	await website.goto('./');
 
+	await website.ensureSiteManagerIsOpen();
+
 	await expect(await website.hasNetworkingEnabled()).toBeFalsy();
 });
 
 test('should display networking as active when networking is enabled', async ({
 	website,
 }) => {
 	await website.goto('./?networking=yes');
+	await website.ensureSiteManagerIsOpen();
 	await expect(await website.hasNetworkingEnabled()).toBeTruthy();
 });
 

packages/playground/website/playwright/website-page.ts

@@ -21,9 +21,22 @@ export class WebsitePage {
 		return response;
 	}
 
-	async expandSiteView() {
+	async ensureSiteManagerIsOpen() {
+		const siteManagerHeading = this.page.getByText('Your Playgrounds');
+		if (!(await siteManagerHeading.isVisible({ timeout: 5000 }))) {
+			await this.page.getByLabel('Open Site Manager').click();
+		}
+		expect(await siteManagerHeading.isVisible()).toBeTruthy();
+	}
+
+	async ensureSiteViewIsExpanded() {
 		const openSiteButton = this.page.locator('div[title="Open site"]');
-		await openSiteButton.click();
+		if (await openSiteButton.isVisible({ timeout: 5000 })) {
+			await openSiteButton.click();
+		}
+
+		const siteManagerHeading = this.page.getByText('Your Playgrounds');
+		expect(await siteManagerHeading.isVisible()).toBeFalsy();
 	}
 
 	async openNewSiteModal() {
@@ -53,6 +66,7 @@ export class WebsitePage {
 	}
 
 	async openForkPlaygroundSettings() {
+		await this.ensureSiteManagerIsOpen();
 		const editSettingsButton = this.page.locator(
 			'button.components-button',
 			{

packages/playground/website/src/lib/state/redux/slice-ui.ts

@@ -23,19 +23,28 @@ const isEmbeddedInAnIframe = window.self !== window.top;
 // @TODO: Centralize these breakpoint sizes.
 const isMobile = window.innerWidth < 875;
 
+const shouldOpenSiteManagerByDefault = false;
+
 const initialState: UIState = {
 	activeModal:
 		query.get('modal') === 'mount-markdown-directory'
 			? 'mount-markdown-directory'
 			: null,
 	offline: !navigator.onLine,
-	// Open site manager for direct playground.wordpress.net visitors,
-	// unless they specifically request seamless mode.
-	// Don't default to the site manager on mobile, as that would mean
-	// seeing something that's not Playground filling your entire screen –
-	// quite a confusing experience.
+	// NOTE: Please do not eliminate the cases in this siteManagerIsOpen expression,
+	// even if they seem redundant. We may experiment which toggling the manager
+	// to be open by default or closed by default, and we do not want to lose
+	// specific reasons for the manager to be closed.
 	siteManagerIsOpen:
-		query.get('mode') !== 'seamless' && !isEmbeddedInAnIframe && !isMobile,
+		shouldOpenSiteManagerByDefault &&
+		// The site manager should not be shown at all in seamless mode.
+		query.get('mode') !== 'seamless' &&
+		// We do not expect to render the Playground app UI in an iframe.
+		!isEmbeddedInAnIframe &&
+		// Don't default to the site manager on mobile, as that would mean
+		// seeing something that's not Playground filling your entire screen –
+		// quite a confusing experience.
+		!isMobile,
 };
 
 const uiSlice = createSlice({