Skip to content

Block Selection Toolbar: Support fixed blocks by flipping toolbar when block goes out of view #46085

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.

Sign up for GitHub

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

Closed
andrewserong wants to merge 7 commits into from
Closed

Block Selection Toolbar: Support fixed blocks by flipping toolbar when block goes out of view #46085

Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5711462
Try: allow block selection popover toolbar to support fixed block ele…
andrewserong Nov 26, 2022
0caba0d
Update to improve flip position, handling for full height blocks
andrewserong Nov 27, 2022
7f6ec01
Simplify flip logic
andrewserong Nov 27, 2022
76fb3f1
Remove unnecessary scroll handler
andrewserong Dec 5, 2022
e3b8c9c
Add back in removed z-index for edit site header
andrewserong Dec 6, 2022
81dbb54
Add changelog entry, update docs
andrewserong Dec 6, 2022
f52091e
Add background color to widgets header
andrewserong Dec 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Simplify flip logic
  • Loading branch information
@andrewserong
andrewserong committed Dec 6, 2022
commit 7f6ec01cf7df9b3f2a60b2c45ff80671aa7634d8
39 changes: 5 additions & 34 deletions packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,27 +13,12 @@ import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-

const TOOLBAR_MARGIN = 12;

const COMMON_PROPS = {
// By default the toolbar sets the `shift` prop and flip properties.
// If there is enough room, then once the block scrolls past the top of the screen,
// then the toolbar is flipped to the bottom.
const DEFAULT_PROPS = {
placement: 'top-start',
strategy: 'fixed',
};

// By default the toolbar sets the `shift` prop. If the user scrolls the page
// down the toolbar will stay on screen by adopting a sticky position at the
// top of the viewport.
const DEFAULT_PROPS = {
...COMMON_PROPS,
flip: true,
shift: true,
};

// When there isn't enough height between the top of the block and the editor
// canvas, the `shift` prop is set to `false`, as it will cause the block to be
// obscured. The `flip` behavior is enabled, which positions the toolbar below
// the block. This only happens if the block is smaller than the viewport, as
// otherwise the toolbar will be off-screen.
const RESTRICTED_HEIGHT_PROPS = {
...COMMON_PROPS,
flip: true,
shift: true,
};
Expand All @@ -53,17 +38,11 @@ function getProps( contentElement, selectedBlockElement, toolbarHeight ) {
}

const blockRect = selectedBlockElement.getBoundingClientRect();
const contentRect = contentElement.getBoundingClientRect();

// The document element's clientHeight represents the viewport height.
const viewportHeight =
contentElement.ownerDocument.documentElement.clientHeight;

// The calculation for the following adds the two `top` values together.
// If an element is positioned higher than the viewport, then its `top` value will be
// negative, so using an addition ensures that the values are calculated appropriately.
const hasSpaceForToolbarAbove =
blockRect.top + contentRect.top > toolbarHeight;
const isBlockTallerThanViewport =
blockRect.height > viewportHeight - toolbarHeight;

Expand All @@ -75,16 +54,8 @@ function getProps( contentElement, selectedBlockElement, toolbarHeight ) {
};
}

if ( hasSpaceForToolbarAbove ) {
return {
...DEFAULT_PROPS,
flip: { padding: toolbarHeight },
shift: { padding: toolbarHeight - TOOLBAR_MARGIN },
};
}

return {
...RESTRICTED_HEIGHT_PROPS,
...DEFAULT_PROPS,
flip: { padding: toolbarHeight },
shift: { padding: toolbarHeight - TOOLBAR_MARGIN },
};
Expand Down