Navigation menu block: allow editing of new menu items from the block inspector UI

[enriquesanchez]

A suggestion from #20742.

The block navigator in the navigation menu block has proven to be a familiar and easy way to navigate UI, particularly for users who are using only a keyboard.

Currently you can add new links from it, but one missing piece that would make it much more useful is to also be able to edit new menu items (name, URL, etc) right from the block navigator.

[enriquesanchez]

Split out from #20369

[mapk]

Not a bad idea. In conjunction with #11408, it could get overwhelming, so it needs some design work to figure out how that interaction might work.

[mapk]

This prototype focuses on the subnav aspect. I was working on it this morning and wanted to share it somewhere.

Basically, if the user has selected a top-level menu item and proceeds to add a submenu item, the Navigator would only show subnav ability. So from this modal, the user still would not be able to add any top-level items because they've selected the subnav interaction.

[karmatosed]

I wonder if just positioning works over limiting? An example being if the default is just to position the navigation item where you enter, then we don't need limiting. I think it's fine if someone decides to then just start building from the interface as there's already some evidence it's easier.

It's all worth testing because it could cause cognitive friction limiting and it could cause friction. not, insights will tell that.

One point, this specific issue. isn't about where it's placing as much as the editing of new menu items, I totally get those that's a macro part of a larger flow. Here is what I think we can distil down to the simplest form of editing, just typing into the link name like text.

This needs to be then thought of how it could work with rearranging once that is added, but it solves the problem of default link names through the block navigator. Later we can build up the experience.

[adamziel]

@karmatosed this has Needs Dev feedback but after reading the description and all the comments I don't have a good understanding of how this should work exactly - would you mind elaborating? E.g. How to switch between editing the text and the link? Should this include the suggestions box?

[karmatosed]

Thanks for digging a bit more into this @adamziel. Ideally, it would have the field editable when you click in. Is that a component that's possible over having a button to edit? In this sense, the text is more like the 'add link' placeholder for navigation. Here is a step-through that hopefully clarifies a little more:

The interaction is just the same as when you add a link in the navigation block, they both should be same, add text and you can edit it.

[talldan]

Ideally, it would have the field editable when you click in. Is that a component that's possible over having a button to edit?

Click is currently used to select the block from the navigator, so might have to think about how to incorporate both editing and selecting.

Another thing I've had on my mind about this feature is that adding a link is an important aspect of the navigation block, and so I'm not sure how that could be included here, or even whether it needs to be. If it's not included, I think that makes being able to select a block more important so that a user can add a link in the main block interface.

[talldan]

In terms of the implementation, I also had some thoughts on that!

It could be interesting to try using a slot/fill in the edit function:

edit( { attributes } ) {
    return (
        // ...
        <NavigatorEdit>
            <RichText
                value={ label }
                onChange={ ( labelValue ) =>
                    setAttributes( { label: labelValue } )
                }
                placeholder={ itemLabelPlaceholder }
            />
        </NavigatorEdit>
        <NavigatorView>
            <RichText.Content
                value={ label }
            />
        </NavigatorView>
        // ...
    );
}

[adamziel]

Still miles to go but I started a PR #21948

[karmatosed]

Another thing I've had on my mind about this feature is that adding a link is an important aspect of the navigation block, and so I'm not sure how that could be included here, or even whether it needs to be. If it's not included, I think that makes being able to select a block more important so that a user can add a link in the main block interface.

@talldan as this interface is going to be used for the sub-navigation it will need ability to add.

[talldan]

as this interface is going to be used for the sub-navigation it will need ability to add.

@karmatosed That's not quite what I meant. I meant that in the designs above only the text for the link is being set, it doesn't take into account the href.

[adamziel]

v1 which only allows editing the actual text is ready for review: #21948

Also, I share the same concern as @talldan - would #21372 fix it?

[karmatosed]

I'm going to take a step back and ask a question which may change how we approach this. Currently, in the sidebar the navigation adding a link doesn't add an actual link, it just adds text:

How is this different from the existing instance? From my understanding, what is being suggested is being able to edit that, however, with sub-navigation using it this would also be in that instance.

I'll review #21948 as that feels like a step towards. I also will work on a full flow for #21372, it's yes part of that, however we need to be able to edit the navigation link in order to have the full experience.

[adamziel]

Just capturing this alternative direction here: #21727 (comment)

[noisysocks]

#22210 is sufficient to close this.