Reduce props to fit present use case

packages/block-editor/README.md

@@ -239,10 +239,8 @@ _Parameters_
 -   _$0_ `Object`: Props.
 -   _$0.children_ `Object`: The block content and style container.
 -   _$0.\_\_unstableContentRef_ `Object`: Ref holding the content scroll container.
--   _$0.\_\_experimentalStickyBottom_ `number`: Bottom sticky position of floating toolbar.
--   _$0.\_\_experimentalStickyTop_ `number`: Top sticky position of floating and top toolbar.
--   _$0.\_\_experimentalStickyAreaBottom_ `number`: Offset of bottom side of sticky area.
--   _$0.\_\_experimentalStickyAreaTop_ `number`: Offset of top side of sticky area.
+-   _$0.\_\_experimentalStickyTop_ `number`: Top sticky position offset of floating and top toolbar.
+-   _$0.\_\_experimentalStickier_ `boolean`: Favor sticky position even if the block is out of view.
 
 <a name="BlockVerticalAlignmentControl" href="#BlockVerticalAlignmentControl">#</a> **BlockVerticalAlignmentControl**
 

packages/block-editor/src/components/block-tools/block-popover.js

@@ -54,10 +54,8 @@ function BlockPopover( {
 	capturingClientId,
 	__unstablePopoverSlot,
 	__unstableContentRef,
-	__experimentalStickyBottom,
 	__experimentalStickyTop,
-	__experimentalStickyAreaBottom,
-	__experimentalStickyAreaTop,
+	__experimentalStickier,
 } ) {
 	const {
 		isNavigationMode,
@@ -197,10 +195,8 @@ function BlockPopover( {
 			// Observe movement for block animations (especially horizontal).
 			__unstableObserveElement={ node }
 			shouldAnchorIncludePadding
-			__experimentalStickyBottom={ __experimentalStickyBottom }
 			__experimentalStickyTop={ __experimentalStickyTop }
-			__experimentalStickyAreaBottom={ __experimentalStickyAreaBottom }
-			__experimentalStickyAreaTop={ __experimentalStickyAreaTop }
+			__experimentalStickier={ __experimentalStickier }
 		>
 			{ ( shouldShowContextualToolbar || isToolbarForced ) && (
 				<div
@@ -312,10 +308,8 @@ function wrapperSelector( select ) {
 export default function WrappedBlockPopover( {
 	__unstablePopoverSlot,
 	__unstableContentRef,
-	__experimentalStickyBottom,
 	__experimentalStickyTop,
-	__experimentalStickyAreaBottom,
-	__experimentalStickyAreaTop,
+	__experimentalStickier,
 } ) {
 	const selected = useSelect( wrapperSelector, [] );
 
@@ -345,10 +339,8 @@ export default function WrappedBlockPopover( {
 			capturingClientId={ capturingClientId }
 			__unstablePopoverSlot={ __unstablePopoverSlot }
 			__unstableContentRef={ __unstableContentRef }
-			__experimentalStickyBottom={ __experimentalStickyBottom }
 			__experimentalStickyTop={ __experimentalStickyTop }
-			__experimentalStickyAreaBottom={ __experimentalStickyAreaBottom }
-			__experimentalStickyAreaTop={ __experimentalStickyAreaTop }
+			__experimentalStickier={ __experimentalStickier }
 		/>
 	);
 }

packages/block-editor/src/components/block-tools/index.js

@@ -19,21 +19,19 @@ import { usePopoverScroll } from './use-popover-scroll';
  * insertion point and a slot for the inline rich text toolbar). Must be wrapped
  * around the block content and editor styles wrapper or iframe.
  *
- * @param {Object} $0                                Props.
- * @param {Object} $0.children                       The block content and style container.
- * @param {Object} $0.__unstableContentRef           Ref holding the content scroll container.
- * @param {number} $0.__experimentalStickyBottom     Bottom sticky position of floating toolbar.
- * @param {number} $0.__experimentalStickyTop        Top sticky position of floating and top toolbar.
- * @param {number} $0.__experimentalStickyAreaBottom Offset of bottom side of sticky area.
- * @param {number} $0.__experimentalStickyAreaTop    Offset of top side of sticky area.
+ * @param {Object}  $0                         Props.
+ * @param {Object}  $0.children                The block content and style container.
+ * @param {Object}  $0.__unstableContentRef    Ref holding the content scroll container.
+ * @param {number}  $0.__experimentalStickyTop Top sticky position offset of floating and
+ *                                             top toolbar.
+ * @param {boolean} $0.__experimentalStickier  Favor sticky position even if the block is
+                                               out of view.
  */
 export default function BlockTools( {
 	children,
 	__unstableContentRef,
-	__experimentalStickyBottom,
 	__experimentalStickyTop,
-	__experimentalStickyAreaBottom: stickyAreaBottom,
-	__experimentalStickyAreaTop: stickyAreaTop,
+	__experimentalStickier,
 } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const hasFixedToolbar = useSelect(
@@ -53,10 +51,8 @@ export default function BlockTools( {
                  needed for navigation mode. */ }
 			<BlockPopover
 				__unstableContentRef={ __unstableContentRef }
-				__experimentalStickyBottom={ __experimentalStickyBottom }
 				__experimentalStickyTop={ __experimentalStickyTop }
-				__experimentalStickyAreaBottom={ stickyAreaBottom }
-				__experimentalStickyAreaTop={ stickyAreaTop }
+				__experimentalStickier={ __experimentalStickier }
 			/>
 			{ /* Used for the inline rich text toolbar. */ }
 			<Popover.Slot

packages/components/src/popover/index.js

@@ -262,10 +262,8 @@ const Popover = (
 		__unstableBoundaryParent,
 		__unstableForcePosition,
 		__unstableForceXAlignment,
-		__experimentalStickyBottom: stickyBottom = 0,
-		__experimentalStickyTop: stickyTop = 0,
-		__experimentalStickyAreaBottom: stickyAreaBottom = 0,
-		__experimentalStickyAreaTop: stickyAreaTop = 0,
+		__experimentalStickyTop,
+		__experimentalStickier,
 		/* eslint-enable no-unused-vars */
 		...contentProps
 	},
@@ -361,8 +359,8 @@ const Popover = (
 				boundaryElement,
 				__unstableForcePosition,
 				__unstableForceXAlignment,
-				{ top: stickyTop, bottom: stickyBottom },
-				{ top: stickyAreaTop, bottom: stickyAreaBottom }
+				__experimentalStickyTop,
+				__experimentalStickier
 			);
 
 			if (
@@ -487,10 +485,8 @@ const Popover = (
 		position,
 		contentSize,
 		__unstableStickyBoundaryElement,
-		stickyBottom,
-		stickyTop,
-		stickyAreaBottom,
-		stickyAreaTop,
+		__experimentalStickyTop,
+		__experimentalStickier,
 		__unstableObserveElement,
 		__unstableBoundaryParent,
 	] );

packages/components/src/popover/utils.js

@@ -169,12 +169,10 @@ export function computePopoverXAxisPosition(
  * @param {number}  relativeOffsetTop     If applicable, top offset of the
  *                                        relative positioned parent container.
  * @param {boolean} forcePosition         Don't adjust position based on anchor.
- * @param {Object}  sticky                Sticky positions per side.
- * @param {number}  sticky.top            Top sticky position.
- * @param {number}  sticky.bottom         Bottom sticky position.
- * @param {Object}  stickyArea            Offsets relative to anchorRect.
- * @param {number}  stickyArea.top        Offset from top.
- * @param {number}  stickyArea.bottom     Offset from bottom.
+ * @param {number}  stickyTop             Sticky top position offset from the
+ *                                        boundaryElement.
+ * @param {boolean} stickier              Favor sticky position even if the
+ *                                        anchor is out of view.
  *
  * @return {Object} Popover xAxis position and constraints.
  */
@@ -187,23 +185,23 @@ export function computePopoverYAxisPosition(
 	anchorRef,
 	relativeOffsetTop,
 	forcePosition,
-	{ top, bottom },
-	{ top: start, bottom: end }
+	stickyTop,
+	stickier
 ) {
 	const { height } = contentSize;
 
 	if ( stickyBoundaryElement ) {
 		const stickyRect = stickyBoundaryElement.getBoundingClientRect();
-		top += stickyRect.top + height - relativeOffsetTop;
-		bottom = -bottom + stickyRect.bottom - relativeOffsetTop;
+		const top = stickyTop + stickyRect.top + height - relativeOffsetTop;
+		const bottom = stickyRect.bottom - relativeOffsetTop;
 		if ( anchorRect.top < top ) {
-			end += anchorRect.bottom;
+			const end = stickier ? Infinity : anchorRect.bottom;
 			return {
 				yAxis,
 				popoverTop: Math.min( end, top ),
 			};
 		} else if ( anchorRect.top > bottom ) {
-			start += anchorRect.top;
+			const start = stickier ? -Infinity : anchorRect.top;
 			return {
 				yAxis,
 				popoverTop: Math.max( start, bottom ),
@@ -303,8 +301,10 @@ export function computePopoverYAxisPosition(
  * @param {Element} boundaryElement       Boundary element.
  * @param {boolean} forcePosition         Don't adjust position based on anchor.
  * @param {boolean} forceXAlignment       Don't adjust alignment based on YAxis.
- * @param {Object}  sticky                Sticky positions per side.
- * @param {Object}  stickyBounds          Boundary offsets relative to anchorRect.
+ * @param {number}  stickyTop             Sticky top position offset from the
+ *                                        boundaryElement.
+ * @param {boolean} stickier              Favor sticky position even if the
+ *                                        anchor is out of view.
  *
  * @return {Object} Popover position and constraints.
  */
@@ -318,8 +318,8 @@ export function computePopoverPosition(
 	boundaryElement,
 	forcePosition,
 	forceXAlignment,
-	sticky,
-	stickyBounds
+	stickyTop = 0,
+	stickier = false
 ) {
 	const [ yAxis, xAxis = 'center', corner ] = position.split( ' ' );
 
@@ -332,8 +332,8 @@ export function computePopoverPosition(
 		anchorRef,
 		relativeOffsetTop,
 		forcePosition,
-		sticky,
-		stickyBounds
+		stickyTop,
+		stickier
 	);
 	const xAxisPosition = computePopoverXAxisPosition(
 		anchorRect,

packages/customize-widgets/src/components/sidebar-block-editor/index.js

@@ -186,9 +186,7 @@ export default function SidebarBlockEditor( {
 
 				<BlockTools
 					__experimentalStickyTop={ blockToolbarOffset }
-					__experimentalStickyAreaBottom={ Infinity }
-					__experimentalStickyBottom={ 0 }
-					__experimentalStickyAreaTop={ -Infinity }
+					__experimentalStickier
 				>
 					<BlockSelectionClearer>
 						<WritingFlow>