Dashboard: add chrome UI tools to widgets#78060
Merged
Merged
Conversation
|
Size Change: 0 B Total Size: 7.97 MB ℹ️ View Unchanged
|
simison
force-pushed
the
update/dashboard-experiment-widget-chrome-tools
branch
from
dd97a18 to
524d01e
Compare
simison
added
[Type] Experimental
Contributor
|
I think this comment is important for this implementation #78209 (comment) |
simison
force-pushed
the
update/dashboard-experiment-widget-chrome-tools
branch
from
524d01e to
58b98ca
Compare
|
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. |
simison
force-pushed
the
update/dashboard-experiment-widget-chrome-tools
branch
from
b966f99 to
505033f
Compare
simison
changed the title
Member
Author
I'm a little uncertain about the complexity added by these UIs; I get that a widget might want to declare "I'm full width", for example, and then it could just become automatically "custom width" when folks just start dragging its size manually? We might be leaning a little too far toward curating widget sizes with automation, when in reality, folks either just add widgets and leave them be or drag them to the size they need, but other options aren't as important. |
Contributor
Yes, the script already converts
That's fair. I saw a few designs where we want to configure a widget with a static width, and the next one to take the rest of the row's width. Also, keep in mind that user interaction isn't the only way to define a widget's chrome settings. For instance, for the function gutenberg_seed_default_dashboard_layout( $dashboard_layout, $dashboard_name = '' ) {
$dashboard_layout[] = array(
'uuid' => 'default-welcome-widget-instance',
'type' => 'core/welcome',
'placement' => array(
'width' => 'full', // <-- HERE!
'height' => 1,
),
);
return $dashboard_layout;
}I guess composing a dashboard layout using AI is something we might want to allow in the near future? |
|
Flaky tests detected in df6ade7. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/26108136710
|
Member
Author
Ye! It would be exciting to have experiment in core AI plugin for "automatically arrange my dashboard based on my site and screen size" |
retrofox
reviewed
May 19, 2026
Comment on lines
105
to
107
| if ( ! widgetType.title ) { | ||
| return null; | ||
| } |
Contributor
There was a problem hiding this comment.
I know it isn't part of this PR, but we should probably remove this condition. The Widget title is required, but here, we expect it to be defined.
Contributor
There was a problem hiding this comment.
Updated in 21483d80e5: the header now assumes title is present, and aria-labelledby is always wired to the title id.
retrofox
reviewed
May 19, 2026
| <Card.Title id={ titleId } render={ <h3 /> }> | ||
| { widgetType.title } | ||
| </Card.Title> | ||
| <Stack direction="row" align="center" justify="space-between"> |
Contributor
There was a problem hiding this comment.
This <Stack /> seems unnecessary. I think we can remove it.
Contributor
There was a problem hiding this comment.
Addressed in 21483d80e5: the extra header wrapper stack is no longer there; the header uses a single row stack for icon + title.
retrofox
reviewed
May 19, 2026
| import { Icon as WCIcon, Spinner } from '@wordpress/components'; | ||
| import { | ||
| Dropdown, | ||
| Icon as WCIcon, |
Contributor
There was a problem hiding this comment.
Small thread on the icon imports here: the file mixes WCIcon (from @wordpress/components) for the header icon with Icon (from @wordpress/ui) for the dropdown's check.
Rather than pulling everything back to @wordpress/components, I'd lean the other way and align fully to @wordpress/ui while the dashboard is still experimental. I tested swapping the header icon to @wordpress/ui's Icon locally, and it renders fine, so the runtime side is already there.
What's missing is the type side: WidgetType.icon is typed as IconType from @wordpress/components, which forces this file (and downstream widget authors) to keep at least one components-side icon import just for the header.
Retyping WidgetType.icon against the @wordpress/ui Icon type drops the mix here and makes the type story consistent for new widgets too.
Contributor
There was a problem hiding this comment.
Done in 21483d80e5: header icon rendering now uses @wordpress/ui Icon, and widget icon typing was moved to IconProps['icon'] from @wordpress/ui for consistency.
retrofox
reviewed
May 19, 2026
| ...currentWidget, | ||
| placement: { | ||
| ...currentWidget.placement, | ||
| width: nextWidth === 'custom' ? 1 : nextWidth, |
Contributor
There was a problem hiding this comment.
Picking "Custom" on a widget that's already custom resets width to 1, since onWidthChange always writes 1 in the custom branch.
A widget the user resized to span 3 columns snaps back to 1 when they reopen the menu and re-select Custom.
The easiest fix: no-op when widget.placement?.width is already numeric, or preserve the current numeric value instead of overwriting it.
Screen.Recording.2026-05-19.at.8.49.31.AM.mov
Contributor
There was a problem hiding this comment.
Fixed in 21483d80e5: selecting “Custom width” now preserves an existing numeric width instead of forcing it back to 1.
Member
Author
|
@copilot resolve the merge conflicts in this pull request |
ciampo
reviewed
May 19, 2026
ciampo
reviewed
May 19, 2026
| */ | ||
| export const WidgetChrome = forwardRef< HTMLDivElement, WidgetChromeProps >( | ||
| function WidgetChrome( { widget, index }, ref ) { | ||
| function WidgetChrome( { widget, index, className, tabIndex }, ref ) { |
Contributor
There was a problem hiding this comment.
tabIndex here looks suspicious. Applying explicit tab indexes can lead to inaccessible UIs. What are we trying to achieve, and is there an alternative way of doing it?
Member
Author
Contributor
Resolved in
Handled in
Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
simison
force-pushed
the
update/dashboard-experiment-widget-chrome-tools
branch
from
8c978c8 to
a5e9f74
Compare
Member
Author
|
Updated! @retrofox @jameskoster Screen.Recording.2026-05-19.at.18.41.17.movSo the "custom" is now just the drag-handle; I like how this got simpler and clearer over iterations. |
retrofox
approved these changes
May 19, 2026
Contributor
retrofox
left a comment
retrofox
left a comment
There was a problem hiding this comment.
Nice one. We can continue working on it in follow-ups.
Personal opinion: I like the icons you designed. I wonder whether we can replace the tree-dots with the current width type.
Three dots are too generic. Here, we set the widget width type. cc @jameskoster
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
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.
Part of #77616
Builts upon earlier PR #78033
What?
Adds widget size picker and remove button to each widget.
Don't worry about Z-index issues now, those will be fixed with #78391
Width button is functional, remove button isn't yet.
Why?
How?
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast
Last update:
Screen.Recording.2026-05-19.at.11.33.50.AM.mov
Use of AI Tools