Open
Conversation
Expose a render prop on DashboardGrid that lets consumers swap the default corner-triangle handle for a custom element. The grid keeps ownership of the gesture (dnd-kit context, throttled delta loop) and passes the wiring (ref, listeners, attributes) plus context (disabled, verticalResizable, isResizing, itemId) to the consumer.
Drop the dnd-kit DndContext + useDraggable subscription that each tile mounted at rest. Removes the now-unreachable disabled prop from ResizeHandleProps and ResizeHandleRenderProps.
Replace IconButton + resizeCornerNE with a plain Icon and a custom inline SVG glyph (full diagonal stroke + corner triangle). The handle wrapper carries the cursor and an opacity transition driven by the new isResizing flag.
|
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. |
retrofox
added
[Type] Enhancement
|
Size Change: 0 B Total Size: 7.82 MB ℹ️ View Unchanged
|
|
Flaky tests detected in 01a7b16. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/25129220551
|
Member
|
Is this needed for something specifically for the Dashboard experiment, or adding "in case"? Consistent corner handle one cannot change seems like a good thing! :-) |
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
2 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
renderResizeHandlerender prop onDashboardGridthat lets consumers swap the default corner-triangle resize handle for a custom element. Side change: the resize handle no longer mounts outside edit mode, removing the dnd-kit<DndContext>anduseDraggablesubscription that every tile carried at rest.Part of #77616
Why?
The resize handle was hard-coded inside
GridItem(packages/grid/src/grid-item.tsx) and consumers had no way to change the icon, position, or visual without forking the component. Surfaces that want a different visual language for the handle (or that need to react to gesture state) couldn't.While exposing the handle, we noticed that every tile mounted a dnd-kit context plus a draggable hook even when the grid was not in edit mode — work that never ran. Skipping the mount is a small, contained perf win that also drops the now-unreachable
disabledflag from the public render-prop contract.How?
The render prop is invoked inside the inner
<ResizeHandle>component, afteruseDraggablehas produced the gesture wiring. The grid keeps ownership of the<DndContext>, the throttled delta loop, and the step-to-grid logic; consumers receiveref,listeners,attributes,verticalResizable,isResizing(sourced fromuseDraggable().isDragging) anditemId.The render prop is forwarded
DashboardGrid→GridItem→ResizeHandleWrapper→ResizeHandle. When omitted, the default corner-triangle div renders unchanged.Types are centralized in
packages/grid/src/types.ts:ResizeDelta,ResizeHandleRenderProps,ResizeHandleProps, andGridItemPropsnow live there and are imported by the components.ResizeHandleRenderPropsandResizeDeltaare re-exported from the package barrel.In
GridItem,<ResizeHandle>is rendered only when! disabled. Thedisabledfield is removed fromResizeHandleRenderPropsandResizeHandleProps, the.is-disabledCSS rule is dropped, and the README/story are updated accordingly.The Storybook story
Custom Resize Handleshows an example handle built from a tiny inline SVG (diagonal stroke + corner triangle) wrapped in a div that carries the gesture wiring and anisResizing-driven opacity transition.Commits
Grid: add renderResizeHandle render prop— feature.Grid: skip ResizeHandle mount outside edit mode— perf optimization, removesdisabledflag.Grid: refine custom resize handle story— Storybook example polish.Testing
Grid/DashboardGrid > Custom Resize Handlestory and verify the custom handle replaces the default corner triangle.onChangeLayoutall behave the same as the default handle.editModeoff via the controls panel — the handle disappears (no DOM, no dnd-kit subscription mounted).Custom Resize Handlestory, confirm the handle's opacity drops to 0.5 while a resize gesture is active and snaps back on release.npx tsc --build packages/grid/tsconfig.jsonandnpx jest packages/grid— both should pass.Screen.Recording.2026-04-29.at.3.12.41.PM.mov
Follow-ups
nwse-resizecue isn't lost when the pointer leaves the handle's hit area.