Move tools panel to the left of the inspector (#55785)

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,6 +62,7 @@ function BorderToolsPanel( {
 			label={ __( 'Border' ) }
 			resetAll={ resetAll }
 			panelId={ panelId }
+			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';
 import { unlock } from '../../lock-unlock';
 
@@ -130,6 +130,7 @@ function ColorToolsPanel( {
 			className="color-block-support-panel"
 			__experimentalFirstVisibleItemClass="first"
 			__experimentalLastVisibleItemClass="last"
+			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,6 +178,7 @@ function DimensionsToolsPanel( {
 			label={ __( 'Dimensions' ) }
 			resetAll={ resetAll }
 			panelId={ panelId }
+			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,6 +55,7 @@ function EffectsToolsPanel( {
 			label={ __( 'Effects' ) }
 			resetAll={ resetAll }
 			panelId={ panelId }
+			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,6 +129,7 @@ function TypographyToolsPanel( {
 			label={ __( 'Typography' ) }
 			resetAll={ resetAll }
 			panelId={ panelId }
+			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: 259, // Inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
+	},
+};
+
 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,6 +72,7 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
 			shouldRenderPlaceholderItems={ true } // Required to maintain fills ordering.
 			__experimentalFirstVisibleItemClass="first"
 			__experimentalLastVisibleItemClass="last"
+			dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
 		>
 			{ children }
 		</ToolsPanel>

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

@@ -48,6 +48,7 @@ import { Caption } from '../utils/caption';
 /**
  * Module constants
  */
+import { TOOLSPANEL_DROPDOWNMENU_PROPS } from '../utils/constants';
 import { MIN_SIZE, ALLOWED_MEDIA_TYPES } from './constants';
 import { evalAspectRatio } from './utils';
 
@@ -392,7 +393,11 @@ export default function Image( {
 
 	const sizeControls = (
 		<InspectorControls>
-			<ToolsPanel label={ __( 'Settings' ) } resetAll={ resetAll }>
+			<ToolsPanel
+				label={ __( 'Settings' ) }
+				resetAll={ resetAll }
+				dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
+			>
 				{ isResizable && dimensionsControl }
 			</ToolsPanel>
 		</InspectorControls>
@@ -453,7 +458,11 @@ export default function Image( {
 				</BlockControls>
 			) }
 			<InspectorControls>
-				<ToolsPanel label={ __( 'Settings' ) } resetAll={ resetAll }>
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ resetAll }
+					dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
+				>
 					{ ! multiImageSelection && (
 						<ToolsPanelItem
 							label={ __( 'Alternative text' ) }

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

@@ -37,6 +37,7 @@ import {
 	isControlAllowed,
 	useTaxonomies,
 } from '../../utils';
+import { TOOLSPANEL_DROPDOWNMENU_PROPS } from '../../../utils/constants';
 
 const { BlockInfo } = unlock( blockEditorPrivateApis );
 
@@ -226,6 +227,7 @@ export default function QueryInspectorControls( props ) {
 							} );
 							setQuerySearch( '' );
 						} }
+						dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
 					>
 						{ showTaxControl && (
 							<ToolsPanelItem

packages/block-library/src/utils/constants.js

@@ -0,0 +1,8 @@
+// The following dropdown menu props aim to provide a consistent offset and
+// placement for ToolsPanel menus for block controls to match color popovers.
+export const TOOLSPANEL_DROPDOWNMENU_PROPS = {
+	popoverProps: {
+		placement: 'left-start',
+		offset: 259, // Inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
+	},
+};

packages/components/CHANGELOG.md

@@ -28,6 +28,7 @@
 -   `FocalPointPicker`: Add opt-in prop for 40px default size ([#56021](https://github.com/WordPress/gutenberg/pull/56021)).
 -   `DimensionControl`: Add opt-in prop for 40px default size ([#56805](https://github.com/WordPress/gutenberg/pull/56805)).
 -   `FontSizePicker`: Add opt-in prop for 40px default size ([#56804](https://github.com/WordPress/gutenberg/pull/56804)).
+-   `ToolsPanel`/`ToolsPanelHeader`: Added `dropdownMenuProps` to allow customization of the panel's dropdown menu. Also merged default and optional control menu groups ([#55785](https://github.com/WordPress/gutenberg/pull/55785)).
 
 ### Bug Fix
 

packages/components/src/tools-panel/test/index.tsx

@@ -455,8 +455,8 @@ describe( 'ToolsPanel', () => {
 
 			const menuGroups = screen.getAllByRole( 'group' );
 
-			// Groups should be: default controls, optional controls & reset all.
-			expect( menuGroups.length ).toEqual( 3 );
+			// There are now only two groups controls & reset all.
+			expect( menuGroups.length ).toEqual( 2 );
 		} );
 
 		it( 'should not render contents of items when in placeholder state', () => {
@@ -517,15 +517,11 @@ describe( 'ToolsPanel', () => {
 
 			await openDropdownMenu();
 
-			// The linked control should initially appear in the optional controls
-			// menu group. There should be three menu groups: default controls,
-			// optional controls, and the group to reset all options.
 			let menuGroups = screen.getAllByRole( 'group' );
-			expect( menuGroups.length ).toEqual( 3 );
 
-			// The linked control should be in the second group, of optional controls.
+			// The linked control should be in the first group of controls.
 			expect(
-				within( menuGroups[ 1 ] ).getByText( 'Linked' )
+				within( menuGroups[ 0 ] ).getByText( 'Linked' )
 			).toBeInTheDocument();
 
 			// Simulate the main control having a value set which should
@@ -540,22 +536,18 @@ describe( 'ToolsPanel', () => {
 			linkedItem = screen.getByText( 'Linked control' );
 			expect( linkedItem ).toBeInTheDocument();
 
-			// The linked control should now appear in the default controls
-			// menu group and have been removed from the optional group.
+			// The linked control should still appear in the controls
+			// menu group but as a default control.
 			menuGroups = screen.getAllByRole( 'group' );
 
-			// There should now only be two groups. The default controls and
-			// and the group for the reset all option.
-			expect( menuGroups.length ).toEqual( 2 );
-
-			// The new default control item for the Linked control should be
-			// within the first menu group.
+			// The new default control item for the Linked control should still
+			// be within the first menu group.
 			const defaultItem = within( menuGroups[ 0 ] ).getByText( 'Linked' );
 			expect( defaultItem ).toBeInTheDocument();
 
 			// Optional controls have an additional aria-label. This can be used
-			// to confirm the conditional default control has been removed from
-			// the optional menu item group.
+			// to confirm the conditional default control is now being treated
+			// as default control.
 			expect(
 				screen.queryByRole( 'menuitemcheckbox', {
 					name: 'Show Linked',
@@ -599,7 +591,7 @@ describe( 'ToolsPanel', () => {
 			let conditionalItem = screen.queryByText( 'Conditional control' );
 			expect( conditionalItem ).not.toBeInTheDocument();
 
-			// The conditional control should not yet appear in the default controls
+			// The conditional control should not yet appear in the controls
 			// menu group.
 			await openDropdownMenu();
 			let menuGroups = screen.getAllByRole( 'group' );
@@ -619,7 +611,7 @@ describe( 'ToolsPanel', () => {
 			conditionalItem = screen.getByText( 'Conditional control' );
 			expect( conditionalItem ).toBeInTheDocument();
 
-			// The conditional control should now appear in the default controls
+			// The conditional control should now appear in the controls
 			// menu group.
 			menuGroups = screen.getAllByRole( 'group' );
 

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

@@ -18,6 +18,13 @@ This component is generated automatically by its parent
 
 ## Props
 
+### `dropdownMenuProps`: `{}`
+
+The dropdown menu props to configure the panel's `DropdownMenu`.
+
+-   Type: `DropdownMenuProps`
+-   Required: No
+
 ### `headingLevel`: `1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'`
 
 The heading level of the panel's header.