diff --git a/packages/playground/website/playwright/e2e/website-ui.spec.ts b/packages/playground/website/playwright/e2e/website-ui.spec.ts index 405bd396c7..7b7636a1e2 100644 --- a/packages/playground/website/playwright/e2e/website-ui.spec.ts +++ b/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,6 +112,8 @@ test('should display networking as inactive by default', async ({ }) => { await website.goto('./'); + await website.ensureSiteManagerIsOpen(); + await expect(await website.hasNetworkingEnabled()).toBeFalsy(); }); @@ -118,6 +121,7 @@ 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(); }); diff --git a/packages/playground/website/playwright/website-page.ts b/packages/playground/website/playwright/website-page.ts index b680ba2100..5eb95f8cd9 100644 --- a/packages/playground/website/playwright/website-page.ts +++ b/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', { diff --git a/packages/playground/website/src/lib/state/redux/slice-ui.ts b/packages/playground/website/src/lib/state/redux/slice-ui.ts index b10cb1d62d..356ff5f882 100644 --- a/packages/playground/website/src/lib/state/redux/slice-ui.ts +++ b/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({