Duplicate links to edit profile dropdown in toolbar

[danieltj]

Within the mini user profile drop down in the toolbar (to the right), there are two links which direct the user to the edit profile page. Not only is this confusing, it's a poor user experience as some users may wish to have a link to their author archive instead to see what they've written.

I propose this is changed so there is a link to author archives and the edit profile page.

[danieltj]

Example of the mini user profile drop down

[danieltj]

Replaces edit profile with view posts

[danieltj]

Added the 43633.diff​ patch which changes the link from an edit profile link to a view posts link.

[SergeyBiryukov]

Related: #28377

[swissspidy]

You'd need to change the false !== $profile_url condition there as well.

[danieltj]

Replying to swissspidy:

You'd need to change the false !== $profile_url condition there as well.

Thanks for the heads up, I think it's worth refreshing the patch anyway to change the name and username link to the archive page rather than removing the edit profile link as that makes more sense to leave as it is so there is a clear way to edit the profile.

[netweb]

Replying to danieltj:

Replying to swissspidy:

You'd need to change the false !== $profile_url condition there as well.

Thanks for the heads up, I think it's worth refreshing the patch anyway to change the name and username link to the archive page rather than removing the edit profile link as that makes more sense to leave as it is so there is a clear way to edit the profile.

I'd much rather see the first link become a "view profile" link rather thean the current "edit profile" link:

e.g. ​https://profiles.wordpress.org/danieltj/profile/

The second link as noted above should remain as is

e.g. ​https://profiles.wordpress.org/danieltj/profile/edit

Per the above examples, most users of a bbPress site will not have any posts so linking to a users posts, or post archive when they have no posts is not what we want to do for sites such as those that use bbPress.

[danieltj]

Refreshed the patch

[danieltj]

I've refreshed the patch in 43633.2.diff​ and added a filter so that plugins and site owners can change the URL if they wish. I think this is the best course of action as it opens up the author archive but lets people change it to whatever they like by filtering it. Essentially just letting people choose where they want this additional link to go.

Can I get tests and thoughts on this please?

[netweb]

I stand by what I wrote in comment:5, the primary purpose of the wp_admin_bar_my_account_menu() function is to add "My Account" items to the admin bar which are the user profile links, first the user profile #L291, and then, if it is not multisite #L266 the "Edit My Profile" link is added.

43633.2.diff​ changes multisite behaviour by changing the first link to link to a users post archive rather than the current link to the dashboard #L267, this is currently used I expect due to all of the multisite blog/site/network juggling complexities that are required to retrieve any user related content in multisite environments.

Also adding a filter as proposed in 43633.2.diff​ puts the onus on developers to opt-out of a what is a breaking change being introduced into WordPress and these types of change should be avoided.

[danieltj]

Replying to netweb:

I stand by what I wrote in comment:5, the primary purpose of the wp_admin_bar_my_account_menu() function is to add "My Account" items to the admin bar which are the user profile links, first the user profile #L291, and then, if it is not multisite #L266 the "Edit My Profile" link is added.

43633.2.diff​ changes multisite behaviour by changing the first link to link to a users post archive rather than the current link to the dashboard #L267, this is currently used I expect due to all of the multisite blog/site/network juggling complexities that are required to retrieve any user related content in multisite environments.

Also adding a filter as proposed in 43633.2.diff​ puts the onus on developers to opt-out of a what is a breaking change being introduced into WordPress and these types of change should be avoided.

How do we fix the issue of having two links to the same page though? As it stands, single-site installs have two links to the same place which isn't useful and is confusing. In 43633.2.diff​, the ids are kept the same to ensure additional links are still added correctly to the toolbar, the link location has simply changed.

There is another way to the dashboard on multisites anyway on the left hand side, so access to these account pages isn't lost and still very accessible. The aim here is to change the fact we have two links going to the same page right next to each other. A much better use of toolbar UI would be to provide a link to somewhere that is hard to find.

Adding 2nd-opinion to get more thoughts on this.

[sabernhardt]

combining duplicate profile links within dropdown menu

[sabernhardt]

Adding a link to the author archive page likely is more appropriate with a plugin.

However, combining the two links seems possible with something like 43633.3.diff​.

1. "Edit profile" is included within the 'user-info' link, with the display-name class to keep the same styling. That span also has an edit-profile-link class for plugin authors who might wish to change those styles.
2. I don't think the username adds any value for screen reader users, so it has aria-hidden (if I'm wrong, that attribute can be removed).

[sabernhardt]

43633.3 without adding aria-hidden

[joedolson]

#60489 was marked as a duplicate.

[dionysous]

I support the desired changes and find this topic very important because I think that the current linking is inadequate and far too redudant.

I'm interested in understanding how the new design here, particularly the View Profile link, is intended to appear.

For example, on wordpress.org, navigation to your own profile is made enormously difficult by the fact that you have 3x Edit Profiles and 0x View Profiles links. The drop-down menu on wordpress.org, has been customized using a MU plugin, resulting in a different appearance. Therefore there is an issue on GitHub: ​https://github.com/WordPress/wporg-mu-plugins/issues/268#issuecomment-1938290193

PS: As for the current design suggestion for wordpress.org, here's a visual representation:

The added value here would be that users can distinguish their accounts by their unique user names, but also see their display names. The design would not be changed too much either.

[joedolson]

Adding this to 6.5 to record that I'm committing essentially the same change as in @sabernhardt's 43633.4.diff as part of the fix for #34668.

[joedolson]

In 57708:

Toolbar: Accessibility: Keyboard navigation for screen readers.

Change the admin toolbar to have role="menu" and support opening for screen readers. Remove screen reader only log out link and collapse duplicate profile links into one link. This is an imperfect solution to a complex problem in the adminbar, but the lack of screen reader access to submenus is a major accessibility problem, and this fix provides access, even if the mechanism is imperfect.

Screen reader log out added in [21452].

Props abletec, Cheffheid, sabernhardt, alexstine, joedolson, afercia, sparklingrobots, danieltj, swissspidy, netweb, dionysous.
Fixes #34668, #43633.

[sabernhardt]

profile menu for user without a role in WordPress 6.4

[sabernhardt]

in 6.5 beta, the Edit Profile text is added for users without a role

[sabernhardt]

profile menu below the 782-pixel breakpoint in WordPress 6.4

[sabernhardt]

in WordPress 6.5 beta, smaller screens do not increase the font size of the Edit Profile text, and it is closer to Log Out than the rest of the link text

[sabernhardt]

combined link has extra space between lines on Make Core

[sabernhardt]

restores ( false !== $profile_url ) check, adds display-name class, adds zero tabindex to profile menu without a link, removes grid row-gap, adds another space after 'meta', capitalizes the ARIA acronym, adds a translator comment

[sabernhardt]

I added a patch to fix some things, but we could consider reverting this part of [57708] instead and revisiting the duplicate links in another release cycle.

• The separate "Edit Profile" link needed an if ( false !== $profile_url ) condition for users without a role in [34122], and it should continue to check that condition for the text.
• Also for users without a role, the profile menu div would need the zero tabindex to be focusable (more related to #34668). The parameter checks for an integer, and I chose an empty string for the usual case of no tabindex. Another possibility is giving any ( $is_parent && ! $has_link ) node the zero tabindex, but there may have been a reason not to do that when the parameter was added.
• The 12-pixel row-gap added to the combined link is too much space on Make Core and likely in other conditions too. I simply removed it in the patch for now. Editing the height, line-height and/or font-size could be better.
• 43633.4.diff specifically had the display-name class before the new class for the Edit Profile span. This was an easy way to match its styles to the display name span without editing the color palettes. In addition to the color, smaller screens need the adjustments to font-size, line-height and height.
• Additional edits in the patch include an extra space after 'meta' to align the array values, capitalizing the ARIA acronym, and adding a translator comment. These changes could be made if reverting is the better option.

The profile menu also does not show the image/icon on smaller screens when the site enables avatars and the user has no role, but that bug is older so I did not add absolute positioning for the image within this patch.

[joedolson]

I mostly committed that to get feedback, honestly. Pretty OK with reverting it, although I think minor visual issues are better than the duplicated link, overall.

Had not considered users without a role, however.

[huzaifaalmesbah]

Looks Good 43633.5.diff​ I can see that the solution has been improved with better design and issue resolution.

[joedolson]

Changes item heights to be measured in rem instead of px so menu items are still readable when font size is increased.

[joedolson]

Actually making the adminbar functional at 200% is a large problem, but this at least makes the dropdowns readable, even if the top level items aren't. That simply stood out more now that the profile links are grouped inside one item.

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

[joedolson]

I think this is good. It improves on a prior change, includes some important changes to code quality and some changes to design. Given the choice between improvement and reverting, I'm in favor of improvement.

[joedolson]

Noting for the record that I mathed wrong in the patch, and changed the item height to 1.875rem instead of 1.625rem; but fixing that in commit.

[joedolson]

In 57765:

Toolbar: Polish design and code combining duplicate profile links.

Fixes some design changes and improves quality of comments and code styles following previous changes. Follow-up to [57708].

Props sabernhardt, huzaifaalmesbah, joedolson.
Fixes #43633. See #34668.

in r57765

[audrasjb]

In 57792:

Toolbar: Fix dropdown admin menu styles on front-end.

This changeset switches back the admin menu items height property to px unit to prevent issues with themes using html { font-size: 62.5%; }.

Follow-up to [57765].

Props bgnicolepaschen, sabernhardt, huzaifaalmesbah, ironprogrammer, shailu25.
Fixes #60707.
See #43633.

[audrasjb]

In 57808:

Toolbar: Fix dropdown admin menu styles on front-end.

This changeset switches back the admin menu items height property to px unit to prevent issues with themes using html { font-size: 62.5%; }.

Follow-up to [57765].

Reviewed by swissspidy.
Merges [57792] to the to the 6.5 branch.

Props bgnicolepaschen, sabernhardt, huzaifaalmesbah, ironprogrammer, shailu25, mohonchandra.
Fixes #60707.
See #43633.