Block Editor: Improve UX for the URL link viewer

[gziolo]

Follow-up for #17928 where @glendaviesnz fixed the root issue of #17657:

Block disappear when clicking on a link (anchor, ) with no href

Before:

After:

One option to improve the UX is to:

I tested it with the Class block and it looks like the way it's handled there is, it gets never converted into a link if you leave the input field empty. In the case where you remove the URL and save it, it works as if you would remove the link. We should replicate the same behavior.

To reproduce

1. Copy text from a source where there is a tag with no href
   or
   create a link with no href when editing a block in HTML mode
2. In visual mode, click on the link or drag over it (like when you want to select text containing a anchor with no href).
3. Check how popover behaves.

[shaunandrews]

I don't have a big problem with the empty popover, but maybe adding a "(no URL)" label could help:

[joyously]

I don't have a problem with how it works now either, except that there is no part of the UI to make an anchor instead of a link.

[shaunandrews]

there is no part of the UI to make an anchor instead of a link.

You just type the anchor into the input field, like this:

[joyously]

You just type the anchor into the input field

That makes a link, not an anchor. You don't use a href on an anchor, you use the ID attribute. It's a destination, not a way to get there.

[shaunandrews]

Ah, I see what you mean now. I've never used a link as an anchor point — only to link to one. Currently, Gutenberg allows you to add an ID anchor to the Heading block — which is the only way I've ever done it.

[mapk]

I just tested this out by creating an empty anchor in the code editor. While we have a new LinkControl component, we just show an icon now with no text. Is this still a problem?

[gziolo]

I tested it with the Classic block and it looks like the way it's handled there is, it gets never converted into a link if you leave the input field empty. In the case where you remove the URL and save it, it works as if you would remove the link. We should replicate the same behavior.

I guess the motivation in the Classic editor was to avoid creating an anchor that is invalid because it doesn't have src defined. However, you could argue that it might have id (name in the past) attribute and be valid as well. It's probably up to the accessibility team to advise what's the best way to move forward.

[mapk]

@enriquesanchez, can you provide some accessibility feedback on this one?

[enriquesanchez]

I think we should communicate that the link contains an empty href attribute.

That can be something like adding the text "This link is empty". We should also remove the visually hidden "(opens in a new tab)" and the SVG icon.

[joyously]

To me, "link is empty" means there is no text to click. Perhaps "address is empty" or "no destination"?

What is the procedure for making an anchor (no href)?

[skorasaurus]

related: #26351

[gziolo]

@getdave, should we close this issue after all the iterations applied to the URL link tooltip?

[getdave]

@gziolo I can see the same issue still occurs, namely that the Link UI doesn't expect this scenario and the UX is non-optimal.

Therefore I don't think we should close this one but instead I think we should re-do the description to ensure it's up to date with the changes in the codebase.

@javierarce You and I have worked on the link UI quite a bit. How do you think we should communicate to the user that there is no link or it is invalid?

@gziolo Would you agree an empty href should be considered an "error" state?

[gziolo]

Would you agree an empty href should be considered an "error" state?

I guess it's a correct assumption. We should show some hints to the user so they could fix it.

[javierarce]

@getdave I think #17972 (comment) is still a good solution but we could change the icon:

I also notice that it's possible to create empty links by inserting a space in the input field and the control will create an empty link with just the string http://.

[getdave]

This task is now on my radar to be worked on when I can.