search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.36k stars 4.14k forks source link

Standardize 'Back' and 'Go back' labels and icons #50106

Open afercia opened 1 year ago

afercia commented 1 year ago

Description

There's a bit of inconsistency in the usage of labels for the various 'back' icon buttons used across the interface. Icons are a bit inconsistent as well: sometimes it's the arrow left icon, sometimes it's the chevron left icon.

For better clarity and usability, the labels should be consistent: either always use 'Back' or 'Go back'.

Ideally, the icons should be consistent as well. I'd leave this point to some design feedback though.

A few examples:

In most of the components for mobile and most of the .native files, the label is 'Go back`. Not sure how to provide screenshots example for these cases but you can always do a search in the codebase.

Label: 'Go back to the Dashboard' - Chevron icon

Screenshot 2023-04-26 at 16 11 18

Label: 'Back' - Chevron icon (see also https://github.com/WordPress/gutenberg/pull/50104)

Screenshot 2023-04-26 at 16 03 27

Label (visible text): 'Back' - Chevron icon

Back text

Label: 'Navigate to the previous view' - Chevron icon

Navigate to the previous view - no tooltip

Label (visible text): 'Back' - Arrow left icon

post - template editor - text

Label (visible text): 'Back' - Arrow left icon

editing template part from template

Step-by-step reproduction instructions

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

xerpa43 commented 1 year ago

Hi, I would love to work on this one. I am new and this seems like something which I could do

afercia commented 1 year ago

@xerpa43 Hi and welcome. Do feel free to go ahead and submit a pull request! 🎉 For some initiali guidance: https://github.com/WordPress/gutenberg/blob/trunk/docs/contributors/README.md

jasmussen commented 1 year ago

Good one. I'd personally lean towards standardizing on the chevron and the "Back" tooltip across as many instances as possible.

The "← Back" in focused editing could probably use a bit of a re-think. It seems like it is duplicating the W button in its behavior now, and might even be possible to retire. It does also, as far as I recall, serve as a "back to the page editor" when you enter this section from editing a page, so this is worth looking at with care.

The "Back to the dashboard" tooltip, is it sufficient to replace this with just "Back"?

autumnfjeld commented 1 year ago

Does anyone know why an icon has been used in the top left to represent "Back to the Dashboard"? This is no intuitive and from my point of view is only learned thru "accidental button clicking". Why isn't a clear Back icon or Back text used here?

In this example the green thing is my site icon, serving as "Back" image

In this example the WordPress logo is the "Back"

image

Also this is odd behavior, a bug? I'm clicking on my green-flower icon repeatedly and caught in a loop. https://d.pr/v/i9q4IC

https://github.com/WordPress/gutenberg/assets/5665959/f742306f-ced0-47f3-b2c1-954d2b001ac4

Repeating one of the above comments, in the Site Editor browser view, both the W icon and the < go back to the Dashboard:

image image
afercia commented 1 year ago

@autumnfjeld good point. Personally, I find the W logo / Site icon button very confusing and inconsistent. Depending on the editor and its state, it is used for different actions which is less than ideal. Basically, you click on it and you never know what is going to happen. Does it open the navigation panel? Does it go back to the Dashboard? Does it go back to the Posts list? Also, the default W logo isn't the best image to communicate the udnerlying functionality. Historically, in WordPress core the W logo has always been used for other purposes and users are used to that. In my opinion, it is even worse when the W logo gets replaced by the Site icon. To me, a button or link with the Site icon just means thtat clicking on it I g'm brought to the front end site. That said, I'd think all these points are slightly off-toopic as this issue only aims to make the Back label and icon consistent across the editor. Please do feel free to create a separate issue, if you like, and report your thoughts / struggles witht the W logo / Site icon.

richtabor commented 9 months ago

Related to https://github.com/WordPress/gutenberg/issues/54628.