Table block: Removes the word-break:break-all; from the table cells

[mapk]

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

How has this been tested?

Locally.

Screenshots

BEFORE:

AFTER:

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[mapk]

While I did some alignment testing as can be seen in the gif, I'm a little curious about this comment. Do the contents need to wrap by break-all? Or can they just wrap naturally? I'm hoping my removal of this doesn't resurface an issue I'm unaware of. @jasmussen @talldan any thoughts?

[mapk]

Changing this to overflow-wrap seems to be the better solution.

[talldan]

I think there's an issue with overflow-wrap. If you type in some text with no spaces along and use a block alignment, the table goes off the screen:

I think the key behaviour is that when an alignment is used the table should only ever take up a portion of the page, it should never expand to full width and beyond. word-break: break-word; might be the best compromise. That still seems to wrap long words, but prefers breaking at word boundaries where possible.

[mapk]

Thanks for that catch, @talldan! Using word-break: break-all was just so difficult for me b/c it broke a LOT of words, at least in Firefox. If it's not complicated, what if we used overflow-wrap for the default aligned Table block, and overwrite that with break-word for any Table block that uses alignments?

[talldan]

👍 Yep, great idea.

[brentswisher]

@mapk I think what you want to do here is update the current word-break: break-all to word-break: break-word instead of replacing with overflow-wrap. That should accomplish what you want without causing issues with long words not wrapping.

I see @talldan mentioned that above, but I know from working with this in the past it's easy to miss that distinction while reading things so thought I might point it out.

[brentswisher]

I did notice one thing while testing this to consider. If a language uses very long words, they will now be shot off the side of the screen, with no way for the user to get to the content. I don't know how often a word in normal usage (in any language) would actually be long enough this would be an issue, but thought it might be worth mentioning.

Current:

This Branch:

Tested using the german translation of "Orange juice concentrate tastes like two thousand one hundred twenty-four oranges." : Orangensaftkonzentrat schmeckt nach zweitausendeinhundertvierundzwanzig Orangen. because I knew it would have long words and my German is extremely limited 😄 🇩🇪

[mapk]

Thanks for the test, @brentswisher! I've updated the CSS to use overflow-wrap:break-word instead of word-wrap:break-all because it tends to do better with shorter words, just dropping them to another line instead of breaking them needlessly, but it still breaks the longer words. I needs me some more testing.

Overflow-wrap
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
https://caniuse.com/#search=overflow-wrap

Editor:

Frontend:

[talldan]

Left a comment in the thread above - #16741 (comment)

[mapk]

Good catch, @brentswisher here: #16741 (comment). And sorry I missed that earlier suggestion, @talldan. I just need some testing now to confirm the fix.

[brentswisher]

Looks like you missed one line in your last commit swapping overflow-wrap with word-break, I commented on that line, it's still causing the table to flow out of the page:

[talldan]

This is a nice improvement, works great in my testing, so I'm going to merge it! Thanks @mapk. 🎉

Also props to @brentswisher for all the reviews!

Changes now addressed.