Force link text to wrap in the Link UI when encountering extra long link text #33753
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
getdave
added
[Type] Bug
|
@mttindustries please could you try out this PR to see if it resolves the Issue you reported in #33586? You can do this by following the instructions here https://make.wordpress.org/design/2021/03/03/testing-a-gutenberg-pull-request-pr/ |
|
Size Change: -44 B (0%) Total Size: 1.08 MB
ℹ️ View Unchanged
|
|
Maybe we can use Text component here and truncate on the second line or in the middle as @javierarce suggested. CodeSandbox: https://codesandbox.io/s/text-truncate-in-the-middle-dfx0s |
|
I remember encountering the same issue with the media replace control and clipping in the middle didn't solve much :) But maybe the Link Control is bigger? |
|
All good points. Let's see what @javierarce says. My only concern about clipping text is that we may end up back where we started. The core issue is that the user needs to be able to see the entire text/URL. That said, if we simply allow the text to wrap indefinitely it could cause problems in extreme cases. Perhaps some compromise on the number of lines to be shown with a "clip" functionality might work? |
|
@getdave tested, for me that is perfect. Helps a lot. Thank you |
Why wouldn't clipping in the middle (plus showing a generous number of lines) solve the problem for the majority of the users with long items? 🤔 The other thing we could implement would be a tooltip that showed the full text/URL on hover, but I imagine that will bring a new set of considerations. |
|
That said I think the current fix will help many users, and it works fine. I'd like to request an extra enhancement, though. I think we should move the type indicator to the top of the item so users see it right away:
For items with shorter titles, the indicator will appear aligned with the title:
|
I agree. Fixed!
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Currently in the Link UI, if the link text is particularly long then it is "clipped" and an ellipsis is shown. This is ok, but it does make the UI difficult to use if you are trying to distinguish between similarly named posts.
Moreover, if you enter a link which has no spaces and is very long then you encounter the same problem.
This PR resolves this by allowing the UI to wrap the link text. This allow the user to see the full link text whilst avoid any unwanted horizontal overflow.
Closes #33586
How has this been tested?
Screenshots
Types of changes
Checklist:
*.native.jsfiles for terms that need renaming or removal).