Make WordPress Core

Opened 4 years ago

Closed 6 weeks ago

#48637 closed defect (bug) (wontfix)

Twenty Twenty: The use of word-break: break-word; causes vertical words with css grid min-width.

Reported by: johnstonphilip's profile johnstonphilip Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.3
Component: Bundled Theme Keywords: needs-patch
Focuses: ui, css Cc:

Description

If a plugin uses css grid and sets a grid column to be min-width, any buttons or words in that column become vertically stacked, as the word is broken up at every letter. See attached image.

Attachments (1)

Screen Shot 2019-11-14 at 10.33.29 AM.png (44.0 KB) - added by johnstonphilip 4 years ago.
Vertically stacked words when css grid and min-width are used, caused by word-break: break-word;

Download all attachments as: .zip

Change History (15)

@johnstonphilip
4 years ago

Vertically stacked words when css grid and min-width are used, caused by word-break: break-word;

#1 @SergeyBiryukov
4 years ago

  • Component changed from General to Bundled Theme
  • Summary changed from The use of word-break: break-word; causes vertical words with css grid min-width. to Twenty Twenty: The use of word-break: break-word; causes vertical words with css grid min-width.

#2 @ianbelanger
4 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 5.3.1
  • Version set to 5.3

#3 @nielslange
4 years ago

  • Focuses css added

@johnstonphilip Can you provide detailed steps how to reproduce this issue?

#4 @ianbelanger
4 years ago

  • Keywords reporter-feedback added

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


4 years ago

#6 @audrasjb
4 years ago

  • Milestone changed from 5.3.1 to 5.4

Hello,

This ticket needs some further informations from the reporter so we could be able to reproduce the issue.
As 5.3.1 is planned in few day, let's move the ticket to 5.4.

#7 @johnstonphilip
4 years ago

To reproduce do this:

  1. Put this code in a child theme or custom plugin:
function output_some_css_grid() {
	echo '<div style="display:grid; grid-auto-columns: min-content;"><button>Click me</button></div>';
}
add_action( 'the_content', 'output_some_css_grid' );
  1. View a post.
  1. Observe the text is broken at every letter.

#8 @johnstonphilip
4 years ago

Just to clarify, if you switch to another WP default theme (like twentynineteen) this isn't an issue.

#9 @ianbelanger
4 years ago

  • Keywords reporter-feedback removed
  • Milestone changed from 5.4 to 5.5

Punting to 5.5 as there is still no patch for this yet.

#10 @ianbelanger
4 years ago

  • Keywords 2nd-opinion added
  • Milestone changed from 5.5 to Future Release

#11 @poena
6 weeks ago

  • Keywords 2nd-opinion removed

I can reproduce the problem.
To solve this, we need to find where the word-break is needed, assuming there was a reason that it was added, and then we can make it more restrictive.

#12 @sabernhardt
6 weeks ago

Issue 85 explains adding word-wrap for post titles, but word-break was already in the theme's initial commit (and in Chaplin's initial commit).

I am unsure about changing those styles now because people may depend on them for any other elements, plus the before and after pseudo-elements. Making it more restrictive could easily involve raising specificity and overriding styles written to define those properties. On the other hand, I should not be surprised if the current word wrap causes problems in situations besides using min-content in grid layout.

The grid layout has a possible workaround for Twenty Twenty and other themes that follow the same pattern:

function css_grid_override_word_wrap() {
	echo '<style>
.grid-min-content {
	display: grid;
	grid-auto-columns: min-content;
}
.grid-min-content * {
	word-wrap: normal;
	word-break: normal;
}
</style>
<div class="grid-min-content">
	<button>Click me</button>
</div>';
}
add_action( 'the_content', 'css_grid_override_word_wrap' );

#13 @poena
6 weeks ago

@sabernhardt Your input is valid, shall we close this ticket as wontfix?
Child themes and plugins can add their own workarounds, which would be specific to their exact needs.

#14 @sabernhardt
6 weeks ago

  • Milestone Future Release deleted
  • Resolution set to wontfix
  • Status changed from new to closed

With multiple unknowns, I think closing as 'wontfix' (not planned) would be best at this time.

If someone determines a safe way to change the styles and creates a patch, the ticket could be reopened.

Note: See TracTickets for help on using tickets.