WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#32810 closed defect (bug) (fixed)

Customizer Menus: Indicate when there are no items

Reported by: swissspidy Owned by: celloexpressions
Milestone: 4.3 Priority: normal
Severity: normal Version: 4.3
Component: Customize Keywords: has-patch commit
Focuses: ui, javascript Cc:

Description

In the normal nav menu screen in the admin, No items. gets displayed if there are no images. In the customizer, the section just stays empty. We should add such a sentence there too, otherwise its very confusing.

Menu management in the admin:

http://i.imgur.com/cuVaWFi.png

In the customizer:

http://i.imgur.com/LGJNCsC.png

Attachments (6)

32810.diff (1.6 KB) - added by rittesh.patel 6 years ago.
Patch for #32810
32810.2.diff (2.0 KB) - added by rittesh.patel 6 years ago.
Patch updated
32810.3.diff (2.2 KB) - added by rittesh.patel 6 years ago.
Patch refreshed
32810.png (40.5 KB) - added by celloexpressions 6 years ago.
Disable empty sections, with a "no items" notice.
32810.4.diff (3.3 KB) - added by celloexpressions 6 years ago.
See 32810.png.
32810.5.diff (3.3 KB) - added by valendesigns 6 years ago.

Download all attachments as: .zip

Change History (17)

@rittesh.patel
6 years ago

Patch for #32810

#1 @rittesh.patel
6 years ago

  • Keywords has-patch 2nd-opinion added

Added one new template named not-available-menu-item to show No items message instead of empty block if there is no item to display.

Dev suggestions will be appreciated if I'm missing anything.

@rittesh.patel
6 years ago

Patch updated

#2 @celloexpressions
6 years ago

  • Focuses javascript added
  • Keywords needs-refresh added; 2nd-opinion removed
  • Milestone changed from Awaiting Review to 4.3
  • Version set to trunk

A better name for the template would probably be no-available-menu-items. But I'm thinking it would be simpler if we just have a string that we use if there are no items available in JS and write it with <p> tags rather than rendering from a template. See how the search section does it (and we may be able to re-use the sam text that it uses).

Also, I haven't tested the patch yet but I believe that it will currently show that text after the last page of available items has been loaded. The text should only be written if the requested page is the first one and there are no items.

@rittesh.patel: do you think you could create an updated patch that addresses those issues?

@rittesh.patel
6 years ago

Patch refreshed

#3 @rittesh.patel
6 years ago

  • Keywords needs-refresh removed

@celloexpressions I have updated patch.

Yeah, in a way it makes sense, loading template to just show No items is not a feasible way. To make it consistent, I have made it same as search section.

#4 @celloexpressions
6 years ago

Thinking more about this, I'm wondering if it would make more sense to not show any sections that don't have any available items. This could be a simple check in available_menu_item_types(). Only reason not to do that would be discoverability so that users know they can add, for example, tags, once they have some. But if we went that route I'd want to put a more descriptive explanation like is being proposed in #32710.

#5 @designsimply
6 years ago

@celloexpressions, what if we just grayed out the empty boxes so they're present but not interactive?

#6 @celloexpressions
6 years ago

  • Keywords needs-patch added; has-patch removed

Along with designsimply's idea, I'm going to make a new patch here that instead does something along the lines of adding the cannot-expand class and a textual indicator that there are no items, so that the section heading is visible for discoverability, but indicates that it's empty without needing to expand it. May need design tweaks from there.

#7 @celloexpressions
6 years ago

  • Owner set to celloexpressions
  • Status changed from new to assigned

@celloexpressions
6 years ago

Disable empty sections, with a "no items" notice.

#8 @celloexpressions
6 years ago

  • Focuses ui added
  • Keywords has-patch added; needs-patch removed

32810.4.diff works pretty well - it's clear that the section exists but doesn't have any content, without needing to interact with it, and interactions are disabled automatically.

Design-wise, I like using the non-interactive colors but we are below minumum color contrast guidelines; not sure if anyone has suggestions there or if we can live with it for now.

@valendesigns
6 years ago

#9 @valendesigns
6 years ago

  • Keywords commit added

@celloexpressions I like the direction of your patch, it's a much simpler solution. Although there were a couple changes I made to it in 32810.5.diff. The transparent background was odd when there is a open section below or above, so I think it's best to just use the default white background for the time being. That is until we get the chance to go over the UI again in 4.4. Additionally, using absolute position could bite us later with long translation strings and so I modified it to use float. Which meant I needed to hide the spinner completely and remove its ghost, that allowed the text to fully float right. Last, I added a negative tab index on the button so it would be skipped and not focusable. I think this is ready to go if you can live with the white background.

#10 @westonruter
6 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 33323:

Customizer: Indicate when there are no nav menu items available for a given type.

Props celloexpressions, valendesigns, rittesh.patel.
Fixes #32810.

#11 @celloexpressions
6 years ago

Never got a chance to respond to this, but I'm really not a fan of leaving it white when it doesn't have items. Being white, it's visually an interactive element, whereas gray implies non-interactive and is likely more obviously empty (I expect some users will click on it before seeing the no items text). We can revisit in 4.4.

Since the design was changed since the latest screenshot, can someone add "as-built" screenshots for this?

Note: See TracTickets for help on using tickets.