Skip to content

Command Palette: Make admin bar trigger a native group element #11171

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ellatrix wants to merge 3 commits into
base: trunk
Choose a base branch
from
+106 −1
Open

Command Palette: Make admin bar trigger a native group element #11171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9ac1e70
Add command palette trigger button to admin bar (Left-aligned search …
t-hamano Mar 2, 2026
72b011e
Merge branch 'trunk' into 64672-command-palette-admin-bar-searchbar
t-hamano Mar 5, 2026
a5f6582
Command Palette: Make admin bar trigger a native group element
ellatrix Mar 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion src/wp-admin/css/colors/_admin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -500,6 +500,11 @@ ul#adminmenu > li.current > a.current:after {
color: variables.$menu-icon;
}

/* Admin Bar: Command Palette */

#wpadminbar #wp-admin-bar-command-palette-trigger .ab-item {
background: variables.$menu-submenu-background;
}

/* Admin Bar: search */

Expand Down Expand Up @@ -661,7 +666,7 @@ div#wp-responsive-toggle a:before {
}

.wp-responsive-open div#wp-responsive-toggle a {
// ToDo: make inset border
// ToDo: make inset border;
Copy link

@sabernhardt sabernhardt Mar 9, 2026

Choose a reason for hiding this comment

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

Unrelated change.

I do not even find a #wp-responsive-toggle anywhere, even in code history as of r26402, so the two rulesets probably can be removed entirely (later).

Copy link
Member Author

@ellatrix ellatrix Mar 10, 2026

Choose a reason for hiding this comment

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

I just built on top of Aki's PR, I can remove it https://github.com/WordPress/wordpress-develop/pull/11108/changes#diff-4e38d3d83e223f96e67e1cf68c5b2faa0abbd3c068a2405cf0e712dd8edcf8e9R669

border-color: transparent;
background: variables.$menu-highlight-background;
}
Expand Down
5 changes: 5 additions & 0 deletions src/wp-admin/css/colors/modern/colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,8 @@ $highlight-color: #3858e9;

$custom-welcome-panel: "false"
);

// Override the command palette background color for this scheme
#wpadminbar #wp-admin-bar-command-palette-trigger .ab-item {
background: #3c434a;
}
47 changes: 47 additions & 0 deletions src/wp-includes/admin-bar.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -934,6 +934,53 @@ function wp_admin_bar_edit_menu( $wp_admin_bar ) {
}
}

/**
* Adds the command palette trigger button.
*
* Displays a button in the admin bar that shows the keyboard shortcut
* for opening the command palette.
*
* @since 7.0.0
*
* @param WP_Admin_Bar $wp_admin_bar The WP_Admin_Bar instance.
*/
function wp_admin_bar_command_palette_menu( WP_Admin_Bar $wp_admin_bar ): void {
if ( ! is_admin() ) {
return;
}

$is_apple_os = (bool) preg_match( '/Macintosh|Mac OS X|Mac_PowerPC/i', $_SERVER['HTTP_USER_AGENT'] ?? '' );
$shortcut_label = $is_apple_os
? _x( '⌘K', 'keyboard shortcut to open the command palette' )
: _x( 'Ctrl+K', 'keyboard shortcut to open the command palette' );
$icon = '<span class="ab-icon" aria-hidden="true"></span>';
$title = sprintf(
'<span class="ab-label"><kbd>%s</kbd><span class="screen-reader-text"> %s</span></span>',
$shortcut_label,
/* translators: Hidden accessibility text. */
__( 'Open command palette' ),
);
$wp_admin_bar->add_group(
array(
'id' => 'command-palette',
'meta' => array(
'class' => 'ab-command-palette hide-if-no-js',
),
)
);
$wp_admin_bar->add_node(
array(
'parent' => 'command-palette',
'id' => 'command-palette-trigger',
'title' => $icon . $title,
'href' => '#',
'meta' => array(
'onclick' => 'wp.data.dispatch( "core/commands" ).open(); return false;',
),
)
);
}

/**
* Adds "Add New" menu.
*
Expand Down
3 changes: 3 additions & 0 deletions src/wp-includes/class-wp-admin-bar.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -661,6 +661,9 @@ public function add_menus() {
add_action( 'admin_bar_menu', 'wp_admin_bar_customize_menu', 40 );
add_action( 'admin_bar_menu', 'wp_admin_bar_updates_menu', 50 );

// Command palette.
add_action( 'admin_bar_menu', 'wp_admin_bar_command_palette_menu', 55 );

// Content-related.
if ( ! is_network_admin() && ! is_user_admin() ) {
add_action( 'admin_bar_menu', 'wp_admin_bar_comments_menu', 60 );
Expand Down
45 changes: 45 additions & 0 deletions src/wp-includes/css/admin-bar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -374,8 +374,22 @@ html:lang(he-il) .rtl #wpadminbar * {
color: #000;
}

#wpadminbar .quicklinks {
display: flex;
Copy link

@sabernhardt sabernhardt Mar 9, 2026

Choose a reason for hiding this comment

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

Introducing flex—without wrap—in core intensifies an existing problem for sites with crowded toolbars. That can push the profile links and/or others off the screen, making it impossible to reach the Log Out link (unless you use the keyboard to navigate). Then adding an element that is 215 pixels wide would break more sites, and in a worse way.

Profile menu off-screen at 1,000 pixels wide, with a few plugins activated:

crowded toolbar, missing profile link

Profile menu expanded with the Enter key:

crowded toolbar showing expanded profile menu

Copy link
Member Author

@ellatrix ellatrix Mar 10, 2026

Choose a reason for hiding this comment

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

Trying something where if it doesn't fit, we fall back to normal toolbar behavior.

shrink.mov

align-items: center;
}

#wpadminbar #wp-admin-bar-root-default {
flex: 1 1 0;
min-width: fit-content;
}

#wpadminbar .ab-top-secondary {
float: right;
flex: 1 1 0;
min-width: fit-content;
display: flex;
justify-content: flex-end;
}

#wpadminbar ul li:last-child,
Expand Down Expand Up @@ -629,6 +643,37 @@ html:lang(he-il) .rtl #wpadminbar * {
}
}

/**
* Command Palette
*/
#wpadminbar .ab-command-palette {
flex: 0 0 auto;
padding: 4px 0;
}

#wpadminbar #wp-admin-bar-command-palette-trigger .ab-item {
width: 200px;
background: #757575;
Copy link

@sabernhardt sabernhardt Mar 9, 2026

Choose a reason for hiding this comment

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

#757575 does not give enough contrast behind the #f0f0f1 text in the Fresh scheme (4.05:1).

Command palette link in Fresh scheme

The hover and focus states typically have less contrast.

Low contrast for Modern (default) scheme on hover/focus:
3.47:1 #7b90ff against #3c434a

Modern scheme on focus

Very low contrast for Fresh on hover/focus:
1.96:1 #72aee6 against #757575

Fresh scheme on focus

Copy link
Member Author

@ellatrix ellatrix Mar 10, 2026

Choose a reason for hiding this comment

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

Yes, this needs to be changed to a variable

Copy link
Member Author

@ellatrix ellatrix Mar 10, 2026

Choose a reason for hiding this comment

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

Actually sorry, I guess it needs an override for that color scheme

height: 24px;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 2px;
}

#wpadminbar #wp-admin-bar-command-palette-trigger .ab-label kbd {
background: transparent;
}

#wpadminbar #wp-admin-bar-command-palette-trigger .ab-icon {
transform: scaleX(-1);
Copy link
Contributor

@mcsf mcsf Mar 9, 2026

Choose a reason for hiding this comment

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

Clever 😄

Copy link
Member Author

@ellatrix ellatrix Mar 9, 2026

Choose a reason for hiding this comment

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

This is copied from @t-hamano's PR

}

#wpadminbar #wp-admin-bar-command-palette-trigger .ab-icon:before {
content: "\f179";
content: "\f179" / '';
}

/**
* Search
*/
Expand Down
Loading