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 WordPress#11799.

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


git-svn-id: https://develop.svn.wordpress.org/trunk@62592 602fd350-edb4-49c9-b593-d223f7449a82

Author: scruffian

src/wp-includes/admin-bar.php

@@ -276,7 +276,7 @@ function wp_admin_bar_my_account_item( $wp_admin_bar ) {
 	/* translators: %s: Current user's display name. */
 	$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(
 			'id'     => 'my-account',

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

@@ -455,6 +455,7 @@ html:lang(he-il) .rtl #wpadminbar * {
 	top: 4px;
 	width: 64px;
 	height: 64px;
+	border-radius: 50%;
 }
 
 #wpadminbar #wp-admin-bar-user-info a {
@@ -481,9 +482,10 @@ html:lang(he-il) .rtl #wpadminbar * {
 #wpadminbar #wp-admin-bar-my-account.with-avatar > .ab-empty-item img,
 #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;
 	vertical-align: middle;
@@ -977,10 +979,11 @@ html:lang(he-il) .rtl #wpadminbar * {
 
 	#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%;
 	}
 
 	#wpadminbar #wp-admin-bar-user-actions.ab-submenu {