Merged
Conversation
jameskoster
added
[Type] Enhancement
Member
|
Convenient timing! I found need for a Would be fine to reserve for a follow-up if it makes it easier to review this in isolation. There are some merge conflicts from the merging of #75981 that'll need to be resolved all the same. |
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
jameskoster
force-pushed
the
add/ui-component-link
branch
from
46cf439 to
34e3a1f
Compare
|
Size Change: 0 B Total Size: 6.89 MB ℹ️ View Unchanged
|
Contributor
Author
|
@aduth oh nice, I didn't even see the Notice PR :D It seemed a small update so I included it here. |
|
Flaky tests detected in 7a3ed68. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/22915568556
|
Contributor
|
We should also add a |
aduth
reviewed
Mar 5, 2026
ciampo
reviewed
Mar 6, 2026
Comment on lines
+62
to
+68
| .link-icon::after { | ||
| content: "\2197"; | ||
| } | ||
|
|
||
| .link-icon:dir(rtl)::after { | ||
| content: "\2196"; | ||
| } |
Contributor
There was a problem hiding this comment.
Not a blocker for this PR, but I wonder if we should chose an icon that reflects more explicitly the "opens in a new tab" meaning. Also, seeing the feedback from #63175, maybe we should use an SVG icon instead? I feel like external from @wordpress/icons would be a good choice.
Contributor
Author
There was a problem hiding this comment.
We had that before but it was removed because it didn't render well at certain sizes. I wouldn't object to using the right svg, but it probably needs a separate exploration.
Contributor
There was a problem hiding this comment.
What about using the arrowUpRight SVG for now, and discuss changing icon separately?
Member
There was a problem hiding this comment.
I think we should keep the Unicode symbol for the purposes of this PR. If we switch, the change needs to happen globally (@wordpress/components counterpart, and probably a few other components in the codebase).
ciampo
reviewed
Mar 6, 2026
ciampo
reviewed
Mar 6, 2026
ciampo
reviewed
Mar 6, 2026
ciampo
reviewed
Mar 6, 2026
jameskoster
force-pushed
the
add/ui-component-link
branch
from
629045b to
9213286
Compare
ciampo
reviewed
Mar 10, 2026
Contributor
ciampo
left a comment
ciampo
left a comment
There was a problem hiding this comment.
Let's also add some unit tests around ref forwarding and openInNewTab functionality (`target="_blank", aria label, default prevented for internal anchor links)
| @layer wp-ui-components { | ||
| .link { | ||
| text-underline-offset: 0.2em; | ||
| text-decoration-thickness: 0.5px; |
Contributor
There was a problem hiding this comment.
Should this be --wpds-border-width-2xl? Should it depend on screen density, since it's sub-pixel?
Contributor
Author
There was a problem hiding this comment.
We don't have a --wpds-border-width-2xl? I think we should follow up to explore adding a token for this.
Contributor
There was a problem hiding this comment.
Sorry, I meant 2xs! But yeah, I'm ok with tackling this in a follow-up
ciampo
reviewed
Mar 10, 2026
ciampo
reviewed
Mar 10, 2026
Comment on lines
+15
to
+17
| tone="neutral" | ||
| className={ clsx( styles[ 'action-link' ], className ) } | ||
| ref={ ref } |
Contributor
There was a problem hiding this comment.
Suggested change
| tone="neutral" | |
| className={ clsx( styles[ 'action-link' ], className ) } | |
| ref={ ref } |
Duplicate props
Add a Link component with `brand` and `neutral` tone variants plus an `unstyled` variant for consumers who want link mechanics without opinionated styles. Made-with: Cursor
Made-with: Cursor
Made-with: Cursor
Made-with: Cursor
… handling Made-with: Cursor
Modern browsers implicitly apply noopener for target="_blank", and per #26914 hardcoding rel values is contentious. Made-with: Cursor
…tern Made-with: Cursor
Co-authored-by: Marco Ciampini <[email protected]>
Made-with: Cursor
Made-with: Cursor
Co-authored-by: Marco Ciampini <[email protected]>
…prop order Made-with: Cursor
Made-with: Cursor
…ontrols Made-with: Cursor
Made-with: Cursor
Co-authored-by: Marco Ciampini <[email protected]>
Co-authored-by: Marco Ciampini <[email protected]>
…k props Made-with: Cursor
ciampo
force-pushed
the
add/ui-component-link
branch
from
83c59cb to
ba161ee
Compare
ciampo
approved these changes
Mar 10, 2026
Contributor
ciampo
left a comment
ciampo
left a comment
There was a problem hiding this comment.
LGTM 🚀
I pushed a couple of final, small tweaks to wrap this up quicker!
Thank you, @jameskoster , for making Text and Link happen 🥳
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Adds a
Linkcomponent to the@wordpress/uipackage: a styled anchor element with support for semantic color tones and an unstyled escape hatch.Props
Here's the updated Props section:
variant('default' | 'unstyled') -- Controls visual treatment.unstyledstrips all styles so consumers can bring their own.tone('brand' | 'neutral') -- Semantic color intent. Only applies whenvariantisdefault.href-- URL target.openInNewTab(boolean) -- When true, opens the link in a new tab, mergesnoopenerinto therelattribute, appends a visual arrow indicator (with RTL support), and prevents navigation for internal anchors.target,rel, etc.).Why
Upcoming UI surfaces and components need link elements that are consistent with the design system. A primitive
Linkcomponent provides this foundation, using the same design tokens and patterns asButtonand other@wordpress/uicomponents.How
Follows the established component patterns in
@wordpress/ui:useRender/mergePropsfrom@base-ui/reactandforwardReffrom@wordpress/element.wp-ui-components) and--wpds-*design tokens for colors.unstyledvariant conditionally excludes the base.linkclass, matching the same pattern used byButton.Notes for review
renderprop: The component inherits arenderprop from the sharedComponentProps<'a'>type, which allows rendering as any element. This is arguably too broad for a Link. The main legitimate use case would appear to be framework router links (e.g., React Router, Next.js), which still render<a>under the hood. Worth discussing whether to keep, restrict, or remove.text-underline-offset: 0.2emandtext-decoration-thickness: 0.5pxare hardcoded because there are no compatible design tokens for these properties yet. Since spacing tokens arepxbased it will be tricky to tokenify the offset in a way that accounts for different font sizes. The underline isn't technically a stroke, so I'm not sure we need a token for this.Testing Instructions
npm startNext steps
--wpds-border-width-2xsDS token (convo)