Refactor the Popover component to use the floatingUI library (#40740)

Co-authored-by: ntsekouras <ntsekouras@outlook.com> Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
WordPress · May 18, 2022 · 8b14921 · 8b14921
1 parent b499487
commit 8b14921
Show file tree

Hide file tree

Showing 83 changed files with 487 additions and 2,484 deletions.
diff --git a/docs/manifest.json b/docs/manifest.json
@@ -815,12 +815,6 @@
 		"markdown_source": "../packages/components/src/flex/flex/README.md",
 		"parent": "components"
 	},
-	{
-		"title": "Flyout",
-		"slug": "flyout",
-		"markdown_source": "../packages/components/src/flyout/flyout/README.md",
-		"parent": "components"
-	},
 	{
 		"title": "FocalPointPicker",
 		"slug": "focal-point-picker",

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-editor/src/components/block-alignment-matrix-control/index.js b/packages/block-editor/src/components/block-alignment-matrix-control/index.js
@@ -22,15 +22,11 @@ function BlockAlignmentMatrixControl( props ) {
 	} = props;
 
 	const icon = <AlignmentMatrixControl.Icon value={ value } />;
-	const className = 'block-editor-block-alignment-matrix-control';
-	const popoverClassName = `${ className }__popover`;
-	const isAlternate = true;
 
 	return (
 		<Dropdown
 			position="bottom right"
-			className={ className }
-			popoverProps={ { className: popoverClassName, isAlternate } }
+			popoverProps={ { isAlternate: true } }
 			renderToggle={ ( { onToggle, isOpen } ) => {
 				const openOnArrowDown = ( event ) => {
 					if ( ! isOpen && event.keyCode === DOWN ) {

diff --git a/packages/block-editor/src/components/block-alignment-matrix-control/style.scss b/packages/block-editor/src/components/block-alignment-matrix-control/style.scss
diff --git a/packages/block-editor/src/components/block-popover/inbetween.js b/packages/block-editor/src/components/block-popover/inbetween.js
@@ -107,6 +107,8 @@ function BlockPopoverInbetween( {
 					left: previousRect ? previousRect.right : nextRect.right,
 					right: previousRect ? previousRect.left : nextRect.left,
 					bottom: nextRect ? nextRect.top : previousRect.bottom,
+					height: 0,
+					width: 0,
 					ownerDocument,
 				};
 			}
@@ -116,6 +118,8 @@ function BlockPopoverInbetween( {
 				left: previousRect ? previousRect.left : nextRect.left,
 				right: previousRect ? previousRect.right : nextRect.right,
 				bottom: nextRect ? nextRect.top : previousRect.bottom,
+				height: 0,
+				width: 0,
 				ownerDocument,
 			};
 		}
@@ -126,6 +130,8 @@ function BlockPopoverInbetween( {
 				left: previousRect ? previousRect.left : nextRect.right,
 				right: nextRect ? nextRect.right : previousRect.left,
 				bottom: previousRect ? previousRect.bottom : nextRect.bottom,
+				height: 0,
+				width: 0,
 				ownerDocument,
 			};
 		}
@@ -135,6 +141,8 @@ function BlockPopoverInbetween( {
 			left: previousRect ? previousRect.right : nextRect.left,
 			right: nextRect ? nextRect.left : previousRect.right,
 			bottom: previousRect ? previousRect.bottom : nextRect.bottom,
+			height: 0,
+			width: 0,
 			ownerDocument,
 		};
 	}, [ previousElement, nextElement ] );
@@ -155,7 +163,6 @@ function BlockPopoverInbetween( {
 	return (
 		<Popover
 			ref={ popoverScrollRef }
-			noArrow
 			animate={ false }
 			getAnchorRect={ getAnchorRect }
 			focusOnMount={ false }

diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js
@@ -7,7 +7,6 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Popover } from '@wordpress/components';
-import { getScrollContainer } from '@wordpress/dom';
 import { useMemo } from '@wordpress/element';
 
 /**
@@ -50,33 +49,19 @@ export default function BlockPopover( {
 		bottom: lastSelectedElement,
 	};
 
-	const { ownerDocument } = selectedElement;
-	const stickyBoundaryElement =
-		ownerDocument.defaultView.frameElement ||
-		getScrollContainer( selectedElement ) ||
-		ownerDocument.body;
-
 	return (
 		<Popover
 			ref={ popoverScrollRef }
-			noArrow
 			animate={ false }
 			position="top right left"
 			focusOnMount={ false }
 			anchorRef={ anchorRef }
-			__unstableStickyBoundaryElement={
-				__unstableCoverTarget ? undefined : stickyBoundaryElement
-			}
 			// Render in the old slot if needed for backward compatibility,
 			// otherwise render in place (not in the the default popover slot).
 			__unstableSlotName={ __unstablePopoverSlot || null }
-			__unstableBoundaryParent
 			// Observe movement for block animations (especially horizontal).
 			__unstableObserveElement={ selectedElement }
-			// Used to safeguard sticky position behavior against cases where it would permanently
-			// obscure specific sections of a block.
-			__unstableEditorCanvasWrapper={ __unstableContentRef?.current }
-			__unstableForcePosition={ __unstableCoverTarget }
+			__unstableForcePosition
 			{ ...props }
 			className={ classnames(
 				'block-editor-block-popover',

diff --git a/packages/block-editor/src/components/block-popover/style.scss b/packages/block-editor/src/components/block-popover/style.scss
@@ -12,6 +12,7 @@
 		width: max-content;
 		background: none;
 		border: none;
+		outline: none;
 		box-shadow: none;
 		overflow-y: visible;
 

diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss
@@ -39,11 +39,6 @@
 	font-size: 14px;
 }
 
-// Indent the popover to match the button position.
-.block-editor-block-switcher__popover {
-	margin-left: 6px;
-}
-
 .components-button.block-editor-block-switcher__no-switcher-icon {
 	display: flex;
 
@@ -93,43 +88,11 @@
 	min-width: 300px;
 }
 
-// We keep the min width the same for the border to work.
-.components-popover.block-editor-block-switcher__popover .components-popover__content > div {
-	min-width: auto;
-	display: flex;
-	background: $white;
-	padding: 0;
-
-	.components-menu-group {
-		margin: 0;
-	}
-}
-
-.block-editor-block-switcher__popover .components-popover__content {
-
-	.block-editor-block-styles {
-		margin: 0 -3px; // Remove the panel body padding while keeping it for the title.
-	}
-
-	// Hide the bottom border on the last panel so it stacks with the popover.
-	.components-panel__body {
-		border: 0;
-
-		// Elevate this so the hover style is visible.
-		position: relative;
-		z-index: 1;
-	}
-
-	.components-panel__body + .components-panel__body {
-		border-top: $border-width solid $gray-200;
-	}
-}
-
 .block-editor-block-switcher__popover__preview__parent {
 	.block-editor-block-switcher__popover__preview__container {
 		position: absolute;
 		top: -$grid-unit-15;
-		left: calc(100% + #{$grid-unit-40});
+		left: calc(100% + #{$grid-unit-20});
 	}
 }
 
@@ -138,7 +101,6 @@
 
 	// Position correctly. Needs specificity.
 	&.components-popover {
-		margin-left: $grid-unit-05;
 		margin-top: $grid-unit-15 - $border-width;
 	}
 
@@ -151,6 +113,7 @@
 		border: $border-width solid $gray-900;
 		background: $white;
 		border-radius: $radius-block-ui;
+		outline: none;
 	}
 
 	.block-editor-block-switcher__preview {

diff --git a/packages/block-editor/src/components/colors-gradients/dropdown.js b/packages/block-editor/src/components/colors-gradients/dropdown.js
@@ -121,13 +121,16 @@ export default function ColorGradientSettingsDropdown( {
 	__experimentalIsRenderedInSidebar,
 	...props
 } ) {
-	const dropdownPosition = __experimentalIsRenderedInSidebar
-		? 'bottom left'
-		: undefined;
-
 	const dropdownClassName = __experimentalIsItemGroup
 		? 'block-editor-panel-color-gradient-settings__dropdown'
 		: 'block-editor-tools-panel-color-gradient-settings__dropdown';
+	let popoverProps;
+	if ( __experimentalIsRenderedInSidebar ) {
+		popoverProps = {
+			placement: 'left-start',
+			offset: 36,
+		};
+	}
 
 	return (
 		// Only wrap with `ItemGroup` if these controls are being rendered
@@ -170,7 +173,7 @@ export default function ColorGradientSettingsDropdown( {
 							{ ...props }
 						>
 							<Dropdown
-								position={ dropdownPosition }
+								popoverProps={ popoverProps }
 								className={ dropdownClassName }
 								contentClassName="block-editor-panel-color-gradient-settings__dropdown-content"
 								renderToggle={ renderToggle( toggleSettings ) }

diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -59,25 +59,7 @@
 }
 
 .block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
-	& > div {
-		width: $sidebar-width;
-	}
-}
-
-@include break-medium() {
-	.block-editor-panel-color-gradient-settings__dropdown-content {
-		.components-popover__content {
-			margin-right: #{ math.div($sidebar-width, 2) + $grid-unit-20 } !important;
-		}
-
-		&.is-from-top .components-popover__content {
-			margin-top: #{ -($grid-unit-60 + $grid-unit-15) } !important;
-		}
-
-		&.is-from-bottom .components-popover__content {
-			margin-bottom: #{ -($grid-unit-60 + $grid-unit-15) } !important;
-		}
-	}
+	width: $sidebar-width;
 }
 
 .block-editor-panel-color-gradient-settings__dropdown:last-child > div {

diff --git a/packages/block-editor/src/components/duotone-control/style.scss b/packages/block-editor/src/components/duotone-control/style.scss
@@ -9,7 +9,7 @@ $popover-padding: $grid-unit-20;
 $swatch-columns: math.floor(math.div($popover-width + $swatch-gap - 2 * $popover-padding, $swatch-size + $swatch-gap));
 
 .block-editor-duotone-control__popover {
-	> .components-popover__content > div {
+	> .components-popover__content {
 		padding: $popover-padding;
 		width: $popover-width;
 	}
@@ -34,9 +34,3 @@ $swatch-columns: math.floor(math.div($popover-width + $swatch-gap - 2 * $popover
 	margin: $grid-unit-20 0;
 	font-size: $helptext-font-size;
 }
-
-// Better align the popover under the swatch.
-// @todo: when the positioning for popovers gets refactored, this can presumably be removed.
-.block-editor-duotone-control__popover:not([data-y-axis="middle"][data-x-axis="right"]) > .components-popover__content {
-	margin-left: -14px;
-}
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -23,6 +23,7 @@ $block-inserter-tabs-height: 44px;
 .block-editor-inserter__popover.is-quick {
 	.components-popover__content {
 		border: none;
+		outline: none;
 
 		.block-editor-inserter__quick-inserter > * {
 			border-left: $border-width solid $gray-400;
@@ -310,7 +311,7 @@ $block-inserter-tabs-height: 44px;
 	border-top: $border-width solid $gray-300;
 }
 
-.block-editor-inserter__popover.is-quick > .components-popover__content > div {
+.block-editor-inserter__popover.is-quick > .components-popover__content {
 	padding: 0;
 }
 

diff --git a/packages/block-editor/src/components/list-view/drop-indicator.js b/packages/block-editor/src/components/list-view/drop-indicator.js
@@ -110,7 +110,6 @@ export default function ListViewDropIndicator( {
 
 	return (
 		<Popover
-			noArrow
 			animate={ false }
 			getAnchorRect={ getAnchorRect }
 			focusOnMount={ false }

diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
@@ -396,10 +396,11 @@ $block-navigation-max-indent: 8;
 }
 
 // Reset some popover defaults for the drop indicator.
-.block-editor-list-view-drop-indicator:not([data-y-axis="middle"][data-x-axis="right"]) > .components-popover__content {
+.block-editor-list-view-drop-indicator > .components-popover__content {
 	margin-left: 0;
 	border: none;
 	box-shadow: none;
+	outline: none;
 }
 
 .block-editor-list-view-placeholder {

diff --git a/packages/block-editor/src/components/navigable-toolbar/index.js b/packages/block-editor/src/components/navigable-toolbar/index.js
@@ -29,7 +29,12 @@ function hasFocusWithin( container ) {
 function focusFirstTabbableIn( container ) {
 	const [ firstTabbable ] = focus.tabbable.find( container );
 	if ( firstTabbable ) {
-		firstTabbable.focus();
+		firstTabbable.focus( {
+			// When focusing newly mounted toolbars,
+			// the position of the popover is often not right on the first render
+			// This prevents the layout shifts when focusing the dialogs.
+			preventScroll: true,
+		} );
 	}
 }
 
@@ -119,7 +124,12 @@ function useToolbarFocus(
 				const items = getAllToolbarItemsIn( ref.current );
 				const index = initialIndex || 0;
 				if ( items[ index ] && hasFocusWithin( ref.current ) ) {
-					items[ index ].focus();
+					items[ index ].focus( {
+						// When focusing newly mounted toolbars,
+						// the position of the popover is often not right on the first render
+						// This prevents the layout shifts when focusing the dialogs.
+						preventScroll: true,
+					} );
 				}
 			} );
 		}