Update use of dropdownMenuProps

packages/block-editor/src/components/global-styles/border-panel.js

@@ -16,7 +16,7 @@ import { __ } from '@wordpress/i18n';
  */
 import BorderRadiusControl from '../border-radius-control';
 import { useColorsPerOrigin } from './hooks';
-import { getValueFromVariable } from './utils';
+import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
 
 export function useHasBorderPanel( settings ) {
 	const controls = [
@@ -62,10 +62,7 @@ function BorderToolsPanel( {
 			label={ __( 'Border' ) }
 			resetAll={ resetAll }
 			panelId={ panelId }
-			dropdownMenuProps={ {
-				placement: 'left-start',
-				offset: 258, // sidebar width (280px) - button width (24px) + border (2px)
-			} }
+			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
 		>
 			{ children }
 		</ToolsPanel>

packages/block-editor/src/components/global-styles/color-panel.js

@@ -27,7 +27,7 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import ColorGradientControl from '../colors-gradients/control';
 import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
-import { getValueFromVariable } from './utils';
+import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
 import { setImmutably } from '../../utils/object';
 
 export function useHasColorPanel( settings ) {
@@ -129,10 +129,7 @@ function ColorToolsPanel( {
 			className="color-block-support-panel"
 			__experimentalFirstVisibleItemClass="first"
 			__experimentalLastVisibleItemClass="last"
-			dropdownMenuProps={ {
-				placement: 'left-start',
-				offset: 258, // sidebar width (280px) - button width (24px) + border (2px)
-			} }
+			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
 		>
 			<div className="color-block-support-panel__inner-wrapper">
 				{ children }

packages/block-editor/src/components/global-styles/dimensions-panel.js

@@ -23,7 +23,7 @@ import { useCallback, Platform } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { getValueFromVariable } from './utils';
+import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
 import SpacingSizesControl from '../spacing-sizes-control';
 import HeightControl from '../height-control';
 import ChildLayoutControl from '../child-layout-control';
@@ -178,10 +178,7 @@ function DimensionsToolsPanel( {
 			label={ __( 'Dimensions' ) }
 			resetAll={ resetAll }
 			panelId={ panelId }
-			dropdownMenuProps={ {
-				placement: 'left-start',
-				offset: 258, // sidebar width (280px) - button width (24px) + border (2px)
-			} }
+			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
 		>
 			{ children }
 		</ToolsPanel>

packages/block-editor/src/components/global-styles/effects-panel.js

@@ -26,7 +26,7 @@ import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { getValueFromVariable } from './utils';
+import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
 import { setImmutably } from '../../utils/object';
 
 export function useHasEffectsPanel( settings ) {
@@ -55,10 +55,7 @@ function EffectsToolsPanel( {
 			label={ __( 'Effects' ) }
 			resetAll={ resetAll }
 			panelId={ panelId }
-			dropdownMenuProps={ {
-				placement: 'left-start',
-				offset: 258, // sidebar width (280px) - button width (24px) + border (2px)
-			} }
+			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
 		>
 			{ children }
 		</ToolsPanel>

packages/block-editor/src/components/global-styles/filters-panel.js

@@ -28,7 +28,7 @@ import { useCallback, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { getValueFromVariable } from './utils';
+import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
 import { setImmutably } from '../../utils/object';
 
 const EMPTY_ARRAY = [];
@@ -82,10 +82,7 @@ function FiltersToolsPanel( {
 			label={ _x( 'Filters', 'Name for applying graphical effects' ) }
 			resetAll={ resetAll }
 			panelId={ panelId }
-			dropdownMenuProps={ {
-				placement: 'left-start',
-				offset: 258, // sidebar width (280px) - button width (24px) + border (2px)
-			} }
+			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
 		>
 			{ children }
 		</ToolsPanel>

packages/block-editor/src/components/global-styles/image-settings-panel.js

@@ -8,6 +8,11 @@ import {
 } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
+
 export function useHasImageSettingsPanel( name, value, inheritedValue ) {
 	// Note: If lightbox `value` exists, that means it was
 	// defined via the the Global Styles UI and will NOT
@@ -47,6 +52,7 @@ export default function ImageSettingsPanel( {
 				label={ _x( 'Settings', 'Image settings' ) }
 				resetAll={ resetLightbox }
 				panelId={ panelId }
+				dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
 			>
 				<ToolsPanelItem
 					// We use the `userSettings` prop instead of `settings`, because `settings`

packages/block-editor/src/components/global-styles/typography-panel.js

@@ -21,7 +21,7 @@ import LetterSpacingControl from '../letter-spacing-control';
 import TextTransformControl from '../text-transform-control';
 import TextDecorationControl from '../text-decoration-control';
 import WritingModeControl from '../writing-mode-control';
-import { getValueFromVariable } from './utils';
+import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
 import { setImmutably } from '../../utils/object';
 
 const MIN_TEXT_COLUMNS = 1;
@@ -129,10 +129,7 @@ function TypographyToolsPanel( {
 			label={ __( 'Typography' ) }
 			resetAll={ resetAll }
 			panelId={ panelId }
-			dropdownMenuProps={ {
-				placement: 'left-start',
-				offset: 258, // sidebar width (280px) - button width (24px) + border (2px)
-			} }
+			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
 		>
 			{ children }
 		</ToolsPanel>

packages/block-editor/src/components/global-styles/utils.js

@@ -159,6 +159,13 @@ export const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {
 	'typography.fontFamily': 'fontFamily',
 };
 
+export const TOOLSPANEL_DROPDOWNMENU_PROPS = {
+	popoverProps: {
+		placement: 'left-start',
+		offset: 258, // sidebar width (280px) - button width (24px) + border (2px)
+	},
+};
+
 function findInPresetsBy(
 	features,
 	blockName,

packages/block-editor/src/components/inspector-controls/block-support-tools-panel.js

@@ -10,6 +10,7 @@ import { useCallback } from '@wordpress/element';
  */
 import { store as blockEditorStore } from '../../store';
 import { cleanEmptyObject } from '../../hooks/utils';
+import { TOOLSPANEL_DROPDOWNMENU_PROPS } from '../global-styles/utils';
 
 export default function BlockSupportToolsPanel( { children, group, label } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
@@ -71,10 +72,7 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
 			shouldRenderPlaceholderItems={ true } // Required to maintain fills ordering.
 			__experimentalFirstVisibleItemClass="first"
 			__experimentalLastVisibleItemClass="last"
-			dropdownMenuProps={ {
-				placement: 'left-start',
-				offset: 258, // sidebar width (280px) - button width (24px) + border (2px)
-			} }
+			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
 		>
 			{ children }
 		</ToolsPanel>

packages/block-library/src/image/image.js

@@ -463,8 +463,10 @@ export default function Image( {
 					label={ __( 'Settings' ) }
 					resetAll={ resetAll }
 					dropdownMenuProps={ {
-						placement: 'left-start',
-						offset: 258, // sidebar width (280px) - button width (24px) + border (2px)
+						popoverProps: {
+							placement: 'left-start',
+							offset: 258, // sidebar width (280px) - button width (24px) + border (2px)
+						},
 					} }
 				>
 					{ ! multiImageSelection && (

packages/block-library/src/query/edit/inspector-controls/index.js

@@ -227,8 +227,10 @@ export default function QueryInspectorControls( props ) {
 							setQuerySearch( '' );
 						} }
 						dropdownMenuProps={ {
-							placement: 'left-start',
-							offset: 258, // sidebar width (280px) - button width (24px) + border (2px)
+							popoverProps: {
+								placement: 'left-start',
+								offset: 258, // sidebar width (280px) - button width (24px) + border (2px)
+							},
 						} }
 					>
 						{ showTaxControl && (

packages/components/src/tools-panel/tools-panel-header/README.md

@@ -20,7 +20,7 @@ This component is generated automatically by its parent
 
 ### `dropdownMenuProps`: `{}`
 
-The popover props to configure panel's `DropdownMenu`.
+The dropdown menu props to configure the panel's `DropdownMenu`.
 
 -   Type: `Object`
 -   Required: No

packages/components/src/tools-panel/tools-panel-header/component.tsx

@@ -193,14 +193,14 @@ const ToolsPanelHeader = (
 			</Heading>
 			{ hasMenuItems && (
 				<DropdownMenu
+					{ ...dropdownMenuProps }
 					icon={ dropDownMenuIcon }
 					label={ dropDownMenuLabelText }
 					menuProps={ { className: dropdownMenuClassName } }
 					toggleProps={ {
 						isSmall: true,
 						describedBy: dropdownMenuDescriptionText,
 					} }
-					popoverProps={ dropdownMenuProps }
 				>
 					{ () => (
 						<>

packages/components/src/tools-panel/types.ts

@@ -18,7 +18,7 @@ export type ToolsPanelProps = {
 	 */
 	children: ReactNode;
 	/**
-	 * The popover props to configure panel's DropdownMenu.
+	 * The dropdown menu props to configure the panel's `DropdownMenu`.
 	 */
 	dropdownMenuProps?: React.ComponentProps< typeof DropdownMenu >;
 	/**
@@ -75,9 +75,9 @@ export type ToolsPanelProps = {
 
 export type ToolsPanelHeaderProps = {
 	/**
-	 * The popover props to configure panel's DropdownMenu.
+	 * The dropdown menu props to configure the panel's `DropdownMenu`.
 	 */
-	dropdownMenuProps?: {};
+	dropdownMenuProps?: React.ComponentProps< typeof DropdownMenu >;
 	/**
 	 * The heading level of the panel's header.
 	 *