Editor: Unify the more menu (#60910)

Co-authored-by: youknowriad <[email protected]> Co-authored-by: ntsekouras <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: jameskoster <[email protected]>
WordPress · Apr 23, 2024 · 6527034 · 6527034
1 parent 69adf95
commit 6527034
Show file tree

Hide file tree

Showing 20 changed files with 274 additions and 500 deletions.
diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
@@ -23,14 +23,14 @@ import { useState, useCallback } from '@wordpress/element';
  * Internal dependencies
  */
 import FullscreenModeClose from './fullscreen-mode-close';
-import MoreMenu from './more-menu';
+import PostEditorMoreMenu from './more-menu';
 import PostPublishButtonOrToggle from './post-publish-button-or-toggle';
 import MainDashboardButton from './main-dashboard-button';
 import ContextualToolbar from './contextual-toolbar';
 import { store as editPostStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
-const { DocumentTools, PostViewLink, PreviewDropdown, PinnedItems } =
+const { DocumentTools, PostViewLink, PreviewDropdown, PinnedItems, MoreMenu } =
 	unlock( editorPrivateApis );
 
 const slideY = {
@@ -152,7 +152,8 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 				{ ( isWideViewport || ! showIconLabels ) && (
 					<PinnedItems.Slot scope="core" />
 				) }
-				<MoreMenu showIconLabels={ showIconLabels } />
+				<MoreMenu />
+				<PostEditorMoreMenu />
 			</motion.div>
 		</div>
 	);

diff --git a/packages/edit-post/src/components/header/more-menu/index.js b/packages/edit-post/src/components/header/more-menu/index.js
@@ -2,62 +2,47 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { MenuGroup, DropdownMenu } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
-import { moreVertical } from '@wordpress/icons';
+import { PreferenceToggleMenuItem } from '@wordpress/preferences';
+import { displayShortcut } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
-import PreferencesMenuItem from '../preferences-menu-item';
-import ToolsMoreMenuGroup from '../tools-more-menu-group';
-import WritingMenu from '../writing-menu';
 import { unlock } from '../../../lock-unlock';
+import ManagePatternsMenuItem from './manage-patterns-menu-item';
+import WelcomeGuideMenuItem from './welcome-guide-menu-item';
+import EditPostPreferencesModal from '../../preferences-modal';
 
-const { ModeSwitcher, ActionItem, PinnedItems } = unlock( editorPrivateApis );
+const { ToolsMoreMenuGroup, ViewMoreMenuGroup } = unlock( editorPrivateApis );
 
-const MoreMenu = ( { showIconLabels } ) => {
+const MoreMenu = () => {
 	const isLargeViewport = useViewportMatch( 'large' );
 
 	return (
-		<DropdownMenu
-			icon={ moreVertical }
-			label={ __( 'Options' ) }
-			popoverProps={ {
-				placement: 'bottom-end',
-				className: 'more-menu-dropdown__content',
-			} }
-			toggleProps={ {
-				...( showIconLabels && { variant: 'tertiary' } ),
-				tooltipPosition: 'bottom',
-				showTooltip: ! showIconLabels,
-				size: 'compact',
-			} }
-		>
-			{ ( { onClose } ) => (
-				<>
-					{ showIconLabels && ! isLargeViewport && (
-						<PinnedItems.Slot
-							className={ showIconLabels && 'show-icon-labels' }
-							scope="core"
-						/>
-					) }
-					<WritingMenu />
-					<ModeSwitcher />
-					<ActionItem.Slot
-						name="core/plugin-more-menu"
-						label={ __( 'Plugins' ) }
-						as={ MenuGroup }
-						fillProps={ { onClick: onClose } }
+		<>
+			{ isLargeViewport && (
+				<ViewMoreMenuGroup>
+					<PreferenceToggleMenuItem
+						scope="core/edit-post"
+						name="fullscreenMode"
+						label={ __( 'Fullscreen mode' ) }
+						info={ __( 'Show and hide the admin user interface' ) }
+						messageActivated={ __( 'Fullscreen mode activated' ) }
+						messageDeactivated={ __(
+							'Fullscreen mode deactivated'
+						) }
+						shortcut={ displayShortcut.secondary( 'f' ) }
 					/>
-					<ToolsMoreMenuGroup.Slot fillProps={ { onClose } } />
-					<MenuGroup>
-						<PreferencesMenuItem />
-					</MenuGroup>
-				</>
+				</ViewMoreMenuGroup>
 			) }
-		</DropdownMenu>
+			<ToolsMoreMenuGroup>
+				<ManagePatternsMenuItem />
+				<WelcomeGuideMenuItem />
+			</ToolsMoreMenuGroup>
+			<EditPostPreferencesModal />
+		</>
 	);
 };
 

diff --git a/packages/edit-post/src/components/header/more-menu/manage-patterns-menu-item.js b/packages/edit-post/src/components/header/more-menu/manage-patterns-menu-item.js
@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
+
+function ManagePatternsMenuItem() {
+	const url = useSelect( ( select ) => {
+		const { canUser } = select( coreStore );
+		const { getEditorSettings } = select( editorStore );
+
+		const isBlockTheme = getEditorSettings().__unstableIsBlockBasedTheme;
+		const defaultUrl = addQueryArgs( 'edit.php', {
+			post_type: 'wp_block',
+		} );
+		const patternsUrl = addQueryArgs( 'site-editor.php', {
+			path: '/patterns',
+		} );
+
+		// The site editor and templates both check whether the user has
+		// edit_theme_options capabilities. We can leverage that here and not
+		// display the manage patterns link if the user can't access it.
+		return canUser( 'read', 'templates' ) && isBlockTheme
+			? patternsUrl
+			: defaultUrl;
+	}, [] );
+
+	return (
+		<MenuItem role="menuitem" href={ url }>
+			{ __( 'Manage patterns' ) }
+		</MenuItem>
+	);
+}
+
+export default ManagePatternsMenuItem;
diff --git a/.../plugins/welcome-guide-menu-item/index.js → ...ader/more-menu/welcome-guide-menu-item.js b/.../plugins/welcome-guide-menu-item/index.js → ...ader/more-menu/welcome-guide-menu-item.js
diff --git a/packages/edit-post/src/components/header/preferences-menu-item/index.js b/packages/edit-post/src/components/header/preferences-menu-item/index.js
diff --git a/packages/edit-post/src/components/header/writing-menu/index.js b/packages/edit-post/src/components/header/writing-menu/index.js
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -42,7 +42,6 @@ import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library
 import TextEditor from '../text-editor';
 import VisualEditor from '../visual-editor';
 import EditPostKeyboardShortcuts from '../keyboard-shortcuts';
-import EditPostPreferencesModal from '../preferences-modal';
 import InitPatternModal from '../init-pattern-modal';
 import BrowserURL from '../browser-url';
 import Header from '../header';
@@ -361,7 +360,6 @@ function Layout( { initialPost } ) {
 					next: nextShortcut,
 				} }
 			/>
-			<EditPostPreferencesModal />
 			<WelcomeGuide />
 			<InitPatternModal />
 			<PluginArea onError={ onPluginAreaError } />

diff --git a/packages/edit-post/src/components/preferences-modal/test/index.js b/packages/edit-post/src/components/preferences-modal/test/index.js
diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js
@@ -29,7 +29,6 @@ import {
  * Internal dependencies
  */
 import './hooks';
-import './plugins';
 import Editor from './editor';
 import { unlock } from './lock-unlock';
 

diff --git a/packages/edit-post/src/plugins/copy-content-menu-item/index.js b/packages/edit-post/src/plugins/copy-content-menu-item/index.js