Try padding the vertical toolbars shift range

WordPress · Oct 5, 2024 · 72d0498 · 72d0498
1 parent eddd3f8
commit 72d0498
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-popover.js b/packages/block-editor/src/components/block-tools/zoom-out-popover.js
@@ -24,7 +24,7 @@ export default function ZoomOutPopover( { clientId, __unstableContentRef } ) {
 		...popoverProps,
 		placement: 'left-start',
 		flip: false,
-		shift: true,
+		shift: { padding: { top: 48, bottom: 48 } },
 	};
 
 	return (

diff --git a/packages/components/src/popover/index.tsx b/packages/components/src/popover/index.tsx
@@ -241,7 +241,7 @@ const UnforwardedPopover = (
 			shiftMiddleware( {
 				crossAxis: true,
 				limiter: limitShift(),
-				padding: 1, // Necessary to avoid flickering at the edge of the viewport.
+				padding: typeof shift === 'boolean' ? 1 : shift.padding ?? 1, // Necessary to avoid flickering at the edge of the viewport.
 			} ),
 		arrow( { element: arrowRef } ),
 	];

diff --git a/packages/components/src/popover/types.ts b/packages/components/src/popover/types.ts
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { ReactNode, MutableRefObject, SyntheticEvent } from 'react';
-import type { Placement } from '@floating-ui/react-dom';
+import type { Placement, ShiftOptions } from '@floating-ui/react-dom';
 
 type PositionYAxis = 'top' | 'middle' | 'bottom';
 type PositionXAxis = 'left' | 'center' | 'right';
@@ -139,7 +139,7 @@ export type PopoverProps = {
 	 *
 	 * @default false
 	 */
-	shift?: boolean;
+	shift?: boolean | ShiftOptions;
 	/**
 	 * Specifies the popover's style.
 	 *