External links in WordPress toolbar

[itpathsolutions]

UI suggestion for WordPress backend.

When use clicks on any of this link page should open in new tab. Currently it opens in same tab and I navigate off my website.

​https://prnt.sc/eW2Ry6ZzUrc4

[sabernhardt]

Thanks for opening the ticket!

Trac had a similar request for another external link in #52953, but forcing external links to open in a new tab is not the best way (#23432). Indicating external links, so people can choose to open in a new tab, would be helpful.

Perhaps this menu could explicitly say "External links" before the secondary links list.

[sabernhardt]

proof of concept

[sabernhardt]

"External links" text above WP site links

[sabernhardt]

I made a quick patch to test the idea (and revise/iterate).

[sabernhardt]

associating text with the external links list

[sabernhardt]

menu with 55960.1.diff

[sabernhardt]

Using the text as a way to label the list could benefit screen reader users.

When testing with a screen reader, I recommend forcing this menu to expand with CSS:

#wpadminbar #wp-admin-bar-wp-logo .ab-sub-wrapper {
  display: block;
}

At least in the default color scheme, the different text color stands out enough that the label probably does not need to be bold. Other style adjustments might be good.

[sabernhardt]

During the Accessibility bug scrub, @ryokuhi asked for design feedback about creating a "heading" in the toolbar.

Also, Maja Benke (@travel_girl) commented:

personally I think external links does not have to be indicated as external links. but I agree, that external Links inside a main navigation is not great.

[itpathsolutions]

Hi,

I have one suggestion.
We can add "external link icon" to make it clear to the user that it's an external link. Please check attached screenshots for more details.

​https://prnt.sc/gck9eFD9a9CE

Replying to sabernhardt:

During the Accessibility bug scrub, @ryokuhi asked for design feedback about creating a "heading" in the toolbar.

Also, Maja Benke (@travel_girl) commented:

personally I think external links does not have to be indicated as external links. but I agree, that external Links inside a main navigation is not great.

[itpathsolutions]

Replying to itpathsolutions:

Hi,

I have one suggestion.
We can add "external link icon" to make it clear to the user that it's an external link. Please check attached screenshots for more details.

​https://prnt.sc/gck9eFD9a9CE

Replying to sabernhardt:

During the Accessibility bug scrub, @ryokuhi asked for design feedback about creating a "heading" in the toolbar.

Also, Maja Benke (@travel_girl) commented:

personally I think external links does not have to be indicated as external links. but I agree, that external Links inside a main navigation is not great.

[sabernhardt]

Maybe these could have an icon, though some links still force opening in a separate tab and use the external link icon. I did not suggest that icon to avoid any expectation that these would open in a new tab.

[ryokuhi]

The main problem with icons is that their meaning is often not self-evident. I think the icon suggested by @itpathsolutions is the correct one for external links, but it is also mistakenly used to mark links that open in a new tab. Adding the icon might cause false expectations for sighted users if the link doesn't open in a new tab.

If we consider the needs of people who can't rely on sight, I think adding an icon (and an alternative for screen readers) to each link might pollute the interface, which is why I like @sabernhardt's "heading" proposal.

I suggested waiting for feedback from the Design Team as adding a "heading" in the top toolbar is probably a novelty for WordPress Core and, as such, should require a little exploration.

[itpathsolutions]

Yes, I think we can make those links open in new tab. So, suggested icons will surely makes correct sense.

Still let's wait what Design Team decides for the same.

[itpathsolutions]

Hi,

Any update on this suggestion from WordPress design Team.

[sabernhardt]

@joen wrote on Slack:

My personal take is that this part of the admin UI is somewhat due for a rethink. I would personally never look for external links in that W menu in the first place. That’s mainly to say I think there are some longer term considerations we can look at.

In the mean time, I would prefer showing icons next to each item, such as ↗ or even a dedicated icon. But it’s not a strong opinion. Hope that helps.

The long-term considerations belong on #32678, which suggested removing the W menu entirely (note that those comments predate the block editor). For another option, we might consider replacing the external links with one link to a dedicated admin page with links to support, documentation and feedback.

[joedolson]

I'd be highly in favor of adding a dedicated admin page that contained links for support and documentation. That would enable us to provide much better guidance and include more valuable information for users, as well as having capacity to remove these very low-value links from a high traffic interface.

I think it would be worthwhile to forego making these changes in favor of adding a new admin page with this information.

[sabernhardt]

Probably should open a new Help/About ticket to discuss an admin page then. (#58595)

I'll move this out of the milestone.