Fix Truncate component for long unbreakable text.

[afercia]

Fixes #61125
Amends #60890
See #60860

What?

#60890 broke the display of text that uses the Truncate component making words always 'breakable'. When the Truncate component forces text in one line, we still need to make sure 'unbreakable' text can break otherwise the -webkit-line-clamp CSS property will not work. However, when the Truncate component is set to force 2 or more lines, the text should not be forced to be 'breakable'.

Why?

When the Truncate component forces text in one line, we still need to make sure 'unbreakable' text can break otherwise the -webkit-line-clamp CSS property will not work. However, when the Truncate component is set to force 2 or more lines, the text should not be forced to be 'breakable'.

How?

Makes Truncate use word-break: break-all only when -webkit-line-clamp is 1.

Testing Instructions

• Repeat the reproduction instructions from the issue LinkControl: LInk preview buttons are off-view when the link text is a very long url #60860
• Observe long URls in the link preview are truncated.
• Observe the buttons 'Edit link', 'Remove link', and 'Copy link' are visible
• Open the block inserter.
• Search for blocks with long titles that go in two or 3 lines e.g. 'Table of Contents' or 'Comments Form' or 'Latest Comments'
• Observe the block titles don't have words that break in a new line.

Note: other places to optionally check are, for example, the filename of the Site Logo image, see screenshot:

or the filename of the background image of a Group block.

Notice in these cases the element rendered by the Truncate component already receives some more custom CSS rules including word-break: break-all because filenames, like URLs, can be very long and 'unbreakable'. We could consider to remove the custom word-break: break-all set on these elements to be more clean, but keeping it doesn't harm much.

Testing Instructions for Keyboard

Screenshots or screencast

[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: afercia <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: tyxla <[email protected]>
Co-authored-by: richtabor <[email protected]>

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

[Mamaduka]

The change looks good to me, but I would appreciate a second opinion from folks who are more familiar with the Components package.

[richtabor]

@WordPress/gutenberg-components mind taking a look at this? 🙏

[tyxla]

Thanks @afercia!

I think this is a reasonable compromise 👍

Also, confirmed that it fixes #61125 and that it tests well according to test instructions.

[afercia]

Thanks Marin for your review.

[afercia]

Sorry I missed to add the Co-authored-by comments 😞