Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

LinkControl: refine the display of the link preview title and url #60900

Open
afercia opened this issue Apr 19, 2024 · 0 comments
Open

LinkControl: refine the display of the link preview title and url #60900

afercia opened this issue Apr 19, 2024 · 0 comments
Labels
[Package] Block editor /packages/block-editor [Type] Enhancement A suggestion for improvement.

Comments

@afercia
Copy link
Contributor

afercia commented Apr 19, 2024

Description

Normally, the LinkControl 'link preview' displayes two lines:

  1. the displayTitle, which can be a few things:
  • the document title of the fetched 'rich data' of the link destination page
  • or, the entered link text
  • or, the entered link URL
  1. The displayURL which is the link URL, with the protocol part stripped out.

When the rich data info can not be fetched, the 'title' is, normally, the linked text. Screenshot:

normally

When the link text is the same as the displayURL, there is some ogic in place to avoid to display two lines with the same identical information. That makes totally sense, and only one line is displayed. Screenshot:

Screenshot 2024-04-19 at 14 03 49

Without this logic, there would be two lines that would repeate the same, identical, information. Screenshot:

otherwise

So far, so good.

However, the logic in place doesn't take into account the case when the link text contains the protocol. In this case, the preview displayes both lines and they contain the same information, the only difference is the displayed protocol. Screenshot:

Screenshot 2024-04-19 at 14 04 09

Visually and semantically, in this case the depeated information is redundant. It would be best to shoe only the displayTitle.

Step-by-step reproduction instructions

  • Add a Paragraph that contains the text test.org.
  • Select the text test.org and add a link to test.org without the protocol part.
  • Once the link is added, click the link in the Paragraph to open the link control preview.
  • Observe the link preview displays only one line: test.org.
  • Add a Paragraph with some text and paste https://test.org within the text. The pasted link should be automatically transformed to a link. If not, make sure to add a link to it with the value https://test.org. It doesn't matter whether the URL contaisn the protocol part.
  • Once the link is added, click the link in the Paragraph to open the link control preview.
  • Observe the link preview displays two lines: https://test.org and test.org.

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

@afercia afercia added [Type] Enhancement A suggestion for improvement. [Package] Block editor /packages/block-editor labels Apr 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Block editor /packages/block-editor [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

1 participant