Navigation block: Adding an existing menu needs design improvements

[mapk]

Describe the bug

When adding a Navigation block, it assumed my current nav as the default. This is okay, but needs some styling to improve the experience. The content for my navigation is from the Theme unit testing import.

I'm also not entirely sure why the + inserter is outside the block on the right side. The inserter icon that is outside and below the block adds blocks outside and below the block, but the one outside and to the right adds items inside the block. We should improve this for consistency sake.

To reproduce

Steps to reproduce the behavior:

1. Make sure you have an existing Menu
2. Add a Navigation block
3. Observe the block's appearance

Expected behavior

I expect the block to look a bit better when it automatically adds an existing menu. The state it left me in was lacking any direction and felt a bit out of sorts design-wise.

Screenshots

Initial state:

Outside Inserter:

Desktop (please complete the following information):

• OS Catalina
• Firefox 70.0.1
• Gutenberg 6.8

[mtias]

I'm also not entirely sure why the + inserter is outside the block on the right side.

This is because of #18298 — it's only outside because the container has been exceeded.

I expect the block to look a bit better when it automatically adds an existing menu.

What do you have in mind?

[mapk]

What do you have in mind?

I think adjusting the line-height on the menu item text would be a great start. Right now they look like separate links entirely when they are forced to two lines.

Adding an horizontal scrollbar to the block (as suggested in #18298) and allowing the text to remain on one line sounds interesting.

Perhaps my concerns are more edge case because they are loading some really weird content into the block. I imagine that if a user had something more familiar like Home | About | Blog | Contact etc. it might look much better.

[mapk]

Alignments on the Nav block seem to be doing a lot better, but should I be allowed to create a new line within a nav item?

[apeatling]

@mapk Is the new line you mention the same as this issue? #18208

[getdave]

Just checking, is this Issue still relevant given the work I did to add wrapping support to the Navigation Block? We ended up dismissing the hoz scrollbar idea during the research around that.

If not then it would be super helpful to have a list in the PR description of items that need to be addressed to make the experience better. Or perhaps individual Issues.

The only concrete item I can see so far in this Issue is adjusting the line-height.

@mapk Please do let me know if I can help in any way. Much appreciated.

[mapk]

@getdave, This looks to be resolved in respect to the wrapping support you did. Thanks!