What problem does this address?

Splitting this one out from, and basing the design on #28440.

When you insert a link block such as a Menu Item or a Button (to a lesser extent, a Social Link), for the block to be functional it needs to have both a URL and a label configured. At the moment, this happens in a single link dialog interface.

If you type arbitrary text, you are meant to be searching for a page or post that you can choose from the dropdown, or create a draft with that title. For example if you type "WordPress", if you just press Enter, you will create a menu item labelled "WordPress" which links to WordPress:

But if you use the arrow keys to highlight an existing page, the input field will become the label, and the selected item will become the URL.

If you just paste a hyperlink and press Enter, you get a link item that correctly links to that hyperlink, and with a label that's an "educated guess" based on the URL, but still not a good label:

In other words, the same input field is used to provide both a label and a link destination, but it's not consistent which one you get. This is causing a number of headaches:

• An "add link" prompt, when in fact it's the label that's missing: Navigation Block: Editing the label of block causes Add Link prompt to appear incorrectly #30163
• We're not sure when/how to HTML encode entities and when not to: Navigation Block: Creating a draft page with “&” results in HTML Entities #30111
• Mostly, and this was a key reason for adding the menu item placeholder (Navigation: Reconsider placeholder state for the Link block #28440) in the first place, a button with a label but no link, or link but no label, is quite useless.

What is your proposed solution?

Keep button blocks, menu items, social links in their placeholder states until both a URL and a link has been added, and split the link dialog to enable it.

These designs are courtesy of @shaunandrews from #28440 (comment):

Adding a Link

Adding a Page Link

See also:

#29505
#30116