Gutenberg: Insert link: cannot add a new link or modify an existing link using "Link options" (gear icon) in the classic block

[danielbento]

Describe the bug
When I add a link to some words in a text, a small box appear to put URL. If I need to do extra configurations like open URL in an external page, I click on the link options icon.

After finishing the changes, when saving, the page jumps to the beginning, losing the link, the changes I made and keeping the box open, without any change to close it.

To Reproduce
Steps to reproduce the behavior:

1. Go to any post
2. Select any word
3. Add a URL
4. Click on extra options of URL
5. Validate changes
6. See error

Expected behavior
Save changes and close box in the same position of the scroll.

Screenshots
https://cl.ly/0O0L3h1E0V2v

Desktop (please complete the following information):

• OSX
• Chrome
• Version 67.0.3396.99

[designsimply]

Tested and found that I cannot add a new link or modify an existing link using the classic block "Link options" (gear icon) but that the basic floating link toolbar only works as expected.

Video: 1m40s
^{Tested with WordPress 4.9.7 and Gutenberg 3.2.0 using Firefox 61.0.1 on macOS 10.13.5.}

[mcsf]

It seems we have a few regressions in Link interactions, also seen in other blocks. For this, I'm putting this on the next milestone so we have more eyes on it. Let's see if these regressions are all the same.

[aduth]

It seems we have a few regressions in Link interactions

Do we know that this was ever working (for the Classic block, specifically) ?

[designsimply]

I'm not sure whether it was working before!

[youknowriad]

Punting one more time but we should definitely try to tackle this at some point. Any classic editor expert takers?

[samboUK]

Just to add to this - still not working as of today. Chrome v68

[pento]

I can reproduce this issue. There appears to be a race condition somewhere, as the ability to reproduce it depends on where I put a breakpoint: If it put it on this line, the link doesn't update. If I put it on the next line, it does update.

[designsimply]

@turtlepod tested and confirmed this issue using WordPress 4.9.8 and Gutenberg 4.1.1 and I thanked them for the report and closed #11432 as a duplicate.

[turtlepod]

This issue still in latest gutenberg 4.5.0

Why

This is super important, because all previous/old content will be converted/fallback to classic editor block and classic editor block need to work flawlessly

If really not possible to fix this, I suggest to simply remove the wplink in classic editor and use regular tinymce link plugin (which is included in core)

Trac Link: https://core.trac.wordpress.org/ticket/41590

Demo (it's my custom editor, but you'll get the idea)
https://drive.google.com/file/d/1-7-nIxsfhZcUbUcxGl002K-RKwGxw5st/view?usp=sharing

So, basically, if user want to add link the "fancy way" use block and not classic editor block.
(less fancy, but working)

Thoughts on this?

cc @azaozz

[turtlepod]

@mtias I just realize you change the milestone to 5.0.1
please don't add this to 5.0.1, IMO, this feature is very important to work on gutenberg 5.

I explain a hotfix in my previous comment if needed. at least it will not be broken on launch.

[designsimply]

Re-tested with WordPress 4.9.8 and Gutenberg 4.5.1 and found that if I make the edits twice then they take effect but the first time you edit link options (gear icon) in the "Insert/edit link" modal the updates do not take effect.

Video: 2m21s
^{Seen at https://tan-otter.jurassic.ninja/2018/11/21/classic/ running WordPress 4.9.8 and Gutenberg 4.5.1 using Firefox 63.0.3 on macOS 10.13.6.}

Note: the exact same problem happens when trying to edit Image Details, see #11433.

[theglobetrotterguys]

This issue still exists for me. Nothing from the gear icon saves so I can not set links to open in a new tab..

[youknowriad]

@azaozz @iseulde Any ideas here?

[azaozz]

I've been looking at several similar occurrences in the Classic Block TinyMCE instance. One of the causes is that we keep needlessly reloading the editor content (and replacing the DOM) on blur (often, but not always). When opening an external modal the editor gets blurred, so any DOM references are broken.

It's not just that though. In some cases the DOM in the contenteditable gets corrupted somehow, like the newly added link node doesn't have a parentNode, etc. Still trying to figure out how/why that happens :(

[azaozz]

Opened https://core.trac.wordpress.org/ticket/46071 to track this as it is an issue with one of the custom TinyMCE plugins in WP.

Think this can safely be closed (needs a "Close" label).