WordPress.org
Get WordPress

Make WordPress Core

Changeset 62614


Ignore:
Timestamp:
07/01/2026 06:08:42 PM (3 months ago)
Author:
scruffian
Message:

Toolbar: Show the site icon in the admin bar when one is set.

When a site icon is configured, it is displayed in the WordPress admin bar in place of the home/odometer dashicon. The icon is shown at 20×20px with a border-radius of 2px. When no site icon is set, the existing dashicon behavior is preserved.

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

Props fushar, tyxla, joen, wildworks, scruffian, sergeybiryukov, lucasmdo, joedolson.
Fixes #65088. See #46657, #64308.

Location:
trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed

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

    r62592 r62614  
    277277        $howdy = sprintf( __( 'Howdy, %s' ), '<span class="display-name">' . wp_get_current_user()->display_name . '</span>' );
    278278
    279         $avatar = get_avatar( $user_id, 28 );
     279        $avatar = get_avatar( $user_id, 26 );
    280280        $wp_admin_bar->add_node(
    281281                array(
    … …  
    386386
    387387        $title = wp_html_excerpt( $blogname, 40, '&hellip;' );
     388        $meta  = array(
     389                'menu_title' => $title,
     390        );
     391
     392        if ( ! is_network_admin() && ! is_user_admin() ) {
     393                /** This filter is documented in wp-includes/admin-bar.php */
     394                $show_site_icons = apply_filters( 'wp_admin_bar_show_site_icons', true );
     395
     396                if ( true === $show_site_icons && has_site_icon() ) {
     397                        $site_icon = sprintf(
     398                                '<img class="site-icon" src="%s" srcset="%s 2x" alt="" width="20" height="20" />',
     399                                esc_url( get_site_icon_url( 32 ) ),
     400                                esc_url( get_site_icon_url( 64 ) )
     401                        );
     402
     403                        $title         = $site_icon . $title;
     404                        $meta['class'] = 'has-site-icon';
     405                }
     406        }
    388407
    389408        $wp_admin_bar->add_node(
    … …  
    392411                        'title' => $title,
    393412                        'href'  => ( is_admin() || ! current_user_can( 'read' ) ) ? home_url( '/' ) : admin_url(),
    394                         'meta'  => array(
    395                                 'menu_title' => $title,
    396                         ),
     413                        'meta'  => $meta,
    397414                )
    398415        );

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

    r62592 r62614  
    456456        width: 64px;
    457457        height: 64px;
    458         border-radius: 50%;
    459458}
    460459
    … …  
    483482#wpadminbar #wp-admin-bar-my-account.with-avatar > a img {
    484483        width: auto;
    485         height: 20px;
     484        height: 16px;
    486485        padding: 0;
    487         border: 1px solid #2c353b;
    488         border-radius: 50%;
     486        border: 1px solid #8c8f94;
    489487        background: #f0f0f1;
    490488        line-height: 1.84615384;
    … …  
    540538}
    541539
     540#wpadminbar .quicklinks li img.blavatar {
     541        border-radius: 2px;
     542}
     543
    542544#wpadminbar .quicklinks li div.blavatar:before {
    543545        content: "\f120";
    … …  
    583585        content: "\f102";
    584586        content: "\f102" / '';
     587}
     588
     589#wpadminbar #wp-admin-bar-site-name.has-site-icon > .ab-item {
     590        display: flex;
     591        align-items: center;
     592        gap: 6px;
     593}
     594
     595#wpadminbar #wp-admin-bar-site-name.has-site-icon > .ab-item:before {
     596        content: none;
     597}
     598
     599#wpadminbar #wp-admin-bar-site-name > .ab-item .site-icon {
     600        width: 20px;
     601        height: 20px;
     602        background: #f0f0f1; /* matching my-account (user avatar) node's background */
     603        border-radius: 2px;
    585604}
    586605
    … …  
    906925        #wpadminbar #wp-admin-bar-edit > .ab-item:before,
    907926        #wpadminbar #wp-admin-bar-my-sites > .ab-item:before,
    908         #wpadminbar #wp-admin-bar-site-name > .ab-item:before,
     927        #wpadminbar #wp-admin-bar-site-name:not(.has-site-icon) > .ab-item:before,
    909928        #wpadminbar #wp-admin-bar-site-editor > .ab-item:before,
    910929        #wpadminbar #wp-admin-bar-customize > .ab-item:before,
    … …  
    921940        }
    922941
     942        #wpadminbar #wp-admin-bar-site-name > .ab-item .site-icon {
     943                position: absolute;
     944                top: 9px;
     945                left: 12px;
     946                width: 28px;
     947                height: 28px;
     948                margin: 0;
     949                border-radius: 4px;
     950        }
     951
    923952        #wpadminbar #wp-admin-bar-appearance {
    924953                margin-top: 0;
    … …  
    9721001                position: relative;
    9731002                white-space: nowrap;
    974                 text-indent: 150%; /* More than 100% indentation is needed since this element has padding */
     1003                text-indent: 150%; /* More than 100% indention is needed since this element has padding */
    9751004                width: 28px;
    9761005                padding: 0 10px;
    … …  
    9801009        #wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
    9811010                position: absolute;
    982                 top: 12px;
     1011                top: 13px;
    9831012                right: 10px;
    984                 width: 28px;
    985                 height: 28px;
    986                 border-radius: 50%;
     1013                width: 26px;
     1014                height: 26px;
    9871015        }
    9881016

  • trunk/tests/phpunit/tests/adminbar.php

    r60894 r62614  
    812812
    813813        /**
     814         * @covers ::wp_admin_bar_site_menu
     815         */
     816        public function test_site_name_menu_has_no_site_icon_when_unset() {
     817                wp_set_current_user( self::$editor_id );
     818
     819                $wp_admin_bar   = $this->get_standard_admin_bar();
     820                $node_site_name = $wp_admin_bar->get_node( 'site-name' );
     821
     822                $this->assertStringNotContainsString( 'site-icon', $node_site_name->title );
     823                $this->assertArrayNotHasKey( 'class', $node_site_name->meta );
     824        }
     825
     826        /**
     827         * @covers ::wp_admin_bar_site_menu
     828         * @requires function imagejpeg
     829         */
     830        public function test_site_name_menu_includes_site_icon_when_set() {
     831                wp_set_current_user( self::$editor_id );
     832
     833                $attachment_id = self::factory()->attachment->create_upload_object( DIR_TESTDATA . '/images/test-image.jpg' );
     834                update_option( 'site_icon', $attachment_id );
     835
     836                $wp_admin_bar   = $this->get_standard_admin_bar();
     837                $node_site_name = $wp_admin_bar->get_node( 'site-name' );
     838
     839                $this->assertStringContainsString( '<img class="site-icon"', $node_site_name->title );
     840                $this->assertStringContainsString( esc_url( get_site_icon_url( 32 ) ), $node_site_name->title );
     841                $this->assertSame( 'has-site-icon', $node_site_name->meta['class'] );
     842        }
     843
     844        /**
     845         * @covers ::wp_admin_bar_site_menu
     846         * @requires function imagejpeg
     847         */
     848        public function test_site_name_menu_respects_show_site_icons_filter() {
     849                wp_set_current_user( self::$editor_id );
     850
     851                $attachment_id = self::factory()->attachment->create_upload_object( DIR_TESTDATA . '/images/test-image.jpg' );
     852                update_option( 'site_icon', $attachment_id );
     853
     854                add_filter( 'wp_admin_bar_show_site_icons', '__return_false' );
     855
     856                $wp_admin_bar   = $this->get_standard_admin_bar();
     857                $node_site_name = $wp_admin_bar->get_node( 'site-name' );
     858
     859                $this->assertStringNotContainsString( 'site-icon', $node_site_name->title );
     860                $this->assertArrayNotHasKey( 'class', $node_site_name->meta );
     861        }
     862
     863        /**
     864         * @covers ::wp_admin_bar_site_menu
     865         * @group multisite
     866         * @group ms-required
     867         * @requires function imagejpeg
     868         */
     869        public function test_site_name_menu_has_no_site_icon_in_network_admin() {
     870                wp_set_current_user( self::$admin_id );
     871
     872                $attachment_id = self::factory()->attachment->create_upload_object( DIR_TESTDATA . '/images/test-image.jpg' );
     873                update_option( 'site_icon', $attachment_id );
     874
     875                set_current_screen( 'dashboard-network' );
     876
     877                $wp_admin_bar   = $this->get_standard_admin_bar();
     878                $node_site_name = $wp_admin_bar->get_node( 'site-name' );
     879
     880                $this->assertTrue( is_network_admin() );
     881                $this->assertStringNotContainsString( 'site-icon', $node_site_name->title );
     882                $this->assertArrayNotHasKey( 'class', $node_site_name->meta );
     883        }
     884
     885        /**
     886         * @covers ::wp_admin_bar_site_menu
     887         * @group multisite
     888         * @group ms-required
     889         * @requires function imagejpeg
     890         */
     891        public function test_site_name_menu_has_no_site_icon_in_user_admin() {
     892                wp_set_current_user( self::$admin_id );
     893
     894                $attachment_id = self::factory()->attachment->create_upload_object( DIR_TESTDATA . '/images/test-image.jpg' );
     895                update_option( 'site_icon', $attachment_id );
     896
     897                set_current_screen( 'dashboard-user' );
     898
     899                $wp_admin_bar   = $this->get_standard_admin_bar();
     900                $node_site_name = $wp_admin_bar->get_node( 'site-name' );
     901
     902                $this->assertTrue( is_user_admin() );
     903                $this->assertStringNotContainsString( 'site-icon', $node_site_name->title );
     904                $this->assertArrayNotHasKey( 'class', $node_site_name->meta );
     905        }
     906
     907        /**
    814908         * This test ensures that WP_Admin_Bar::$proto is not defined (including magic methods).
    815909         *
Note: See TracChangeset for help on using the changeset viewer.