Skip to content

/ gutenberg

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.

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

Block Styles: Fix long strings of text without spaces overflow the block #34222

Open
wants to merge 2 commits into
base: trunk
Choose a base branch
from
Open

Block Styles: Fix long strings of text without spaces overflow the block #34222

wants to merge 2 commits into from
+17 −4

Conversation

@arthur791004
Copy link
Contributor

@arthur791004 arthur791004 commented Aug 23, 2021 •
edited

Description

Currently, some of the themes set the word-break: break-word; or overflow-wrap: break-word; css to the heading block or paragraph block. For example, Independent Publisher 2 sets word-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?

  1. Create or Edit a post
  2. Insert the following blocks
    • multi-line strings without spaces as heading
    • multi-line strings without spaces as paragraph
    • multi-line strings without spaces as heading or paragraph inside the cover block
    • multi-line strings without spaces as a button
    • multi-line strings without spaces as a list item
  3. Save and view the post on the new tab
  4. Open Chrome Developer Tools and change to mobile view
  5. Check the multi-line strings break the page and generate a horizontal scrollbar or not

Screenshots

Before After

Types of changes

Bug fix

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).
@arthur791004 arthur791004 requested a review from ajitbohra as a code owner Aug 23, 2021
@arthur791004 arthur791004 mentioned this pull request Aug 23, 2021
Open
@roo2
Copy link
Contributor

@roo2 roo2 commented Aug 23, 2021

@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

@roo2
Copy link
Contributor

@roo2 roo2 commented Aug 24, 2021

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 .block-editor-block-list__layout .block-editor-block-list__block was giving them correct wrapping
https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/block-list/style.scss#L123

.block-editor-block-list__layout .block-editor-block-list__block {
    position: relative;
    overflow-wrap: break-word;
}

Do you have more specific repro instructions?

@roo2
Copy link
Contributor

@roo2 roo2 commented Aug 24, 2021

original issue: Automattic/wp-calypso#51249

@arthur791004
Copy link
Contributor Author

@arthur791004 arthur791004 commented Aug 24, 2021

@roo2 Oops...I'm sorry for that I forgot to say that the problem only happens when you view the post 😅

@roo2
Copy link
Contributor

@roo2 roo2 commented Aug 24, 2021 •
edited

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.
This happened with every theme that I tested.

Before:

Screen Shot 2021-08-25 at 6 54 18 am

I can also confirm that applying this PR fixes the issue ✅

After:

Screen Shot 2021-08-25 at 6 58 54 am

@roo2
Copy link
Contributor

@roo2 roo2 commented Aug 24, 2021

I found that the issue also affects very long links in lists

  1. Add a list element
  2. Add a very long unbroken link
  3. View in preview/live site on mobile

Screen Shot 2021-08-25 at 7 12 26 am

@arthur791004 arthur791004 force-pushed the arthur791004:fix/long-strings-overflow-the-block branch from cc04984 to 9a7068a Aug 25, 2021
@arthur791004
Fix long strings of text without spaces overflow the block
690b83e
@arthur791004 arthur791004 force-pushed the arthur791004:fix/long-strings-overflow-the-block branch from 9a7068a to 690b83e Aug 25, 2021
@arthur791004
Copy link
Contributor Author

@arthur791004 arthur791004 commented Aug 25, 2021

@roo2 Good catch 👍 I also tested the list before but I found that it works well because I wrap the string into paragraph 😅
I fix the problem in the list, thank you!

@arthur791004
Fix long strings of text without spaces overflow the button
148c990
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ajitbohra ajitbohra

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
[Block] Heading [Block] Paragraph CSS Styling Needs Design Feedback [Type] Enhancement
Projects
None yet
Milestone
No milestone
Linked issues

Successfully merging this pull request may close these issues.

None yet

3 participants
@arthur791004 @roo2 @ramonjd