WordPress.org
Get WordPress

Make WordPress Core

Changeset 61979


Ignore:
Timestamp:
03/12/2026 05:23:14 AM (3 weeks ago)
Author:
westonruter
Message:

Toolbar: Show command palette admin bar item on mobile.

  • The keyboard shortcut is hidden in favor of a search icon on mobile.
  • The background color of the KBD element is made transparent on non-mobile.
  • The admin bar item is skipped from being added if the wp-core-commands script is not enqueued.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/11222

Follow-up to r61912.

Props sabernhardt, westonruter, ellatrix, mukesh27.
See #64672.

Location:
trunk/src/wp-includes
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/admin-bar.php

    r61912 r61979  
    946946 */
    947947function wp_admin_bar_command_palette_menu( WP_Admin_Bar $wp_admin_bar ): void {
    948     if ( ! is_admin() ) {
     948    if ( ! is_admin() || ! wp_script_is( 'wp-core-commands', 'enqueued' ) ) {
    949949        return;
    950950    }
    … …  
    955955        : _x( 'Ctrl+K', 'keyboard shortcut to open the command palette' );
    956956    $title          = sprintf(
    957         '<span class="ab-label"><kbd>%s</kbd><span class="screen-reader-text"> %s</span></span>',
     957        '<span class="ab-icon" aria-hidden="true"></span><span class="ab-label"><kbd>%s</kbd><span class="screen-reader-text"> %s</span></span>',
    958958        $shortcut_label,
    959959        /* translators: Hidden accessibility text. */

  • trunk/src/wp-includes/css/admin-bar.css

    r61861 r61979  
    696696
    697697/**
     698 * Command Palette
     699 */
     700#wpadminbar #wp-admin-bar-command-palette .ab-icon {
     701    display: none; /* Icon displayed only on mobile */
     702}
     703
     704#wpadminbar #wp-admin-bar-command-palette .ab-icon:before {
     705    content: "\f179";
     706    content: "\f179" / '';
     707}
     708
     709#wpadminbar #wp-admin-bar-command-palette kbd {
     710    background: transparent;
     711}
     712
     713/**
    698714 * Customize support classes
    699715 */
    … …  
    893909    #wpadminbar #wp-admin-bar-site-editor > .ab-item:before,
    894910    #wpadminbar #wp-admin-bar-customize > .ab-item:before,
    895     #wpadminbar #wp-admin-bar-my-account > .ab-item:before {
     911    #wpadminbar #wp-admin-bar-my-account > .ab-item:before,
     912    #wpadminbar #wp-admin-bar-command-palette .ab-icon:before {
    896913        display: block;
    897914        text-indent: 0;
    … …  
    936953    }
    937954
    938     /* Comments */
    939     #wpadminbar #wp-admin-bar-comments .ab-icon {
     955    /* Comments and Command Palette */
     956    #wpadminbar #wp-admin-bar-comments .ab-icon,
     957    #wpadminbar #wp-admin-bar-command-palette .ab-icon {
    940958        margin: 0;
    941959    }
    942960
    943     #wpadminbar #wp-admin-bar-comments .ab-icon:before {
     961    #wpadminbar #wp-admin-bar-command-palette .ab-icon {
     962        display: block; /* Icon is only shown on mobile, while the keyboard shortcut is hidden */
     963    }
     964
     965    #wpadminbar #wp-admin-bar-comments .ab-icon:before,
     966    #wpadminbar #wp-admin-bar-command-palette .ab-icon:before {
    944967        display: block;
    945968        font-size: 34px;
    … …  
    10101033    #wpadminbar li#wp-admin-bar-edit,
    10111034    #wpadminbar li#wp-admin-bar-comments,
    1012     #wpadminbar li#wp-admin-bar-my-account {
     1035    #wpadminbar li#wp-admin-bar-my-account,
     1036    #wpadminbar li#wp-admin-bar-command-palette {
    10131037        display: block;
    10141038    }
    … …  
    10411065    #wpadminbar #wp-admin-bar-new-content,
    10421066    #wpadminbar #wp-admin-bar-edit,
    1043     #wpadminbar #wp-admin-bar-my-account {
     1067    #wpadminbar #wp-admin-bar-my-account,
     1068    #wpadminbar #wp-admin-bar-command-palette {
    10441069        position: static;
    10451070    }
Note: See TracChangeset for help on using the changeset viewer.