Twenty Twenty-Two: Long text strings cause horizontal overflow

[mrfoxtalbot]

When viewed on narrow viewports, long strings will overflow outside the main content area.

Older bundled themes would default to word-break: break-all to avoid this and I believe that Twenty Twenty-Two should also work this way by "pushing" long strings into multiple lines.

The code below can be used as a temporary workaround.

.wp-site-blocks * {
   word-break: break-all;
}

[sabernhardt]

Breaking text in every element by default, with the universal * selector, has caused an issue with trying to use CSS grid in Twenty Twenty (#48637).

It might be worth putting the style on the site container, though (using word-wrap—see ticket:37617#comment:7):

.wp-site-blocks {
   word-wrap: break-word;
}

(The example given on the other ticket would still need editing, but only on its container element.)

---

Some blocks already wrap text for any theme:

• The Navigation block item labels have overflow-wrap: break-word.
• The Embed block container also has overflow-wrap: break-word (if your link had been inside the embed caption, it would have wrapped).
• Button block links use word-break: break-word.
• The Post Title block also has word-break: break-word.

---

Older bundled themes would default to word-break: break-all to avoid this

I only found two cases of break-all in the 12 bundled themes: table cells in Twenty Nineteen and Twenty Twenty's mobile menu toggle button text. However, break-word is far more common.

[tahmidulkarim]

Adding word-wrap: break-word; in .wp-site-blocks solves the issue. overflow-wrap: break-word can also be used instead of word-wrap but for better cross-browser support I guess it would be wise to use word-wrap.

Also the CSS property can be added directly to the existing styles, see this screenshot - ​https://prnt.sc/c_6yhnRfbKhH, but as there are some other classes added so it might create side effects. Thus, my thoughts are as per @sabernhardt to add the style separately within .wp-site-blocks. I have added patch with the fix.

[tahmidulkarim]

Patch created.

[mrfoxtalbot]

Thank you for looking into this @tahmidulkarim & @sabernhardt.

The solution I put forward was just a first attempt and very likely imprecise or partial. For context, this problem came up originally in this support thread: ​https://wordpress.org/support/topic/naked-links-in-content-area-not-responsive-on-mobile-thus-causing-overflowing/.

[poena]

Would this solve the problem?
​https://github.com/WordPress/gutenberg/issues/55190

[karmatosed]

I think it would @poena and it solves outside of the theme so for me is better. I am going to recommend we go with that over patching the theme.

[satishprajapati]

==Test Report

Environment

WordPress - 6.7.1
Chrome Version - Version 131.0.6778.205
OS - macOS Ventura Version: 15.1.1
Theme: Twenty Twenty-Two Version: 1.9
PHP - 8.1.29
Web Server - nginx
Database - MySQL 8.0.16

Actual Results

I recreated this issue on local and tried to solve with the given patch. The issue was resolved using the patch. Issue was with the CSS.

​https://tinyurl.com/24z9ajgw

[poojapadamad]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/56341/56341.diff

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.29
• Server: nginx/1.29.0
• Database: mysqli (Server: 8.4.6 / Client: mysqlnd 8.2.29)
• Browser: Chrome 138.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Two 2.0
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅Issue resolved with patch.

Supplemental Artifacts

Attachment -https://core.trac.wordpress.org/attachment/ticket/56341/Long%20links%20testing.jpeg