Position the color popover properly

WordPress · May 4, 2022 · 10665a1 · 10665a1
1 parent 05bed24
commit 10665a1
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 17 deletions.
diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -64,22 +64,6 @@
 	}
 }
 
-@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;
-		}
-	}
-}
-
 .block-editor-panel-color-gradient-settings__dropdown:last-child > div {
 	border-bottom-width: 0;
 }

diff --git a/packages/block-editor/src/components/colors-gradients/tools-panel-color-dropdown.js b/packages/block-editor/src/components/colors-gradients/tools-panel-color-dropdown.js
@@ -50,6 +50,10 @@ export default function ToolsPanelColorDropdown( {
 			className="block-editor-tools-panel-color-gradient-settings__item"
 		>
 			<Dropdown
+				popoverProps={ {
+					placement: 'left-start',
+					offset: 36,
+				} }
 				className="block-editor-tools-panel-color-dropdown"
 				contentClassName="block-editor-panel-color-gradient-settings__dropdown-content"
 				renderToggle={ ( { isOpen, onToggle } ) => (

diff --git a/packages/components/src/dropdown/index.js b/packages/components/src/dropdown/index.js
@@ -31,12 +31,12 @@ export default function Dropdown( props ) {
 	const {
 		renderContent,
 		renderToggle,
-		position = 'bottom right',
 		className,
 		contentClassName,
 		expandOnMobile,
 		headerTitle,
 		focusOnMount,
+		position,
 		popoverProps,
 		onClose,
 		onToggle,

diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
@@ -9,6 +9,7 @@ import {
 	shift,
 	autoUpdate,
 	arrow,
+	offset as offsetMiddleware,
 } from '@floating-ui/react-dom';
 
 /**
@@ -77,6 +78,7 @@ const Popover = (
 		isAlternate,
 		position,
 		placement = 'bottom-start',
+		offset,
 		focusOnMount = 'firstElement',
 		anchorRef,
 		anchorRect,
@@ -98,6 +100,7 @@ const Popover = (
 		? positionToPlacement( position )
 		: placement;
 	const middlewares = [
+		offset ? offsetMiddleware( offset ) : undefined,
 		__unstableForcePosition ? undefined : flip(),
 		shift( {
 			crossAxis: true,