Remove Link button in Visual Editor needs to be disabled when cursor isn't over link

[ahortin]

In previous WP versions, when your cursor wasn't sitting on top of a link in the Visual Editor, the Remove link icon in the toolbar was disabled, indicating that it was unavailable. When the cursor was placed over a link, it would then become available.

It's now showing as enabled all the time, even when your cursor is not on a link. This indicates, wrongly, that there is some action that it can perform.

As can be seen in the following pic, the Remove link icon is the same colour as the Insert/edit link icon.

​https://cloudup.com/cTXFPpj4eLF

Looking at the Redo button, it has the class mce-disabled added to its containing div, changing the icon to a light grey, indicating that it's not available. The Remove link icon should operate in the same way (which is how it used to work).

[swissspidy]

I wonder when this changed. Who wants to find out? :)

Looks like we can't just use disabledStateSelector: ':not(a):not([href])' because TinyMCE doesn't support these selectors.

[ahortin]

@swissspidy Looks like v4.2 from what I can tell. I just tested 4.1.10 and it was working fine and then after upgrading to 4.2 the icon would no longer display the disabled state.

[azaozz]

This is the TinyMCE default behaviour. The problem is that in some cases it is hard to detect when:

• Part of a link and some text are selected.
• A link is in the middle of the selection.
• More than one link is selected.
• Parts of two links are selected.

In these cases running the contentEditable unlink command will properly remove the link(s) however it may fail to enable the unlink button. Also note that TinyMCE doesn't use the unlink button any more. Links can also be removed by editing them and deleting the URL.

I'm on the fence if we should be changing TinyMCE's default. We can easily disable the button on loading and only enable it when the caret or the selection is in an <a> node. That will leave it disabled in the above four cases.

Since 4.3 links can also be removed from the inline toolbar, by clicking on them and clicking the X button. So maybe we should remove the toolbar Unlink button too.

[afercia]

I'd rather consider to remove the "unlink" button because... it's one button less ;) Seriously, now it just duplicates the "X" remove button in the inline toolbar, right? And maybe the "X" button could use the "unlink" icon.

Removing the accessibility focus since not strictly related to a11y.

[azaozz]

Replying to afercia:

I'd rather consider to remove the "unlink" button because... it's one button less ;)

Yep, my thinking too :)

...maybe the "X" button could use the "unlink" icon.

I think it uses the X to stay consistent with the wpViews (oEmbed previews, galleries, etc.), but having the "unlink" icon there would be better. That will also fix #37278 about X not being intuitive enough.

[melchoyce]

Since the "unlink" icon appears contextually, I'd be fine with removing it from the TinyMCE toolbar.

[azaozz]

In 36569.patch: removing unlink from the editor toolbar is as easy as that :)

[melchoyce]

In 41831:

TinyMCE: Remove "Unlink" icon from toolbar

Because "unlink" now appears contextually when editing a link, let's remove it from the toolbar.

Props azaozz, ahortin, swissspidy, afercia.
Fixes #36569.