Insert Link: linkify overlay doesn't disappear after link is created

[commorancy]

Describe the bug

The first two bugs apply to the Classic block type:

1. A small linkify overlay is created on top of the screen when you click the link button. If you use the gear on the overlay to change the link settings in a bigger overlay, when you're done with creating the link on text, the small overlay doesn't disappear. It hangs around blocking the screen forever or until you linkify something else. If you use the small field and click the blue arrow, it does go away.

2. I've had troubles with linkifying. The first time a try to linkify a word, it doesn't work after I supply a URL and name and click 'Add Link'. The overlay disappears and the text does not show a link. If I do this a second time, it does link.

The third bug applies to Paragraph block type.
3. Links in the paragraph type block don't work at all. When clicking the link icon, a new style overlay appears, but pasting in a link doesn't work at all. When moving the mouse between various block contexts, the linkify option loses track of the highlighted text and fails.

To Reproduce
Steps to reproduce the behavior:

1. Click link icon
2. Click the gear icon in the overlay
3. Paste in a URL
4. Click Open in New Window
5. Click 'Add Link'

One of two things will happen. It either won't link at all and/or the small overlay will remain visible forever or until you attempt to link again and cancel.

Expected behavior
The link symbol should behave like the previous editor. Click it, supply a URL, click blue arrow, done. Text is linked and overlay disappears. If I go into the gear settings, the small overlay should also disappear when done.

Screenshots

Desktop (please complete the following information):

• OS: MacOS X High Sierra
• Browser: Firefox Quantum
• Version: 61

Smartphone (please complete the following information):

• Device: Untested
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

[designsimply]

Thank you for testing at this stage and for filing issues! I am labeling this with Needs Testing for further review and also wanted to make a quick note that, in the future, the preference is to file one issue per bug. In this case, the classic editor link toolbar problems are already filed at #7932 so we can continue discussing links in the paragraph block here.

[commorancy]

Cool. Since the bugs were all related to linkifying text, I hooked them together in this single report. In the future, I will separate them as requested, but it could lead to duplicate bugs if the underlying components that serve the feature are the same.

[designsimply]

It can be a tricky balance sometimes for sure! I try to think of it as whether or not the work can be logically separated into smaller chunks that are easier for developers to work with. Never hurts to ask if you're not sure too.

[flexerd]

Ran into same issue.

[lizkarkoski]

There's another report in the WordPress.com public support forums of difficulty with using the link creator in Gutenberg. The user has included a screen shot in their post: https://en.forums.wordpress.com/topic/serious-bug-in-the-new-editor-concerning-the-link-tool/#post-3214967

[catehstn]

@designsimply there have been some updates to link handling -- can you please check all of these for repro? Thank you!

[designsimply]

Adding the screenshot from https://en.forums.wordpress.com/topic/serious-bug-in-the-new-editor-concerning-the-link-tool/#post-3213221 dated November 15, 2018 11:40 pm for reference:

And noting that the problem where the link modal is not working properly in the classic editor is being traced at #7932. 👍

[designsimply]

3. Links in the paragraph type block don't work at all. When clicking the link icon, a new style overlay appears, but pasting in a link doesn't work at all. When moving the mouse between various block contexts, the linkify option loses track of the highlighted text and fails.

I tested adding links to a paragraph block using the following steps with WordPress 4.9.8 and Gutenberg 4.5.1 using Firefox 63.0.3 on macOS 10.13.6 and with Firefox 61 on macOS High Sierra (via browserstack.com).

1. Copy a link from elsewhere.
2. Create a new post and add a few paragraphs.
3. Highlight one word in each paragraph and paste the link directly while the word is highlighted.

Result: links were added correctly while pasting a URL onto highlighted text.

^{Seen at https://tan-otter.jurassic.ninja/wp-admin/post.php?post=89&action=edit running WordPress 4.9.8 and Gutenberg 4.5.1 using Firefox 63.0.3 on macOS 10.13.6 using Firefox 63.0.3 on macOS 10.13.6.}

@commorancy several updates have been made since your original report and I think the issue you reported about the paragraph block (separate from the classic block) is working properly now. If you're still having trouble with links in paragraphs, please add a new reply and please let me know if your testing steps are any different compared to what I've noted above!