Skip to content

Fix site editor toolbar when block is bigger than viewport #43548

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

Merged
talldan merged 2 commits into from
Sep 1, 2022
Merged

Fix site editor toolbar when block is bigger than viewport #43548

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4c1421e
Take block height and viewport height into account when positioning t…
talldan Aug 24, 2022
9df5913
Move resize prop out of the hook
talldan Aug 24, 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
1 change: 1 addition & 0 deletions packages/block-editor/src/components/block-tools/selected-block-popover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,7 @@ function SelectedBlockPopover( {
} ) }
__unstablePopoverSlot={ __unstablePopoverSlot }
__unstableContentRef={ __unstableContentRef }
resize={ false }
{ ...popoverProps }
>
{ shouldShowContextualToolbar && (
Expand Down
16 changes: 12 additions & 4 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 @@ -15,17 +15,16 @@ import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-
// down the toolbar will stay on screen by adopting a sticky position at the
// top of the viewport.
const DEFAULT_PROPS = {
resize: false,
flip: false,
__unstableShift: 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.
// 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 = {
resize: false,
flip: true,
__unstableShift: false,
};
Expand All @@ -47,7 +46,16 @@ function getProps( contentElement, selectedBlockElement, toolbarHeight ) {
const blockRect = selectedBlockElement.getBoundingClientRect();
const contentRect = contentElement.getBoundingClientRect();

if ( blockRect.top - contentRect.top > toolbarHeight ) {
// The document element's clientHeight represents the viewport height.
const viewportHeight =
contentElement.ownerDocument.documentElement.clientHeight;

const hasSpaceForToolbarAbove =
blockRect.top - contentRect.top > toolbarHeight;
const isBlockTallerThanViewport =
blockRect.height > viewportHeight - toolbarHeight;

if ( hasSpaceForToolbarAbove || isBlockTallerThanViewport ) {
return DEFAULT_PROPS;
}

Expand Down