Skip to content

UI: add "copy to clipboard" component - #82686

Closed
simison wants to merge 11 commits into
trunkfrom
update/ui-add-copy-to-clipboard
Closed

UI: add "copy to clipboard" component#82686
simison wants to merge 11 commits into
trunkfrom
update/ui-add-copy-to-clipboard

Conversation

@simison

@simison simison commented Sep 9, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

WIP

What?

Adds a "copy to clipboard" ClipboardButton component that follows best UX and accessibility practices.

We have a number of places around Gutenberg where we implement this type of UI, and it's a common UI pattern in plugins, too.

Screenshot 2026-09-09 at 17 11 27 Screenshot 2026-09-09 at 17 11 35

UX

  • Leans towards visually looking like a button, much like
  • Shows visual success feedback as icon, copy and tooltip formats (you can mix which ones but the component guides towards using at least one of these)
  • Announces success message to screen readers
  • Allows text-based and icon-based UI
  • Supports defining shortcut prop which is displayed in the tooltip and announced to assistive technology.

Todo:

  • Tooltip feedback not functioning yet (might need controlled Tooltips?)
  • UX for failure to copy
  • Snackbar announcement example

Why?

How?

Adds ClipboardButton with ClipboardButton.Icon and ClipboardButton.Label sub components which allows composing component for different visual situations:

Leans heavily on being a button visually and loans a lot from IconButton component, including shortcut helper.

Testing Instructions

Run Storybook with npm run storybook:dev

See the docs at /?path=/docs/design-system-components-clipboardbutton--docs

Testing Instructions for Keyboard

Screenshots or screencast

WIP

Use of AI Tools

yes

@simison simison added [Type] Enhancement A suggestion for improvement. [Status] In Progress Tracking issues with work in progress [Package] UI /packages/ui labels Sep 9, 2026
@github-actions

github-actions Bot commented Sep 9, 2026 •
edited
Loading

Copy link
Copy Markdown

🤖 PR meta 🤖

📦 Bundle size

Size Change: +3 B (0%)

Total Size: 8 MB

📦 View Changed
Filename Size Change
build/scripts/block-library/index.min.js 365 kB -1 B (0%)
build/scripts/components/index.min.js 267 kB -1 B (0%)
build/scripts/customize-widgets/index.min.js 59 kB +1 B (0%)
build/scripts/edit-post/index.min.js 52.7 kB +1 B (0%)
build/scripts/edit-site/index.min.js 379 kB +3 B (0%)
build/scripts/edit-widgets/index.min.js 66.8 kB +1 B (0%)
build/scripts/media-utils/index.min.js 202 kB -1 B (0%)

1fb9f1b Run

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric 8d07422 trunk % Change
timeToFirstByte 45.5 ms +5.82% -4.4% 44.7 ms +4.03% -4.59% 1.79%
largestContentfulPaint 76 ms +10.53% -5.26% 76 ms +5.26% -5.26% 0%
lcpMinusTtfb 33.05 ms +7.87% -15.13% 29.1 ms +18.38% -6.19% 13.57%
wpBeforeTemplate 21.6 ms +7.92% -3.89% 21.4 ms +7.06% -2.71% 0.93%
wpTemplate 19.86 ms +3.88% -3.98% 19.66 ms +4.27% -5.49% 1.02%
wpTotal 42.05 ms +5.56% -4.64% 41.47 ms +3.93% -4.92% 1.4%
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 8d07422 trunk % Change
timeToFirstByte 29.85 ms +3.69% -3.35% 33.4 ms +5.24% -4.34% -10.63%
largestContentfulPaint 68 ms +5.88% -0% 82 ms +2.44% -2.44% -17.07%
lcpMinusTtfb 39.6 ms +4.92% -1.64% 48.65 ms +2.57% -1.75% -18.6%
wpBeforeTemplate 18.66 ms +1.98% -3.05% 18.67 ms +3.64% -3.37% -0.05%
wpTemplate 8.39 ms +5.36% -2.98% 11.3 ms +10.62% -1.15% -25.75%
wpTotal 27.09 ms +4.91% -3.03% 30.39 ms +6.19% -3.92% -10.86%
wpMemoryUsage 5.40 MB +0% -0% 5.47 MB +0% -0% -1.32%
wpDbQueries 10 +0% -0% 14 +0% -0% -28.57%

media-processing

Metric 8d07422 trunk % Change
mediaProcessingJpeg 337.5 ms +2.39% -0.39% 340.7 ms +0.31% -0.46% -0.94%
mediaProcessingAvif 4991.85 ms +0.5% -0.27% 4988.28 ms +0.42% -0.25% 0.07%
mediaProcessingJpegToAvif 3412.65 ms +0.1% -0.64% 3399.06 ms +0.23% -0.17% 0.4%

media-upload

Metric 8d07422 trunk % Change
jpegUploadProcessing 1400.56 ms +1.18% -0.81% 1397.8 ms +0.51% -1.07% 0.2%
pngUploadProcessing 190.69 ms +8.06% -6.55% 187.4 ms +3.67% -6.57% 1.76%
largeJpegUploadProcessing 1399.49 ms +0.37% -0.87% 1390.79 ms +0.58% -0.89% 0.63%
multipleImageUploadProcessing 1452 ms +1.05% -0.68% 1466.29 ms +4.76% -0.46% -0.97%

post-editor

Metric 8d07422 trunk % Change
serverResponse 530.3 ms +2.26% -6.49% 523.33 ms +3.87% -3.92% 1.33%
firstPaint 233.48 ms +21.84% -16.31% 237.14 ms +7.15% -18.41% -1.54%
domContentLoaded 1294.57 ms +0.64% -0.99% 1285.25 ms +0.71% -1.86% 0.73%
loaded 1295.85 ms +0.64% -0.99% 1286.56 ms +0.71% -1.86% 0.72%
firstContentfulPaint 431.25 ms +3.42% -3.9% 428.79 ms +1.21% -5.28% 0.57%
firstBlock 3560.35 ms +1.24% -0.19% 3548.9 ms +0.81% -0.31% 0.32%
type 15.52 ms +5.15% -4.25% 14.58 ms +13.31% -3.84% 6.45%
typeWithoutInspector 15.54 ms +5.66% -8.69% 14.89 ms +5.57% -4.77% 4.37%
typeWithTopToolbar 18.93 ms +5.65% -5.18% 18.09 ms +7.02% -5.09% 4.64%
typeContainer 9.22 ms +8.13% -11.82% 8.36 ms +13.16% -5.38% 10.29%
focus 76.67 ms +16.54% -2.4% 72.81 ms +16.03% -1.63% 5.3%
firstFocus 187.9 ms +0% -0% 157.91 ms +0% -0% 18.99%
selectAll 587.18 ms +3.52% -2.82% 583.05 ms +3.85% -1.82% 0.71%
listViewOpen 67.55 ms +9.25% -9.09% 72.58 ms +8.16% -9.12% -6.93%
inserterOpen 23.02 ms +7.69% -12.51% 23.12 ms +11.16% -2.81% -0.43%
inserterHover 3.56 ms +8.43% -4.49% 3.82 ms +6.54% -12.83% -6.81%
inserterSearch 7.98 ms +20.05% -8.9% 8.13 ms +13.04% -6.03% -1.85%
loadPatterns 628.48 ms +4.27% -2.32% 647.03 ms +2.76% -2.93% -2.87%
wpTotal 520.49 ms +2.19% -7.06% 512.3 ms +4.17% -3.76% 1.6%
wpMemoryUsage 13.05 MB +0% -0% 13.02 MB +0% -0% 0.28%
wpDbQueries 53.5 +0.93% -0.93% 54 +0% -1.85% -0.93%

site-editor

Metric 8d07422 trunk % Change
serverResponse 409.21 ms +5.57% -1.37% 404.05 ms +5.65% -3.96% 1.28%
firstPaint 234.12 ms +10.43% -9.91% 229 ms +42.83% -12.12% 2.24%
domContentLoaded 1268.4 ms +0.16% -0.36% 1260.85 ms +1.79% -2.67% 0.6%
loaded 1269.62 ms +0.16% -0.36% 1261.98 ms +1.8% -2.68% 0.61%
firstContentfulPaint 401.09 ms +1.2% -1.9% 397.11 ms +2.03% -5.26% 1%
firstBlock 4070.71 ms +0.25% -0.55% 4023.79 ms +0.85% -1.03% 1.17%
type 14.37 ms +3.55% -5.98% 14.13 ms +5.38% -1.06% 1.7%
navigate 110.14 ms +0.93% -6.07% 97.48 ms +1.01% -1.42% 12.99%
loadPatterns 1420.26 ms +15.2% -6.81% 1461.14 ms +6.54% -14.56% -2.8%
loadPages 1071.54 ms +1.34% -1.64% 1055.66 ms +0.53% -0.62% 1.5%
wpTotal 400.29 ms +5.68% -1.42% 395.11 ms +5.73% -4.1% 1.31%
wpMemoryUsage 12.06 MB +0% -0% 12.03 MB +0% -0% 0.3%
wpDbQueries 43.5 +1.15% -1.15% 43.5 +1.15% -1.15% 0%

1fb9f1b Run

@simison

simison commented Oct 22, 2026

Copy link
Copy Markdown
Member Author

We had a discussion ~month ago offline that we wouldn't include this component in the design system, just forgot to close then.

@simison simison closed this Oct 22, 2026
@simison
simison deleted the update/ui-add-copy-to-clipboard branch October 22, 2026 16:02
@simison simison mentioned this pull request Oct 22, 2026
Open
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 [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@simison