Skip to content

Admin bar: Make command palette prominent in the center #11796

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
fushar wants to merge 6 commits into
base: trunk
Choose a base branch
from
+133 −25
Open

Admin bar: Make command palette prominent in the center #11796

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9886c3d
Command Palette: Make admin bar trigger a native group element
ellatrix Mar 5, 2026
b64d8fc
Fix styles for mobile viewport
fushar May 11, 2026
8065a86
Update background color to -submenu-background-alt
fushar May 11, 2026
a4317dc
Make the command palette shrinkable on crowded admin bar
fushar May 11, 2026
4c82dca
Make command palette overlay to cover the trigger node
fushar May 11, 2026
dd61849
Rename ids to be consistent with upcoming search
fushar May 12, 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
20 changes: 20 additions & 0 deletions src/wp-admin/css/colors/_admin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -485,6 +485,26 @@ ul#adminmenu > li.current > a.current:after {
color: variables.$menu-icon;
}

/* Admin Bar: command palette */

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

#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette:hover .ab-item,
#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette > .ab-item:focus-visible {
background: variables.$menu-submenu-background;
}

#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette:hover .ab-icon:before,
#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette > .ab-item:focus .ab-icon:before {
color: variables.$menu-icon;
}

#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette:hover span.ab-label,
#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette > .ab-item:focus span.ab-label {
color: variables.$menu-text;
}

/* Admin Bar: search */

Expand Down
18 changes: 13 additions & 5 deletions src/wp-includes/admin-bar.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -987,13 +987,21 @@ function wp_admin_bar_command_palette_menu( WP_Admin_Bar $wp_admin_bar ): void {
wp_json_encode( $shortcut_labels['appleOS'], JSON_HEX_TAG | JSON_UNESCAPED_SLASHES )
);
$script .= "\n//# sourceURL=" . rawurlencode( __FUNCTION__ );
$wp_admin_bar->add_group(
array(
'id' => 'command-palette-group',
'meta' => array(
'class' => 'ab-command-palette hide-if-no-js',
),
)
);
$wp_admin_bar->add_node(
array(
'id' => 'command-palette',
'title' => $title,
'href' => '#',
'meta' => array(
'class' => 'hide-if-no-js',
'parent' => 'command-palette-group',
'id' => 'command-palette',
'title' => $title,
'href' => '#',
'meta' => array(
'onclick' => 'wp.data.dispatch( "core/commands" ).open(); return false;',
'html' => wp_get_inline_script_tag( $script ),
),
Expand Down
120 changes: 100 additions & 20 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;
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 @@ -625,6 +639,62 @@ html:lang(he-il) .rtl #wpadminbar * {
}
}

/**
* Command Palette
*/
#wpadminbar .ab-command-palette {
flex: 0 1 200px;
min-width: fit-content;
padding: 4px 0;
}

#wpadminbar .ab-command-palette > #wp-admin-bar-command-palette {
width: 100%;
}

#wpadminbar #wp-admin-bar-command-palette .ab-item {
width: 100%;
box-sizing: border-box;
background: #3c434a;
height: 24px;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 2px;
}

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

#wpadminbar #wp-admin-bar-command-palette .ab-icon {
transform: scaleX(-1);
}

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

#wpadminbar #wp-admin-bar-command-palette:hover .ab-item,
#wpadminbar #wp-admin-bar-command-palette > .ab-item:focus-visible {
background: #2c3338;
}

#wpadminbar #wp-admin-bar-command-palette:hover .ab-icon:before,
#wpadminbar #wp-admin-bar-command-palette > .ab-item:focus .ab-icon:before {
color: rgba(240, 246, 252, 0.6);
}

#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette:hover span.ab-label,
#wpadminbar > #wp-toolbar #wp-admin-bar-command-palette > .ab-item:focus span.ab-label {
color: #f0f0f1;
}

body .commands-command-menu {
top: 4px;
}

/**
* Search
*/
Expand Down Expand Up @@ -694,19 +764,6 @@ html:lang(he-il) .rtl #wpadminbar * {
display: none;
}

/**
* Command Palette
*/
#wpadminbar #wp-admin-bar-command-palette .ab-icon:before {
content: "\f179";
content: "\f179" / '';
top: 3px;
}

#wpadminbar #wp-admin-bar-command-palette kbd {
background: transparent;
}

/**
* Customize support classes
*/
Expand Down Expand Up @@ -905,8 +962,7 @@ html:lang(he-il) .rtl #wpadminbar * {
#wpadminbar #wp-admin-bar-site-name > .ab-item:before,
#wpadminbar #wp-admin-bar-site-editor > .ab-item:before,
#wpadminbar #wp-admin-bar-customize > .ab-item:before,
#wpadminbar #wp-admin-bar-my-account > .ab-item:before,
#wpadminbar #wp-admin-bar-command-palette .ab-icon:before {
#wpadminbar #wp-admin-bar-my-account > .ab-item:before {
display: block;
text-indent: 0;
font: normal 32px/1 dashicons;
Expand Down Expand Up @@ -949,21 +1005,45 @@ html:lang(he-il) .rtl #wpadminbar * {
top: 3px;
}

/* Comments and Command Palette */
#wpadminbar #wp-admin-bar-comments .ab-icon,
#wpadminbar #wp-admin-bar-command-palette .ab-icon {
/* Comments */
#wpadminbar #wp-admin-bar-comments .ab-icon {
margin: 0;
}

#wpadminbar #wp-admin-bar-comments .ab-icon:before,
#wpadminbar #wp-admin-bar-command-palette .ab-icon:before {
#wpadminbar #wp-admin-bar-comments .ab-icon:before {
display: block;
font-size: 34px;
height: 46px;
line-height: 1.38235294;
top: 0;
}

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

#wpadminbar #wp-admin-bar-command-palette .ab-item {
width: auto;
height: 32px;
padding: 0 2px;
margin-right: 4px;
border-radius: 4px;
}

#wpadminbar #wp-admin-bar-command-palette .ab-icon {
font: 30px/1 dashicons !important;
width: auto;
height: auto;
margin-right: 0;
padding: 4px 0;
text-align: center;
}

#wpadminbar .ab-top-secondary {
flex: 0 0 auto;
}

/* My Account */
#wpadminbar #wp-admin-bar-my-account > a {
position: relative;
Expand Down
Loading