Customizer Menus: Indicate when there are no items

[swissspidy]

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:

In the customizer:

[rittesh.patel]

Patch for #32810

[rittesh.patel]

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]

Patch updated

[celloexpressions]

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]

Patch refreshed

[rittesh.patel]

@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.

[celloexpressions]

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.

[designsimply]

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

[celloexpressions]

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.

[celloexpressions]

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

[celloexpressions]

See 32810.png​.

[celloexpressions]

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]

@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.

[westonruter]

In 33323:

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

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

[celloexpressions]

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?