Add command palette trigger button to admin bar #75757
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| <?php | ||
| /** | ||
| * Adds the Command Palette trigger button to the admin bar. | ||
| * | ||
| * @param WP_Admin_Bar $wp_admin_bar The WP_Admin_Bar instance. | ||
| */ | ||
| function gutenberg_admin_bar_command_palette_menu( WP_Admin_Bar $wp_admin_bar ): void { | ||
| if ( ! is_admin() || ! wp_script_is( 'wp-core-commands', 'enqueued' ) ) { | ||
| 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' ); | ||
| $title = sprintf( | ||
| '<span class="ab-icon" aria-hidden="true"></span><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_node( | ||
| array( | ||
| 'id' => 'command-palette', | ||
| 'title' => $title, | ||
| 'href' => '#', | ||
t-hamano marked this conversation as resolved.
Show resolved
Hide resolved
Member
There was a problem hiding this comment. If the command palette is opened by keyboard shortcut only, having a clickable button that just jumps to # is a UX regression.
Contributor
Author
There was a problem hiding this comment. This link actually triggers Command Palette, and because of the Actually, qw should render a
Contributor
There was a problem hiding this comment.
|
||
| 'meta' => array( | ||
| 'class' => 'hide-if-no-js', | ||
| 'onclick' => 'wp.data.dispatch( "core/commands" ).open(); return false;', | ||
| ), | ||
| ) | ||
| ); | ||
| } | ||
| if ( has_action( 'admin_bar_menu', 'wp_admin_bar_command_palette_menu' ) ) { | ||
| remove_action( 'admin_bar_menu', 'wp_admin_bar_command_palette_menu', 55 ); | ||
| } | ||
| add_action( 'admin_bar_menu', 'gutenberg_admin_bar_command_palette_menu', 55 ); | ||
|
|
||
| function gutenberg_add_admin_bar_styles() { | ||
| if ( ! is_admin_bar_showing() ) { | ||
| return; | ||
| } | ||
| $css = <<<CSS | ||
| #wpadminbar #wp-admin-bar-command-palette .ab-icon { | ||
| display: none; /* Icon displayed only on mobile */ | ||
| } | ||
| #wpadminbar #wp-admin-bar-command-palette .ab-icon:before { | ||
| content: "\\f179"; | ||
| content: "\\f179" / ''; | ||
| } | ||
| #wpadminbar #wp-admin-bar-command-palette kbd { | ||
| background: transparent; | ||
| } | ||
| @media screen and (max-width: 782px) { | ||
| #wpadminbar #wp-admin-bar-command-palette .ab-icon { | ||
| display: block; /* Icon is only shown on mobile, while the keyboard shortcut is hidden */ | ||
| } | ||
| #wpadminbar #wp-admin-bar-command-palette .ab-icon:before { | ||
| text-indent: 0; | ||
| font: normal 32px/1 dashicons; | ||
| width: 52px; | ||
| text-align: center; | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| display: block; | ||
| font-size: 34px; | ||
| height: 46px; | ||
| line-height: 1.38235294; | ||
| top: 0; | ||
| } | ||
| #wpadminbar li#wp-admin-bar-command-palette { | ||
| display: block; | ||
| } | ||
| #wpadminbar #wp-admin-bar-command-palette { | ||
| position: static; | ||
| } | ||
| } | ||
| CSS; | ||
| wp_add_inline_style( 'admin-bar', $css ); | ||
| } | ||
| add_action( 'admin_bar_init', 'gutenberg_add_admin_bar_styles' ); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This might be the most difficult part.
By the way,
PHP_OS_FAMILYcannot be used. This is becausePHP_OS_FAMILYdetermines the OS of the machine on which PHP is running. For example, if a Windows user runs a local environment in WSL2,PHP_OS_FAMILYwill beDarwin, notWindows. This is not the expected result.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If the decision is moved to JS, you can use
navigator.platformfor this.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If we need the shortcut keys to be translatable, then we will need to check the device on the server side. If no translation is needed, then we can of course use your client-side approach. I'm not sure if they should be translatable or not 🤔
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think they need to be translated, but I'm not an expert on that. However, something to keep in mind is any scenario where page responses will be cached. If so, this would break the user agent sniffing.
This surely won't be happening in the admin, and the command palette isn't available on the frontend (yet?). But if it were available on the frontend, even so the admin bar isn't shown unless logged-in, although this is just a default. Nevertheless, it seems quite unlikely that the command palette would be served to unauthenticated users even then.
All that to say, it's probably safe for this to be server-rendered 😅
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've tried dynamically rendering label text on the client side, but that can cause flashes when the page loads. Below is the behavior when simulating Slow 4G network in Chrome.
ba3c7da4d634d3f758dd54ecffc13502.mp4
Whether we translate shortcut keys or not, I think it's better to prepare label text on the server side.