Gutenberg: 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 #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.

[noisysocks]

Has anyone started working on this? If not then I'll take it on! 🙂

Was a decision reached about whether or not to show the ellipsis containing a 'Open in new window' option? I note that there's some discussion in https://github.com/WordPress/gutenberg/pull/4583.

[karmatosed]

@noisysocks this one is all yours if you want it! Thanks for stepping up and working on this.

[ahmadawais]

It's vote for the third option here. Simple and to the point. 👋

[afercia]

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

How does one switches from display to edit using the keyboard only? Where is a properly labeled UI control that says "Edit link"?

[richardkentgates]

From the point of view of a Web Presence Manager for 2 dozen businesses, I love this. It seems very intuitive and easily understood. I am using the Gutenberg plugin to familiarize myself with it as it comes closer to an official release so I can educate clients. The links management in Gutenberg is far behind the current implementation as far as usability.

Again, on the new tab issue...

(Before you redesign your user interface around right-click pop-ups, be warned: less skilled users rarely use these menus.)

Removing the target attribute is guaranteed to increase web traffic and data use as people become more reliant on the back button, which will penalize those that cannot afford to pay for unlimited data or are running on a slower connection, and who probably make up a large portion of the "less skilled users".

[karmatosed]

Was a decision reached about whether or not to show the ellipsis containing a 'Open in new window' option? I note that there's some discussion in #4583.

Please keep this in @noisysocks and would love to see this developed.

[noisysocks]

Please keep this in @noisysocks and would love to see this developed.

👍 cool—and thanks for reminding me about this issue!

I ran into some pain (see https://github.com/WordPress/gutenberg/pull/4909#issuecomment-364360350) which dissuaded me from finishing this. I'll look into picking it up again. For now, we might have to punt on having the text stay highlighted while you're inserting a link.

[karmatosed]

Let's punt on having highlight save and work on iterations after this gets in. There's another issue we may have to tackle of being able to make a link without highlighting, I'll make an issue as both could be related. Thanks for diving into this @noisysocks.