Navigation Link- improve inspector update UX

[scruffian]

What problem does this address?

Currently, when a Navigation Link block is inserted the user sees a Link Control UI in a popover, like this:

If the same block is inserted using the list view in the navigation block, we show the same popover, but in the inspector controls:

This UI is helpful for adding a link. The problem comes when we want to edit that same link. Instead of seeing the same controls again we now show the inspector controls for the Navigation Link block:

This is much less helpful - you have to know the URL of the page you want to link to.

The current approach using popovers is also fragile - there are a couple of issues at least that arise from the fragility:

• Link UI opens in list view for unconfigured Nav Link blocks added via block editor canvas #48028
• Navigation Block: fix link UI popover only opens if there's one navigation block in the page #47829

These two issues highlight that our current approach is using the system in ways that it doesn't support. I think we should reassess the UX here to ensure we are heading in a good direction before we put in too much development time.

What is your proposed solution?

One option is to not use a popover for this at all. Instead we could put the Link Control UI in the inspector controls for the Navigation Link block, something like this:

For this to work we'd need to change the default behaviour of the navigation list view - at the moment when you insert a block, the navigation block stays selected and we don't change the contents of the inspector controls. This raises some more questions:

1. Should we modify the behaviour of all blocks when they are added using the navigation list view, so that they all become selected and the inspector controls update (users can still use the back button to get back to the list view)
2. What should happen when the block is added directly in the canvas?
3. Should we have a different placeholder for the block when it is first added (rather than "Add link")?

Before we put more time into this I'd like to get some design/product input. cc @richtabor @SaxonF @jasmussen @draganescu

[tomdevisser]

The Settings Sidebar is not visible by default on a small / mobile screen, and may also be collapsed in a desktop view. Therefore, it should not be relied on for anything that is necessary for the basic operation of the block.

I'm a big fan of moving the pop-up to the Inspector Controls, but I do think this goes against the current Block Design philosophy which means that might need a more nuances rewrite adding UX considerations.

As for your questions:

1. In this case I think being consistent for that specific block has more value than being consistent spanning all InnerBlocks in a Navigation Block. E.g. the Site Logo block should work the same everywhere, not differently inside the Navigation Block.
2. I'm not sure I understand this question.
3. What makes you consider the placeholder needs a change as well?

[scruffian]

To clarify question 2:

By adding a block in the canvas, I mean using this block inserter, rather than the one in the navigation list view:

Question 3: The reason to consider a change in the placeholder is connected to your point about the inspector controls being closed. Maybe we shouldn't be relying on inspector controls and instead we could change the block placeholder to show the Link Control UI (a smaller version I guess), so that its possible to use, even if the inspector controls are closed.

[tomdevisser]

Regarding question 2, I don't think there should ever be a difference in what happens between different block appenders. That could add a lot of confusion to the editor.

As for question 3, I think I'd prefer opening up the Block Settings in the Inspector Controls automatically upon adding a block to the nav bar. We could make that a desktop-only feature, and make a smaller Link Control UI on mobile like you mentioned. But we can only go so far in supporting every option on mobile, and in practice I think no one is going to go through the trouble of making super advanced menu's from their mobile device.

[draganescu]

I think the inspector should retain the search and suggest functionality found in the popover, but I think we should not remove the popover until we come up with a better way to do it in the canvas (say In toolbar link editing?)

[SaxonF]

Agree with @draganescu in that the url control/input should be treated almost like a creatable search select that can be used in inspector or popup. I'd only show list of suggestions on input focus.

[richtabor]

One option is to not use a popover for this at all. Instead we could put the Link Control UI in the inspector controls for the Navigation Link block

Something like this could work, though seems LinkControl is perhaps a bit too shifty to move forward on this just yet (#49091 (comment)). May be best to pause until that direction is a bit clearer.

[richtabor]

Agree with @draganescu in that the url control/input should be treated almost like a creatable search select that can be used in inspector or popup. I'd only show list of suggestions on input focus.

I lean in this direction now, leaving the popover in place if you want to use it but improving the Inspector view to work more like the popover searching.