Dashboard Widgets: promote high-relevance actions into a chrome footer

[retrofox]

What?

The dashboard now honors the relevance hint on widget actions.

relevance becomes a three-tier scale: 'high' | 'medium' | 'low'. 'high' actions render as leading text links in a persistent footer strip under the widget body; 'medium' as trailing compact affordances (icon-only when the action declares an icon); 'low' (the default) stays in the "More" menu. Full-bleed widgets have no chrome, so all of their actions stay in the menu.

Two bundled widgets adopt the surface: core/events replaces its hand-rolled footer (Meetups / WordCamps) with declared actions, and core/quick-draft recovers the classic "View all drafts" link.

Closes #81555. Part of #79231.

Why?

relevance means the widget declares importance and the host picks the surface. Attributes already work this way (#79246); actions all went to the three-dots menu regardless of the hint.

Recurring verbs such as "view all" or a report download need an always-visible affordance. Events hand-rolling its own footer was the workaround for this gap.

The 'medium' tier keeps placement semantic: neither the icon declaration nor the fulfillment decides where an action goes; importance does.

How?

• WidgetRelevance gains 'medium', carried through the PHP gate and the REST schema.
• New WidgetFooter component in @wordpress/widget-dashboard; WidgetFrame renders it after the body, inert while customizing. Picker previews inherit it.
• splitWidgetActions owns the footer/menu routing; WidgetActions (the "More" menu) takes the pre-filtered list.
• Every affordance is a real anchor. The icon-only shape is a LinkButton squared through the Button override hooks; IconButton would give the anchor role="button".
• openInNewTab on icon-only actions mounts the target on the anchor and moves the new-tab hint into the accessible name, avoiding a second external glyph.
• useWidgetTypes holds the icon slot with the stand-in while an action's icon reference resolves, so promoted actions keep a stable shape from first paint.
• The footer divider spans the full card width; content aligns to --wp-ui-card-padding. The body loses its bottom padding, so scrolled content runs flush against the pinned footer.
• Storybook: demo/goal-progress declares a high link, a medium icon download, and a low action for the menu.

Testing Instructions

1. Run Storybook:

npm run storybook:dev

2. Open WidgetDashboard → Default. The Goal Progress tile shows the footer: "View goal details" leading, a download icon trailing. Its More menu holds only "About goals".
3. Hover the download icon: the "Export progress" tooltip appears, and clicking downloads the CSV. Both affordances are anchors: middle-click and copy address work.
4. Click Customize: the footer stays visible but inert. Done or Cancel restores it.
5. On a wp-env site with the plugin built, add Quick draft: "View all drafts" navigates to edit.php?post_status=draft, and the divider runs edge to edge.
6. Add WordPress events: Meetups and WordCamps render in the chrome footer, matching the footer the widget used to build itself.
7. Add Hello Dolly (full-bleed): no footer, and its action stays in the overlay More menu.

Follow-ups

• Envelope scope axis ('local' | 'global') for actions that should reach host-level surfaces such as a command palette.
• Dynamic action rendering (review {n} items): declared actions are static data, so labels cannot carry runtime state such as counts; needs its own design.

[github-actions]

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: retrofox <retrofox@git.wordpress.org>
Co-authored-by: chihsuan <chihsuan@git.wordpress.org>

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

[github-actions]

Size Change: +22 B (0%)

Total Size: 7.72 MB

📦 View Changed

Filename	Size	Change
build/modules/widget-primitives/index.min.js	1.47 kB	+22 B (+1.52%)

_{compressed-size-action}

[github-actions]

Flaky tests detected in b69baeb.
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/31709583114
📝 Reported tests:

adds and activates a new tab when pressing Enter at the end of a tab label in /test/e2e/specs/editor/blocks/tabs.spec.js, passed after 1 failed attempt.

Error: expect(locator).toHaveCount(expected) failed

Locator:  locator('[name="editor-canvas"]').contentFrame().getByRole('tab')
Expected: 3
Received: 2
Timeout:  5000ms

Call log:
  - Expect "toHaveCount" with timeout 5000ms
  - waiting for locator('[name="editor-canvas"]').contentFrame().getByRole('tab')
    14 × locator resolved to 2 elements
       - unexpected value "2"

    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/blocks/tabs.spec.js:146:25

[chihsuan]

Nice work! @retrofox

I left a few inline comments around cases that may need attention.

Also, should we also update the package and architecture documentation to describe the new behavior here? Or you plan to update them in a follow-up?

[chihsuan]

Should we also reserve the icon slot while the icon loads here?

[retrofox]

Yes! And it went deeper: the action emitted without its icon while the reference resolved, so it changed shape when the icon landed.

3a9b742 extends the type-icon stand-in to action icons, and 43c325a removes the dependency entirely: placement now follows a new 'medium' relevance tier, not the icon (more information in the PR description)

[chihsuan]

I found that when an action declares both an icon and openInNewTab, the link adds a second ↗ glyph inside the square button. Its accessible label also hides the "opens in a new tab" hint from screen readers.

Should we keep only the action icon and include the new-tab hint in its accessible label?

[retrofox]

Fixed in f35ec5c following your suggestion: the target mounts on the anchor instead of through Link (the source of the second glyph), and the new-tab hint joins the accessible name, which the aria-label was muting

[chihsuan]

Just a thought, what do you think about creating a shared helper to handle the action split between the footer and the More menu? Keeping both sides of the rule together could prevent them from drifting as the presentations evolve.

[retrofox]

Yes, good suggestion, Chi.

Done in aaa5af5: splitWidgetActions owns the routing rule, and both surfaces read the same split 👌

[retrofox]

Nice work! @retrofox
🙇

I left a few inline comments around cases that may need attention.

💯

Also, should we update the package and architecture documentation to describe the new behavior here? Or you plan to update them in a follow-up?

Updated in this PR.

The actions doc states the host mapping, the package README gains an "Actions" section, and afc9e74 sweeps the stale relevance unions across the architecture doc and package docs.

Note the materialization rule changed after your review: a 'medium' tier now decides the compact trailing shape (see the updated PR description).

[chihsuan]

Updated in this PR.

Thanks @retrofox Tested again and it works well. 👍

Note the materialization rule changed after your review: a 'medium' tier now decides the compact trailing shape (see the updated PR description).

Should we also update this line?

gutenberg/packages/wp-build/lib/widget-utils.mjs

Line 40 in 1854a34

* @property {'high'|'low'} [relevance] How relevant the action is among the widget's actions.