Fix site editor toolbar when block is bigger than viewport #43548
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
talldan
added
[Type] Bug
|
Size Change: +29 B (0%) Total Size: 1.25 MB
ℹ️ View Unchanged
|
67 tasks
There was a problem hiding this comment.
I'm not the most familiar with Popover internals, but the logic looks sound and it does solve the problem! I assume the draft status is due to #43546 still being in progress?
talldan
force-pushed
the
fix/site-editor-toolbar-when-block-is-bigger-than-viewport
branch
2 times, most recently
from
944e37b to
4d370c0
Compare
talldan
force-pushed
the
replace/popover-force-position-with-resize-and-flip
branch
from
f3af613 to
13d941a
Compare
Base automatically changed from
replace/popover-force-position-with-resize-and-flip
to
trunk
August 30, 2022 05:51
talldan
force-pushed
the
fix/site-editor-toolbar-when-block-is-bigger-than-viewport
branch
from
4d370c0 to
8b654c6
Compare
talldan
force-pushed
the
fix/site-editor-toolbar-when-block-is-bigger-than-viewport
branch
from
8b654c6 to
9df5913
Compare
ciampo
approved these changes
Sep 1, 2022
There was a problem hiding this comment.
LGTM 🚀
Just noting that the "resizing" bug had already been fixed by #43546, since it allowed the block toolbar to always set resize to false (which means that the issue reported in #43541 should already be fixed on trunk)
What this PR changes (fixes) is the edge case scenario in which a block that is taller than the viewport happens to also be the first block.
On trunk, since there's no space above the block, the toolbar flips, and therefore it can't be seen on screen (which may confuse the user)
trunk.mp4
With the changes from this PR, selecting a block that doesn't have space above it but is taller than the viewport will prevent the flip and fallback to the shift behavior, therefore allowing the toolbar to be visible
this-pr.mp4
talldan
deleted the
fix/site-editor-toolbar-when-block-is-bigger-than-viewport
branch
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?
Fixes #43541 (this PR is based on #43546, and that should be merged first)
Why?
#42887 introduced an issue when the block is larger than the viewport. In this situation floating-ui's 'resize' middleware is making the block toolbar smaller to fit the available space which may make it appear as though the toolbar is behind the block. The toolbar can also sometimes appear off-screen below the block (see the 'before' video).
How?
To fix this, resize needs to be switched off, which #43546 helps with.
Once that's resolved, the toolbar still often ends up offscreen, so some extra logic needs to be added to
useBlockToolbarPopoverPropsto account for situations where the block is larger than the viewport.Testing Instructions
Screenshots or screencast
Before
Kapture.2022-08-24.at.14.38.55.mp4
After
Kapture.2022-08-24.at.14.40.24.mp4