Block Popover: Fix incorrect positioning of padding and margin visual…

…izers on scroll (#44998) * Block Popover: Fix incorrect positioning of padding and margin visualizers on scroll. Adds a shift prop to tell whether the floating UI should shift into view or stay absolutely positioned. * Block Popover: Add changelog comment describing bug fix for padding and margin visualizers. * Block Popover: Add shift property documentation to README.md Co-authored-by: Edwin Cromley <edwin@eridesign.com>
WordPress · Oct 18, 2022 · 06ae775 · 06ae775
1 parent 155ca0a
commit 06ae775
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 1 deletion.
diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
@@ -6,6 +6,7 @@
 
 -   `FontSizePicker`: Update fluid utils so that only string, floats and integers are treated as valid font sizes for the purposes of fluid typography ([#44847](https://github.com/WordPress/gutenberg/pull/44847))
 -   `getTypographyClassesAndStyles()`: Ensure that font sizes are transformed into fluid values if fluid typography is activated ([#44852](https://github.com/WordPress/gutenberg/pull/44852))
+-   `BlockPopover`: Ensure that padding and margin visualizers display in correct position even when scrolling past block. ([#44998](https://github.com/WordPress/gutenberg/pull/44998))
 
 ### New features
 

diff --git a/packages/block-editor/src/components/block-popover/README.md b/packages/block-editor/src/components/block-popover/README.md
@@ -22,6 +22,14 @@ The client ID of the block representing the bottom position of the popover.
 -   Type: `String`
 -   Required: No
 
+#### shift
+
+This determines whether the block popover always shifts into the viewport or remains at its original position. See FloatingUI for more details on shift.
+
+-	Type: `Boolean`
+-	Required: No
+-	Default: `true`
+
 ## BlockPopoverInbetween
 
 ### Props

diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js
@@ -32,6 +32,7 @@ function BlockPopover(
 		__unstableCoverTarget = false,
 		__unstablePopoverSlot,
 		__unstableContentRef,
+		shift = true,
 		...props
 	},
 	ref
@@ -166,7 +167,7 @@ function BlockPopover(
 			placement="top-start"
 			resize={ false }
 			flip={ false }
-			shift
+			shift={ shift }
 			{ ...props }
 			className={ classnames(
 				'block-editor-block-popover',

diff --git a/packages/block-editor/src/hooks/margin.js b/packages/block-editor/src/hooks/margin.js
@@ -231,6 +231,7 @@ export function MarginVisualizer( { clientId, attributes } ) {
 			clientId={ clientId }
 			__unstableCoverTarget
 			__unstableRefreshSize={ margin }
+			shift={ false }
 		>
 			<div className="block-editor__padding-visualizer" style={ style } />
 		</BlockPopover>

diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js
@@ -222,6 +222,7 @@ export function PaddingVisualizer( { clientId, attributes } ) {
 			clientId={ clientId }
 			__unstableCoverTarget
 			__unstableRefreshSize={ padding }
+			shift={ false }
 		>
 			<div className="block-editor__padding-visualizer" style={ style } />
 		</BlockPopover>