Gutenberg: Widgets page: make the "Block navigation" tool provide full correct info on the widgets

Created on 31 Aug 2020  路  9Comments  路  Source: WordPress/gutenberg

Describe the bug

In the new Widgets page, the "Block navigation" tool doesn't seem to provide meaningful info on the used widgets.

Also, its content appears to be "contextual" based on the selected widgets area, which is confusing. While this behaviro is similar to the one of the Bock navigation in the block editor, I'm not sure it's ideal for the Widgets page (honestly, I'm not sure it's ideal for the block editor as well).

To reproduce

  • add 3 "legacy" widgets in a widgets area:

    • Pages

    • Meta

    • Recent Posts

  • click "Update"
  • make sure the widgets area is selected
  • click the Block navigation button: a panel opens
  • the panel displays only the selected widget area and the tree of the active widgets within it
  • the tree displays a generic name "Legacy Widget (Experimental)" for all the three widgets

Screenshot 2020-08-31 at 16 44 17

This doesn't help users to get an overview of what the actual widgets are. Also, it doesn't help navigating the content: worth reminding the "Block navigation" is also a tool that allows navigation by jumping to the content corresponding to the button that has been clicked. How users are supposed to be able to jump to the relevant content if the widgets aren't clearly identified?

Second issue:

  • click on an empty widget area (in my case, Footer #2 is the empty one)
  • open the Block navigation again
  • the panel now displays the available widgets areas plus the "inactive widget" area
  • Footer #2 is selected

Screenshot 2020-08-31 at 17 10 38

This is very confusing to me, because the panel content changed. Also, there's no way to expand the Footer #1 tree. Actually, what is represented in this scenario isn't a tree: it's a list.

  • same when clicking on an empty area of the page e.g. the grey background
  • the panel displays the available widgets areas plus the "inactive widget" area (no area is selected)

Screenshot 2020-08-31 at 16 45 23

I do realize this behavior is the same of the Block navigation in the block editor. However, I think it's confusing in this context.

Overall, I'd tend to think the Block navigation tends to be too "smart" with its contextual behavior. I'm not sure users are getting a great benefit from this smart behavior.

More importantly, since it's a navigation tool I'd expect the Block navigation to allow to display the whole tree of the content at any time, and allow me to jump to any of the "blocks", whether they're in the selected area or not.

I'd like to suggest to reconsider this implementation also in the context of the block editor.

Accessibility (a11y) Needs Dev [Feature] Widgets Screen [Status] In Progress [Type] Bug

Most helpful comment

@draganescu If you have the name of the widget in an attribute, it can be output in List View using the __experimentalLabel block setting pretty easily:
https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/navigation-link/index.js#L70

If that data isn't available client side then unfortunately things will be a bit more complicated.

All 9 comments

Related: #24566

I hear ya! This does get a bit witty causing perhaps some confusion. However, this doesn't appear to be concerning the Widget Editor only... this is how it works in the Block Editor (post editor) too. I know @shaunandrews has been working on some new List View redesigns and it might make sense to carry over your comments there: https://github.com/WordPress/gutenberg/issues/24029

Thanks for the info. There's a difference though. The implementation in the block editor is already released. Instead, this is a _new_ feature landing in WordPress so I'd expect it to be prioritized and fixed for the 5.6 release.

@talldan is this something that ListView will support? I remember we had some plans about displaying more info on each item besides the block's type. Also @adamziel mentioned that using variations of the LegacyBlock could solve the 1st part.

@draganescu If you have the name of the widget in an attribute, it can be output in List View using the __experimentalLabel block setting pretty easily:
https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/navigation-link/index.js#L70

If that data isn't available client side then unfortunately things will be a bit more complicated.

Looks like we have a dev solution figured out for issue 1.

As for issue 2, it appears to have been a purposeful decision to show full layout of high level blocks when nothing is selected or, in the case of the Widget Screen, when a Widget Area is selected. If a parent block with nested blocks is selected that becomes the top level for which the List View shows.
I'm fairly certain that additions to the List View in the Navigation screen will be ported over to this List View as well which will include things like movers, dragging, etc.
So issue 2 doesn't appear to be a bug, but rather a design decision by those involved in the List View.

Let's move this to dev. :)

For issue there's now a PR - #26138.

For issue 2, I did a quick experiment and showing all blocks gets out of hand pretty quickly:
Screenshot 2020-10-15 at 12 06 34 pm

I feel like we need the expand/collapse feature in List View to solve this.

I would suggest we only have the current sidebar section expanded and collapse the rest until click at which point they open and the previous closes.

I made a separate, brief issue for expanding/collapsing as this wasn't being tracked - https://github.com/WordPress/gutenberg/issues/26141

If there are other ideas I think we can either comment on that issue or here.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

spocke picture spocke  路  3Comments

aduth picture aduth  路  3Comments

franz-josef-kaiser picture franz-josef-kaiser  路  3Comments

maddisondesigns picture maddisondesigns  路  3Comments

jasmussen picture jasmussen  路  3Comments