Skip to content

Link: Keep the new-tab icon with the preceding word - #84928

Closed
ciampo wants to merge 3 commits into
trunkfrom
codex/fix-ui-link-icon-wrapping
Closed

Link: Keep the new-tab icon with the preceding word#84928
ciampo wants to merge 3 commits into
trunkfrom
codex/fix-ui-link-icon-wrapping

Conversation

@ciampo

@ciampo ciampo commented Oct 16, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

See #84761.

What?

Keep the new-tab arrow with the preceding word when @wordpress/ui Link wraps, including unstyled links and RTL text.

Why?

The icon's inline-block box lets the arrow wrap onto a line of its own. This PR covers Link only, following the scope discussed on the issue.

How?

Keep the icon inline and apply the underline to a text wrapper for styled links. Unstyled links retain their direct children for composition.

Relationship to the earlier Link changes

#77420 removed the original text wrapper to simplify the markup and fix an underline leaking into unstyled links. Its inline-block alternative kept the arrow free of underlining, but introduced the wrapping boundary reported here.

The wrapper in this change exists only for the default variant and stays the same whether the new-tab indicator is present or absent. This preserves the unstyled behavior used by ButtonLink. Underline color and thickness inherit from the anchor, including the neutral tone and the from-font treatment from #77790. The generated arrow, RTL direction, accessible notice, and focus utilities remain in place.

Testing Instructions

  1. Run npm run storybook:dev and open Components / @wordpress-ui / Link / Wrapping.

  2. Confirm the arrow stays with "phrases" on the second line. Only the link text should be underlined.

  3. Switch variant to unstyled and confirm the arrow stays attached without adding an underline.

  4. Repeat with the RTL toolbar option and both tones. Confirm the arrow points toward the top left in RTL.

  5. Open Link / Truncation and Link / Truncation At Icon. Check both variants and directions with ellipsis on Link and on its parent. The text should stay on one line and truncate with an ellipsis.

Testing Instructions for Keyboard

  1. Press Tab to focus the link and check that its focus outline includes the text and arrow.
  2. Activate the link with Enter and confirm it opens in a new tab.
  3. Check the ButtonLink / Open In New Tab story for the same focus and activation behavior.

Screenshots or screencast

Before After
Arrow starts the next line Arrow stays with the final word
Text truncation: before and after

The Truncation and Truncation At Icon stories check ellipsis on Link itself and on a parent container, with both variants in LTR and RTL. They cover a long label and the boundary where the label nearly fits but the arrow overflows. Before uses the PR base, 55b3f987bb4; after uses the Link implementation at 3296ad30e6f. Both use the same story, a 480 × 294 viewport, and a device scale factor of 2.

The before-and-after images are identical within each browser. Overflow clips the trailing arrow together with the text. The full link label and new-tab notice remain in the accessible-name result. The original issue does not mention truncation; this is an additional compatibility check.

Case and browser Before After
Long label, Chromium 153 Truncation before in Chromium Truncation after in Chromium
Long label, WebKit 26.6 Truncation before in WebKit Truncation after in WebKit
Arrow boundary, Chromium 153 Arrow-boundary truncation before in Chromium Arrow-boundary truncation after in Chromium
Arrow boundary, WebKit 26.6 Arrow-boundary truncation before in WebKit Arrow-boundary truncation after in WebKit
Verification

The four new wrapping cases failed before the fix and pass afterward. All 22 Link and ButtonLink tests pass. The actual Storybook example was also checked in Chromium 153 and WebKit 26.6 for default and unstyled links in LTR and RTL.

Use of AI Tools

Codex assisted with the history review, implementation, tests, browser checks, and PR description.

@github-actions

github-actions Bot commented Oct 16, 2026 •
edited
Loading

Copy link
Copy Markdown

🤖 PR meta 🤖

Preview in WordPress Playground

🏷️ Labels

This pull request needs exactly one label indicating its type, and has 0.

  • Required: any label starting with [Type].
  • Found: none.

Read more about Type labels in Gutenberg. If you cannot add labels yourself, a reviewer can do it for you.

📦 Bundle size

Size Change: +642 B (+0.01%)

Total Size: 8.85 MB

📦 View Changed
Filename Size Change
build/modules/boot/index.min.js 57.8 kB +64 B (+0.11%)
build/modules/core-fields/attachment.min.js 45.3 kB +62 B (+0.14%)
build/modules/core-fields/post_type_supports.min.js 81 kB +63 B (+0.08%)
build/scripts/block-directory/index.min.js 55.3 kB +63 B (+0.11%)
build/scripts/block-editor/index.min.js 597 kB +45 B (+0.01%)
build/scripts/block-library/index.min.js 442 kB +33 B (+0.01%)
build/scripts/customize-widgets/index.min.js 60.4 kB +63 B (+0.1%)
build/scripts/edit-site/index.min.js 397 kB +35 B (+0.01%)
build/scripts/edit-widgets/index.min.js 67.3 kB +57 B (+0.08%)
build/scripts/editor/index.min.js 609 kB +41 B (+0.01%)
build/scripts/format-library/index.min.js 89.2 kB +59 B (+0.07%)
build/scripts/media-utils/index.min.js 238 kB +57 B (+0.02%)

172fe38 Run

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric d724630 trunk % Change
timeToFirstByte 35.3 ms +8.92% -4.82% 33.8 ms +12.43% -2.81% 4.44%
largestContentfulPaint 66 ms +3.03% -9.09% 60 ms +10% -6.67% 10%
lcpMinusTtfb 26.45 ms +25.52% -6.24% 24 ms +18.54% -3.54% 10.21%
wpBeforeTemplate 18.68 ms +5.46% -4.76% 17.72 ms +17.78% -1.13% 5.42%
wpTemplate 14.14 ms +3.96% -10.82% 12.99 ms +7.78% -3.08% 8.85%
wpTotal 32.35 ms +9.68% -5.32% 31.02 ms +12.99% -3.03% 4.29%
wpMemoryUsage 7.62 MB +0% -0% 7.58 MB +0% -0% 0.46%
wpDbQueries 17 +0% -0% 17 +0% -0% 0%

front-end-classic-theme

Metric d724630 trunk % Change
timeToFirstByte 26.25 ms +14.86% -1.14% 28.25 ms +6.55% -2.3% -7.08%
largestContentfulPaint 60 ms +13.33% -0% 64 ms +6.25% -0% -6.25%
lcpMinusTtfb 34.4 ms +4.8% -1.74% 36.4 ms +3.43% -1.24% -5.49%
wpBeforeTemplate 16.39 ms +11.71% -1.04% 15.77 ms +0.63% -1.84% 3.93%
wpTemplate 7.5 ms +5.33% -1.2% 9.79 ms +5.72% -5.01% -23.39%
wpTotal 23.91 ms +14.72% -1.21% 25.76 ms +7.22% -2.17% -7.18%
wpMemoryUsage 6.17 MB +0% -0% 6.24 MB +0% -0% -1.2%
wpDbQueries 10 +0% -0% 14 +0% -0% -28.57%

media-processing

Metric d724630 trunk % Change
mediaProcessingJpeg 229.83 ms +1.67% -1.26% 222.88 ms +0.28% -0.39% 3.12%
mediaProcessingAvif 3806.36 ms +0.71% -0.98% 3647.98 ms +1.39% -0.96% 4.34%
mediaProcessingJpegToAvif 2594.76 ms +0.7% -1.92% 2484.04 ms +1.78% -0.65% 4.46%

media-upload

Metric d724630 trunk % Change
jpegUploadProcessing 1152.97 ms +23.71% -23.95% 877.9 ms +1.25% -0.91% 31.33%
pngUploadProcessing 160.39 ms +23.54% -2.42% 169.47 ms +11.96% -3.43% -5.36%
largeJpegUploadProcessing 913.2 ms +49.61% -2.48% 917.03 ms +47.72% -0.75% -0.42%
multipleImageUploadProcessing 1444.34 ms +3.12% -0.33% 1036.35 ms +46.29% -1.09% 39.37%

post-editor

Metric d724630 trunk % Change
serverResponse 237.69 ms +8.44% -6.48% 256.16 ms +2.08% -9.59% -7.21%
firstPaint 312.92 ms +1.58% -46.99% 175.84 ms +78.67% -6.45% 77.96%
domContentLoaded 675.51 ms +7.32% -2.29% 716.49 ms +0.73% -5.02% -5.72%
loaded 676.69 ms +7.32% -2.36% 717.33 ms +0.75% -5.02% -5.67%
firstContentfulPaint 314.24 ms +1.16% -1.51% 327.03 ms +1.66% -1.97% -3.91%
firstBlock 2016.48 ms +2.5% -2.26% 2034.73 ms +0.59% -1.41% -0.9%
type 12.52 ms +4.55% -2.32% 13.83 ms +3.25% -3.25% -9.47%
typeWithoutInspector 12.8 ms +4.14% -2.89% 13.77 ms +1.16% -2.61% -7.04%
typeWithTopToolbar 16.11 ms +0.56% -4.66% 17.17 ms +5.47% -3.61% -6.17%
typeContainer 6.65 ms +6.47% -7.37% 6.21 ms +5.48% -0.97% 7.09%
focus 68.37 ms +7.3% -5.68% 71.01 ms +10.2% -5.11% -3.72%
firstFocus 132.13 ms +0% -0% 132.12 ms +0% -0% 0.01%
selectAll 341.77 ms +3.46% -0.08% 353.55 ms +0.32% -1.03% -3.33%
listViewOpen 48.09 ms +4.72% -5.2% 46.21 ms +4.44% -5.63% 4.07%
inserterOpen 25.53 ms +0.94% -3.37% 25.96 ms +7.47% -6.66% -1.66%
inserterHover 8.64 ms +8.56% -7.87% 9.36 ms +4.81% -3.53% -7.69%
inserterSearch 6.54 ms +3.82% -5.35% 6.52 ms +21.32% -1.38% 0.31%
loadPatterns 427.34 ms +2.71% -1.32% 429.91 ms +5.85% -3.15% -0.6%
wpTotal 231 ms +8.7% -6.62% 249.28 ms +2.23% -9.94% -7.33%
wpMemoryUsage 13.51 MB +0% -0% 13.47 MB +0% -0% 0.28%
wpDbQueries 54 +0% -0% 54 +0% -0% 0%

site-editor

Metric d724630 trunk % Change
serverResponse 238.13 ms +3.12% -4.18% 240.09 ms +4.31% -4.74% -0.82%
firstPaint 192.59 ms +79.07% -14.48% 249.97 ms +39.6% -39.63% -22.95%
domContentLoaded 762.63 ms +3.2% -2.46% 764.16 ms +1.86% -4.28% -0.2%
loaded 763.52 ms +3.22% -2.45% 765.23 ms +1.84% -4.31% -0.22%
firstContentfulPaint 346.85 ms +2.7% -5.99% 353.38 ms +3.1% -8.72% -1.85%
firstBlock 2788.66 ms +0.58% -1.26% 2795.66 ms +1.54% -1.89% -0.25%
type 14.01 ms +9.28% -3.5% 12.98 ms +2.47% -1.46% 7.94%
navigate 85.13 ms +11.36% -1.56% 74.14 ms +41.56% -3.32% 14.82%
loadPatterns 904.28 ms +13.66% -2.46% 1096.65 ms +1.88% -10.06% -17.54%
loadPages 977.62 ms +1.63% -0.76% 1015.19 ms +3.85% -5.28% -3.7%
wpTotal 231.76 ms +3.12% -4.28% 233.47 ms +4.49% -4.85% -0.73%
wpMemoryUsage 12.56 MB +0% -0% 12.53 MB +0% -0% 0.3%
wpDbQueries 43.5 +1.15% -1.15% 44 +0% -2.27% -1.14%

172fe38 Run

@github-actions github-actions Bot added the [Package] UI /packages/ui label Oct 16, 2026
This was referenced Oct 16, 2026
Merged
Closed
@ciampo

ciampo commented Oct 16, 2026

Copy link
Copy Markdown
Contributor Author

Closing in favour of #84806

@ciampo ciampo closed this Oct 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

[Package] UI /packages/ui

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@ciampo