From 7f32e0bcb8e78e16c8a17b1e60a76dec7bf07fac Mon Sep 17 00:00:00 2001 From: Mitchell Austin Date: Wed, 9 Jun 2021 12:17:01 -0700 Subject: [PATCH] Reduce props to fit present use case --- packages/block-editor/README.md | 6 ++-- .../components/block-tools/block-popover.js | 16 +++------ .../src/components/block-tools/index.js | 22 +++++------- packages/components/src/popover/index.js | 16 ++++----- packages/components/src/popover/utils.js | 36 +++++++++---------- .../components/sidebar-block-editor/index.js | 4 +-- 6 files changed, 40 insertions(+), 60 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index df1061e142fa57..3bad4041da73a2 100644 --- a/packages/block-editor/README.md +++ b/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. # **BlockVerticalAlignmentControl** diff --git a/packages/block-editor/src/components/block-tools/block-popover.js b/packages/block-editor/src/components/block-tools/block-popover.js index 5425151c66b0f8..44ba6059bf7210 100644 --- a/packages/block-editor/src/components/block-tools/block-popover.js +++ b/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 ) && (
); } diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js index 2a4c1cac33c252..1bc56f65e701b6 100644 --- a/packages/block-editor/src/components/block-tools/index.js +++ b/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. */ } { /* Used for the inline rich text toolbar. */ } 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, diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/index.js b/packages/customize-widgets/src/components/sidebar-block-editor/index.js index 761ecb21d01491..d81cc61be1a76b 100644 --- a/packages/customize-widgets/src/components/sidebar-block-editor/index.js +++ b/packages/customize-widgets/src/components/sidebar-block-editor/index.js @@ -186,9 +186,7 @@ export default function SidebarBlockEditor( {