Skip to content

[Website] Reuse DropdownMenu for Site Settings actions - #4206

Open
adamziel wants to merge 9 commits into
trunkfrom
adamziel/reuse-site-settings-action-menu
Open

[Website] Reuse DropdownMenu for Site Settings actions#4206
adamziel wants to merge 9 commits into
trunkfrom
adamziel/reuse-site-settings-action-menu

Conversation

@adamziel

@adamziel adamziel commented Jul 29, 2026

Copy link
Copy Markdown
Collaborator

Replaces the Site Settings action menu's hand-rolled buttons with
DropdownMenu, MenuGroup, and MenuItemWithDescription.

All website DropdownMenu uses now go through one wrapper. It supplies Home
and End navigation and a visible inset focus ring. Ordinary choices use
Gutenberg's menu states: black text on a transparent background at rest, then
accent-blue text on the same transparent background on hover. Disabled choices
stay muted and destructive choices stay red.

Site Settings keeps its split-button shape, 20px horizontal menu padding,
descriptions, separators, and responsive placement. Opening a menu focuses its
first available action. An unavailable Apply to this Playground remains in
keyboard navigation so its explanation is reachable without enabling it.

Before and after

Blueprint Export

Desktop

Before After
Blueprint Export menu on desktop before the shared interaction styles Blueprint Export menu on desktop with shared hover and focus styles

Mobile

Before After
Blueprint Export menu on mobile before the shared interaction styles Blueprint Export menu on mobile with shared hover and focus styles

Saved Playground actions

Desktop

Before After
Saved Playground action menu on desktop before the shared interaction styles Saved Playground action menu on desktop with shared hover and focus styles

Mobile

Before After
Saved Playground action menu on mobile before the shared interaction styles Saved Playground action menu on mobile with shared hover and focus styles

Site Settings: Apply is available

Desktop

Before After
Site Settings action menu on desktop before using the shared menu states Site Settings action menu on desktop using the shared hover and focus states

Mobile

Before After
Site Settings action menu on mobile before using the shared menu states Site Settings action menu on mobile using the shared hover and focus states

Site Settings: a fresh Playground is required

Desktop

Before After
Site Settings menu with Apply unavailable on desktop before using the shared menu states Site Settings menu with Apply unavailable on desktop using the shared focus state

Mobile

Before After
Site Settings menu with Apply unavailable on mobile before using the shared menu states Site Settings menu with Apply unavailable on mobile using the shared focus state

Testing

Open the Blueprint Export, Saved Playground actions, and Site Settings menus on
desktop and mobile. Confirm ordinary choices share the same resting, hover, and
focus states. Confirm disabled choices remain muted, Delete remains red, and
the Site Settings menu keeps its spacing and wrapping. Use Arrow Up, Arrow
Down, Home, and End to move through each menu.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

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.

Refactors the Site Settings split-button action menu to use shared WordPress DropdownMenu/MenuGroup components (and MenuItemWithDescription) instead of bespoke buttons/keyboard handling, while aiming to preserve the existing visuals and behavior.

Changes:

  • Replaced the custom Dropdown toggle + hand-rolled menu and keyboard navigation with DropdownMenu + MenuGroup + MenuItemWithDescription.
  • Updated menu styling selectors to target the new component markup (menu item structure, disabled state, focus styles).
  • Kept the unavailable “Apply” action in keyboard navigation, exposing its explanation text.

Reviewed changes

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

File Description
packages/playground/website/src/components/site-manager/site-settings-form/site-settings-action-footer.tsx Swaps custom dropdown/menu implementation for shared menu primitives and updates disabled/selection behavior.
packages/playground/website/src/components/site-manager/site-settings-form/style.module.css Adjusts CSS selectors to style the new DropdownMenu/MenuItemWithDescription DOM structure and focus/disabled states.

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

@adamziel
adamziel force-pushed the adamziel/reuse-site-settings-action-menu branch from c63506b to bc7c48d Compare July 29, 2026 16:08
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