Update link editor previews and edit

[tharsheblows]

What?

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

From @hrkhal

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.

Step-by-step reproduction instructions

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

Current behaviour

Why?

From @hrkhal

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.

As only the post name can be edited in this setting, it would be useful if that were clearer.

How?

• This give the full url in the "Link" field and wraps the URL
• In the edit dialog, it updates the instructions to make it clear that only part of the slug is editable
• In the edit dialog, it removes the prefixed "/" in the input as the postname is not necessarily the string which starts the slug

Testing Instructions

• Go to permalink settings and set the structure to /%year%/%monthnum%/%day%/prefix-%postname%-%post_id%-suffix/
• Create a post with the name "helloworldhelloworldhelloworld"
• Look at the Link field in the sidebar, it should show the full url with the slug prefix-helloworldhelloworldhelloworld-suffix
• Click on the link and look at the dialog which allows you to edit the postname
• The description should say "Customize the post name in the URL (in bold below)."
• The Input should not start with a "/"
• The tooltip on the copy button in the dialog says "Copy Link"
• The postname should show in the Input (it does not wrap here)

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: tharsheblows <[email protected]>
Co-authored-by: Anuj-Rathore24 <[email protected]>
Co-authored-by: hrkhal <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[tharsheblows]

Would it be possible to update the props? I've linked my WordPress.org account now, I'm tharsheblows there also 😊
This comment updated them!