diff --git a/packages/playground/personal-wp/README.md b/packages/playground/personal-wp/README.md index 8ed37d748fc..ee306b245c8 100644 --- a/packages/playground/personal-wp/README.md +++ b/packages/playground/personal-wp/README.md @@ -93,6 +93,21 @@ Response: Blueprint URLs must be `https:`, `data:`, or local `http:` URLs. Dependent tabs cannot install blueprints and will return an error result. +#### Open Site Tools + +Use `personal-wp-open-site-tools` to ask Personal Playground to open the Site +Tools panel. + +```js +window.parent.postMessage( + { + type: 'relay', + relayType: 'personal-wp-open-site-tools', + }, + '*' +); +``` + ### Offline Support Works as a Progressive Web App (PWA) for offline use. Install it on your device for a native app-like experience. diff --git a/packages/playground/personal-wp/playwright/e2e/smoke.spec.ts b/packages/playground/personal-wp/playwright/e2e/smoke.spec.ts index f65a1ad45f0..7311a43e204 100644 --- a/packages/playground/personal-wp/playwright/e2e/smoke.spec.ts +++ b/packages/playground/personal-wp/playwright/e2e/smoke.spec.ts @@ -19,14 +19,32 @@ test('should apply a blueprint passed via URL hash', async ({ website }) => { await expect(website.page).toHaveURL(/sample-page/); }); -test('should display the seamless viewport and Site Tools latch', async ({ +test('should display the wp-admin Site Tools admin bar item', async ({ website, + wordpress, }) => { - await website.goto('./'); + await website.goto('./wp-admin/'); await expect( website.page.locator('.playground-viewport:visible') ).toBeVisible(); await expect( - website.page.getByRole('button', { name: /Open Site Tools/ }) + website.page.getByRole('button', { name: 'Open Site Tools' }) + ).toBeHidden(); + await expect( + wordpress.getByRole('link', { name: 'Open Site Tools' }) + ).toBeVisible(); +}); + +test('should open Site Tools from the wp-admin admin bar item', async ({ + website, + wordpress, +}) => { + await website.goto('./wp-admin/'); + await website.ensureSiteToolsIsClosed(); + + await wordpress.getByRole('link', { name: 'Open Site Tools' }).click(); + + await expect( + website.page.getByRole('button', { name: 'Close Site Tools' }) ).toBeVisible(); }); diff --git a/packages/playground/personal-wp/src/components/playground-viewport/index.tsx b/packages/playground/personal-wp/src/components/playground-viewport/index.tsx index a1e5e3b9271..650bdf27520 100644 --- a/packages/playground/personal-wp/src/components/playground-viewport/index.tsx +++ b/packages/playground/personal-wp/src/components/playground-viewport/index.tsx @@ -61,6 +61,7 @@ function SeamlessViewport({ siteSlug }: { siteSlug: string }) { clientInfo?.mainTabStatus ?? (isDependentMode ? 'missing' : 'connected'); const hasLocalRuntimeClient = !isDependentMode && !!playground; + const showViewportLatch = !siteManagerIsOpen && !isWpAdminUrl(url); const [installingBlueprint, setInstallingBlueprint] = useState< string | null @@ -230,6 +231,11 @@ function SeamlessViewport({ siteSlug }: { siteSlug: string }) { ); if (installBlueprintMessage) { void installBlueprintFromRelay(event, installBlueprintMessage); + return; + } + + if (isOpenSiteToolsMessage(relayValidation.data)) { + dispatch(setSiteManagerOpen(true)); } } window.addEventListener('message', handleMessage); @@ -239,6 +245,7 @@ function SeamlessViewport({ siteSlug }: { siteSlug: string }) { }, [ applyBlueprint, applyBlueprintInMainTab, + dispatch, hasLocalRuntimeClient, isDependentMode, siteSlug, @@ -331,7 +338,7 @@ function SeamlessViewport({ siteSlug }: { siteSlug: string }) {