WIP: Components :update re-resizable library#65637
Conversation
|
Size Change: -47 B (0%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
9b2cb6b to
80cbb17
Compare
re-resizable libraryre-resizable library
|
Seems like the "Why?" section could more generally mention enabling tab order fixes for all instances where |
re-resizable libraryre-resizable library
|
@stokesman Thanks for the feedback! I've updated the Why section of the PR. The current issues I'm facing are the following two behaviors that first appeared in re-resizable The handle will be displayed unless we explicitly set the direction to
|
| Expected (re-resizable 6.4.0) | Actual (re-resizable 6.9.1) |
|---|---|
![]() |
![]() |
Site Editor Canvas cannot be resized
If I move the handle with the mouse even a little, the canvas width is fixed at 300px:
a5ddb475ec15381e091e711110e764da.mp4
|
@t-hamano thank you for your upstrem PR. Would this update help solve also #52602 ? |
Yes, some additional CSS may be required, but I believe it will also work correctly with RTL languages. |
|
@t-hamano, what's the blocker for this PR? cc @WordPress/gutenberg-components |
|
bokuweb/re-resizable#827 to fix the tab order problem has unfortunately been reverted because it caused a regression. This means we can no longer move forward with this PR 😥 I've listed possible suggestions in this comment. |
|
Thanks, @t-hamano! |


What?
This PR updates the
re-resizablelibrary used in theResizableboxcomponent from version6.4.0to version6.10.0.Why?
Gutenberg may render focusable buttons via the
handleComponentprop to make the resizer focusable and resizable by keyboard events.These buttons are rendered together after their
children, which causes a mismatch between the visually expected tab order and the actual tab order.How?
I submitted bokuweb/re-resizable#827 to fix this issue. This PR was merged and released as version
6.10.0. By updating to this version, the tab order will match the visual order.Testing Instructions
ResizableBox componentwith focusable resize handles in the following three places. Please make sure that the tab order and visual order match in these places:ResizableBoxthat does not use thehandleComponentprop, such as the Image block and Site Logo block, remains unchanged.Screenshots or screencast