Skip to content

Polish PHP snippet run UI#3638

Merged
adamziel merged 1 commit into
trunkfrom
codex/php-snippet-run-polish
May 14, 2026
Merged

Polish PHP snippet run UI#3638
adamziel merged 1 commit into
trunkfrom
codex/php-snippet-run-polish

Conversation

@adamziel
Copy link
Copy Markdown
Collaborator

What changed

  • Keep the Run button clickable while a snippet is already running and queue one follow-up run instead of dropping the click.
  • Show the contextual shortcut directly in the Run button: Cmd+Enter on Apple platforms, Ctrl+Enter elsewhere.
  • Remove the separate progress bar below snippets; runtime/setup progress stays in the Run button text and percent.
  • Stop forcing a default "Loading" label on every click before runtime progress is known.
  • Use light result styling during output refreshes so the refreshed result never flashes to the dark panel.
  • Split the footer into two links: "PHP Code Snippet" links to the demo page, and "WordPress Playground" links to wordpress.org/playground.

Testing

  • PATH=/usr/local/opt/node@22/bin:$PATH corepack npm run format:uncommitted
  • PATH=/usr/local/opt/node@22/bin:$PATH npx nx lint playground-website
  • PATH=/usr/local/opt/node@22/bin:$PATH npx playwright test --config=packages/playground/website/playwright/playwright.config.ts e2e/php-code-snippet.spec.ts --project=chromium -g "renders all snippets|first Run boots|queues clicks|Ctrl\\+Enter|output refresh|Run button shows progress"

The targeted tests pass. The local Vite dev server still logs the existing isomorphic-git/src/... dependency-scan errors from storage imports during Playwright startup, but they did not affect these targeted snippet UI tests.

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Note

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

Polishes the <php-snippet> embed UI by keeping the Run button interactive (queuing a single follow-up run), surfacing the keyboard shortcut inside the button, removing the secondary progress bar, lightening output styling, and splitting the footer credit into two distinct links.

Changes:

  • Replaced the separate .progress bar with the existing run-button progress text/percent and reworked busy state to use aria-busy instead of disabling the button.
  • Added click queueing via _rerunRequested so an in-flight run triggers exactly one re-run, and added a .run-shortcut element showing Cmd/Ctrl+Enter based on platform.
  • Lightened .output panel styling, updated the flash keyframes, split the footer into two anchor links, and updated Playwright tests to match the new DOM/behavior.

Reviewed changes

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

File Description
packages/playground/website/public/php-code-snippet.js Component DOM/CSS/behavior changes: removed .progress, added run shortcut label, queueing logic, lighter output styling, split footer links.
packages/playground/website/playwright/e2e/php-code-snippet.spec.ts Updated tests to assert button-based progress, the new .run-shortcut, queued click behavior, light output styling, and two-anchor footer.

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

if (btn.disabled || this._isRunning) {
if (this._isRunning) {
this._rerunRequested = true;
this._setRunButtonProgress('Queued', 100);
if (btn.disabled || this._isRunning) {
if (this._isRunning) {
this._rerunRequested = true;
this._setRunButtonProgress('Queued', 100);
Comment on lines 52 to 54
await expect(snippet.locator('.powered-by')).toContainText(
'PHP Code Snippet powered by WordPress Playground'
);
Comment on lines +984 to +988
const platform =
navigator.userAgentData && navigator.userAgentData.platform
? navigator.userAgentData.platform
: navigator.platform || '';
return /mac|iphone|ipad|ipod/i.test(platform) ? 'Cmd+Enter' : 'Ctrl+Enter';
@adamziel adamziel merged commit a86340b into trunk May 14, 2026
54 checks passed
@adamziel adamziel deleted the codex/php-snippet-run-polish branch May 14, 2026 14:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants