[website] New Dock UI review

This issue will centralize all feedback to the new Dock UI from the WordPress Playground Website. The new UI aims to simplify the user experience of the WordPress Playground website.

The Dock UI makes the experience consistent between functionalities, compared to the previous UI, but still evolving, and the goal of this issue is to improve this experience. So feel free to add comments with feedback for improvements and possible bugs with the following information

Suggestion/Bug description
Steps to reproduce
Screenshots/videos
Browser and OS

Preview environment: https://animated-lavender-sun.wpcloudstation.dev/

When the user edits a blueprint on mobile, the editor sees a full-page view. When the user runs a blueprint, no feedback is provided. As a user, I don't know whether the operation was successful.

One alternative is to add a message to the top of the blueprint editor, notifying the user that the operation succeeded:

Browser: Chrome 150, MacOS

✅ fixed

The notification in the Blueprint editor blends in with the UI; I would like it to have better visual differentiation, a colorful icon, or a light background color so the message stands out.

Steps to reproduce:

Open the blueprint editor
Click on the export dropdown
Export a blueprint
Check the message at the top of the editor

The error pop-up stacks on top of other modals. When a user runs a blueprint that encounters an error, a pop-up with error details appears over the blueprint editor. In this scenario, I suggest focusing on the error message and closing the blueprint editor modal. This is not a critical item; I would also like to hear other people's opinions about it.

Steps to reproduce:

Open the blueprint editor
Add a non-existing WordPress version, for example, 7.5
Check that the modal shows up

Another related item: I would make the error modal box corners match the rounded style of the new modal design.

When the user gets an error message and closes it, the loading keeps giving the impression that something is still loading. It would be good to show a different screen telling the user to fix the blueprint or load something different.

loading-page.mp4

steps to reproduce

Open a blueprint with an error
Select Reload page
Close the modal
Check the loading

✅ Fixed

It is not possible to scroll through the blueprints gallery. When the user opens the blueprint gallery, 42 blueprints are listed, but it is not possible to scroll to see all blueprints available

blueprint-gallery-scroll.mp4

The corners of the modal that has a scroll lose the rounded edges:

✅ Fixed

The closing modal on mobile gets out of place on a few pages:

File browser modal:

Blueprint modal with saved playground:

✅ FIXED

On mobile, the buttons on the blueprint editor stack vertically; to save vertical space, I would add browse files and export side by side:

If I click on Delete for the current workspace, the playground basically resets to a fresh install of the template (but it's not very intuitive and I don't know what template it will load). Maybe adding some more info in the confirmation model about what the destructive action will be followed by can make it more clear?

https://github.com/user-attachments/assets/0ac12e3a-abb4-457f-bdb6-4d5c3fc13d2c
If I change the WP version from the Site Settings, I get prompted to create a fresh playground from this. I think it is a bit confusing because of two things:

the fresh playground open in the same tab so you "lose" the current website. You can find it in the autosaves, but that's not clear. It's also not clear what happens with the changes you made to the playground, whether it stays in the fresh playground or the new one is built from scratch/template
once I click on "create a fresh playground", the modal stays open and I can click on apply changes (without any actual changes). It closes automatically after the autosave is complete, so maybe it makes sense to minimize the modal and show only the spinner with autosave, until it completes and hides.

A bit unrelated to this flow, but still in the same area: the modal has an active submit button for apply changes from the first popup, even though no changes will be applied. Maybe it can benefit a disabled state for more clarity.

https://github.com/user-attachments/assets/bd62836f-c739-403e-b5a7-948c14d6eec1
In this recording multiple weird things happened:

After I renamed and saved my workspace, the save buttons disappeared from further openings of that menu
When I changed the PHP version, the page changed to homepage from the Hello from Wordpress Playground. I think it should stay on the same page/blog post, this is what I expected.

Many times (but I couldn't figure out exactly the same step sequence or whether it's consistent) I got logged out from the wp admin after I saved/reloaded another workspace, and I had no clear way of logging back in to the admin, as /wp-admin after the current URL is not working.

The playground selector might be much more intuitive if it would show a small printscreen of what that playground looks like (ideally from the page/post where the playground was actually saved/autosaved from). Having the possibility to rename it is great, it makes it intuitive like that, but if you are not very explicit with the names it can still be confusing.

@fellyph

Thank you so much for all the testing @fellyph @tibiii ❤️ Here's where I am with fixes:

When the user runs a blueprint, no feedback is provided. #4092 (comment)

Partially addressed. The run flow now has busy state, fresh-site copy, and closes/opens the resulting Playground, but there is still no explicit success notice at the top of the Blueprint editor.

The error pop-up stacks on top of other modals. #4092 (comment)

Addressed. Failed Blueprint runs no longer stack the error over the Blueprint editor, and the error modal now uses the rounded Dock-style sheet.

the loading keeps giving the impression that something is still loading. #4092 (comment)

Addressed, but by changing the flow: the failed Blueprint error is now non-dismissible and forces a recovery action. The user must click Return, Start new, or Edit Blueprint; simply closing the error and going back is not implemented.

It is not possible to scroll through the blueprints gallery. #4092 (comment)

Addressed. The Blueprint gallery/new-playground pane is scrollable on trunk.

The corners of the modal that has a scroll lose the rounded edges #4092 (comment)

Addressed. Scrollable modal content now preserves the rounded Dock-style container.

The closing modal on mobile gets out of place on a few pages #4092 (comment)

Addressed by the mobile Dock pane header/layout updates.

the buttons on the blueprint editor stack vertically #4092 (comment)

Addressed. Browse files and Export are grouped together in the mobile Blueprint editor header.

I get prompted to create a fresh playground from this. #4092 (comment)

Mostly addressed. The settings footer now explains that changing WordPress version creates a fresh Playground, keeps the old one in Saved/Recent Playgrounds, disables irrelevant Apply actions, and prevents duplicate submission while pending.

The notification in the Blueprint editor is blending in with the UI #4092 (comment)

Still needs addressing. The export/copy notice still uses the standard notice treatment and does not stand out much.

the playground basically resets to a fresh install of the template #4092 (comment)

Still needs addressing. The delete confirmation still does not explain what happens after deleting the current Playground.

After I renamed and saved my workspace, the save buttons disappeared #4092 (comment)

Unclear / may still need product follow-up. Current behavior hides save actions once the Playground is already saved, which may be intentional, but the UI can still be confusing.

When I changed the PHP version, the page changed to homepage #4092 (comment)

Still needs addressing. The PHP-version restart path still boots back to / instead of preserving the current post/page URL.

I got logged out from the wp admin after I saved/reloaded another workspace #4092 (comment)

Still needs addressing or a narrower repro. I did not find a trunk fix for unexpected admin logout after switching/reloading saved Playgrounds.

The playground selector might be much more intuitive if it would show a small printscreen #4092 (comment)

Still needs addressing on trunk. Saved Playground thumbnails exist on non-trunk work, but are not merged into origin/trunk.

@tibiii

If I change the WP version from the Site Settings, I get prompted to create a fresh playground from this

What would a more useful experience look like @tibiii? I'm a bit hesitant to make it change the WP version on the current Playground since I expect compatibility mismatches on upgrading and I don't know a good way of downgrading.

Blueprint editor: surface action feedback as a snackbar

The WordCamp Companion is not loading:

These 15 blueprints fail while fetching a git:directory resource.
Fourteen fail at step 2; the GitHub-theme example fails at step 8.

AI Assistant
Apiary Press
Chat to Blog
Collect Posts from the Web
Cookbook
Flight Log
Learn WordPress
Loading, activating, and configuring a theme from a GitHub repository
Memex
My WordPress
Personal CRM
Playground Builder
Travel App
WordCamp Companion
Wordopedia

@adamziel

If I change the WP version from the Site Settings, I get prompted to create a fresh playground from this

What would a more useful experience look like @tibiii? I'm a bit hesitant to make it change the WP version on the current Playground since I expect compatibility mismatches on upgrading and I don't know a good way of downgrading.

@adamziel I thought a bit about this and you are right on the mismatches, upgrading or downgrading might make the playground unresponsive or worse, silently fail some plugins/parts of the theme. Maybe we can allow the user to choose which way to go, based on their needs or what they want to test, but ideally with a good rollback in case things go wrong:

Change WordPress version to 6.8

Create a fresh Playground (recommended)

Try changing this Playground (experimental)

If this gets implemented, having a way to go back to the previous (working) WP core version I think it's vital, so there should be a "rollback" button or a WP version selector somewhere in the sticky UI bar. Ideally, if changing the core version would completely break the website (a 5xx error), it should automatically revert to what was working before. As a disclaimer, I haven't had a chance to look into the code yet, though I imagine this is probably quite complex.

What I think it's a bit confusing now is that changing a "Site Setting" actually creates a new one instead of modifying the current one. Maybe just changing the wording to be explicit about what actually happens is a good first step.

@fellyph

@fellyph These problems are mostly caused by lacking CORS proxy on the testing site. I've just confirmed the WordCamp companion and WordoPedia work on the local dev server.

[Website] Explain what happens after deleting the active Playground

The playground selector might be much more intuitive if it would show a small printscreen #4092 (comment)

Done!

The notification in the Blueprint editor is blending in with the UI #4092 (comment)

I've addressed that one, as well.

Still needs addressing. The delete confirmation still does not explain what happens after deleting the current Playground.

While far from perfect, this solves it pretty effectively: #4187

I got logged out from the wp admin after I saved/reloaded another workspace #4092 (comment)

I'm exploring a fix in #4185. This isn't new in the DockUI, this issues was always there—it's just more prominent now.

After I renamed and saved my workspace, the save buttons disappeared #4092 (comment)

Fix merged in #4192

I'm deploying the DockUI now – it seems so much more useful than the previous UI so let's get it out there while we wrap up the remaining threads and product conversations here. The largest blockers seems to be resolved by now.

[Website] Don't delete the Playground you're currently in (WordPress#…

All issues were closed, so I will close this item.

Navigation Menu

Repository navigation

[website] New Dock UI review #4092

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[website] New Dock UI review #4092

Description

Activity

fellyph commented on Jul 16, 2026

fellyph commented on Jul 16, 2026

fellyph commented on Jul 16, 2026

fellyph commented on Jul 16, 2026

fellyph commented on Jul 16, 2026

fellyph commented on Jul 16, 2026

fellyph commented on Jul 16, 2026

fellyph commented on Jul 16, 2026

tibiii commented on Jul 19, 2026

tibiii commented on Jul 19, 2026

tibiii commented on Jul 19, 2026

tibiii commented on Jul 19, 2026

tibiii commented on Jul 19, 2026

adamziel commented on Jul 21, 2026

adamziel commented on Jul 21, 2026

fellyph commented on Jul 23, 2026

fellyph commented on Jul 23, 2026

tibiii commented on Jul 23, 2026

adamziel commented on Jul 28, 2026

adamziel commented on Jul 29, 2026

adamziel commented on Jul 29, 2026

fellyph commented on Sep 1, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions