Changeset 62592

Timestamp:

06/30/2026 10:30:01 AM (6 weeks ago)

Author:

scruffian

Message:

Toolbar: Make the user avatar image circular.

Make the user avatar in the admin bar circular, both in the top-level toolbar item and the account dropdown. This aligns with the block editor, where avatars are already circular while site logos are square, and follows a common convention that helps distinguish an avatar from a site icon. The avatar is also enlarged slightly on both the desktop and mobile viewports to offset the area lost to the circular crop and to keep it balanced with the surrounding toolbar icons, as follows:

• Desktop viewport: bump the size from 18px to 20px; add border-radius: 50%
• Mobile viewport: bump the size from 26px to 28px; add border-radius: 50%

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

Props fushar, scruffian, joen, sabernhardt, jeryj.
Fixes #64667. See #65083, #65088.

Location:

trunk/src/wp-includes

Files:

• admin-bar.php (modified) (1 diff)
• css/admin-bar.css (modified) (3 diffs)

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

@@ -277 +277 @@
         $howdy = sprintf( __( 'Howdy, %s' ), '<span class="display-name">' . wp_get_current_user()->display_name . '</span>' );
 
-        $avatar = get_avatar( $user_id, 26 );
+        $avatar = get_avatar( $user_id, 28 );
         $wp_admin_bar->add_node(
                 array(

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

@@ -456 +456 @@
         width: 64px;
         height: 64px;
+        border-radius: 50%;
 }
 
@@ -482 +483 @@
 #wpadminbar #wp-admin-bar-my-account.with-avatar > a img {
         width: auto;
-        height: 16px;
+        height: 20px;
         padding: 0;
-        border: 1px solid #8c8f94;
+        border: 1px solid #2c353b;
+        border-radius: 50%;
         background: #f0f0f1;
         line-height: 1.84615384;
@@ -978 +980 @@
         #wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
                 position: absolute;
-                top: 13px;
+                top: 12px;
                 right: 10px;
-                width: 26px;
-                height: 26px;
+                width: 28px;
+                height: 28px;
+                border-radius: 50%;
         }