Iterations on link interface

[karmatosed]

Right now we have a few issues with the link interface that I want to try and solve.

• The links when long can be hidden and hard to read.
• What is a link and when you're interacting with a link is hard to see.
• It feels a complicated process as you're working through.

First screen: adding a link.

This design has the following points:

• A background to link styling (important to note this could be underline) and would denote in text what is a link. It's important to notice.
• Background on the icon state in editor toolbar. Another visual indicator of the 'adding link state'.
• Ellipsis menu icon to show 'more options', we use this icon already in Gutenberg. This probably is a good debate point, what icon should indicate this?

Second screen: a link added

Once a link is added the following points show:

• Unlink icon swaps for link as you can then unlink. In this mockup you unlink from toolbar.
• The link box fits the url you have added.

Third screen: link options

This is pretty much as before but with the other changes still applied. If the open in new window ever went from core we could remove it here.

Fourth screen: Suggested links

This is important to have a little more visual consistency than we have now. It's a small iteration.

Fifth screen: Auto adjusting width

Here is the auto adjusting in play. If on a larger screen it can stretch to full length.

It's worth noting this design is more of an iteration over redesign. I am aware there will be things we need to discuss here, lets consider that and discuss.

[jasmussen]

Things I love:

• the link selection highlight
• the wider box and improved eliding
• the simpler look overall

Things I didn't think I'd like but are growing on me:

• unlinking in the toolbar not the pop-up

The ellipsis to expand the new window config tray, I'm not sold on. I feel ellipses should primarily be used for menus, and sit on the right to imply "more stuff after the stuff you just saw in the reading direction". I think a cog may work better if on the left.

Nice work!

[ellatrix]

• Once Remove "Open in new window" link option #4583 is in, the need for the ellipsis is gone.
• How does this design take into account switching from a displaying state (you can click the link and see what it points to) to editing the link?
• I do like merging/moving the unlink button. I don't think there's a problem with it. Testing this, I noticed that removing the link in the input field doesn't work.

[karmatosed]

How does this design take into account switching from a displaying state (you can click the link and see what it points to) to editing the link?

Clicking into edit the input field would probably be the right pattern as we plan on doing with permalinks. Good point to test for discoverability though.

[karmatosed]

Here are mockups without the ellipsis, thank you for getting that really great UI enhancement in @iseulde:

[SiSt]

I really like the new simplified interface. But think that the UI for the "suggested links" will not be sufficient on bigger sites. From my point of view there should be a user interface to filter on different page types / categories and search for internal pages. For me a link like "Search" or something like that below the list of suggested links might be an option. Alternatively one could inline items, like "Category" at the top of the suggestions, so that the user can click on it, get the list of categories, select one and get all the posts etc.

[ellatrix]

Clicking into edit the input field would probably be the right pattern as we plan on doing with permalinks.

There is no input field though, only a link. I disagree that we don't need both the link and the input field, it is really useful to be able to navigate to the linked resource, instead of having to click in the input field, select all, copy, open a new tab, paste, and enter.