Gutenberg: Insert link warning (button block) and usability - consistency

[afercia]

Not sure what are the plans for the insert link "inline toolbar" or if this is already on the radar, so please close this issue if it's pointless.

Noticed two issues:

Button block: inserting the URL triggers a React warning:
As soon as I type the first character in the URL field:

Warning: A component is changing an uncontrolled input of type url to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.
More info: https://fb.me/react-controlled-components
in input (created by edit)

Looks similar to #680

Usability/consistency:
When inserting a link on some selected text, the inline toolbar "Apply" button changes to an "Edit" button. The URL displayed in the toolbar is clickable and points to the linked resource, and clicking on "Edit" makes the URL editable again:

Instead, on the button block the behavior is different: after a link is inserted, the "Apply" button doesn't change. There's no "Edit" button and the URL displayed in the toolbar is always editable:

Not sure if there are technical reasons for this. ideally, the behavior should be similar. I can understand the button block doesn't necessarily need a "Remove link" button but I'd say the insert/edit user experience should be as similar as possible with the one of standard links.

[ellatrix]

+1 You should also be able to navigate to the page. :)

[afercia]

Yep! Also, editing an already inserted link with keyboard only is a bit hard right now. I guess that will improve with the introduction of a Cmd/Ctrl+K shortcut together with the other planned shortcuts, see #71

[mtias]

We have changed how the button urlInput looks, but it should also be more consistent functionality wise. Feel free to reopen if there are still concerns.

[afercia]

@mtias sorry maybe I'm missing something but I don't see relevant changes here. The button link inline toolbar and the normal link inline toolbar still work in a different way and would benefit from some better consistency.

Also, the JS warning is still there:
A component is changing an uncontrolled input of type text to be controlled.

[jeffpaul]

_This ticket was mentioned in Slack in #core-editor by jeffpaul. View the logs._

[karmatosed]

Is this still something to consider in light of the changed to the link interface?

[afercia]

@karmatosed I see there are still at least 3 different types of UI to insert a link, see the ones on the blocks. I don't see a reason why they should be different, unless I'm missing something.

cover image:

image:

paragraph (partially hidden by the following image block):

button

[karmatosed]

@afercia I totally agree in unifying them to the new UI and we can using this as a starting point: https://github.com/WordPress/gutenberg/issues/6107

[karmatosed]

Unless I am wrong we should close this in light of the issue above. We can always reopen but lets make sure we get all the link interfaces unified there.

[afercia]

Sure. For reference: https://github.com/WordPress/gutenberg/issues/6392