Toolbar: Fix the display name live preview and "Howdy" color by fushar · Pull Request #14275 · WordPress/wordpress-develop

fushar · 2026-10-14T13:34:26Z

Trac ticket: https://core.trac.wordpress.org/ticket/66222

Summary

This PR contains two follow-ups to moving "Howdy" into the user menu (#13681). The fixes are very closely related so I'm making both changes in this single PR.

"Howdy" color: I just found out that some custom plugins' admin color schemes only color #wp-admin-bar-user-info .display-name in their CSS, so the display name gets the scheme's color but the "Howdy, " text doesn't. This PR adds the display-name class to the greeting wrapper (<span class="display-name howdy">).
- Note that that same class was also added to the Edit Profile link for the same reason (see https://core.trac.wordpress.org/changeset/57765).
Display name live preview: when the display name dropdown is changed on the profile page, the admin bar is live-updated. This PR fixes the bugs mentioned in the linked Trac ticket, so that now:
- The "Edit Profile" item is no longer overwritten.
- The aria-label of the user menu is now updated with the new display name.
- The username line now reacts to the change. For example, if the new display name is no longer the same as the username, the menu won't show the username line.

Testing

Activate an admin color scheme that only colors .display-name in the CSS. The easiest way is to install the Admin Color Schemes plugin.
Hover the avatar menu, and verify that the whole Howdy, {name} greeting has the same text color.
Go to Users -> Profile, and change the "Display name publicly as" field. Don't save.
Verify that the display name in the admin bar and in the dropdown is live-updated, and that "Edit Profile" stays the same.
Select your username as the display name, and verify that the username line below the greeting disappears. Select another name, and verify that it appears again.
Inspect the user menu (#wp-admin-bar-user-actions), and verify that its aria-label matches the selected display name.

Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Model(s): Opus 5.5
Used for: Code generation. Verified and tested by me.

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

github-actions · 2026-10-14T13:37:54Z

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

All changes will be lost when closing a tab with a Playground instance.
All changes will be lost when refreshing the page.
A fresh instance is created each time the link below is clicked.
Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

Adds the `display-name` class to the "Howdy" greeting in the user menu, the same way as the "Edit Profile" item, so that admin color schemes that only style `.display-name` color the whole greeting and not only the name. Fixes the live preview of the display name on the profile screen, which overwrote the "Edit Profile" item, did not update the `aria-label` of the user menu, and did not show or hide the username line.

github-actions · 2026-10-14T13:53:44Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props fushar.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

fushar · 2026-10-14T14:01:16Z

+			select    = $( '#display_name' ),
+			username  = $( '#user_login' ).val(),
+			myAccount = $( '#wp-admin-bar-my-account' ),
+			greeting  = myAccount.find( '.display-name:not(.howdy):not(.edit-profile)' );


Note: I know that we discussed in the original PR that a better way is to add a test-only attribute or class to the actual display name span so that we can target it more cleanly.

But now I don't think it's worth it. This live-update is not the most common daily user flow. And it seems any additional class or markup change could theoretically break consumers 😅

Well, this selector seems a bit smelly. Would have loved something cleaner like .howdy .display-name. Having to be so specific and exclusive here is a sign that we're doing something wrong.

tyxla · 2026-10-14T15:29:02Z


 	$user_info  = get_avatar( $user_id, 64 );
-	$user_info .= '<span class="howdy">' . $howdy . '</span>';
+	$user_info .= '<span class="display-name howdy">' . $howdy . '</span>';


Are we now adding a .display-name inside .display-name? That seems unintentional.

tyxla · 2026-10-14T15:30:41Z

+			select    = $( '#display_name' ),
+			username  = $( '#user_login' ).val(),
+			myAccount = $( '#wp-admin-bar-my-account' ),
+			greeting  = myAccount.find( '.display-name:not(.howdy):not(.edit-profile)' );


Well, this selector seems a bit smelly. Would have loved something cleaner like .howdy .display-name. Having to be so specific and exclusive here is a sign that we're doing something wrong.

tyxla · 2026-10-14T15:31:51Z

+					usernameLine = howdy.siblings( '.username' );

 				greeting.text( display_name );
+				myAccount.children( '.ab-sub-wrapper' ).children( '[aria-label]' ).attr( 'aria-label', display_name );


Might make sense improving our selection here a bit. If for some reason the aria-label attribute was removed, it won't match.

tyxla · 2026-10-14T15:32:43Z

+				myAccount.children( '.ab-sub-wrapper' ).children( '[aria-label]' ).attr( 'aria-label', display_name );
+
+				// Only show the username when it differs from the display name.
+				if ( display_name === username ) {


Theoretically, this can behave differently with the same comparison on the PHP side, where we are not trimming the display name.

tyxla · 2026-10-14T15:33:54Z

+				if ( display_name === username ) {
+					usernameLine.remove();
+				} else if ( ! usernameLine.length && howdy.length ) {
+					$( '<span class="username"></span>' ).text( username ).insertAfter( howdy );


Theoretically, if someone was removing the "howdy" (we already know some plugins are doing it), this wouldn't work and the username would just be removed.

tyxla · 2026-10-14T15:36:51Z


-				var display_name = this.value.trim() || username;
+				var display_name = this.value.trim() || username,
+					howdy        = myAccount.find( '#wp-admin-bar-user-info .howdy' ),


Should we cache the howdy above with the other variables?

fushar force-pushed the howdy-fix-color branch from db9a951 to cc6f785 Compare October 14, 2026 13:51

fushar marked this pull request as ready for review October 14, 2026 13:53

fushar commented Oct 14, 2026

View reviewed changes

tyxla reviewed Oct 14, 2026

View reviewed changes

Navigation Menu

Repository navigation

Toolbar: Fix the display name live preview and "Howdy" color - #14275

Toolbar: Fix the display name live preview and "Howdy" color#14275
fushar wants to merge 1 commit into
WordPress:trunkfrom
fushar:howdy-fix-color

fushar commented Oct 14, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 14, 2026

Uh oh!

github-actions Bot commented Oct 14, 2026

Uh oh!

fushar Oct 14, 2026

Uh oh!

tyxla Oct 14, 2026

Uh oh!

tyxla Oct 14, 2026

Uh oh!

tyxla Oct 14, 2026

Uh oh!

tyxla Oct 14, 2026

Uh oh!

tyxla Oct 14, 2026

Uh oh!

tyxla Oct 14, 2026

Uh oh!

tyxla Oct 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

fushar commented Oct 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Testing

Use of AI Tools

Uh oh!

github-actions Bot commented Oct 14, 2026

Test using WordPress Playground

Some things to be aware of

Uh oh!

github-actions Bot commented Oct 14, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

fushar commented Oct 14, 2026 •

edited

Loading