Add Blueprint editor shortcut to the "Start a new Playground" panel by amitraj2203 · Pull Request #3723 · WordPress/wordpress-playground

amitraj2203 · 2026-05-31T09:06:23Z

Motivation for the change, related issues

Users who write blueprints (e.g. with external tools) had no quick way to reach the Blueprint editor from the "Start a new Playground" launch panel. This adds a dedicated shortcut so the editor is discoverable alongside the other launch options.

Closes #3171

Implementation details

Added a "Blueprint editor" button (using the < > code icon) as the last entry in the creationOptions array in SavedPlaygroundsOverlay. Clicking it opens the site manager and sets the section to 'blueprint'.
Added 'blueprint' as a new SiteManagerSection value. In SiteManager, any section that isn't a standard panel (site-details, blueprints, sidebar) is passed to SiteInfoPanel as the initialTab, so the panel opens directly on the matching tab.
SiteInfoPanel accepts an optional initialTab prop that takes precedence over the last-visited tab when choosing which tab to open on mount.
The SiteInfoPanel key includes the active section (${slug}-${section}) so that changing the section remounts the panel — this is what lets initialTab take effect when the site manager is already open on another tab.
Other creation actions (createVanillaSite, previewBlueprint) reset the section back to 'site-details' so a freshly created Playground doesn't inadvertently open on the Blueprint tab.
Adjusted the .creationRow layout (flex: 1 on buttons) so the launch options share rows evenly instead of orphaning the new 7th button on its own line.

Testing Instructions (or ideally a Blueprint)

Open the app and click the "Your Playgrounds" button to open the launch panel.
Verify a "Blueprint editor" button with a < > icon appears in the "Start a new Playground" row.
Click it — the panel should close, the site manager should open, and the Blueprint tab should be active.
Repeat with the site manager already open (e.g. on the Settings tab) — clicking "Blueprint editor" should switch directly to the Blueprint tab.
Repeat with the site manager closed — opening via the button should land on the Blueprint tab.

Copilot

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Adds a discoverable “Blueprint editor” shortcut to the “Start a new Playground” panel, enabling users to jump directly into the Blueprint tab in the Site Manager.

Changes:

Adds a new “Blueprint editor” creation option that sets the preferred SiteInfoPanel tab to blueprint and opens the site manager.
Introduces a Redux-driven remount key (siteInfoPanelKey) and action to force SiteInfoPanel remount when the site manager is already open.
Exposes setSiteLastTab for reuse so the overlay can write the tab preference consistently.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 6 comments.

File	Description
packages/playground/website/src/lib/state/redux/slice-ui.ts	Adds `siteInfoPanelKey` to UI state and a `remountSiteInfoPanel` action to force panel remounts.
packages/playground/website/src/components/site-manager/site-info-panel/index.tsx	Exports `setSiteLastTab` for external callers.
packages/playground/website/src/components/site-manager/index.tsx	Uses `siteInfoPanelKey` in `SiteInfoPanel`’s React `key` to trigger remounts.
packages/playground/website/src/components/saved-playgrounds-overlay/index.tsx	Adds the “Blueprint editor” launch option and hooks it into Site Manager open/remount behavior.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

 	setSiteSlugToSave,
+	remountSiteInfoPanel,
 } from '../../lib/state/redux/slice-ui';
+import { setSiteLastTab } from '../site-manager/site-info-panel';


+			onClick: () => {
+				if (activeSite) {
+					setSiteLastTab(activeSite.slug, 'blueprint');
+				}
+				if (siteManagerIsOpen) {
+					dispatch(remountSiteInfoPanel());
+				}
+				dispatch(setSiteManagerOpen(true));
+				dispatch(setSiteManagerSection('site-details'));
+				onClose();
+			},
+			disabled: false,


 	offline: boolean;
 	siteManagerIsOpen: boolean;
 	siteManagerSection: SiteManagerSection;
+	siteInfoPanelKey: number;


+		remountSiteInfoPanel: (state) => {
+			state.siteInfoPanelKey++;
+		},


 				fullScreenSections ? (
 					<SiteInfoPanel
-						key={activeSite?.slug}
+						key={`${activeSite?.slug}-${siteInfoPanelKey}`}


 						}}
 					>
 						<SiteInfoPanel
+							key={`${activeSite?.slug}-${siteInfoPanelKey}`}


bgrgicak · 2026-06-02T09:05:47Z

Thanks for the PR @amitraj2203!

I've taken a look at the new button, and it's displayed as a new line.

Let's explore some other options, like displaying all buttons in a single line or two lines.

amitraj2203 · 2026-06-02T09:59:31Z

@bgrgicak Thanks, I've updated it in 060d806

Here's how it looks:

Screen.Recording.2026-06-02.at.3.26.41.PM.mov

bgrgicak · 2026-06-02T11:01:34Z

+			onClick: () => {
+				if (activeSite) {
+					setSiteLastTab(activeSite.slug, 'blueprint');
+				}
+				if (siteManagerIsOpen) {
+					dispatch(remountSiteInfoPanel());
+				}
+				dispatch(setSiteManagerOpen(true));
+				dispatch(setSiteManagerSection('site-details'));
+				onClose();
+			},


This seems complex. What would it take to have just this?

dispatch(setSiteManagerOpen(true)); dispatch(setSiteManagerSection('blueprint'));

Hey, totally agree it was overcomplicated! The issue was that TabPanel only reads initialTabName once on mount, so switching to the Blueprint tab externally was tricky. The old approach worked around this by writing to localStorage and force-remounting the panel via a counter which ended up touching way too many files.

Your suggestion made me rethink it. In 1bf3df9 I've added 'blueprint' as a new SiteManagerSection as it makes more sense, the panel remounts when the section changes, and SiteInfoPanel just reads initialTab as a prop. The onClick is now exactly those two dispatches.

Let me know if further changes are required.

bgrgicak · 2026-06-02T11:06:05Z

With Playground autosaving enabled, Blueprints can't be edited anymore, so we will need to start a new temporary Playground to allow users to add Blueprints.
Or it might be better if we allowed users to modify autosaved Playgrounds.

It might be worth addressing this separately from this PR, but as-is autosaving is blocking users from editing Blueprints.

bgrgicak · 2026-06-02T11:11:12Z

 				fullScreenSections ? (
 					<SiteInfoPanel
-						key={activeSite?.slug}
+						key={`${activeSite?.slug}-${siteInfoPanelKey}`}


Why do we need siteInfoPanelKey? From what I could understand, it's used to force an update to the SiteInfo panel, but we shouldn't need this. React should always display the current site info. Is there an underlying bug that prevents React from updating site info?

The SiteInfoPanel key is now ${activeSite.slug}-${activeSiteManagerSection}, so when the section changes from site-details to blueprint, React naturally remounts the panel with initialTab="blueprint"

bgrgicak · 2026-06-03T05:58:24Z

+			const initialTab =
+				activeSiteManagerSection === 'blueprint'
+					? 'blueprint'
+					: undefined;


Why limit it just to blueprint? Could it work with other tabs without adding complexity?

I flipped the logic now in 01dc267, defined the sections that are NOT tab names and anything outside that list is treated as a tab name.

bgrgicak · 2026-06-03T05:59:57Z

 }) {
 	const offline = useAppSelector((state) => state.ui.offline);
 	const dispatch = useAppDispatch();
 	// Load the last active tab for this site


We should update the comment

Done in 153e670

bgrgicak · 2026-06-03T06:02:14Z

 				fullScreenSections ? (
 					<SiteInfoPanel
-						key={activeSite?.slug}
+						key={`${activeSite?.slug}-${activeSiteManagerSection}`}


Do we need the key still now that we have initialTab?

Yes, I think we still need it. initialTab is only read once when the panel mounts (via useState/TabPanel's initialTabName), so if the panel is already open for the same site, changing the prop alone won't switch tabs. The section in the key forces a remount so initialTab actually takes effect for example when the manager is already open on Settings and we pick "Blueprint editor". With key={slug} only, the slug is unchanged so it'd stay on the old tab.
I've also tested this behaviour.

Screen.Recording.2026-06-03.at.6.33.21.PM.mov

bgrgicak

Thank you for simplifying the PR! I left a few more comments, but the PR seems mostly good now.

When you get a chance, please update the PR description to match the new implementation.

…re effectively

amitraj2203 · 2026-06-03T13:09:19Z

When you get a chance, please update the PR description to match the new implementation.

I've updated the PR description now

Add Blueprint editor shortcut to the Launch Playground panel

5aa0d7a

amitraj2203 requested review from a team, bgrgicak and Copilot May 31, 2026 09:06

github-actions Bot added [Package][@wp-playground] Website [Aspect] Browser [Aspect] Website and removed [Package][@wp-playground] Website labels May 31, 2026

Copilot AI reviewed May 31, 2026

View reviewed changes

Update creationButton styles to improve layout and responsiveness

060d806

github-actions Bot added the [Package][@wp-playground] Website label Jun 2, 2026

bgrgicak reviewed Jun 2, 2026

View reviewed changes

amitraj2203 added 2 commits June 2, 2026 20:04

Simplify Blueprint editor button and fix creation row layout

1bf3df9

Reset site manager section when creating or previewing a new Playground

f2f0ca0

bgrgicak reviewed Jun 3, 2026

View reviewed changes

amitraj2203 added 2 commits June 3, 2026 18:00

Refactor initialTab logic in SiteManager to handle active sections mo…

01dc267

…re effectively

Update comment to clarify initial tab loading logic in SiteInfoPanel

153e670

Conversation

amitraj2203 commented May 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Motivation for the change, related issues

Implementation details

Testing Instructions (or ideally a Blueprint)

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

bgrgicak commented Jun 2, 2026

Uh oh!

amitraj2203 commented Jun 2, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amitraj2203 Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bgrgicak commented Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bgrgicak left a comment

Choose a reason for hiding this comment

Uh oh!

amitraj2203 commented Jun 3, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

amitraj2203 commented May 31, 2026 •

edited

Loading

amitraj2203 Jun 2, 2026 •

edited

Loading

bgrgicak commented Jun 2, 2026 •

edited

Loading