From 46904cdc4c63fbb62af28b0c85aa80d7e79f0d9b Mon Sep 17 00:00:00 2001
From: Eshaan Dabasiya <76681468+im3dabasia@users.noreply.github.com>
Date: Tue, 17 Dec 2024 16:28:10 +0530
Subject: [PATCH] Ensure all instances of the ToolsPanel uses the
 useToolsPanelDropdownMenuProps hook for placement (#68019)

Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
---
 packages/block-library/src/button/edit.js       | 4 ++++
 packages/block-library/src/column/edit.js       | 7 +++++++
 packages/block-library/src/columns/edit.js      | 4 ++++
 packages/block-library/src/details/edit.js      | 7 +++++++
 packages/block-library/src/post-excerpt/edit.js | 8 +++++++-
 packages/block-library/src/social-link/edit.js  | 3 +++
 packages/block-library/src/social-links/edit.js | 8 ++++++++
 packages/block-library/src/table/edit.js        | 4 ++++
 packages/block-library/src/tag-cloud/edit.js    | 7 +++++++
 9 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index 520da26ef9671e..d00e522f5a5d2a 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -9,6 +9,7 @@ import clsx from 'clsx';
 import { NEW_TAB_TARGET, NOFOLLOW_REL } from './constants';
 import { getUpdatedLinkAttributes } from './get-updated-link-attributes';
 import removeAnchorTag from '../utils/remove-anchor-tag';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 /**
  * WordPress dependencies
@@ -115,10 +116,13 @@ function useEnter( props ) {
 }
 
 function WidthPanel( { selectedWidth, setAttributes } ) {
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	return (
 		<ToolsPanel
 			label={ __( 'Settings' ) }
 			resetAll={ () => setAttributes( { width: undefined } ) }
+			dropdownMenuProps={ dropdownMenuProps }
 		>
 			<ToolsPanelItem
 				label={ __( 'Button width' ) }
diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js
index b88e72e8da6991..92a0b41b44ed52 100644
--- a/packages/block-library/src/column/edit.js
+++ b/packages/block-library/src/column/edit.js
@@ -25,17 +25,24 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { sprintf, __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 function ColumnInspectorControls( { width, setAttributes } ) {
 	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
 		availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],
 	} );
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	return (
 		<ToolsPanel
 			label={ __( 'Settings' ) }
 			resetAll={ () => {
 				setAttributes( { width: undefined } );
 			} }
+			dropdownMenuProps={ dropdownMenuProps }
 		>
 			<ToolsPanelItem
 				hasValue={ () => width !== undefined }
diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js
index d79dfe4fc94a49..cad79c356fe031 100644
--- a/packages/block-library/src/columns/edit.js
+++ b/packages/block-library/src/columns/edit.js
@@ -40,6 +40,7 @@ import {
 	getRedistributedColumnWidths,
 	toWidthPrecision,
 } from './utils';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const DEFAULT_BLOCK = {
 	name: 'core/column',
@@ -145,6 +146,8 @@ function ColumnInspectorControls( {
 		replaceInnerBlocks( clientId, innerBlocks );
 	}
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	return (
 		<ToolsPanel
 			label={ __( 'Settings' ) }
@@ -154,6 +157,7 @@ function ColumnInspectorControls( {
 					isStackedOnMobile: true,
 				} );
 			} }
+			dropdownMenuProps={ dropdownMenuProps }
 		>
 			{ canInsertColumnBlock && (
 				<ToolsPanelItem
diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
index 14c89b7d0f9f0b..9bebdee1a76706 100644
--- a/packages/block-library/src/details/edit.js
+++ b/packages/block-library/src/details/edit.js
@@ -16,6 +16,11 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 const TEMPLATE = [
 	[
 		'core/paragraph',
@@ -32,6 +37,7 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) {
 		template: TEMPLATE,
 		__experimentalCaptureToolbars: true,
 	} );
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	// Check if either the block or the inner blocks are selected.
 	const hasSelection = useSelect(
@@ -57,6 +63,7 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) {
 							showContent: false,
 						} );
 					} }
+					dropdownMenuProps={ dropdownMenuProps }
 				>
 					<ToolsPanelItem
 						isShownByDefault
diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js
index ad2b6300e79e4f..bc94c2599e60ec 100644
--- a/packages/block-library/src/post-excerpt/edit.js
+++ b/packages/block-library/src/post-excerpt/edit.js
@@ -28,7 +28,10 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { useCanEditEntity } from '../utils/hooks';
+import {
+	useCanEditEntity,
+	useToolsPanelDropdownMenuProps,
+} from '../utils/hooks';
 
 const ELLIPSIS = '…';
 
@@ -46,6 +49,8 @@ export default function PostExcerptEditor( {
 		{ rendered: renderedExcerpt, protected: isProtected } = {},
 	] = useEntityProp( 'postType', postType, 'excerpt', postId );
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	/**
 	 * Check if the post type supports excerpts.
 	 * Add an exception and return early for the "page" post type,
@@ -232,6 +237,7 @@ export default function PostExcerptEditor( {
 							excerptLength: 55,
 						} );
 					} }
+					dropdownMenuProps={ dropdownMenuProps }
 				>
 					<ToolsPanelItem
 						hasValue={ () => showMoreOnNewLine !== true }
diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
index 43fb305d52ffaf..4cd24505fd552a 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/packages/block-library/src/social-link/edit.js
@@ -36,6 +36,7 @@ import { keyboardReturn } from '@wordpress/icons';
  * Internal dependencies
  */
 import { getIconBySite, getNameBySite } from './social-list';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const SocialLinkURLPopover = ( {
 	url,
@@ -109,6 +110,7 @@ const SocialLinkEdit = ( {
 	clientId,
 } ) => {
 	const { url, service, label = '', rel } = attributes;
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const {
 		showLabels,
 		iconColor,
@@ -200,6 +202,7 @@ const SocialLinkEdit = ( {
 					resetAll={ () => {
 						setAttributes( { label: undefined } );
 					} }
+					dropdownMenuProps={ dropdownMenuProps }
 				>
 					<ToolsPanelItem
 						isShownByDefault
diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
index af39219af25a1a..72fd265d629fb7 100644
--- a/packages/block-library/src/social-links/edit.js
+++ b/packages/block-library/src/social-links/edit.js
@@ -31,6 +31,11 @@ import { __ } from '@wordpress/i18n';
 import { check } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 const sizeOptions = [
 	{ name: __( 'Small' ), value: 'has-small-icon-size' },
 	{ name: __( 'Normal' ), value: 'has-normal-icon-size' },
@@ -69,6 +74,8 @@ export function SocialLinksEdit( props ) {
 
 	const logosOnly = attributes.className?.includes( 'is-style-logos-only' );
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	// Remove icon background color when logos only style is selected or
 	// restore it when any other style is selected.
 	const backgroundBackupRef = useRef( {} );
@@ -207,6 +214,7 @@ export function SocialLinksEdit( props ) {
 							showLabels: false,
 						} );
 					} }
+					dropdownMenuProps={ dropdownMenuProps }
 				>
 					<ToolsPanelItem
 						isShownByDefault
diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
index 1d61bab0787e44..a6c8be3c4a4899 100644
--- a/packages/block-library/src/table/edit.js
+++ b/packages/block-library/src/table/edit.js
@@ -57,6 +57,7 @@ import {
 	isEmptyTableSection,
 } from './state';
 import { Caption } from '../utils/caption';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const ALIGNMENT_CONTROLS = [
 	{
@@ -109,6 +110,8 @@ function TableEdit( {
 	const tableRef = useRef();
 	const [ hasTableCreated, setHasTableCreated ] = useState( false );
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	/**
 	 * Updates the initial column count used for table creation.
 	 *
@@ -483,6 +486,7 @@ function TableEdit( {
 							foot: [],
 						} );
 					} }
+					dropdownMenuProps={ dropdownMenuProps }
 				>
 					<ToolsPanelItem
 						hasValue={ () => hasFixedLayout !== true }
diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js
index b41e47faec3699..7e544d2474f049 100644
--- a/packages/block-library/src/tag-cloud/edit.js
+++ b/packages/block-library/src/tag-cloud/edit.js
@@ -24,6 +24,11 @@ import {
 import ServerSideRender from '@wordpress/server-side-render';
 import { store as coreStore } from '@wordpress/core-data';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 /**
  * Minimum number of tags a user can show using this block.
  *
@@ -51,6 +56,7 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 	} = attributes;
 
 	const [ availableUnits ] = useSettings( 'spacing.units' );
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	// The `pt` unit is used as the default value and is therefore
 	// always considered an available unit.
@@ -129,6 +135,7 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 						largestFontSize: '22pt',
 					} );
 				} }
+				dropdownMenuProps={ dropdownMenuProps }
 			>
 				<ToolsPanelItem
 					hasValue={ () => taxonomy !== 'post_tag' }