feature improvement: hyperlink box in posts editor needs to be widened

[mttindustries]

What problem does this address?

Problem/frustration: when making hyperlinks from text in the block editor for posts, the window that pops up and a bit too small where for some long titles and urls get cut off at the end in the preview, and I'm trying to link certain texts in posts to certain products. The products titles and urls might start the same but then it's hard to distinguish which ones which when I can't preview the end part of the url or title. The box just isn't wide enough. It work's fine on the old editor when I link up parts of product descriptions, the preview box is wide enough to show the full title and url.

What is your proposed solution?

Widen the hyperlink preview box so we can easily see the title and url fully.

[getdave]

@mttindustries Could you possibly provide an example video or screenshot of this occurring? Also at what point would you consider the box to be wide enough? We need to be sure to strike a good balance.

Also @javierarce I wonder if there are any ways that we could allow users to preview ("quick peek") more of the URL if it is particularly long?

[mttindustries]

@getdave here's a screen shot: https://ibb.co/tczM3Y8
I've also included the old editor on the products section (on the right) for comparison.
For example the latest issue is I just get a bunch of copy and had told to hyperlink "Aussie volcano chiminea" - though there's multiple models of the Aussie volcano chiminea, and I can easily see that on the old system but not so much on the new system as not all the title and url show up. Then I have to guess and get in trouble that I've linked to the wrong one. (one of those clients)

It looks like the old way just automatically extends to the width it needs to be. But maybe if you have the option of scrolling text on hover or something if you didn't want to do a full width or a way to just preview the full title and url somehow. I'm not sure an exact width measurement if you've got to make it balance, unless you just want to do it the width of the text container.

I hope that helps

[getdave]

I hope that helps

That illustrates the problem perfectly. Thank you.

@javierarce I think this is one we'll need to look into.

[getdave]

@mttindustries I wonder would something like this work? It simply allows the text to wrap.

Screen.Capture.on.2021-07-22.at.16-38-23.mp4

I had a go at prototyping a solution which allows the items to expand the width fo the box but it caused a lot of layout shifts which was disconcerting and a poor UX. I'd also be concerned about the implications for smaller screens.

[javierarce]

@getdave I think the solution in your video could work well. We could also make sure that super long strings don't fill up the whole interface by truncating them in the middle:

Before	After
Super long title of a page here it is pretty long in order to force test the link UI which is not responding well	Super long title of a page here it… which is not responding well

[mttindustries]

@getdave that would be ideal, thank you. Sorry for late reply, busy week.