Editor: Remove MoreDropdownMenuComponent

packages/base-styles/_z-index.scss

@@ -140,6 +140,7 @@ $z-layers: (
 	".components-popover.block-editor-inserter__popover": 99999,
 	".components-popover.table-of-contents__popover": 99998,
 	".components-popover.interface-more-menu__content": 99998,
+	".components-popover.more-menu__content": 99998,
 	".components-popover.block-editor-rich-text__inline-format-toolbar": 99998,
 	".components-popover.block-editor-warning__dropdown": 99998,
 

packages/customize-widgets/src/components/more-menu/index.js

@@ -9,10 +9,9 @@ import {
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-import { external } from '@wordpress/icons';
+import { external, moreVertical } from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
-import { MoreMenuDropdown } from '@wordpress/interface';
 import { PreferenceToggleMenuItem } from '@wordpress/preferences';
 
 /**
@@ -35,7 +34,18 @@ export default function MoreMenu() {
 
 	return (
 		<>
-			<MoreMenuDropdown as={ ToolbarDropdownMenu }>
+			<ToolbarDropdownMenu
+				icon={ moreVertical }
+				label={ __( 'Options' ) }
+				popoverProps={ {
+					placement: 'bottom-end',
+					className: 'more-menu-dropdown__content',
+				} }
+				toggleProps={ {
+					tooltipPosition: 'bottom',
+					size: 'compact',
+				} }
+			>
 				{ () => (
 					<>
 						<MenuGroup label={ _x( 'View', 'noun' ) }>
@@ -106,7 +116,7 @@ export default function MoreMenu() {
 						</MenuGroup>
 					</>
 				) }
-			</MoreMenuDropdown>
+			</ToolbarDropdownMenu>
 			<KeyboardShortcutHelpModal
 				isModalActive={ isKeyboardShortcutsModalActive }
 				toggleModal={ toggleKeyboardShortcutsModal }

packages/customize-widgets/src/components/more-menu/style.scss

@@ -0,0 +1,3 @@
+.components-popover.more-menu-dropdown__content {
+	z-index: z-index(".components-popover.more-menu__content");
+}

packages/customize-widgets/src/style.scss

@@ -2,6 +2,7 @@
 @import "./components/header/style.scss";
 @import "./components/inserter/style.scss";
 @import "./components/keyboard-shortcut-help-modal/style.scss";
+@import "./components/more-menu/style.scss";
 @import "./components/sidebar-block-editor/style.scss";
 @import "./components/welcome-guide/style.scss";
 @import "./controls/style.scss";

packages/edit-post/src/components/header/more-menu/index.js

@@ -2,14 +2,11 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { MenuGroup } from '@wordpress/components';
-import {
-	ActionItem,
-	MoreMenuDropdown,
-	PinnedItems,
-} from '@wordpress/interface';
+import { MenuGroup, DropdownMenu } from '@wordpress/components';
+import { ActionItem, PinnedItems } from '@wordpress/interface';
 import { useViewportMatch } from '@wordpress/compose';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { moreVertical } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -25,10 +22,17 @@ const MoreMenu = ( { showIconLabels } ) => {
 	const isLargeViewport = useViewportMatch( 'large' );
 
 	return (
-		<MoreMenuDropdown
+		<DropdownMenu
+			icon={ moreVertical }
+			label={ __( 'Options' ) }
+			popoverProps={ {
+				placement: 'bottom-end',
+				className: 'more-menu-dropdown__content',
+			} }
 			toggleProps={ {
-				showTooltip: ! showIconLabels,
 				...( showIconLabels && { variant: 'tertiary' } ),
+				tooltipPosition: 'bottom',
+				showTooltip: ! showIconLabels,
 				size: 'compact',
 			} }
 		>
@@ -54,7 +58,7 @@ const MoreMenu = ( { showIconLabels } ) => {
 					</MenuGroup>
 				</>
 			) }
-		</MoreMenuDropdown>
+		</DropdownMenu>
 	);
 };
 

packages/edit-post/src/components/header/style.scss

@@ -322,3 +322,7 @@
 		z-index: 35;
 	}
 }
+
+.components-popover.more-menu-dropdown__content {
+	z-index: z-index(".components-popover.more-menu__content");
+}

packages/edit-site/src/components/header-edit-mode/more-menu/index.js

@@ -4,13 +4,14 @@
 import { __, _x } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { displayShortcut } from '@wordpress/keycodes';
-import { external } from '@wordpress/icons';
-import { MenuGroup, MenuItem, VisuallyHidden } from '@wordpress/components';
+import { external, moreVertical } from '@wordpress/icons';
 import {
-	ActionItem,
-	MoreMenuDropdown,
-	store as interfaceStore,
-} from '@wordpress/interface';
+	MenuGroup,
+	MenuItem,
+	VisuallyHidden,
+	DropdownMenu,
+} from '@wordpress/components';
+import { ActionItem, store as interfaceStore } from '@wordpress/interface';
 import {
 	PreferenceToggleMenuItem,
 	store as preferencesStore,
@@ -55,10 +56,18 @@ export default function MoreMenu( { showIconLabels } ) {
 
 	return (
 		<>
-			<MoreMenuDropdown
+			<DropdownMenu
+				icon={ moreVertical }
+				label={ __( 'Options' ) }
+				popoverProps={ {
+					placement: 'bottom-end',
+					className: 'more-menu-dropdown__content',
+				} }
 				toggleProps={ {
 					showTooltip: ! showIconLabels,
 					...( showIconLabels && { variant: 'tertiary' } ),
+					tooltipPosition: 'bottom',
+					size: 'compact',
 				} }
 			>
 				{ ( { onClose } ) => (
@@ -162,7 +171,7 @@ export default function MoreMenu( { showIconLabels } ) {
 						</MenuGroup>
 					</>
 				) }
-			</MoreMenuDropdown>
+			</DropdownMenu>
 			<KeyboardShortcutHelpModal />
 			<EditSitePreferencesModal />
 		</>

packages/edit-site/src/components/header-edit-mode/style.scss

@@ -256,3 +256,7 @@ $header-toolbar-min-width: 335px;
 .edit-site-header-edit-mode__block-tools-toggle {
 	margin-left: 2px; // Allow focus ring to be fully visible
 }
+
+.components-popover.more-menu-dropdown__content {
+	z-index: z-index(".components-popover.more-menu__content");
+}

packages/edit-widgets/src/components/more-menu/index.js

@@ -1,11 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { MenuGroup, MenuItem, VisuallyHidden } from '@wordpress/components';
+import {
+	MenuGroup,
+	MenuItem,
+	VisuallyHidden,
+	DropdownMenu,
+} from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-import { external } from '@wordpress/icons';
-import { MoreMenuDropdown } from '@wordpress/interface';
+import { external, moreVertical } from '@wordpress/icons';
 import { PreferenceToggleMenuItem } from '@wordpress/preferences';
 import { displayShortcut } from '@wordpress/keycodes';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
@@ -34,7 +38,18 @@ export default function MoreMenu() {
 
 	return (
 		<>
-			<MoreMenuDropdown>
+			<DropdownMenu
+				icon={ moreVertical }
+				label={ __( 'Options' ) }
+				popoverProps={ {
+					placement: 'bottom-end',
+					className: 'more-menu-dropdown__content',
+				} }
+				toggleProps={ {
+					tooltipPosition: 'bottom',
+					size: 'compact',
+				} }
+			>
 				{ ( onClose ) => (
 					<>
 						{ isLargeViewport && (
@@ -134,7 +149,7 @@ export default function MoreMenu() {
 						</MenuGroup>
 					</>
 				) }
-			</MoreMenuDropdown>
+			</DropdownMenu>
 			<KeyboardShortcutHelpModal
 				isModalActive={ isKeyboardShortcutsModalActive }
 				toggleModal={ toggleKeyboardShortcutsModal }

packages/edit-widgets/src/components/more-menu/style.scss

@@ -0,0 +1,3 @@
+.components-popover.more-menu-dropdown__content {
+	z-index: z-index(".components-popover.more-menu__content");
+}

packages/edit-widgets/src/style.scss

@@ -7,6 +7,7 @@
 @import "./components/sidebar/style.scss";
 @import "./components/notices/style.scss";
 @import "./components/layout/style.scss";
+@import "./components/more-menu/style.scss";
 @import "./components/welcome-guide/style.scss";
 @import "./components/widget-areas-block-editor-content/style.scss";
 @import "./components/secondary-sidebar/style.scss";

packages/interface/src/components/index.js

@@ -3,6 +3,5 @@ export { default as ComplementaryAreaMoreMenuItem } from './complementary-area-m
 export { default as FullscreenMode } from './fullscreen-mode';
 export { default as InterfaceSkeleton } from './interface-skeleton';
 export { default as PinnedItems } from './pinned-items';
-export { default as MoreMenuDropdown } from './more-menu-dropdown';
 export { default as ActionItem } from './action-item';
 export { default as NavigableRegion } from './navigable-region';