Experiment: ToolsPanel: Try moving the menu off the sidebar to improve UX

packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js

@@ -89,7 +89,10 @@ export const PanelColorGradientSettingsInner = ( {
 					);
 				} );
 			} }
+			menuPosition="left"
 			panelId={ panelId }
+			popoverOffset={ 48 }
+			popoverPlacement="left-start"
 			__experimentalFirstVisibleItemClass="first"
 			__experimentalLastVisibleItemClass="last"
 		>

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

@@ -67,7 +67,10 @@ export default function BlockSupportToolsPanel( { children, group, label } ) {
 			label={ label }
 			resetAll={ resetAll }
 			key={ panelId }
+			menuPosition="left"
 			panelId={ panelId }
+			popoverOffset={ 48 }
+			popoverPlacement="left-start"
 			hasInnerWrapper={ true }
 			shouldRenderPlaceholderItems={ true } // Required to maintain fills ordering.
 			__experimentalFirstVisibleItemClass="first"

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

@@ -25,6 +25,20 @@ Text to be displayed within the panel header. It is also passed along as the
 
 -   Required: Yes
 
+### `menuPosition`: `left` | `right`
+
+Whether the menu toggle is positioned to the left or right of the panel's
+title.
+
+- Required: No
+- Default: `right`
+
+### `popoverProps`: `Record< string, unknown >`
+
+An internal prop used to control the visibility of the dropdown.
+
+- Required: No
+
 ### `resetAll`: `() => void`
 
 The `resetAll` prop provides the callback to execute when the "Reset all" menu

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

@@ -152,6 +152,8 @@ const ToolsPanelHeader = (
 		headingClassName,
 		label: labelText,
 		menuItems,
+		menuPosition = 'right',
+		popoverProps,
 		resetAll,
 		toggleItem,
 		...headerProps
@@ -177,52 +179,63 @@ const ToolsPanelHeader = (
 		( [ , isSelected ] ) => isSelected
 	);
 
+	const menuJustification =
+		menuPosition === 'right' ? 'space-between' : 'flex-start';
+
+	const dropdown = hasMenuItems && (
+		<DropdownMenu
+			icon={ dropDownMenuIcon }
+			label={ dropDownMenuLabelText }
+			menuProps={ { className: dropdownMenuClassName } }
+			toggleProps={ {
+				isSmall: true,
+				describedBy: dropdownMenuDescriptionText,
+			} }
+			popoverProps={ popoverProps }
+		>
+			{ () => (
+				<>
+					<DefaultControlsGroup
+						items={ defaultItems }
+						toggleItem={ toggleItem }
+					/>
+					<OptionalControlsGroup
+						items={ optionalItems }
+						toggleItem={ toggleItem }
+					/>
+					<MenuGroup>
+						<MenuItem
+							aria-disabled={ ! canResetAll }
+							variant={ 'tertiary' }
+							onClick={ () => {
+								if ( canResetAll ) {
+									resetAll();
+									speak(
+										__( 'All options reset' ),
+										'assertive'
+									);
+								}
+							} }
+						>
+							{ __( 'Reset all' ) }
+						</MenuItem>
+					</MenuGroup>
+				</>
+			) }
+		</DropdownMenu>
+	);
+
 	return (
-		<HStack { ...headerProps } ref={ forwardedRef }>
+		<HStack
+			{ ...headerProps }
+			justify={ menuJustification }
+			ref={ forwardedRef }
+		>
+			{ menuPosition === 'left' && dropdown }
 			<Heading level={ 2 } className={ headingClassName }>
 				{ labelText }
 			</Heading>
-			{ hasMenuItems && (
-				<DropdownMenu
-					icon={ dropDownMenuIcon }
-					label={ dropDownMenuLabelText }
-					menuProps={ { className: dropdownMenuClassName } }
-					toggleProps={ {
-						isSmall: true,
-						describedBy: dropdownMenuDescriptionText,
-					} }
-				>
-					{ () => (
-						<>
-							<DefaultControlsGroup
-								items={ defaultItems }
-								toggleItem={ toggleItem }
-							/>
-							<OptionalControlsGroup
-								items={ optionalItems }
-								toggleItem={ toggleItem }
-							/>
-							<MenuGroup>
-								<MenuItem
-									aria-disabled={ ! canResetAll }
-									variant={ 'tertiary' }
-									onClick={ () => {
-										if ( canResetAll ) {
-											resetAll();
-											speak(
-												__( 'All options reset' ),
-												'assertive'
-											);
-										}
-									} }
-								>
-									{ __( 'Reset all' ) }
-								</MenuItem>
-							</MenuGroup>
-						</>
-					) }
-				</DropdownMenu>
-			) }
+			{ menuPosition === 'right' && dropdown }
 		</HStack>
 	);
 };

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

@@ -88,7 +88,25 @@ wrapper element allowing the panel to lay them out accordingly.
 Text to be displayed within the panel's header and as the `aria-label` for the
 panel's dropdown menu.
 
-- Required: Yes
+### `menuPosition`: `left` | `right`
+
+Whether the menu toggle is positioned to the left or right of the panel's
+header.
+
+- Required: No
+- Default: `right`
+
+### `popoverOffset`: `number`
+
+The space between the popover and the menu toggle.
+
+- Required: No
+
+### `popoverPlacement`: `string`
+
+The position of the menu popover compared to the menu toggle.
+
+- Required: No
 
 ### `panelId`: `string`
 

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

@@ -20,7 +20,9 @@ const ToolsPanel = (
 	const {
 		children,
 		label,
+		menuPosition,
 		panelContext,
+		popoverProps,
 		resetAllItems,
 		toggleItem,
 		...toolsPanelProps
@@ -33,6 +35,8 @@ const ToolsPanel = (
 					label={ label }
 					resetAll={ resetAllItems }
 					toggleItem={ toggleItem }
+					menuPosition={ menuPosition }
+					popoverProps={ popoverProps }
 				/>
 				{ children }
 			</ToolsPanelContext.Provider>

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

@@ -59,6 +59,8 @@ export function useToolsPanel(
 		className,
 		resetAll,
 		panelId,
+		popoverOffset,
+		popoverPlacement,
 		hasInnerWrapper,
 		shouldRenderPlaceholderItems,
 		__experimentalFirstVisibleItemClass,
@@ -276,6 +278,11 @@ export function useToolsPanel(
 		[ ...panelItems ].reverse()
 	);
 
+	const popoverProps =
+		popoverPlacement || popoverOffset
+			? { placement: popoverPlacement, offset: popoverOffset }
+			: undefined;
+
 	const panelContext = useMemo(
 		() => ( {
 			areAllOptionalControlsHidden,
@@ -312,6 +319,7 @@ export function useToolsPanel(
 	return {
 		...otherProps,
 		panelContext,
+		popoverProps,
 		resetAllItems,
 		toggleItem,
 		className: classes,

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

@@ -21,12 +21,27 @@ export type ToolsPanelProps = {
 	 * for the panel's dropdown menu.
 	 */
 	label: string;
+	/**
+	 * Whether the menu toggle is positioned to the left or right of the panel's
+	 * header.
+	 *
+	 * @default 'right'
+	 */
+	menuPosition?: 'left' | 'right';
 	/**
 	 * If a `panelId` is set, it is passed through the `ToolsPanelContext` and
 	 * used to restrict panel items. Only items with a matching `panelId` will
 	 * be able to register themselves with this panel.
 	 */
 	panelId: string;
+	/**
+	 * The space between the popover and the menu toggle.
+	 */
+	popoverOffset?: number;
+	/**
+	 * The position of the menu popover compared to the menu toggle.
+	 */
+	popoverPlacement?: string;
 	/**
 	 * A function to call when the `Reset all` menu option is selected. This is
 	 * passed through to the panel's header component.
@@ -55,6 +70,17 @@ export type ToolsPanelHeaderProps = {
 	 * the `label` for the panel header's `DropdownMenu`.
 	 */
 	label: string;
+	/**
+	 * Whether the menu toggle is positioned to the left or right of the panel's
+	 * header.
+	 *
+	 * @default true
+	 */
+	menuPosition?: 'left' | 'right';
+	/**
+	 * An internal prop used to control the visibility of the dropdown.
+	 */
+	popoverProps?: Record< string, unknown >;
 	/**
 	 * The `resetAll` prop provides the callback to execute when the "Reset all"
 	 * menu item is selected. Its purpose is to facilitate resetting any control