Table, Media & Text: replace deprecated word-break with overflow-wrap: anywhere by amitraj2203 · Pull Request #82480 · WordPress/gutenberg

amitraj2203 · 2026-09-05T06:45:59Z

Part of #82293.

What?

Replace the deprecated word-break: break-word in the Table and Media & Text blocks with overflow-wrap: anywhere, and remove the four Stylelint suppressions covering them.

packages/block-library/src/table/style.scss — fixed-layout cells, and cells in aligned tables
packages/block-library/src/table/editor.scss — cells in aligned tables, editor side
packages/block-library/src/media-text/style.scss — the content column

Why?

word-break: break-word is deprecated. Per CSS Text 3 it is defined as word-break: normal plus overflow-wrap: anywhere — not overflow-wrap: break-word.

That distinction matters for these four declarations. anywhere lets soft wrap opportunities inside a long word count towards min-content sizing; break-word does not. All four sit on boxes sized intrinsically — aligned tables are width: auto, and the Media & Text content column is a grid track — so break-word shifts the layout while anywhere leaves it untouched.

How?

Straight declaration swap, plus a short comment at the three intrinsic-sizing call sites noting why anywhere is the correct replacement.

Verified by measuring every affected box at 375px, 600px, 1024px and 1280px against both candidates. overflow-wrap: anywhere reproduced the current geometry exactly at every width. overflow-wrap: break-word did not — it changes aligned table and Media & Text column widths at every width tested, and at 375px it widens aligned tables from 279px to 513px, giving the page horizontal scroll.

Screenshots

Front end, on a page with a fixed-layout table, left- and center-aligned tables, and a Media & Text block, each holding a long unbroken URL. Before and after are pixel-identical at both widths — which is the point: this is a lint cleanup and the layout should not move.

Before / after — full-page at 375px and 1280px

	Before — `word-break: break-word`	After — `overflow-wrap: anywhere`
375px
1280px

Testing Instructions

Add a Table block with a long unbroken string (a long URL works) in a cell.
Check it with the fixed-layout toggle on, and with left/center/right alignment, in the editor and on the front end.
Add a Media & Text block with a long unbroken string in the content column.
Narrow the viewport to ~375px and confirm the page does not scroll horizontally.
Run npm run lint:css — no violations in the changed files.

Use of AI Tools

Claude code

…: anywhere

coderabbitai · 2026-09-05T06:46:06Z

Important

Review skipped

Auto reviews are disabled on this repository. To trigger a review, include @coderabbitai review in the PR description. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: ef16663b-f5fe-4b39-aca4-38bda20748f5

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

_{Comment @coderabbitai help to get the list of available commands.}

github-actions · 2026-09-05T06:46:08Z

🤖 PR meta 🤖

📦 Bundle size

Size Change: +39 B (0%)

Total Size: 8 MB

📦 View Changed

Filename	Size	Change
`build/styles/block-library/editor-rtl.css`	12.5 kB	+8 B (+0.06%)
`build/styles/block-library/editor-rtl.min.css`	10.2 kB	+4 B (+0.04%)
`build/styles/block-library/editor.css`	12.5 kB	+8 B (+0.06%)
`build/styles/block-library/editor.min.css`	10.2 kB	+4 B (+0.04%)
`build/styles/block-library/media-text/style-rtl.css`	877 B	+2 B (+0.23%)
`build/styles/block-library/media-text/style.css`	906 B	+3 B (+0.33%)
`build/styles/block-library/style-rtl.css`	22.3 kB	+5 B (+0.02%)
`build/styles/block-library/style-rtl.min.css`	18.8 kB	+5 B (+0.03%)
`build/styles/block-library/style.css`	22.4 kB	+6 B (+0.03%)
`build/styles/block-library/style.min.css`	18.8 kB	+5 B (+0.03%)
`build/styles/block-library/table/editor-rtl.css`	1.35 kB	-1 B (-0.07%)
`build/styles/block-library/table/editor-rtl.min.css`	397 B	+3 B (+0.76%)
`build/styles/block-library/table/editor.css`	1.35 kB	-1 B (-0.07%)
`build/styles/block-library/table/editor.min.css`	397 B	+3 B (+0.76%)
`build/styles/block-library/table/style-rtl.css`	1.05 kB	-5 B (-0.47%)
`build/styles/block-library/table/style-rtl.min.css`	644 B	-2 B (-0.31%)
`build/styles/block-library/table/style.css`	1.05 kB	-6 B (-0.57%)
`build/styles/block-library/table/style.min.css`	644 B	-2 B (-0.31%)

_{c78b2bf Run}

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric	`853c5dc`	trunk	% Change
timeToFirstByte	60.85 ms +10.02% -6.74%	66.1 ms +3.03% -12.71%	-7.94%
largestContentfulPaint	98 ms +4.08% -6.12%	98 ms +4.08% -8.16%	0%
lcpMinusTtfb	33.35 ms +18.29% -3.45%	31.1 ms +12.7% -4.5%	7.23%
wpBeforeTemplate	29.59 ms +22.81% -4.16%	34.49 ms +6.81% -16.9%	-14.21%
wpTemplate	25.24 ms +2.22% -5.31%	25.23 ms +5.43% -2.54%	0.04%
wpTotal	56.38 ms +10.5% -5.75%	61 ms +3.8% -11.49%	-7.57%
wpMemoryUsage	7.52 MB +0% -0%	7.48 MB +0% -0%	0.46%
wpDbQueries	17 +0% -0%	17 +0% -0%	0%

front-end-classic-theme

Metric	`853c5dc`	trunk	% Change
timeToFirstByte	45.5 ms +6.48% -4.95%	39.25 ms +14.78% -2.42%	15.92%
largestContentfulPaint	92 ms +4.35% -4.35%	82 ms +7.32% -2.44%	12.2%
lcpMinusTtfb	45.5 ms +5.38% -1.1%	41.7 ms +3.84% -4.2%	9.11%
wpBeforeTemplate	27.03 ms +10.8% -3.51%	26.27 ms +16.14% -1.75%	2.89%
wpTemplate	14.59 ms +5.55% -3.63%	10.04 ms +13.15% -1.59%	45.32%
wpTotal	42.59 ms +5.61% -5.38%	36.53 ms +13.06% -2.41%	16.59%
wpMemoryUsage	5.51 MB +0% -0%	5.37 MB +0% -0%	2.66%
wpDbQueries	14 +0% -0%	10 +0% -0%	40%

media-processing

Metric	`853c5dc`	trunk	% Change
mediaProcessingJpeg	402.54 ms +1.17% -0.25%	402.09 ms +0.9% -1.01%	0.11%
mediaProcessingAvif	6181.42 ms +0.39% -0.19%	6169.65 ms +0.36% -0.08%	0.19%
mediaProcessingJpegToAvif	4397.02 ms +0.11% -0.64%	4397.57 ms +0.05% -0.22%	-0.01%

media-upload

Metric	`853c5dc`	trunk	% Change
jpegUploadProcessing	1448.21 ms +31.82% -2.89%	1416.11 ms +0.29% -0.87%	2.27%
pngUploadProcessing	211.56 ms +2.4% -1.35%	212.17 ms +5.45% -3.2%	-0.29%
largeJpegUploadProcessing	1413.85 ms +0.4% -0.5%	1411.99 ms +0.57% -0.34%	0.13%
multipleImageUploadProcessing	1536.37 ms +0.24% -0.57%	1545.09 ms +1.08% -0.6%	-0.56%

post-editor

Metric	`853c5dc`	trunk	% Change
serverResponse	555.05 ms +0.66% -5.48%	545.86 ms +4.34% -6.63%	1.68%
firstPaint	234.88 ms +25.14% -14.48%	227.76 ms +42.62% -16.04%	3.13%
domContentLoaded	1285 ms +1.02% -1.43%	1286.04 ms +1.77% -1.02%	-0.08%
loaded	1286.34 ms +1.02% -1.42%	1287.35 ms +1.77% -1.03%	-0.08%
firstContentfulPaint	421.62 ms +4.1% -2.45%	424.07 ms +0.6% -4.14%	-0.58%
firstBlock	3574.6 ms +0.98% -1.02%	3566.33 ms +0.9% -0.98%	0.23%
type	14.74 ms +6.99% -3.26%	15.59 ms +4.3% -5.71%	-5.45%
typeWithoutInspector	13.97 ms +6.01% -1.43%	14.21 ms +7.81% -4.64%	-1.69%
typeWithTopToolbar	18.67 ms +17.89% -13.34%	18.69 ms +4.39% -1.87%	-0.11%
typeContainer	9.36 ms +4.38% -12.61%	9.46 ms +16.91% -14.16%	-1.06%
focus	73.29 ms +17.94% -3.52%	77.99 ms +12.96% -2.87%	-6.03%
firstFocus	168.91 ms +0% -0%	175.24 ms +0% -0%	-3.61%
selectAll	615.48 ms +2.87% -6.81%	588.48 ms +7.05% -1.61%	4.59%
listViewOpen	66.88 ms +26.03% -10.56%	68.74 ms +10.31% -5.6%	-2.71%
inserterOpen	22.9 ms +8.65% -2.05%	21.97 ms +10.83% -8.01%	4.23%
inserterHover	3.41 ms +20.23% -8.8%	3.49 ms +7.45% -12.03%	-2.29%
inserterSearch	8.42 ms +13.18% -11.05%	8.01 ms +28.09% -3%	5.12%
loadPatterns	641.67 ms +2.13% -4.74%	631.21 ms +6.6% -2.07%	1.66%
wpTotal	544.72 ms +0.67% -5.56%	536.18 ms +4.23% -6.79%	1.59%
wpMemoryUsage	13.09 MB +0% -0%	13.05 MB +0% -0%	0.28%
wpDbQueries	54 +0% -1.85%	54 +0% -1.85%	0%

site-editor

Metric	`853c5dc`	trunk	% Change
serverResponse	516.12 ms +2.85% -3%	533.68 ms +2.08% -1.66%	-3.29%
firstPaint	252.9 ms +14.21% -7.31%	215.78 ms +47.55% -10.1%	17.2%
domContentLoaded	1404.73 ms +1.82% -0.46%	1432.71 ms +1.81% -0.93%	-1.95%
loaded	1406.16 ms +1.82% -0.47%	1433.97 ms +1.81% -0.93%	-1.94%
firstContentfulPaint	444.76 ms +1.69% -3.18%	448.05 ms +3.76% -3.74%	-0.73%
firstBlock	4537.82 ms +0.28% -0.58%	4585.72 ms +1.23% -1.13%	-1.04%
type	15.54 ms +13.71% -4.38%	15.49 ms +8.91% -4.13%	0.32%
navigate	111.77 ms +3.57% -11.62%	103.98 ms +6.3% -10.95%	7.49%
loadPatterns	1413.63 ms +12.69% -7.83%	1377.06 ms +9.22% -5.87%	2.66%
loadPages	1156.83 ms +3.04% -3.39%	1138.77 ms +3.2% -4.48%	1.59%
wpTotal	506.9 ms +2.87% -3.17%	523.92 ms +2.04% -1.77%	-3.25%
wpMemoryUsage	12.07 MB +0% -0%	12.04 MB +0% -0%	0.23%
wpDbQueries	43 +2.33% -0%	43 +2.33% -0%	0%

_{c78b2bf Run}

github-actions · 2026-09-05T06:46:46Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: amitraj2203 <amitraj2203@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

ciampo · 2026-09-06T13:34:11Z

As mentioned in #82426 (comment), I want to note that the original issue deliberately states:

Review each declaration in its layout context and replace it with standards-based word wrapping that preserves the current behavior. Do not apply one mechanical replacement everywhere.

That is because these changes need careful human testing.

Pointing an AI agent to that issue and creating one PR with all changes, without proof (especially screenshots) that they were tested, implicitly shifts the vast majority of the workload to the reviewers, which is neither correct nor sustainable.

With that said, please don't take this as a personal critique, but rather part of a wider message that I feel like we will have to leave around Gutenberg more frequently to many contributors.

Specifically, regarding the code changes in this PR, the deprecated value is equivalent to both word-break: normal and overflow-wrap: anywhere, but these replacements add only the latter. Could we also set word-break: normal at all four declarations so inherited theme styles such as word-break: break-all do not change how these blocks wrap?

I can give a new round of review after the initial feedback was assessed / addressed, and after manual verification + screenshots have been posted.

amitraj2203 · 2026-09-06T19:13:12Z

@ciampo, Thanks for the review. I've addressed the code feedback.

On the scope. This isn't one PR with all the changes from #82293. It covers 4 declarations in two blocks only: "Table and Media & Text", and is opened as "Part of #82293", with the remaining declarations left for separate PRs. Before/after screenshots at 375px and 1280px were already included in the description.

Below is the manual verification, re-done after the code change. Each case was checked on its own: fixed layout, all three alignments, an unaligned control that these rules deliberately do not target, and Media & Text on the front end at two viewports, under a theme that sets word-break: break-all, and in the editor.

Front end — 1280px

1. Table — fixed layout

2. Table — align left

3. Table — align center

4. Table — align right

5. Table — default (control, these rules do not apply)

6. Media & Text

Front end — 375px

The page scrollWidth stays at 375px, so there is no horizontal page scroll at mobile width.

1. Table — fixed layout

2. Table — align left

3. Table — align center

4. Table — align right

5. Table — default (control, these rules do not apply)

Screen.Recording.2026-09-07.at.12.16.01.AM.mov

The recording shows the unaligned table scrolling inside its own figure. That is the pre-existing .wp-block-table { overflow-x: auto } behaviour, unchanged by this PR.

6. Media & Text

Inherited `word-break: break-all` from the theme

	Trunk (`word-break: break-word`)	This PR (`word-break: normal` + `overflow-wrap: anywhere`)
1. Fixed layout
2. Align left
3. Align center
4. Align right
5. Default (control)
6. Media & Text

Editor

1. Table — fixed layout

2. Table — align left

3. Table — align center

4. Table — align right

5. Table — default (control, these rules do not apply)

6. Media & Text

aaronrobertshaw · 2026-09-06T23:32:12Z

On the scope. This isn't one PR with all the changes from #82293. It covers 4 declarations in two blocks only

I think this reinforces @ciampo's point a little. It is very easy to split this PR on a per-block basis to allow focused per-block testing and also make it straightforward to revert if issues do arise with a specific block post-merge.

If you could split this PR @amitraj2203, I'd be happy to help out further with testing 🙏

amitraj2203 added 2 commits September 5, 2026 12:01

Table, Media & Text: replace deprecated word-break with overflow-wrap…

ac39e7d

…: anywhere

Remove explanatory comments from the overflow-wrap declarations

c78b2bf

amitraj2203 self-assigned this Sep 5, 2026

github-actions Bot added the [Package] Block library /packages/block-library label Sep 5, 2026

amitraj2203 marked this pull request as ready for review September 5, 2026 06:46

amitraj2203 requested a review from fabiankaegy as a code owner September 5, 2026 06:46

t-hamano mentioned this pull request Sep 6, 2026

Remove deprecated word-wrapping Stylelint suppressions added in #80738 #82293

Open

20 tasks

ciampo requested a review from a team September 6, 2026 13:36

ciampo added the [Type] Enhancement A suggestion for improvement. label Sep 6, 2026

Navigation Menu

Uh oh!

Table, Media & Text: replace deprecated word-break with overflow-wrap: anywhere - #82480

Table, Media & Text: replace deprecated word-break with overflow-wrap: anywhere#82480
amitraj2203 wants to merge 2 commits into
trunkfrom
fix/82293-table-media-text-overflow-wrap

amitraj2203 commented Sep 5, 2026

Uh oh!

coderabbitai Bot commented Sep 5, 2026 •

edited

Loading

Review skipped

Uh oh!

github-actions Bot commented Sep 5, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Sep 5, 2026 •

edited

Loading

Uh oh!

ciampo commented Sep 6, 2026 •

edited

Loading

Uh oh!

amitraj2203 commented Sep 6, 2026

Uh oh!

aaronrobertshaw commented Sep 6, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

amitraj2203 commented Sep 5, 2026

What?

Why?

How?

Screenshots

Testing Instructions

Use of AI Tools

Uh oh!

coderabbitai Bot commented Sep 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

github-actions Bot commented Sep 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🤖 PR meta 🤖

📦 Bundle size

⚡ Performance

Uh oh!

github-actions Bot commented Sep 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ciampo commented Sep 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

amitraj2203 commented Sep 6, 2026

Front end — 1280px

Front end — 375px

Inherited word-break: break-all from the theme

Editor

Uh oh!

aaronrobertshaw commented Sep 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

coderabbitai Bot commented Sep 5, 2026 •

edited

Loading

github-actions Bot commented Sep 5, 2026 •

edited

Loading

github-actions Bot commented Sep 5, 2026 •

edited

Loading

ciampo commented Sep 6, 2026 •

edited

Loading

Inherited `word-break: break-all` from the theme

aaronrobertshaw commented Sep 6, 2026 •

edited

Loading