Navigation Component: Hide navigation item if target menu is empty

[david-szabo97]

Description

The need for a solution like this came up in this PR: #25739

We need a solution to mark NavigationMenu as empty and avoid rendering all the NavigationItem which are supposed to navigate to the empty menu. This is pretty straightforward for 1 level Navigation, but we can nest NavigationMenus which makes the a lot more interesting.

This implementation traverses our navigationTree and goes through all the nested menus to check if they are empty. Empty is based on the isEmpty prop which should be specified by the consumer on NavigationMenu component. A menu is not considered empty if any nested menus are isEmpty={ false }.

---

This implementation exposes two new functions in the navigationTree context:

traverseMenu

This function takes two parameters, first is the menu we should start traversing from. Second parameter is a callback which will be called for the menu specified in the first parameter and all the menus that are nested.

isMenuEmpty

This function takes one parameter, the menu we would like to check if it is empty or not. This function uses traverseMenu to go traverse the menu specified in the first parameter. If the specified menu is empty and all nested nested menus are empty as well, then this function returns true. Otherwise it returns false

---

NavigationItem has a new boolean prop: hideIfTargetMenuEmpty. If hideIfTargetMenuEmpty is true, then it checks the navigateToMenu menu for emptiness. If the menu is empty, then this NavigationItem won't be rendered.

How has this been tested?

• yarn storybook:dev
• Navigation -> Hide If Empty

Screenshots

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

Fixes #26265

[github-actions]

Size Change: +263 B (0%)

Total Size: 1.19 MB

Filename	Size	Change
build/components/index.js	171 kB	+263 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
build/a11y/index.js	1.14 kB	0 B
build/annotations/index.js	3.77 kB	0 B
build/api-fetch/index.js	3.42 kB	0 B
build/autop/index.js	2.84 kB	0 B
build/blob/index.js	664 B	0 B
build/block-directory/index.js	8.71 kB	0 B
build/block-directory/style-rtl.css	943 B	0 B
build/block-directory/style.css	942 B	0 B
build/block-editor/index.js	133 kB	0 B
build/block-editor/style-rtl.css	11.3 kB	0 B
build/block-editor/style.css	11.3 kB	0 B
build/block-library/editor-rtl.css	8.91 kB	0 B
build/block-library/editor.css	8.92 kB	0 B
build/block-library/index.js	147 kB	0 B
build/block-library/style-rtl.css	8.1 kB	0 B
build/block-library/style.css	8.1 kB	0 B
build/block-library/theme-rtl.css	792 B	0 B
build/block-library/theme.css	793 B	0 B
build/block-serialization-default-parser/index.js	1.87 kB	0 B
build/block-serialization-spec-parser/index.js	3.06 kB	0 B
build/blocks/index.js	48 kB	0 B
build/components/style-rtl.css	15.3 kB	0 B
build/components/style.css	15.3 kB	0 B
build/compose/index.js	9.9 kB	0 B
build/core-data/index.js	14.8 kB	0 B
build/data-controls/index.js	821 B	0 B
build/data/index.js	8.74 kB	0 B
build/date/index.js	11.2 kB	0 B
build/deprecated/index.js	768 B	0 B
build/dom-ready/index.js	571 B	0 B
build/dom/index.js	4.92 kB	0 B
build/edit-navigation/index.js	11.1 kB	0 B
build/edit-navigation/style-rtl.css	881 B	0 B
build/edit-navigation/style.css	885 B	0 B
build/edit-post/index.js	306 kB	0 B
build/edit-post/style-rtl.css	6.51 kB	0 B
build/edit-post/style.css	6.49 kB	0 B
build/edit-site/index.js	23.3 kB	0 B
build/edit-site/style-rtl.css	3.98 kB	0 B
build/edit-site/style.css	3.98 kB	0 B
build/edit-widgets/index.js	26.3 kB	0 B
build/edit-widgets/style-rtl.css	3.16 kB	0 B
build/edit-widgets/style.css	3.16 kB	0 B
build/editor/editor-styles-rtl.css	476 B	0 B
build/editor/editor-styles.css	478 B	0 B
build/editor/index.js	42.5 kB	0 B
build/editor/style-rtl.css	3.85 kB	0 B
build/editor/style.css	3.85 kB	0 B
build/element/index.js	4.62 kB	0 B
build/escape-html/index.js	735 B	0 B
build/format-library/index.js	6.86 kB	0 B
build/format-library/style-rtl.css	547 B	0 B
build/format-library/style.css	548 B	0 B
build/hooks/index.js	2.16 kB	0 B
build/html-entities/index.js	623 B	0 B
build/i18n/index.js	3.57 kB	0 B
build/is-shallow-equal/index.js	698 B	0 B
build/keyboard-shortcuts/index.js	2.52 kB	0 B
build/keycodes/index.js	1.94 kB	0 B
build/list-reusable-blocks/index.js	3.1 kB	0 B
build/list-reusable-blocks/style-rtl.css	476 B	0 B
build/list-reusable-blocks/style.css	476 B	0 B
build/media-utils/index.js	5.32 kB	0 B
build/notices/index.js	1.79 kB	0 B
build/nux/index.js	3.4 kB	0 B
build/nux/style-rtl.css	671 B	0 B
build/nux/style.css	668 B	0 B
build/plugins/index.js	2.56 kB	0 B
build/primitives/index.js	1.43 kB	0 B
build/priority-queue/index.js	790 B	0 B
build/redux-routine/index.js	2.84 kB	0 B
build/reusable-blocks/index.js	3.05 kB	0 B
build/rich-text/index.js	13.3 kB	0 B
build/server-side-render/index.js	2.77 kB	0 B
build/shortcode/index.js	1.69 kB	0 B
build/token-list/index.js	1.27 kB	0 B
build/url/index.js	4.05 kB	0 B
build/viewport/index.js	1.84 kB	0 B
build/warning/index.js	1.14 kB	0 B
build/wordcount/index.js	1.22 kB	0 B

_{compressed-size-action}

[jeyip]

I see how this feature might be useful and can reduce clutter in the navigation sidebar.

The more I think about it, however, the more I see how hiding navigation items might confuse the user instead. Using the Pages item as an example, clicking on it should lead to the TemplatesPagesMenu. If we programmatically hide the menu, the user may be unaware that they have no Template Pages. They may be curious why the Pages item suddenly disappeared.

The alternative, rather than restricting navigation to the TemplatesPagesMenu, might be to show the menu with some generic empty state text. ("There are no Pages").

@vindl @Copons @david-szabo97

I'd love to hear your thoughts on this.

[david-szabo97]

@jeyip We don't have a use-case for this feature right now. The design I followed (#23939 (comment)) mentions we should hide empty section. But we ditched it and we are showing all the menus all the time, that's what we agreed on with Jacopo. See the last comment in the linked issue, Jacopo threw up a ball regarding this topic. We don't know whether we need this feature yet.

[Copons]

Ahah thanks @david-szabo97 I've been looking for that comment for hours now 😅

The tl;dr would be: I agree with you @jeyip, but it's mostly a design decision.

Hiding empty items would unintentionally obfuscate the hierarchy, but on the other hand showing empty items would unnecessarily clutter the sidebar.
I prefer the former, but there might be a good solution for the latter.

[jeyip]

The design I followed (#23939 (comment)) mentions we should hide empty section.

Thanks for the link 🙏 Catching up on the conversations.

We don't know whether we need this feature yet.

Gotcha 👍

[Copons]

I think we can start working on this again, maybe after mergin #25315, which adds more visibility info in context. 🤔

[david-szabo97]

Ready for review again 😄

[noahtallen]

looks good to me 🚀

[Copons]

I'm really out of my depth with the proposed algorithm, but this works as advertised.
Given the use of the isEmpty prop, and the fact that there won't realistically be tons of heavily nested menus, I wouldn't expect any significant performance hits.