Block Styles: Fix long strings of text without spaces overflow the block #34222
Conversation
@arthur791004 one of the automated checks flagged https://github.com/WordPress/gutenberg/pull/34222/files#diff-3721697b4de86118e261dd67207c3022a76cb2882ed34fea6de180206c427601 It looks like the difference is actually line breaks in the returned string, I wonder if the css is actually loaded by the tests and having this effect |
I tested this locally with a8c-wp-env and found that twenty-twentyone and blank canvas weren't demonstrating the issue. The rule affecting the
Do you have more specific repro instructions? |
original issue: Automattic/wp-calypso#51249 |
@roo2 Oops...I'm sorry for that I forgot to say that the problem only happens when you view the post |
Ahh of course! sorry I missed that. I can reproduce the issue with Headings on the live site but not in the editor, with or without the cover block. Before:I can also confirm that applying this PR fixes the issue After: |
cc04984
to
9a7068a
9a7068a
to
690b83e
@roo2 Good catch |
arthur791004 commentedAug 23, 2021
•
edited
Description
Currently, some of the themes set the
word-break: break-word;
oroverflow-wrap: break-word;
css to the heading block or paragraph block. For example,Independent Publisher 2
setsword-break: break-word
here to.entry-content
and heading and paragraph inherit that property. However, some of the themes (Twenty Twenty-One, Blank Canvas and so on) don't set that property so that the multi-line strings without spaces make the pages broken and generate the horizontal scrollbar on mobile devices.How has this been tested?
Screenshots
Types of changes
Bug fix
Checklist:
*.native.js
files for terms that need renaming or removal).