Use internal context system to apply toolbar variant to toolbar dropdowns

packages/block-editor/src/components/alignment-control/ui.js

@@ -24,8 +24,7 @@ const DEFAULT_ALIGNMENT_CONTROLS = [
 ];
 
 const POPOVER_PROPS = {
-	position: 'bottom right',
-	variant: 'toolbar',
+	placement: 'bottom-start',
 };
 
 function AlignmentUI( {

packages/block-editor/src/components/block-alignment-control/constants.js

@@ -39,7 +39,3 @@ export const BLOCK_ALIGNMENTS_CONTROLS = {
 };
 
 export const DEFAULT_CONTROL = 'none';
-
-export const POPOVER_PROPS = {
-	variant: 'toolbar',
-};

packages/block-editor/src/components/block-alignment-control/ui.js

@@ -18,11 +18,7 @@ import {
  * Internal dependencies
  */
 import useAvailableAlignments from './use-available-alignments';
-import {
-	BLOCK_ALIGNMENTS_CONTROLS,
-	DEFAULT_CONTROL,
-	POPOVER_PROPS,
-} from './constants';
+import { BLOCK_ALIGNMENTS_CONTROLS, DEFAULT_CONTROL } from './constants';
 
 function BlockAlignmentUI( {
 	value,
@@ -69,7 +65,6 @@ function BlockAlignmentUI( {
 		  }
 		: {
 				toggleProps: { describedBy: __( 'Change alignment' ) },
-				popoverProps: POPOVER_PROPS,
 				children: ( { onClose } ) => {
 					return (
 						<>

packages/block-editor/src/components/block-alignment-matrix-control/index.js

@@ -23,7 +23,7 @@ function BlockAlignmentMatrixControl( props ) {
 
 	return (
 		<Dropdown
-			popoverProps={ { variant: 'toolbar', placement: 'bottom-start' } }
+			popoverProps={ { placement: 'bottom-start' } }
 			renderToggle={ ( { onToggle, isOpen } ) => {
 				const openOnArrowDown = ( event ) => {
 					if ( ! isOpen && event.keyCode === DOWN ) {

packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js

@@ -35,8 +35,7 @@ import { useShowMoversGestures } from '../block-toolbar/utils';
 
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
-	position: 'bottom right',
-	variant: 'toolbar',
+	placement: 'bottom-start',
 };
 
 function CopyMenuItem( { blocks, onCopy, label } ) {

packages/block-editor/src/components/block-switcher/index.js

@@ -196,8 +196,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 						className="block-editor-block-switcher"
 						label={ blockSwitcherLabel }
 						popoverProps={ {
-							position: 'bottom right',
-							variant: 'toolbar',
+							placement: 'bottom-start',
 							className: 'block-editor-block-switcher__popover',
 						} }
 						icon={

packages/block-editor/src/components/block-vertical-alignment-control/ui.js

@@ -57,9 +57,7 @@ function BlockVerticalAlignmentUI( {
 		BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
 
 	const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
-	const extraProps = isToolbar
-		? { isCollapsed }
-		: { popoverProps: { variant: 'toolbar' } };
+	const extraProps = isToolbar ? { isCollapsed } : {};
 
 	return (
 		<UIComponent

packages/block-editor/src/components/duotone-control/index.js

@@ -36,7 +36,6 @@ function DuotoneControl( {
 			popoverProps={ {
 				className: 'block-editor-duotone-control__popover',
 				headerTitle: __( 'Duotone' ),
-				variant: 'toolbar',
 			} }
 			renderToggle={ ( { isOpen, onToggle } ) => {
 				const openOnArrowDown = ( event ) => {

packages/block-editor/src/components/image-editor/constants.js

@@ -2,5 +2,4 @@ export const MIN_ZOOM = 100;
 export const MAX_ZOOM = 300;
 export const POPOVER_PROPS = {
 	placement: 'bottom-start',
-	variant: 'toolbar',
 };

packages/block-editor/src/components/media-replace-flow/index.js

@@ -59,9 +59,7 @@ const MediaReplaceFlow = ( {
 	multiple = false,
 	addToGallery,
 	handleUpload = true,
-	popoverProps = {
-		variant: 'toolbar',
-	},
+	popoverProps,
 } ) => {
 	const mediaUpload = useSelect( ( select ) => {
 		return select( blockEditorStore ).getSettings().mediaUpload;

packages/block-editor/src/components/preview-options/index.js

@@ -27,7 +27,7 @@ export default function PreviewOptions( {
 			className,
 			'block-editor-post-preview__dropdown-content'
 		),
-		position: 'bottom left',
+		placement: 'bottom-end',
 	};
 	const toggleProps = {
 		variant: 'tertiary',

packages/block-editor/src/components/rich-text/format-toolbar/index.js

@@ -16,8 +16,7 @@ import { chevronDown } from '@wordpress/icons';
 import { orderBy } from '../../../utils/sorting';
 
 const POPOVER_PROPS = {
-	position: 'bottom right',
-	variant: 'toolbar',
+	placement: 'bottom-start',
 };
 
 const FormatToolbar = () => {

packages/block-editor/src/layouts/flex.js

@@ -258,6 +258,10 @@ function FlexLayoutVerticalAlignmentControl( {
 	);
 }
 
+const POPOVER_PROPS = {
+	placement: 'bottom-start',
+};
+
 function FlexLayoutJustifyContentControl( {
 	layout,
 	onChange,
@@ -282,10 +286,7 @@ function FlexLayoutJustifyContentControl( {
 				allowedControls={ allowedControls }
 				value={ justifyContent }
 				onChange={ onJustificationChange }
-				popoverProps={ {
-					position: 'bottom right',
-					variant: 'toolbar',
-				} }
+				popoverProps={ POPOVER_PROPS }
 			/>
 		);
 	}

packages/block-library/src/buttons/edit.native.js

@@ -28,6 +28,10 @@ const ALLOWED_BLOCKS = [ buttonBlockName ];
 
 const layoutProp = { type: 'default', alignments: [] };
 
+const POPOVER_PROPS = {
+	placement: 'bottom-start',
+};
+
 export default function ButtonsEdit( {
 	attributes: { layout, align },
 	clientId,
@@ -137,10 +141,7 @@ export default function ButtonsEdit( {
 								},
 							} )
 						}
-						popoverProps={ {
-							position: 'bottom right',
-							variant: 'toolbar',
-						} }
+						popoverProps={ POPOVER_PROPS }
 					/>
 				</BlockControls>
 			) }

packages/block-library/src/navigation/edit/leaf-more-menu.js

@@ -15,8 +15,7 @@ import { BlockTitle, store as blockEditorStore } from '@wordpress/block-editor';
 
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
-	position: 'bottom right',
-	variant: 'toolbar',
+	placement: 'bottom-start',
 };
 
 const BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU = [

packages/components/CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Enhancements
 
 -   `BorderControl`: Improve color code readability in aria-label ([#51197](https://github.com/WordPress/gutenberg/pull/51197)).
+-   `Dropdown` and `DropdownMenu`: use internal context system to automatically pick the toolbar popover variant when rendered inside the `Toolbar` component ([#51154](https://github.com/WordPress/gutenberg/pull/51154)).
 
 ### Bug Fix
 

packages/components/src/circular-option-picker/types.ts

@@ -12,7 +12,7 @@ import type { Icon } from '@wordpress/icons';
  * Internal dependencies
  */
 import type { ButtonAsButtonProps } from '../button/types';
-import type Dropdown from '../dropdown';
+import type { DropdownProps } from '../dropdown/types';
 import type { WordPressComponentProps } from '../ui/context';
 
 export type CircularOptionPickerProps = {
@@ -44,10 +44,7 @@ export type DropdownLinkActionProps = {
 		'children'
 	>;
 	linkText: string;
-	dropdownProps: Omit<
-		React.ComponentProps< typeof Dropdown >,
-		'className' | 'renderToggle'
-	>;
+	dropdownProps: Omit< DropdownProps, 'className' | 'renderToggle' >;
 	className?: string;
 };
 

packages/components/src/dropdown-menu-v2/index.tsx

@@ -35,7 +35,7 @@ import type {
 	DropdownMenuRadioItemProps,
 	DropdownMenuSeparatorProps,
 	DropdownSubMenuTriggerProps,
-	DropdownMenuContext,
+	DropdownMenuInternalContext,
 	DropdownMenuPrivateContext as DropdownMenuPrivateContextType,
 } from './types';
 
@@ -70,7 +70,7 @@ const UnconnectedDropdownMenu = ( props: DropdownMenuProps ) => {
 		variant,
 	} = useContextSystem<
 		// Adding `className` to the context type to avoid a TS error
-		DropdownMenuProps & DropdownMenuContext & { className?: string }
+		DropdownMenuProps & DropdownMenuInternalContext & { className?: string }
 	>( props, 'DropdownMenu' );
 
 	// Render the portal in the default slot used by the legacy Popover component.

packages/components/src/dropdown-menu-v2/styles.ts

@@ -11,7 +11,7 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { COLORS, font, rtl, CONFIG } from '../utils';
 import { space } from '../ui/utils/space';
 import Icon from '../icon';
-import type { DropdownMenuContext } from './types';
+import type { DropdownMenuInternalContext } from './types';
 
 const ANIMATION_PARAMS = {
 	SLIDE_AMOUNT: '2px',
@@ -62,7 +62,9 @@ const slideLeftAndFade = keyframes( {
 	'100%': { opacity: 1, transform: 'translateX(0)' },
 } );
 
-const baseContent = ( variant: DropdownMenuContext[ 'variant' ] ) => css`
+const baseContent = (
+	variant: DropdownMenuInternalContext[ 'variant' ]
+) => css`
 	min-width: 220px;
 	background-color: ${ COLORS.ui.background };
 	border-radius: ${ CONFIG.radiusBlockUi };
@@ -200,12 +202,12 @@ const baseItem = css`
 `;
 
 export const Content = styled( DropdownMenu.Content )<
-	Pick< DropdownMenuContext, 'variant' >
+	Pick< DropdownMenuInternalContext, 'variant' >
 >`
 	${ ( props ) => baseContent( props.variant ) }
 `;
 export const SubContent = styled( DropdownMenu.SubContent )<
-	Pick< DropdownMenuContext, 'variant' >
+	Pick< DropdownMenuInternalContext, 'variant' >
 >`
 	${ ( props ) => baseContent( props.variant ) }
 `;
@@ -246,7 +248,7 @@ export const Label = styled( DropdownMenu.Label )`
 `;
 
 export const Separator = styled( DropdownMenu.Separator )<
-	Pick< DropdownMenuContext, 'variant' >
+	Pick< DropdownMenuInternalContext, 'variant' >
 >`
 	height: ${ CONFIG.borderWidth };
 	/* TODO: doesn't match border color from variables */

packages/components/src/dropdown-menu-v2/types.ts

@@ -249,7 +249,7 @@ export type DropdownMenuGroupProps = {
 
 export type DropdownMenuSeparatorProps = {};
 
-export type DropdownMenuContext = {
+export type DropdownMenuInternalContext = {
 	/**
 	 * This variant can be used to change the appearance of the component in
 	 * specific contexts, ie. when rendered inside the `Toolbar` component.
@@ -258,7 +258,7 @@ export type DropdownMenuContext = {
 };
 
 export type DropdownMenuPrivateContext = Pick<
-	DropdownMenuContext,
+	DropdownMenuInternalContext,
 	'variant'
 > & {
 	portalContainer: HTMLElement | null;