Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Table block: Words in cells allow break-all and look really funky #16740

Closed
mapk opened this issue Jul 24, 2019 · 0 comments · Fixed by #16741
Closed

Table block: Words in cells allow break-all and look really funky #16740

mapk opened this issue Jul 24, 2019 · 0 comments · Fixed by #16741
Assignees
@mapk
Labels
[Block] Table Affects the Table Block

Comments

@mapk
Copy link
Contributor

mapk commented Jul 24, 2019

Describe the bug
The words in a Table block are set word-break: break-all; which causes some real funkiness with how it looks in the Editor.

To reproduce
Steps to reproduce the behavior:

  1. Add a Table block.
  2. Type some words in a cell so that it extends to two lines.
  3. Observe the break in the middle of a word.

Expected behavior
I expect the break to happen naturally pushing whole words to the second line, or at least hyphenating them.

My suggestion is to remove the styles that cause this allowing for a more natural break.

.wp-block-table .has-fixed-layout td, .wp-block-table .has-fixed-layout th {
    word-break: break-all;
}

Screenshots

Screen Shot 2019-07-24 at 10 06 56 AM

Desktop (please complete the following information):

  • OSX
  • FIrefox 68.0
  • Gutenberg version 6.1
@mapk mapk added the [Block] Table Affects the Table Block label Jul 24, 2019
mapk added a commit that referenced this issue Jul 24, 2019
@mapk
Fixes #16740. Removes the word-break:break-all; from the CSS for the …
1ce27a1 
…Table cells.
@mapk mapk mentioned this issue Jul 24, 2019
Merged
5 tasks
@mapk mapk self-assigned this Jul 24, 2019
talldan pushed a commit that referenced this issue Aug 6, 2019
@mapk @talldan
Table block: Removes the word-break:break-all; from the table cells (…
eba92cb 
…#16741)

* Fixes #16740. Removes the word-break:break-all; from the CSS for the Table cells.

* Added the overflow-wrap:break-word attribute which appears to be widely supported and works better than word-wrap:break-all.

* Changed to word-break:break-word as per @brentswisher's wonderful catch.

* Missed an overflow-wrap. Got it now.
gziolo pushed a commit that referenced this issue Aug 29, 2019
@mapk @gziolo
Table block: Removes the word-break:break-all; from the table cells (…
61be4cb 
…#16741)

* Fixes #16740. Removes the word-break:break-all; from the CSS for the Table cells.

* Added the overflow-wrap:break-word attribute which appears to be widely supported and works better than word-wrap:break-all.

* Changed to word-break:break-word as per @brentswisher's wonderful catch.

* Missed an overflow-wrap. Got it now.
gziolo pushed a commit that referenced this issue Aug 29, 2019
@mapk @gziolo
Table block: Removes the word-break:break-all; from the table cells (…
2bed01e 
…#16741)

* Fixes #16740. Removes the word-break:break-all; from the CSS for the Table cells.

* Added the overflow-wrap:break-word attribute which appears to be widely supported and works better than word-wrap:break-all.

* Changed to word-break:break-word as per @brentswisher's wonderful catch.

* Missed an overflow-wrap. Got it now.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mapk mapk

Labels
[Block] Table Affects the Table Block
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Table block: Removes the word-break:break-all; from the table cells WordPress/gutenberg
1 participant
@mapk