Navigation block: Make it easier to add a spacer block

[annezazu]

What problem does this address?

In the last week, two different folks noted how difficult they found it to add a spacer block to the navigation menu. Right now, you essentially have to add the spacer block to the end of the navigation block and then use the block movers to place it where you want it to go OR just rely on block spacing to control all spacing in the block:

spacing.mov

For a specific and common use case, imagine you want to add the site logo to the navigation block but you want there to be more spacing between the logo and the rest of the menu items. Right now, this is fairly cumbersome to accomplish since you can't use the "insert before/after" functionality, the spacer block isn't listed as something to transform, etc.

What is your proposed solution?

This ties into loads of different issues including but not limited to #23603 and #33018. For now, I'm opening this one to ground the problem in a specific use case and to offer an issue where folks can follow along as this work evolves. cc @tellthemachines since I know you've worked on this purely for awareness!

[carolinan]

I feel that this is true also for the other inner blocks like the home link, and it is unnecessarily difficult to add them:

To add a spacer or a home link to a new menu, I need to:

1. Add a navigation block
2. Select Start Empty
3. Select Add block
4. Select one of the following: Site logo, search, social icons (because if there are only link items, the browse all does not show(!))
5. Select Add block
6. Select browse all
7. Select spacer
8. Remove the site logo/search/social icons

I even tried typing /spacer in the link input field and it only asks me if I want to create a new draft page called /spacer.

[javierarce]

I've been thinking about this problem and how weird it is that sometimes the appender/inserter button adds a link, and other times it shows you a list of blocks (it took me a while until I understood the actual reason, which is what @carolinan mentions in the comment above), and I feel that we should always show the block inserter popover, even if adding a link would require an extra click.

Showing the block inserter would make the behaviour of the navigation more predictable and also make it easier to add spacers and other blocks.

[jhmonroe]

Experienced an issue today with the spacer block in nav also. It allows me to insert one but when I click the spacer to move it around, the nav outline opens in the right-hand view and the interface won't allow me to move the spacer. Links, social, search all work fine. Just the spacer block causes the navigation interface to freak out

[annezazu]

Noting that this should ease the experience greatly and close this issue out: #57756

[tellthemachines]

Is this still an issue? The in-between inserter seems to be working well inside the Nav block:

Note that now it's also possible to change the width of Navigation children using the Fit/Fill/Fixed controls under Dimensions.

[annezazu]

For context, here's the full flow where you can find it's pretty hard to actually add the spacer block in:

spacer.in.nav.mov

Again, here's a specific and common use case, imagine you want to add the site logo to the navigation block but you want there to be more spacing between the logo and the rest of the menu items.