Iterations to the new menu item dialog

[SaxonF]

What problem does this address?

A few issues with the current dialog:

• We use different dialogs depending on if you are in canvas or in inspector/browse mode sidebar.
• When in canvas we create a link before deciding what that link is. This means a user has to go through the process of removing that link if they decide to cancel the action.
• We don't always show "page link" as a block option in the dialog in the inspector
• The "apply" button is rarely (never?) needed as the link is added as soon as you click an option

What is your proposed solution?

link-inserter-v2.mp4

• One dialog regardless of where you are adding a link
• Show preview of link after clicking option so that user can change settings such as "open in new tab" before hitting "add" (replacing "apply").
• Clicking edit on the link preview pill should revert back to the original state. This should be almost identical to editing a link.
• Don't show "add" button before selecting an option
• Include an option in the list of items to add "Insert a block instead" that toggles to the generic block inserter dialog
• Always show option to draft new page at the bottom
• In this generic block inserter dialog if you select "page link" it reverts back to original dialog
• Add an "All pages" option that inserts a pages list. In future clicking this will go to the same "preview" state as adding a page link where you can select the parent page.
• Adding a custom link takes you to a state where you can add text
• Editing custom links in canvas (and browse mode sidebar) triggers the preview state where you can edit or detach

[jameskoster]

In terms of 6.2, there are two big issues that this design would solve:

1. Emphasise Page Links more when creating menu items in the Navigation panel

It's a bit unexpected that Page Link doesn't appear in this popover, and that things like Page Break, Spacer, etc are given more prominence.

2. Page Links (and custom links – #48593) cannot be edited in the Navigation panel

page.link.mp4

Page links can be added to the menu, but not edited.

[jameskoster]

@SaxonF one thing missing here is how to edit Custom links.

[SaxonF]

Updated prototype to show custom links

[Mamaduka]

I think a reusable combobox like this would be a great addition to the components package. Maybe we can use Ariakit as a base. Cc @ciampo @mirka

@jameskoster, besides #1 from your list (the #2 is in progress), what other enhancements do we want to ship in 6.2? It would be hard to introduce proposed UI changes like these, this late in the release cycle.

[jameskoster]

Hey @Mamaduka, yes it's very late ☹️

The other items that seem important:

• Navigation Sidebar: Change the logic about which navigation gets selected for the sidebar #48689
• Page List: Invoke the convert to links modal on any interactions with the page list item block #47748
• Site Editor Navigation panel: Site Logo, Search, Spacer, Social Icon, Page List experience feels a bit broken. #48675
• Inconsistent use of the chevron icon in the dark sidebar #48591 (this one is more of a nice-to-have)

It would be nice to do something when the menu includes only a Page List block too. The parent feels superfluous here:

I'll make an issue for that one.

[getdave]

Whilst I appreciate the UX concerns, I don't think we can be making these changes to the Link UI at this stage in the WP 6.2 release cycle.

I feel that we should

• resolve only the most critical issues now for the Browser Mode Nav view
• work on the underlying component in Revise Link Control design and UX #47310 as part of the 6.3 cycle

[jameskoster]

Obviously it depends on what we deem 'critical', but as a tool for managing the primary menu it is very strange to see these blocks as suggestions when clicking the [+]:

Most of the time you'll want to add an existing page to the menu, or draft a new page and add that. Both of those flows are buried right now.

[getdave]

That dialog is not Link Control but rather the <Inserter> component so that's good 👍

We'll need to update the logic that determines which blocks to show. This is based on a frecency model if I remember correctly...

[ciampo]

I think a reusable combobox like this would be a great addition to the components package. Maybe we can use Ariakit as a base

Thank you for the ping!

The @wordpress/components package already has a few components that may be of help here: ComboboxControl and CustomSelectControl.

I also appreciate that those components may not be featuring the most up-to-date editor design language. We do plan to work on them and (as suggested above) actually rewrite them using ariakit. That will also be the perfect occasion for updating the components' look&feel.

Although, looking at the video at the top of this issue, what is being proposed here doesn't look like a simple combobox, since clicking on an item in the dropdown doesn't simply select that item, but can trigger new UI to be displayed. Given how tailored to its specific use-case the proposed piece of UI looks like, my suggestion is to build such a component directly in the site editor package.

Finally, I also echo @getdave 's thoughts about making such changes so late during the WP 6.2 release cycle.

[SaxonF]

Although, looking at the video at the top of this issue, what is being proposed here doesn't look like a simple combobox, since clicking on an item in the dropdown doesn't simply select that item, but can trigger new UI to be displayed.

@ciampo I think this is just a combination of ComboBox with custom render item + static render items below (new draft/insert a block) depending on if search is empty or not. It's just a modification of what's already in prod.

[getdave]

I would also like to connect this to #47310. It's really important we don't bolt on lots of changes without looking at the lower-level component as a whole.

[getdave]

@SaxonF I think we should close this one out in favour of having a single set of revised designs posted in #49091. It's getting too confusing. I'm going to go ahead but please feel free to reopen if you feel that's warranted.