WIP: Components :update re-resizable library
#65637
Closed
Conversation
This file contains 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
t-hamano
added
[Type] Code Quality
|
Size Change: -47 B (0%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
t-hamano
force-pushed
the
update/components-re-resizable
branch
from
9b2cb6b
to
80cbb17
Compare
t-hamano
changed the title
re-resizable libraryre-resizable library
|
Seems like the "Why?" section could more generally mention enabling tab order fixes for all instances where |
t-hamano
changed the title
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. |
6 tasks
|
@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! |
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.
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