diff --git a/packages/block-editor/src/components/block-tools/selected-block-popover.js b/packages/block-editor/src/components/block-tools/selected-block-popover.js index 652c04efe6aed5..c816ffee312069 100644 --- a/packages/block-editor/src/components/block-tools/selected-block-popover.js +++ b/packages/block-editor/src/components/block-tools/selected-block-popover.js @@ -132,6 +132,7 @@ function SelectedBlockPopover( { } ) } __unstablePopoverSlot={ __unstablePopoverSlot } __unstableContentRef={ __unstableContentRef } + resize={ false } { ...popoverProps } > { shouldShowContextualToolbar && ( diff --git a/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js b/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js index fdbf5831ae98a1..36a17506508a25 100644 --- a/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js +++ b/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js @@ -15,7 +15,6 @@ 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, }; @@ -23,9 +22,9 @@ const DEFAULT_PROPS = { // 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, }; @@ -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; }