Block Selection Toolbar: Support fixed and sticky blocks by flipping when there is not enough space above the block #46565
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
andrewserong
added
[Package] Blocks
This was referenced Dec 15, 2022
Block Selection Toolbar: Support fixed blocks by flipping toolbar when block goes out of view
#46085
Closed
|
Size Change: +35 B (0%) Total Size: 1.32 MB
ℹ️ View Unchanged
|
I remember the popover used to have code that did this, but it was replaced with something else. This was the PR that added it - #41402, this is the one that removed it - #43617. It'd be interesting to know a bit more about why it's needed again and why the change #43617 isn't sufficient.
I found it difficult to reproduce this part, I'm not sure I'm doing it right. 😄 |
talldan
reviewed
Dec 19, 2022
talldan
reviewed
Dec 19, 2022
packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js
Show resolved
Hide resolved
…ing on scroll and flipping based on available space at top of viewport
andrewserong
force-pushed
the
try/alternate-fix-for-block-toolbar-support-for-fixed-and-sticky-blocks
branch
from
b7de65a to
f892ec1
Compare
andrewserong
changed the title
|
Thanks for testing and for the feedback @talldan! After re-testing, it turns out that half of the changes in this PR were no longer required (the addition of the scroll event listener, etc) thanks to the improvements to the popover component that landed in #46187 — that PR seems to have resolved the issues of the block popover not staying attached to the sticky/fixed element once scrolled off the page. The remaining changes are still needed for sticky / fixed position support — that is, flipping the toolbar to be displayed below the block when there is initially not enough room to display it above the block. I've updated the PR description to reflect this smaller-scoped change. I've also updated #46142 (the sticky position support PR) to reflect the current state of this PR. For anyone testing, it might be simpler to play around with #46142 since the new flipping behaviour might be more visible there. |
|
I'll close out this PR now as its changed were merged as part of #46142 |
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?
Part of implementing: #30121
An alternative to #46085.
This PR explores whether we can add support for fixed and sticky blocks to the block selection toolbar by flipping the position of the toolbar to be beneath the block when there is not enough space to display the toolbar above the block.
Why?
Without this change, blocks that are included inside a sticky positioned block at the top of the screen are obscured by the block selection toolbar. By flipping to display beneath the block when there is not enough room, we can ensure that the block content is not obscured.
How?
Testing Instructions
To test the real world application for this PR, it might be easier to test #46142 instead, which includes the changes in this PR. However, you can still observe the changes in this PR with the following:
trunk, it's this behaviour that ensures that for sticky and fixed position blocks, the toolbar will not obscure the content.Screenshots or screencast