Improving 'Remove' icon in TinyMCE link inline toolbar

[hardeepasrani]

When you are editing a post, and click on a link in the post, you are presented with a popup that shows you the URL, a pencil icon for editing the link, and an X icon for closing the popup. Oh whoops, the X icon actually deletes the link information. A more appropriate icon for this part of the UI is a trash can instead of an X.

Before: ​https://nimbus.everhelper.me/client/notes/share/514182/v5nfqq51axc9zwvm3ep0

After: ​https://nimbus.everhelper.me/client/notes/share/514181/didbxhmd251cmdpsqpqg

Same goes for Images & Galleries

[hardeepasrani]

Changes dashicons-no to dashicons-trash

[hardeepasrani]

I posted the wrong link. There you go:

Before: ​https://nimbus.everhelper.me/client/notes/share/514182/v5nfqq51axc9zwvm3ep0

After: ​https://nimbus.everhelper.me/client/notes/share/514180/eos11px5qbxcr2vzmng3

Hope it makes sense. And thanks to Alan for the suggestion. :)

[ravipatel]

Needed replace class dashicons-no with dashicons-trash.

[ocean90]

#37449 was marked as a duplicate.

[afercia]

Maybe the default TinyMCE "unlink" icon would improve consistency. See also 36569#comment:5.

[magicroundabout]

I spotted this too and raised #37449 as a result. Use of the X seems inconsistent - it's used on the media-modal to close the modal. An X in the corner of something is, in my mind, a design pattern for closing, not deleting. And in my case I find myself clicking the X to close the modal. Visual here:

I'd really like this changed to a trashcan or, probably better, the suggested remove-link dashicon.

I originally suggested, and mocked up, the trashcan, retaining the X for closing the modal. My reasoning for doing this is that you still want an affordance for closing the modal on mobiles (yes, a tap "outside" works, but there is no affordance for that):

Unlink looks like this:

[iseulde]

X was used for consistency: the inline toolbar for images and views also uses the X to remove the image or view. Once I asked @melchoyce about using a trash icon for images, but the argument against that was that it could mean the image gets removed from the server, and not just from the post. In any case I agree that the current icon is a bit confusing, but I'd also like an icon that is consistent across all inline toolbars.

[ocean90]

#37954 was marked as a duplicate.

[melchoyce]

Replying to afercia:

Maybe the default TinyMCE "unlink" icon would improve consistency. See also 36569#comment:5.

+1. Unlink feels more consistent, and then we can eliminate the x entirely, since clicking away from the link popup closes it.

[iseulde]

@melchoyce I don't think we can remove a button to close the toolbar, as clicking outside may not be possible on smaller screens if there are search results as well.

[iseulde]

Oh, it appears the edit link toolbar doesn't have an X button. Maybe that can give problems on a small screen...

[mor10]

Jumping in here: In the context of the popup where there is no unbroken link icon, the broken link icon is not clear. I suggest redesigning it to something that looks more like a link with an X over it to make it clear this removes the link. On its own, the broken link icon looks a bit like a pill that is popping open.

[azaozz]

Replying to mor10:

Yes, agree. The unlink icon needs some context to be clear, best is to keep it next to the link icon. Also having the "link" icon for "Insert/edit link" in the top toolbar then having the pencil icon for editing links in the inline link toolbar is inconsistent.

As far as I see having both 'link' and 'unlink' icons in the inline toolbar seems best (screenshot above).

[azaozz]

In 37278.2.diff:

• Change the icons in the inline link toolbar to be same as in the top toolbar.
• Remove the unlink icon from the top toolbar. Even if there is no inline link toolbar a link can be removed by deleting the URL in the wplink modal (or the default TinyMCE modal). This is how the TinyMCE examples are too: ​https://www.tinymce.com/docs/demo/basic-example/.

[azaozz]

Fixed in [38891]:

TinyMCE: change the icon and tooltip for the remove link button in the inline link toolbar.

Props hardeepasrani, ocean90, magicroundabout, iseulde.
Fixes 37278.

[hardeepasrani]

@azaozz Great progress here. Further more, I think the Remove Link button should be disabled if the selected node is not a link in the editor. Your opinion?

[swissspidy]

Further more, I think the Remove Link button should be disabled if the selected node is not a link in the editor.

See #36569