Gutenberg: Navigation block: Add support for separators between menu items.

[alaczek]

A popular design pattern is to have some sort of separator between top-level menu items.

These could take many forms, but two very popular are dots and dashes:

How could we introduce those? My first thought was via block styles but maybe there's a better way to offer more flexibility with choosing the separator?

[talldan]

Great point @alaczek. It could also be a separate block.

There's already a core Separator block that would work in vertical navigation menus.

Generally in horizontal navigations the separator is more for styling, whereas in vertical menus it's often used to divide links up into logical sections, but a block could serve both purposes.

Thinking technically, if the nav menu orientation were exposed as part of the new Block Context API, a separator block could be smart enough to use that to determine how it should appear.

[ntsekouras]

Maybe this could be handled with an object containing information about the separator and apply the effects with css in before / after content property? This will have of course the limitations of supporting content for the content property, but would work for most cases since the separator is something simple and usually a single character or small image.

I am talking about an object since it probably must have more configuration, ex nested menus. Do we apply it to all menu items?

In a simple one level horizontal menu case it could work with just setting the separator character.

This would be simpler than inserting a new block between each menu item and could be targeted only to horizontal menus.

[draganescu]

This issue has been discussed on Slack in the weekly Navigation Sync meeting.

There are at least two options here to explore in the issue before we begin implementing:

• adding stylistic separators (via CSS class, invisible in html)
• adding semantic separators (via a block, visible in html)

[draganescu]

Howdy @shaunandrews 👋 I will remove this issue from the project as it is not a requirement for the navigation editor to support.

[shaunandrews]

Here's a quick look at how the Navigation block could add support for decorative separators:

[mtias]

This seems like it should be a simple to execute styling option, not a block or anything like that.

[cpapazoglou]

Initial commit on addressing the separators in the navigation block https://github.com/WordPress/gutenberg/pull/25339

[ZebulanStanphill]

Quoting my comment on #25339:

I think adding this option is a bad idea. Can't this sort of thing be handled entirely by theme styles? And shouldn't it? It seems like a recipe for inconsistent design to allow the user to choose different separators for different Navigation blocks. That's the job of the theme (and possibly the upcoming Global Styles feature). I already think the option to show/hide the submenu indicator was a mistake. I really, really don't think we should be adding even more options like it.

[mtias]

I think we can leave this one on pause for a bit and see what feedback we get from theme and pattern creators. The balance between complexity and usefulness seems to lean a bit on the wrong side.