Skip to content

ExternalLink: Align appearance with Link from @wordpress/ui #77790

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.

Sign up for GitHub

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

Merged
ciampo merged 6 commits into from
Apr 29, 2026
Merged

ExternalLink: Align appearance with Link from @wordpress/ui #77790

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5f27ea3
ExternalLink: Align appearance with Link from @wordpress/ui
jameskoster Apr 29, 2026
2ad4ef4
Fix underline styles
mirka Apr 29, 2026
b28b66d
Update packages/components/src/external-link/style.scss
jameskoster Apr 29, 2026
9af12c3
ExternalLink: Remove redundant text-decoration on icon
jameskoster Apr 29, 2026
1b125f3
Link, ExternalLink: Use from-font for text-decoration-thickness
jameskoster Apr 29, 2026
5851296
UI: Add changelog entry for Link text-decoration-thickness change
jameskoster Apr 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

### Enhancements

- `ExternalLink`: Align appearance with `Link` from `@wordpress/ui` (brand color, underline thickness/offset, focus ring, and external-link icon spacing) ([#77790](https://github.com/WordPress/gutenberg/pull/77790)).
- `Menu`: Remove `cursor: not-allowed` and added pointer styles to menu ([#70412](https://github.com/WordPress/gutenberg/pull/70412))
- `FormToggle`: Add stacking context isolation ([#77619](https://github.com/WordPress/gutenberg/pull/77619)).
- `CircularOptionPicker`: Add stacking context isolation ([#77715](https://github.com/WordPress/gutenberg/pull/77715)).
Expand Down
33 changes: 31 additions & 2 deletions packages/components/src/external-link/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,41 @@
.components-external-link {
color: var(--wpds-color-fg-interactive-brand);
text-decoration: none;

// Match the focus ring used by `Link` in `@wordpress/ui`.
Comment thread
jameskoster marked this conversation as resolved.
Resolved
@media not ( prefers-reduced-motion ) {
transition: outline 0.1s ease-out;
}
// Outline width must be kept at 0 even with a transparent color,
// or else the outline will be visible in forced-colors mode.
outline: 0 solid transparent;
outline-offset: 1px;

&:visited {
color: var(--wpds-color-fg-interactive-brand);
}

&:hover,
&:active {
color: var(--wpds-color-fg-interactive-brand-active);
}

&:focus {
outline:
var(--wpds-border-width-focus) solid
var(--wpds-color-stroke-focus-brand);
}
}

.components-external-link__contents {
text-decoration: underline;
text-underline-offset: 0.2em;
text-decoration-thickness: 0.5px;

@ciampo ciampo Apr 29, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using sub-pixel values may create rendering glitches on low-density screens. A few ideas:

  • apply 0.5px inside a @media (min-resolution: 2dppx) query, and fallback to 1px
  • test the from font value

In any case, we should update Link in @wordpress/ui, too

@jameskoster jameskoster Apr 29, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TIL about from-font. In my testing this produces the same result as what we have currently (.5px), so we can likely use that :)

}

.components-external-link__icon {
margin-left: 0.5ch;
font-weight: 400;
display: inline-block;
margin-inline-start: var(--wpds-dimension-padding-xs);
font-weight: var(--wpds-typography-font-weight-regular);
text-decoration: none;

@ciampo ciampo Apr 29, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

text-decoration: none; here is likely redundant, since the actual text decoration is applied to .components-external-link__contents , a sibling element (and not a parent)

}
Loading