Navigation Block: Merge horizontal and vertical nav into one block

[alaczek]

This might have already been discussed, but I was wondering why horizontal and vertical navigation are separate blocks? Would it make sense to make them two styles of the same block?

Could we remove the light and dark block styles (which are reproducible with background and text color options anyway - see #22327) and replace them with orientation? Here's a rough mockup of how this could look like:

[draganescu]

The vertical orientation of the navigation bloc is a variation because it also modifies how the block works. For instance the movers for the links in the navigation block are vertical instead of horizontal in the vertical variation.

That cannot happen by simply adding a class as we need to update an attribute that can then be read and affect how the editor renders the block.

[alaczek]

For instance the movers for the links in the navigation block are vertical

Could you explain what are the "movers"?

Hmm... that is a bummer if these two cannot be merged into one - once I started playing with FSE and creating different headers this option made the most sense to me UX-wise.

On a related note, I found that the vertical menu is getting somewhat lost when using the / command. When I started typing /nav only one Navigation block was suggested to me without indication if it was horizontal or vertical (it is the horizontal one).

If we're going to keep two separate navigation blocks, would it make sense to indicate orientation in the block empty state too? (right now it just says "Navigation")

And would it make sense to be able to transform vertical menu to horizontal and vice versa?

Let me know if it makes sense to open new issues for any of these.

[shaunandrews]

As mentioned above, the horizontal and vertical options are really Variations of the same Navigation block. As such, they appear as different (yet similar) blocks in the library:

I think we should add more variations, and consider renaming the existing ones. The ideas I have in mind are:

• Dropdown: This is what we currently call "horizontal", but I think changing it to dropdowns might be more explicit, in that this variant allows you to create sub-menus that drop down when hovering.
• List: This is what we currently call "vertical", but I think List might be more obvious as to how its expected to be used. Currently, the vertical variation supports dropdowns, but they're very awkward. I'd expect this to change to show the submenus as an indented list rather than dropdowns.
• Sidebar: This would be a new variant, which would use a button to toggle a navigation sidebar open and closed.
• Full Screen: Similar to the Sidebar variant, but instead of toggling a sidebar it would toggle a full screen modal.

Now, as we look at adding more variations, it becomes important to be able to switch between them. As @alaczek mentions above, the existing Transform menu could be useful here:

Its a little lack luster, and doesn't really explain what the differences are between the variations, so I tried expanding them into their own group:

This is likely a little too verbose. Would could condense the options down using sub-menus, and show variations like block styles:

Another idea I had was to use a select element, perhaps in the block sidebar to allow you to switch variant:

[draganescu]

Now that #26687 solved transforming between the two variations in one click, is this issue still useful? #25231 has been closed by that.

[ntsekouras]

I'm closing this as this is resolved by #26687, as @draganescu also mentioned.

Feel free to reopen if you think it has something else to be implemented.