Editor: Link preview overflows with long strings and only shows postname

[hrkhal]

Description

The Link Preview in the unified publishing details overflows when long strings are present in the post name and it does not show the full url path.

Enterprise users would expect to see the full url path in the preview at a glance. Displaying the full path would better align with what was in 6.4 and what our users expect.

Step-by-step reproduction instructions

1. Go to permalink settings and set a custom structure of /%year%/%monthnum%/%day%/%postname%-%post_id%/
2. Create a new post, give it a post name of /helloworldhelloworldhelloworld
3. Observe that a) the link preview does not wrap and b) that the preview is only the post name

I would expect the link preview to a) wrap long strings and b) display /2024/06/07/helloworldhelloworldhelloworld-1

Screenshots, screen recording, code snippet

Environment info

• WP 6.6-beta1
• Playground

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[Anuj-Rathore24]

Hey @hrkhal,

In my opinion, the purpose of the link button in the post publish panel should be to display only the title of the post, rather than the entire permalink. The full link can be accessed through the dialog box that appears upon clicking the link button, making it redundant to display it initially.

[hrkhal]

@Anuj-Rathore24 Appreciate the fix for line wrapping.

It is not redundant to reduce the number of clicks to ascertain information that used to be available in 6.4 without the need for any user interaction.

[tharsheblows]

@Anuj-Rathore24 @hrkhal Ack, I was working on this too and opened a PR. I hope between the two of us it gets sorted 😊

There are some updates to make things a bit clearer about what you can edit and where in the PR I did as I found the description in the edit link dialog a bit imprecise.

[annezazu]

Wanted to note I can replicate this with 6.6.1:

Screen.Recording.2024-08-20.at.12.30.09.PM.mov

Another one to possibly consider for a point release cc @vcanales

[vcanales]

@annezazu I was unable to reproduce this in 6.6.1.
After some digging, I found that the text wrapping problem in the inspector was introduced in Gutenberg 18.5 and fixed in 18.7 by this PR, which was a part of the 6.6 release.

The display of the full URL isn't fit for a point release, as I don't think it can be considered a regression; the URL hasn't been shown since 6.4.

The problem in the video looks different from the one reported in this issue and is reproducible in 6.5:

url-overflow-publish.mov

I've added a new issue for this behavior — #64730

[t-hamano]

Regarding the link button in the inspector, it's also discussed in #61196, including whether its label and popover content are appropriate.