Require user action to add a link to a block using a URL from the clipboard

[antonis]

Is your feature request related to a problem? Please describe.

Whenever the user opens the settings for a block that can be linked to a URL (Image, Button), the URL in the clipboard is pasted automatically in the Link to field. In order to remove that automatically link, they need to tap Link to and then request a removal. This behavior is unexpected for the user and has the potential to expose sensitive information inadvertently posing a security issue.

Screenshot

Describe the solution you'd like
The desired solution would introduce the following changes:

1. The Link to field will NOT be auto-populated
2. When the Link to screen opens a new option will be added below the input field From Clipboard
3. When the user presses on the From Clipboard option the input field is populated with the contents of the clipboard

The design flow describes how flow would look like with the suggested changes.

Describe alternatives you've considered
The following alternative solutions have been considered

Alternative 1

Alternative 2

Additional context
Internal ref: pb3aDo-16U-p2#comment-2014

[hypest]

Just sharing the ticket relevant to the current behavior: #680

[hypest]

I'm personally +1 to the idea of moving away from a fully automatic filling in of the URL from the clipboard. When pasting is what I want to do, the auto-paste works like magic, but not when I actually don't want to paste but the clipboard happens to have a URL from a previous copy operation.

If I can share an idea about an alternative UI, I'd consider adding an extra line to the Link To cell, similar to the "From clipboard" you have on your design proposal, but having it tappable like a button, to make it just one extra tap to paste the URL without first focusing in the link edit box.

[antonis]

Just sharing the ticket relevant to the current behavior: #680

I think we should not change the text link behavior at all since it works really well imho (e.g. highlighting text and pressing the link). What I think needs tweaking is how the Link to works on the Image and Button blocks. In that case the user action that triggers the addition of the link is opening the block settings and the user may not see the added link at all if it scrolled out of the screen.

[fluiddot]

I like the idea, I also experienced the case of having an unexpected link pasted automatically from the clipboard 😅.

I'm wondering if we could also explore how to deal with this in other cases like setting the URL on an Embed block, which doesn't display the inner screen for setting the link:

[antonis]

I'm wondering if we could also explore how to deal with this in other cases like setting the URL on an Embed block

I think that makes sense @fluiddot. Maybe if this get's too complex we can handle the embed block on a separate issue.

I'd consider adding an extra line to the Link To cell, similar to the "From clipboard" you have on your design proposal, but having it tappable like a button, to make it just one extra tap to paste the URL without first focusing in the link edit box.

I like @hypest's alternative approach to this too. Wdyt @iamthomasbishop?

[ttahmouch]

I was just playing around with leveraging the existing LinkSuggestionItemCell component. This isn't the final code. I'm just POCing at the moment.

 <BottomSheet.LinkSuggestionItemCell
    suggestion={ { type: 'clipboard', url: 'http://google.com', isDirectEntry: true } } />

It prompted me to wonder if we should be consistent with the title and summary styles that we have for the other types of LinkSuggestionItemCells. The mocks above show the URL as the summary; not the title.

WDYT?
Cc, @iamthomasbishop .

[iamthomasbishop]

It prompted me to wonder if we should be consistent with the title and summary styles that we have for the other types of LinkSuggestionItemCells. The mocks above show the URL as the summary; not the title.

Absolutely! Let's align with the existing for consistency, esp in terms of content arrangement — my mock was a quick/crude sketch so it may have been an oversight.

From a css/style perspective, I think we should be using a slightly-dimmer secondary text color for summary labels on "stacked" cells, which as far as I know is only used here and on the font-size selection sheet that @enejb worked on recently.

[ttahmouch]

I appreciate you chiming in, @iamthomasbishop . ❤️ 🙏

A few more questions if you have a moment:

• Does the copy text seem reasonable as From clipboard, or would something like Add this link from clipboard make more sense to keep it consistent with Add this link from the search field?
• Do you have a particular SVG you'd like to use for the 📋? I grabbed an MIT licensed one from a Google Image search as a placeholder for the moment.
• I was thinking that it would make sense for the clipboard suggestion button to behave the same as the search suggestion buttons and automatically Apply the selection when pressed instead of populating the search field and requiring the user to press Apply manually. Is that the same UX behavior you were thinking as well?

[iamthomasbishop]

Good questions @ttahmouch !

Does the copy text seem reasonable as From clipboard, or would something like Add this link from clipboard make more sense to keep it consistent with Add this link from the search field?

I think the "from clipboard" text is okay because it's concise, but if we want to be a little more verbose, we could go with something like "Add link from clipboard".

Do you have a particular SVG you'd like to use for the 📋? I grabbed an MIT licensed one from a Google Image search as a placeholder for the moment.

I was going to suggest we use an icon from the WP icon set, but it looks like we don't have one for "clipboard" so let's just use the Gridicons version for now (gridicons-clipboard).

I was thinking that it would make sense for the clipboard suggestion button to behave the same as the search suggestion buttons and automatically Apply the selection when pressed instead of populating the search field and requiring the user to press Apply manually. Is that the same UX behavior you were thinking as well?

That would make sense — tapping on the cell should act the same as tapping on a search result 👍

[ttahmouch]

Good questions @ttahmouch !

Does the copy text seem reasonable as From clipboard, or would something like Add this link from clipboard make more sense to keep it consistent with Add this link from the search field?

I think the "from clipboard" text is okay because it's concise, but if we want to be a little more verbose, we could go with something like "Add link from clipboard".

Do you have a particular SVG you'd like to use for the 📋? I grabbed an MIT licensed one from a Google Image search as a placeholder for the moment.

I was going to suggest we use an icon from the WP icon set, but it looks like we don't have one for "clipboard" so let's just use the Gridicons version for now (gridicons-clipboard).

I was thinking that it would make sense for the clipboard suggestion button to behave the same as the search suggestion buttons and automatically Apply the selection when pressed instead of populating the search field and requiring the user to press Apply manually. Is that the same UX behavior you were thinking as well?

That would make sense — tapping on the cell should act the same as tapping on a search result 👍

Thanks for taking the time to address these questions, @iamthomasbishop . I appreciate it. :)

[ttahmouch]

I published some videos and screenshots in the Draft PR if you would be so kind and take a look, @iamthomasbishop , and others. 🙏