Text in various blocks does not break/wrap at block boundaries (Gecko/Firefox default styling issue)

[ZebulanStanphill]

Issue Overview

The following blocks do not break/wrap long strings of characters when they reaches the edge of the block in the editor:

• Cover Image
• Heading
• Image
• List
• Paragraph
• Pullquote
• Quote
• Subhead

Some blocks do break/wrap long strings of characters when they get too long, like the Button, Code, and Shortcode blocks. I would expect most other blocks to act the same, with the exception of some blocks like the Preformatted block and maybe Verse block.

Steps to Reproduce (for bugs)

1. Insert a Paragraph block (or one of the other affected blocks listed above).
2. Type a whole bunch of "w"s or other characters into the block to create a really long string of text.
3. Notice that it does not break/wrap when it reaches the edge of the block, but instead just keeps on going all the way off the screen.
4. Insert a Button block.
5. Type a long string of characters again.
6. Notice that the text is broken and wrapped when it gets too long, like you would expect.

Expected Behavior

Text in most blocks should always break and wrap once it reaches the boundaries of the block.

Current Behavior

Long strings of characters without any breaking characters like spaces or hyphens will just extend outside the boundaries of the block and go off the screen. This is especially noticeable when using nested blocks in columns.

Related Issues and/or PRs

#5130

[youknowriad]

These blocks do wrap for me, you may have an extra style loaded by a plugin that breaks these blocks.

[ZebulanStanphill]

@youknowriad I just tested without any plugins and with the Twenty Seventeen theme, and the text is still not wrapping properly.

(I am using Gutenberg 2.6.)

(Ignore the blank text on the sidebar, that was something else I was messing around with when I took the screenshot.)

[youknowriad]

Here's the same thing for me, maybe it's browser specific, tested in Chrome Mac

Edit: Actually, I think it's a Firefox bug

[youknowriad]

It looks like Firefox do wrap if you have have spaces. What's the correct behavior here @jasmussen ? Should we always wrap even without space?

[ZebulanStanphill]

@youknowriad I just tested, and uninterrupted strings of characters are wrapped in Chromium, but not Firefox, which is the browser I am using. This issue is due to a difference in default browser styles. Firefox has overflow-wrap set to normal by default, but Chromium has it set to break-word by default.

Concerning what Gutenberg should do, I think always wrapping text when there is no other possible break point is a more useful behavior, both for the editor and the front-end.

This can be accomplished with the CSS property overflow-wrap being set to break-word.
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

I tested, and changing the overflow-wrap value using CSS fixes the issue on Firefox.

[jasmussen]

We should always wrap, ideally we break words, but if we can't we should break even without spaces. Can confirm this is also broken in Firefox for me. Going to take this one.

[dcschreiber]

@jasmussen I am still seeing this on my website neutro.net when I view it on Chrome (Desktop windows 10 and android 11 version 86.0.4240.111) but no on firefox (mobile version 82.1.1).
The problem is when I have a long URL in a Code block.
You can see my site https://www.neutro.net/setting-neutro-up/
WordPress 5.5.1
Theme Neve Version: 2.8.3

Not sure if this is something you still do but I didn't find a better thread. Anyway, thanks for working on improving Gutenberg.

[jasmussen]

Hi @shryber, it looks like the text that doesn't wrap in your screenshot is pasted inside a code block, correct?

I believe that at the moment, the code block intentionally does not provide any wrapping, but I can also see that it doesn't provide any overflow management either (such as a horizontal scrollbar). Please feel free to open a separate ticket and CC me and we can look at adding something there.

[dcschreiber]

@jasmussen Opened a new issue: #26600 (comment)
When you say CC here, should I tag you in the post or is there a specific feature I am missing?
Thanks!

[jasmussen]

All good, it's on my radar now, thanks. I'll take a look next week, my day is about to wrap here.

[dcschreiber]

Great, thanks so much! On Fri, Oct 30, 2020 2:54 PM, Joen A. [email protected] wrote: All good, it's on my radar now, thanks. I'll take a look next week, my day is about to wrap here. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.