Components: Enhance Notice actions to allow more props like disabled and onClick with url #74094

manzoorwanijk · 2025-12-18T09:36:40Z

Related to #74090

What?

Enhances the Notice component's action buttons to support additional Button component features.

Why?

Notice action buttons were missing common Button features like disabled, etc. The openInNewTab prop existed in types but wasn't implemented, and onClick was ignored when url was provided.

How?

Updated NoticeAction types to allow disabled and onClick alongside url
Remove openInNewTab from the types.

Testing Instructions

Check out this branch
Run npm run storybook:dev
Navigate to Components > Feedback > Notice
Test the new stories:
- ** With Disabled Action**: Verify the disabled button cannot be clicked
- ** With Open In New Tab**: Verify link opens in new tab

Testing Instructions for Keyboard

Tab to action buttons and verify they receive focus
Press Enter/Space to activate buttons
Disabled buttons should still be focusable via keyboard

Screenshots

github-actions · 2025-12-18T09:41:52Z

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: manzoorwanijk <[email protected]>
Co-authored-by: gmjuhasz <[email protected]>
Co-authored-by: aduth <[email protected]>
Co-authored-by: mirka <[email protected]>
Co-authored-by: SirLouen <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: ciampo <[email protected]>

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

Mamaduka · 2025-12-18T09:49:49Z

I wonder if some of this was intentional to keep UI more or less consistent.

manzoorwanijk · 2025-12-18T09:59:16Z

I wonder if some of this was intentional to keep UI more or less consistent.

Actions were added 7 years ago by @aduth and @gziolo and I couldn't find any mention of any intentions there, except this for future enhancements:

Most of our existing use of elements could be better served by a formal "actions" option (e.g., "View Post" on the save success) which is more future-compatible to notices design revisions.

As mentioned and explained in the linked issue, actions for those notices need to be versatile, it makes it hard to use them for real-world cases.

gmjuhasz

Coming from Jetpack I also did find this Notice component lacking this functionality before, we even had our own Notice component to battle this. I think these changes still keep it simple, but a lot more versatile.

packages/components/src/notice/stories/index.story.tsx

github-actions · 2025-12-18T12:18:13Z

Flaky tests detected in c71acc2.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/20552994612
📝 Reported issues:

[Flaky Test] should show the original content after revert and page reload #68604 in /test/e2e/specs/site-editor/template-revert.spec.js

packages/components/src/notice/index.tsx

Notice actions now accept an 'href' property in addition to 'url', allowing more flexible anchor rendering.

packages/components/src/notice/types.ts

packages/components/src/notice/test/index.tsx

t-hamano · 2025-12-20T14:51:30Z

If you want to build a completely free UI, you can render it via the children prop:

<Notice status="info">
	<Flex justify="start" wrap>
		<Button variant="primary">Push Me</Button>
		<Button variant="primary" disabled>Push Me</Button>
		<Button variant="primary" isBusy>Push Me</Button>
		<Button variant="primary" size="small">Push Me</Button>
	</Flex>
</Notice>

I wonder if there is anything that can't be achieved without extending the actions property 🤔

manzoorwanijk · 2025-12-21T10:51:30Z

If you want to build a completely free UI, you can render it via the children prop:

Yes, we can do that but having the actual component fixed is probably better and has no harm.

In future, I would expect the actions to be completely flexible by making them composable by directly rendering { actions } instead of looping through them.

ciampo · 2025-12-22T09:41:04Z

Left some thoughts in #74090 (comment)

packages/components/src/notice/index.tsx

packages/components/src/notice/stories/index.story.tsx

packages/components/src/notice/types.ts

mirka · 2025-12-24T22:19:18Z

packages/components/src/snackbar/types.ts

+		actions?: Array<
+			Pick< NoticeAction, 'label' | 'url' | 'onClick' > & {
+				openInNewTab?: boolean;
+			}


Ugh I'm conflicted about this API divergence between Snackbar and Notice now. Snackbar added the feature through a openInNewTab prop, and swaps the Button for an ExternalLink in that case (#69905).

Actually I think that might be preferable to supporting rel and target directly, because one of the guidelines of the design system is to have consistent cues (visual and accessible) on links that open new tabs. ExternalLink has those cues, while Button does not.

The problem is that Snackbar only has to support variant="link" buttons, while Notice actions have a wider API surface that conflicts with ExternalLink, so the TypeScript/documentation complexity is probably not worth the trouble to make it work polymorphically.

This alone may be a good reason to support components directly in actions, for the @wordpress/ui version of Notice.

Sorry @manzoorwanijk, this aspect was a bit more complicated that expected. We can probably merge this PR faster if we punt this rel/target forwarding part out of scope 😅 (The type fix here for openInNewTab where you moved it out from Notice and into Snackbar is good though.)

The issue here was that openInNewTab was only defined in the type but not implemented. So, it was unused anyway.

So, I replaced it with target and rel to have better control.

As you rightly said, here we have to support different variants and thus it makes more sense to have it this way.

The problem is that:

We don't really want to allow tab-opening links without the visual/accessible cues like ExternalLink has.

It's not good that Snackbar actions and Notice actions have different APIs to achieve the same thing.

We can solve these cleanly in a new API in @wordpress/ui, but it's hard to do this in @wordpress/components.

So what do we want to do here? Maybe we can close this PR, live with what we have for now, and hope to resolve the issues in @wordpress/ui?

It's not good that Snackbar actions and Notice actions have different APIs to achieve the same thing.

Why not replicate then? It shouldn't be too difficult. Maybe something like the Cover Block cover/shared.js could work here?

Like Marco said in #74090 (comment), "quick wins and fixes" are fine, but we don't want to introduce new features that add maintenance/migration cost to these soon-to-be-deprecated componentry.

The onClick and disabled are quick fixes, but openInNewTab turned out to be on the level of a "new feature" that does indeed add to the future cost. So I'd prefer we remove the openInNewTab feature from the scope of this PR, given that we can support it cleaner in the new @wordpress/ui package.

openInNewTab was already defined there (in types) before this PR but was not implemented.

Yes, it's messed up but let's leave it as is, unimplemented. I haven't looked into whether the types can be corrected easily so a Notice action won't accept an onInNewTab property, but that doesn't have to be done in this PR if it isn't simple.

Done. Thanks.

The types for Notice are now clean and straightforward.

packages/components/src/notice/stories/index.story.tsx

SirLouen · 2025-12-27T23:45:03Z

So what do we want to do here? Maybe we can close this PR, live with what we have for now, and hope to resolve the issues in @wordpress/ui?

@manzoorwanijk my conclusion reading through the whole convo is the following: limit the scope of this PR, by removing the open in new tab elements (alas, we missed rel & target). You will be able to push at least something in this PR, but not entirely.

Replaces the 'target' and 'rel' props with a boolean 'openInNewTab' prop for Notice action buttons, which, if true, forces to render the ExternalLink

manzoorwanijk · 2025-12-28T06:46:34Z

I have updated the PR (along with the description) to reduce the scope to do only three things:

Allow disabled prop for buttons.
Allow onClick alongside url.
Wire up openInNewTab to render ExternalLink when it's true.

SirLouen · 2025-12-29T19:20:15Z

I have updated the PR (along with the description) to reduce the scope to do only three things:

Allow disabled prop for buttons.

Allow onClick alongside url.

Wire up openInNewTab to render ExternalLink when it's true.

👍 Looking better to me, I would like to test a bit, but want to see what others think now.

mirka · 2025-12-30T18:28:04Z

I'm afraid I can't enthusiastically greenlight the openInNewTab part, but everything else is good on my end.

This reverts commit a96c415.

mirka

Looks good, thanks for your patience here 🙏

manzoorwanijk added 3 commits December 18, 2025 14:46

Components: Enhance Notice action buttons with missing Button props

a9d76ef

Components: Add stories for enhanced Notice action features

c332439

Add unit tests for actions

280cc7d

manzoorwanijk self-assigned this Dec 18, 2025

manzoorwanijk requested a review from ajitbohra as a code owner December 18, 2025 09:36

manzoorwanijk added [Type] Enhancement A suggestion for improvement. [Package] Components /packages/components labels Dec 18, 2025

Update CHANGELOG.md

537edb8

manzoorwanijk requested review from aduth and t-hamano December 18, 2025 09:46

manzoorwanijk requested a review from gziolo December 18, 2025 09:59

gmjuhasz reviewed Dec 18, 2025

View reviewed changes

packages/components/src/notice/stories/index.story.tsx Outdated Show resolved Hide resolved

packages/components/src/notice/stories/index.story.tsx Outdated Show resolved Hide resolved

manzoorwanijk added 2 commits December 18, 2025 16:08

Clean up the story for click count

750eb0c

Merge branch 'trunk' into enhance/notice-component-actions

c86b5a3

aduth reviewed Dec 18, 2025

View reviewed changes

packages/components/src/notice/index.tsx Outdated Show resolved Hide resolved

manzoorwanijk added 3 commits December 19, 2025 11:13

Merge branch 'trunk' into enhance/notice-component-actions

2366747

Remove openInNewTab prop in favour of the native "target" prop

a1b7805

Add support for 'href' prop

ee50f49

Notice actions now accept an 'href' property in addition to 'url', allowing more flexible anchor rendering.

manzoorwanijk requested a review from aduth December 19, 2025 05:58

Fix the type for openInNewTab used by snackbar component

f8e9272

aduth reviewed Dec 19, 2025

View reviewed changes

packages/components/src/notice/types.ts Show resolved Hide resolved

packages/components/src/notice/types.ts Outdated Show resolved Hide resolved

packages/components/src/notice/test/index.tsx Show resolved Hide resolved

manzoorwanijk added 2 commits December 21, 2025 16:18

Consolidate tests and stories

47d32d2

Merge branch 'trunk' into enhance/notice-component-actions

08ee407

Fix unit tests

ffebbea

manzoorwanijk requested review from ciampo and mirka December 24, 2025 16:33

mirka reviewed Dec 24, 2025

View reviewed changes

manzoorwanijk commented Dec 25, 2025

View reviewed changes

packages/components/src/notice/stories/index.story.tsx Outdated Show resolved Hide resolved

Remove unnecessary story

33917e3

manzoorwanijk added 2 commits December 28, 2025 12:01

Force openInNewTab to render ExternalLink

c04bfea

Replaces the 'target' and 'rel' props with a boolean 'openInNewTab' prop for Notice action buttons, which, if true, forces to render the ExternalLink

Restore Snackbar types

a96c415

manzoorwanijk requested review from aduth and mirka December 28, 2025 06:37

manzoorwanijk changed the title ~~Components: Enhance Notice actios with missing Button props~~ Components: Enhance Notice actions to allow more props like disabled and openInNewTab Dec 28, 2025

manzoorwanijk added 2 commits December 28, 2025 16:31

Move onClick to common props type and improve type name

fbf1a29

Update docs

c71acc2

SirLouen added the Needs Testing Needs further testing to be confirmed. label Dec 29, 2025

manzoorwanijk added 2 commits December 31, 2025 16:57

Revert "Restore Snackbar types"

f201ce4

This reverts commit a96c415.

Limit the scope to disabled and onClick prop

d069cfd

manzoorwanijk changed the title ~~Components: Enhance Notice actions to allow more props like disabled and openInNewTab~~ Components: Enhance Notice actions to allow more props like disabled and onClick with url Dec 31, 2025

manzoorwanijk added 3 commits December 31, 2025 17:04

Simplify types

9bded61

Remove unused types

d825f18

Clean up snackbar types

b888aa3

manzoorwanijk mentioned this pull request Dec 31, 2025

Social: Update post publish review prompt Automattic/jetpack#46398

Merged

3 tasks

mirka approved these changes Dec 31, 2025

View reviewed changes

manzoorwanijk enabled auto-merge (squash) December 31, 2025 12:10

manzoorwanijk merged commit f12350d into trunk Dec 31, 2025
39 checks passed

manzoorwanijk deleted the enhance/notice-component-actions branch December 31, 2025 12:21

github-actions bot added this to the Gutenberg 22.4 milestone Dec 31, 2025

Components: Enhance Notice actions to allow more props like disabled and onClick with url #74094

Components: Enhance Notice actions to allow more props like disabled and onClick with url #74094

Uh oh!

Conversation

manzoorwanijk commented Dec 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots

Uh oh!

github-actions bot commented Dec 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Mamaduka commented Dec 18, 2025

Uh oh!

manzoorwanijk commented Dec 18, 2025

Uh oh!

gmjuhasz left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Dec 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

t-hamano commented Dec 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

manzoorwanijk commented Dec 21, 2025

Uh oh!

ciampo commented Dec 22, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mirka Dec 24, 2025

Choose a reason for hiding this comment

Uh oh!

manzoorwanijk Dec 25, 2025

Choose a reason for hiding this comment

Uh oh!

mirka Dec 25, 2025

Choose a reason for hiding this comment

Uh oh!

manzoorwanijk Dec 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SirLouen Dec 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mirka Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

manzoorwanijk Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

mirka Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

manzoorwanijk Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

manzoorwanijk Dec 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

SirLouen commented Dec 27, 2025

Uh oh!

manzoorwanijk commented Dec 28, 2025

Uh oh!

manzoorwanijk commented Dec 18, 2025 •

edited

Loading

github-actions bot commented Dec 18, 2025 •

edited

Loading

github-actions bot commented Dec 18, 2025 •

edited

Loading

t-hamano commented Dec 20, 2025 •

edited

Loading

manzoorwanijk Dec 27, 2025 •

edited

Loading

SirLouen Dec 27, 2025 •

edited

Loading

manzoorwanijk Dec 31, 2025 •

edited

Loading

SirLouen commented Dec 29, 2025 •

edited

Loading