-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Spacer block: Fix null
label in tooltip when horizontal layout
#58909
Conversation
cb12bca
to
93f8685
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. |
Size Change: +13 B (0%) Total Size: 1.71 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the PR! This fixes the issue for me and the change makes sense.
@tellthemachines Thanks for the review! |
I just cherry-picked this PR to the backports/beta1 branch to get it included in the next release: 8a16821 |
Fixes #47418
Also mentioned in this comment: #49322 (review)
What?
This PR fixes the following unintended behavior when a Spacer block is used in horizontal layout and the drag handle is manipulated:
Before
before.mp4
After
after.mp4
Why?
This tooltip internally displays the width and height obtained via
useResizeListener
hook as a tooltip label.gutenberg/packages/components/src/resizable-box/resize-tooltip/index.tsx
Lines 63 to 65 in 5939c41
When the Spacer block is NOT resized, the container has the following style applied so the
useResizeLister
hook can get the height correctly.gutenberg/packages/block-library/src/spacer/editor.scss
Lines 32 to 36 in 5939c41
On the other hand, during resizing, this style is not applied, so the height of the container is zero. This can also be explained by the fact that during resizing, the gray background color applied to the container becomes invisible and the handle moves to the top right. The
useResizeLister
hook can no longer successfully retrieve the height of the parent container, so the tooltip label will contain null.How?
Applies
height:100%
only when the Spacer block is used in horizontal layout. This will inherit theheight:24px
applied to the block wrapper div, so theuseResizeListener
hook will get the height correctly, and as a result, the label will display correctly.Testing Instructions