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

Wrap the title in the Link Control edit screen #45387

Closed

Conversation

TimBroddin
Copy link
Contributor

What?

This PR makes long titles in the Link Control edit screen wrap to multiple lines.

When a title can't be retrieved through the API, the link's text is shown as the title instead. This causes a very long line that overflows, making the edit & unlink icons inaccessible.

Why?

It partially fixes this issue.

How?

Added word-break: break-word; to .block-editor-link-control__search-item-title

Testing Instructions

  1. Checkout this branch
  2. Type a long text without spaces
  3. Select the link control and link it to a non-existing domain such as http://thisdomainwillnotgiveyouanyinfo.com
  4. Verify that the title is split on multiple lines

Screenshots or screencast

Before After
Before After

@TimBroddin TimBroddin requested a review from ellatrix as a code owner October 28, 2022 14:29
@codesandbox
Copy link

codesandbox bot commented Oct 28, 2022

CodeSandbox logoCodeSandbox logo  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Oct 28, 2022
@github-actions
Copy link

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @TimBroddin! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@TimBroddin TimBroddin changed the title Break words in the Link Control title field Wrap the title in the Link Control edit screen Oct 28, 2022
@Mamaduka Mamaduka added [Feature] Link Editing Link components (LinkControl, URLInput) and integrations (RichText link formatting) [Type] Bug An existing feature does not function as intended labels Nov 1, 2022
@Mamaduka Mamaduka requested a review from javierarce November 1, 2022 05:32
Copy link
Contributor

@javierarce javierarce left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, thanks!

@TimBroddin
Copy link
Contributor Author

Hey @ellatrix,

Could you take a look at this small PR? Thanks a lot!

Copy link
Contributor

@scruffian scruffian left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@t-hamano
Copy link
Contributor

t-hamano commented Dec 8, 2023

Hi @TimBroddin,

I came across this PR when I was checking PRs that had not been active for a while. This issue appears to have been resolved in #53356, although with a slightly different approach.

I would like to close this PR, but I appreciate all of your work.

@t-hamano t-hamano closed this Dec 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Link Editing Link components (LinkControl, URLInput) and integrations (RichText link formatting) First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: Links with long URLs are hard to edit
5 participants