Twenty Seventeen: Button text word break does not apply correctly

[robertghetau]

This is a replica of this report: ​https://github.com/Automattic/wp-calypso/issues/63821

To replicate, add a button block with a lot of text on a page and check it in the front-end.

Video: ​https://user-images.githubusercontent.com/84539773/169327515-c700bedc-bc64-4fe9-97d4-660fc6ede20a.mp4

Fixed Gutenberg button wrap issue.
Ticket Ref:- https://core.trac.wordpress.org/ticket/55783

[sabernhardt]

Thanks for the patch @bhrugesh12!

Using pre-wrap makes long text wrap to a second line, but I think pre-line might be better. That way, any extra spaces at the beginning or end are ignored.

[bhrugesh12]

Thanks for suggestion @sabernhardt. I'm adding now new patch.

These button styles are also in editor-blocks.css:

​https://github.com/WordPress/wordpress-develop/blob/9e561b22b31862347fc5f8fa5831893ace62405e/src/wp-content/themes/twentyseventeen/assets/css/editor-blocks.css#L726-L739

We could consider changing nowrap for the File block download buttons, too:

​https://github.com/WordPress/wordpress-develop/blob/9e561b22b31862347fc5f8fa5831893ace62405e/src/wp-content/themes/twentyseventeen/assets/css/blocks.css#L125-L141

​https://github.com/WordPress/wordpress-develop/blob/9e561b22b31862347fc5f8fa5831893ace62405e/src/wp-content/themes/twentyseventeen/assets/css/editor-blocks.css#L597-L612

[sabernhardt]

@bhrugesh12 Could you add the change to editor-blocks.css in the pull request (and use pre-line for the File block links in both places, too)?

Trac ticket: https://core.trac.wordpress.org/ticket/55783

[mukesh27]

@sabernhardt I have addressed the PR feedback. Can you please review it?

[sabernhardt]

screenshots with PR 3147, each at 480 pixels wide

[sabernhardt]

Thanks for the updated PR!

Before applying PR 3147, the Button and File block links can extend beyond the container in one line. With the patch, the text wraps.

The editor already has pre-wrap as an inline style, so the appearance does not change with the patch. (If the editor ever moves or removes that style, though, the theme would be consistent with the front end's pre-line style.)

[sabernhardt]

Recommending PR 3147 for commit consideration

[audrasjb]

Self assigning for final review.

[audrasjb]

In 54139:

Twenty Seventeen: Ensure long text wraps correctly in the Button Block.

This changeset replaces white-space: nowrap with white-space: preline to ensure long text used in the button block correctly wraps to a second line.

Follow-up to [44148].

Props robertghetau, bhrugesh12, sabernhardt, mukesh27.
Fixes #55783.

committed in https://core.trac.wordpress.org/changeset/54139

committed in https://core.trac.wordpress.org/changeset/54139