Command Palette: Make admin bar trigger a native group element

[ellatrix]

Trac: https://core.trac.wordpress.org/ticket/64672

Screen.Recording.2026-03-05.at.09.53.12.mov

Summary

Follow-up to #11108. Makes the command palette trigger a native admin bar group element instead of a regular node in root-default, as suggested in review.

• Registers command-palette as its own group under root using add_group(), with the trigger node inside it — this produces a sibling <ul> to root-default and top-secondary
• Converts .quicklinks to display: flex so the three groups lay out naturally: left items, centered command palette, right items
• Both side groups use flex: 1 1 0; min-width: fit-content — equal space when the viewport is wide (perfect centering), but they won't shrink below their content on narrow viewports
• Command palette group uses flex: 0 0 auto between them

Existing float declarations on <li> elements become harmless (floats are ignored on flex items per CSS spec).

Alternative approach

An alternative would be to bypass the node/group API entirely and render the command palette directly in WP_Admin_Bar::_render() as a standalone <button> element — a sibling to the <ul> groups inside .quicklinks. This would give full control over the markup (semantic <button> instead of <a> inside <li> inside <ul>), but requires modifying class-wp-admin-bar.php and hardcoding the element into the admin bar's render method. The group-based approach here is more straightforward since it reuses the existing API and keeps all the command palette logic in admin-bar.php.

Test plan

• Load any wp-admin page: command palette button should appear centered in the admin bar
• Click it: should open the command palette
• Check front-end pages: button should NOT appear
• Resize viewport — left group should push the command palette rightward rather than shrinking
• Test RTL layout
• Test mobile viewport (admin bar collapse behavior)
• Test different color schemes (modern, default)

🤖 Generated with Claude Code

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props wildworks, ellatrix, westonruter, ocean90, annezazu.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[westonruter]

So the command palette is not accessible on mobile. Why shouldn't it be?

[ellatrix]

It's the same as #11108, I don't think I changed anything there. I guess it will have to be added explicitly to the mobile version of the admin bar

[t-hamano]

Thanks for the PR! When I actually saw the center-aligned search bar, I realized it was quite prominent 😅

There are two things that concern me.

1. With several plugins installed, the search bar may become misaligned:
   
2. When I open the editor, you may find the search bar overlapping, which can be a bit confusing:
   

Personally, I think going with #11160 might have the least impact. What do you think? cc @sabernhardt

[ellatrix]

With several plugins installed, the search bar may become misaligned:

I think that's fine, it still looks ok?

When I open the editor, you may find the search bar overlapping, which can be a bit confusing:

What o you mean here? What overlaps what?

Personally, I think going with #11160 might have the least impact. What do you think? cc @sabernhardt

Would need approval from design

[ocean90]

Something that looks like an input/search field but isn't one feels wrong.

When I open the editor, you may find the search bar overlapping, which can be a bit confusing:

What o you mean here? What overlaps what?

They're not overlapping, but there are two of these bars right next to each other.

[t-hamano]

What overlaps what?

I was referring to these two places. There are two search bars close to each other that both trigger the command palette.

[ellatrix]

@t-hamano Isn't that a problem in your PR too? How has it been addressed elsewhere? Or is there a proposal to unify them.

Something that looks like an input/search field but isn't one feels wrong.

@ocean90 It's the same for the editor document bar 🙂

[t-hamano]

Isn't that a problem in your PR too? How has it been addressed elsewhere?

Two approaches have been proposed that do not use a search bar in the first place.

• Toolbar command palette: icon link #11160
• Add command palette trigger button to admin bar #11063

[annezazu]

Personally, I think going with #11160 might have the least impact. What do you think?

Chatting with @mtias about this and a more condensed command‑K control is okay for beta 3 if needed, rather than the search icon. The search icon alone is not enough.