Spacer block: Fix null label in tooltip when horizontal layout
#58909
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] Bug
t-hamano
force-pushed
the
spacer/fix-null-tooltip
branch
from
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
|
tellthemachines
approved these changes
Feb 12, 2024
|
@tellthemachines Thanks for the review! |
youknowriad
added
the
Backport to WP 6.7 Beta/RC
youknowriad
pushed a commit
that referenced
this pull request
Feb 13, 2024
|
I just cherry-picked this PR to the backports/beta1 branch to get it included in the next release: 8a16821 |
youknowriad
removed
the
Backport to WP 6.7 Beta/RC
youknowriad
pushed a commit
that referenced
this pull request
Feb 13, 2024
youknowriad
pushed a commit
that referenced
this pull request
Feb 13, 2024
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.
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
useResizeListenerhook 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
useResizeListerhook 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
useResizeListerhook 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:24pxapplied to the block wrapper div, so theuseResizeListenerhook will get the height correctly, and as a result, the label will display correctly.Testing Instructions