Make WordPress Core

Opened 2 years ago

Closed 21 months ago

Last modified 21 months ago

#55783 closed defect (bug) (fixed)

Twenty Seventeen: Button text word break does not apply correctly

Reported by: robertghetau's profile robertghetau Owned by: audrasjb's profile audrasjb
Milestone: 6.1 Priority: normal
Severity: normal Version: 5.9.3
Component: Bundled Theme Keywords: has-patch commit
Focuses: css Cc:

Description

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

Attachments (1)

twenty-seventeen-text-wrap.png (211.6 KB) - added by sabernhardt 21 months ago.
screenshots with PR 3147, each at 480 pixels wide

Download all attachments as: .zip

Change History (14)

This ticket was mentioned in PR #2740 on WordPress/wordpress-develop by bhrugesh96.


2 years ago
#1

  • Keywords has-patch added

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

#2 @sabernhardt
2 years ago

  • Component changed from Themes to Bundled Theme
  • Focuses css added
  • Milestone changed from Awaiting Review to 6.1

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.

#3 @bhrugesh12
2 years ago

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

#5 @sabernhardt
22 months ago

  • Keywords changes-requested added

@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)?

#7 @mukesh27
21 months ago

  • Keywords changes-requested removed

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

@sabernhardt
21 months ago

screenshots with PR 3147, each at 480 pixels wide

#8 @sabernhardt
21 months ago

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.)

#9 @sabernhardt
21 months ago

  • Keywords commit added

Recommending PR 3147 for commit consideration

#10 @audrasjb
21 months ago

  • Owner set to audrasjb
  • Status changed from new to reviewing

Self assigning for final review.

#11 @audrasjb
21 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

Note: See TracTickets for help on using tickets.