Skip to content

Commit

Permalink
Fix site editor toolbar when block is bigger than viewport (#43548)
Browse files Browse the repository at this point in the history
* Take block height and viewport height into account when positioning toolbar

* Move resize prop out of the hook
  • Loading branch information
talldan authored Sep 1, 2022
1 parent 4c21fdb commit 01cebaa
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 4 deletions.
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
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

0 comments on commit 01cebaa

Please sign in to comment.