From 4c1421e1cf589aa71c82768b13a8b56ccfa25520 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 24 Aug 2022 14:13:58 +0800 Subject: [PATCH 1/2] Take block height and viewport height into account when positioning toolbar --- .../block-tools/use-block-toolbar-popover-props.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) 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..aa9ac541a841f0 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 @@ -23,7 +23,8 @@ 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, @@ -47,7 +48,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; } From 9df5913d3819b8f58c1171f8bc778790df56c2a8 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 24 Aug 2022 14:16:05 +0800 Subject: [PATCH 2/2] Move resize prop out of the hook --- .../src/components/block-tools/selected-block-popover.js | 1 + .../components/block-tools/use-block-toolbar-popover-props.js | 2 -- 2 files changed, 1 insertion(+), 2 deletions(-) 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 aa9ac541a841f0..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, }; @@ -26,7 +25,6 @@ const DEFAULT_PROPS = { // 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, };