From 5b4ab8ff15029cf043486c352b0c22a065dd4b82 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 19 Apr 2024 15:53:19 +0100 Subject: [PATCH 1/3] Editor: Unify the more menu --- .../edit-post/src/components/header/index.js | 7 +- .../src/components/header/more-menu/index.js | 69 +++----- .../more-menu/manage-patterns-menu-item.js | 39 +++++ .../more-menu/welcome-guide-menu-item.js} | 0 .../header/preferences-menu-item/index.js | 31 ---- .../components/header/writing-menu/index.js | 73 -------- .../edit-post/src/components/layout/index.js | 2 - .../preferences-modal/test/index.js | 28 ---- packages/edit-post/src/index.js | 1 - .../plugins/copy-content-menu-item/index.js | 29 ---- packages/edit-post/src/plugins/index.js | 85 ---------- .../index.js | 36 ---- .../src/components/header-edit-mode/index.js | 8 +- .../header-edit-mode/more-menu/index.js | 153 +---------------- .../tools-more-menu-group/index.js | 16 -- .../more-menu/copy-content-menu-item.js | 8 +- .../editor/src/components/more-menu/index.js | 158 ++++++++++++++++++ .../more-menu/tools-more-menu-group.js | 11 ++ .../more-menu/view-more-menu-group.js | 12 ++ packages/editor/src/private-apis.js | 8 +- 20 files changed, 273 insertions(+), 501 deletions(-) create mode 100644 packages/edit-post/src/components/header/more-menu/manage-patterns-menu-item.js rename packages/edit-post/src/{plugins/welcome-guide-menu-item/index.js => components/header/more-menu/welcome-guide-menu-item.js} (100%) delete mode 100644 packages/edit-post/src/components/header/preferences-menu-item/index.js delete mode 100644 packages/edit-post/src/components/header/writing-menu/index.js delete mode 100644 packages/edit-post/src/components/preferences-modal/test/index.js delete mode 100644 packages/edit-post/src/plugins/copy-content-menu-item/index.js delete mode 100644 packages/edit-post/src/plugins/index.js delete mode 100644 packages/edit-post/src/plugins/keyboard-shortcuts-help-menu-item/index.js delete mode 100644 packages/edit-site/src/components/header-edit-mode/tools-more-menu-group/index.js rename packages/{edit-site/src/components/header-edit-mode => editor/src/components}/more-menu/copy-content-menu-item.js (87%) create mode 100644 packages/editor/src/components/more-menu/index.js create mode 100644 packages/editor/src/components/more-menu/tools-more-menu-group.js create mode 100644 packages/editor/src/components/more-menu/view-more-menu-group.js diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 3aabcf87fae1e2..6aed47542ebcfe 100644 --- 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 ) && ( ) } - + + ); diff --git a/packages/edit-post/src/components/header/more-menu/index.js b/packages/edit-post/src/components/header/more-menu/index.js index df67ddae775a5e..c9f1c50251ca21 100644 --- 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 ( - - { ( { onClose } ) => ( - <> - { showIconLabels && ! isLargeViewport && ( - - ) } - - - + { isLargeViewport && ( + + - - - - - + ) } - + + + + + + ); }; 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 new file mode 100644 index 00000000000000..9c528214699d6f --- /dev/null +++ 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 ( + + { __( 'Manage patterns' ) } + + ); +} + +export default ManagePatternsMenuItem; diff --git a/packages/edit-post/src/plugins/welcome-guide-menu-item/index.js b/packages/edit-post/src/components/header/more-menu/welcome-guide-menu-item.js similarity index 100% rename from packages/edit-post/src/plugins/welcome-guide-menu-item/index.js rename to packages/edit-post/src/components/header/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 deleted file mode 100644 index cf8db6123da117..00000000000000 --- a/packages/edit-post/src/components/header/preferences-menu-item/index.js +++ /dev/null @@ -1,31 +0,0 @@ -/** - * WordPress dependencies - */ -import { useDispatch } from '@wordpress/data'; -import { __ } from '@wordpress/i18n'; -import { MenuItem } from '@wordpress/components'; -import { privateApis as editorPrivateApis } from '@wordpress/editor'; - -/** - * Internal dependencies - */ -import { unlock } from '../../../lock-unlock'; - -const { interfaceStore } = unlock( editorPrivateApis ); - -/** - * Internal dependencies - */ - -export default function PreferencesMenuItem() { - const { openModal } = useDispatch( interfaceStore ); - return ( - { - openModal( 'editor/preferences' ); - } } - > - { __( 'Preferences' ) } - - ); -} diff --git a/packages/edit-post/src/components/header/writing-menu/index.js b/packages/edit-post/src/components/header/writing-menu/index.js deleted file mode 100644 index 9c369c4717e9f6..00000000000000 --- a/packages/edit-post/src/components/header/writing-menu/index.js +++ /dev/null @@ -1,73 +0,0 @@ -/** - * WordPress dependencies - */ -import { useDispatch } from '@wordpress/data'; -import { MenuGroup } from '@wordpress/components'; -import { __, _x } from '@wordpress/i18n'; -import { useViewportMatch } from '@wordpress/compose'; -import { displayShortcut } from '@wordpress/keycodes'; -import { - PreferenceToggleMenuItem, - store as preferencesStore, -} from '@wordpress/preferences'; -import { store as editorStore } from '@wordpress/editor'; - -function WritingMenu() { - const { set: setPreference } = useDispatch( preferencesStore ); - const { toggleDistractionFree } = useDispatch( editorStore ); - - const turnOffDistractionFree = () => { - setPreference( 'core', 'distractionFree', false ); - }; - - const isLargeViewport = useViewportMatch( 'medium' ); - if ( ! isLargeViewport ) { - return null; - } - - return ( - - - - - - - ); -} - -export default WritingMenu; diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 09a08da149ee03..39f34fe02961ff 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -41,7 +41,6 @@ import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands 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'; @@ -358,7 +357,6 @@ function Layout( { initialPost } ) { next: nextShortcut, } } /> - diff --git a/packages/edit-post/src/components/preferences-modal/test/index.js b/packages/edit-post/src/components/preferences-modal/test/index.js deleted file mode 100644 index 01ac1a88fbe7d8..00000000000000 --- a/packages/edit-post/src/components/preferences-modal/test/index.js +++ /dev/null @@ -1,28 +0,0 @@ -/** - * External dependencies - */ -import { render, screen } from '@testing-library/react'; - -/** - * WordPress dependencies - */ -import { useSelect } from '@wordpress/data'; - -/** - * Internal dependencies - */ -import EditPostPreferencesModal from '../'; - -// This allows us to tweak the returned value on each test. -jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() ); -jest.mock( '@wordpress/compose/src/hooks/use-viewport-match', () => jest.fn() ); - -describe( 'EditPostPreferencesModal', () => { - it( 'should not render when the modal is not active', () => { - useSelect.mockImplementation( () => [ false, false, false ] ); - render( ); - expect( - screen.queryByRole( 'dialog', { name: 'Preferences' } ) - ).not.toBeInTheDocument(); - } ); -} ); diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js index b9555f6590d711..656fa54d87bfeb 100644 --- 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 deleted file mode 100644 index 60bbbf9c83d6eb..00000000000000 --- a/packages/edit-post/src/plugins/copy-content-menu-item/index.js +++ /dev/null @@ -1,29 +0,0 @@ -/** - * WordPress dependencies - */ -import { MenuItem } from '@wordpress/components'; -import { useSelect, useDispatch } from '@wordpress/data'; -import { __ } from '@wordpress/i18n'; -import { useCopyToClipboard } from '@wordpress/compose'; -import { store as noticesStore } from '@wordpress/notices'; -import { store as editorStore } from '@wordpress/editor'; - -export default function CopyContentMenuItem() { - const { createNotice } = useDispatch( noticesStore ); - const { getEditedPostAttribute } = useSelect( editorStore ); - - function getText() { - return getEditedPostAttribute( 'content' ); - } - - function onSuccess() { - createNotice( 'info', __( 'All content copied.' ), { - isDismissible: true, - type: 'snackbar', - } ); - } - - const ref = useCopyToClipboard( getText, onSuccess ); - - return { __( 'Copy all blocks' ) }; -} diff --git a/packages/edit-post/src/plugins/index.js b/packages/edit-post/src/plugins/index.js deleted file mode 100644 index aa663659acbdc1..00000000000000 --- a/packages/edit-post/src/plugins/index.js +++ /dev/null @@ -1,85 +0,0 @@ -/** - * WordPress dependencies - */ -import { MenuItem, VisuallyHidden } from '@wordpress/components'; -import { store as coreStore } from '@wordpress/core-data'; -import { store as editorStore } from '@wordpress/editor'; -import { useSelect } from '@wordpress/data'; -import { external } from '@wordpress/icons'; -import { __ } from '@wordpress/i18n'; -import { registerPlugin } from '@wordpress/plugins'; -import { addQueryArgs } from '@wordpress/url'; - -/** - * Internal dependencies - */ -import CopyContentMenuItem from './copy-content-menu-item'; -import KeyboardShortcutsHelpMenuItem from './keyboard-shortcuts-help-menu-item'; -import ToolsMoreMenuGroup from '../components/header/tools-more-menu-group'; -import WelcomeGuideMenuItem from './welcome-guide-menu-item'; - -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 ( - - { __( 'Manage patterns' ) } - - ); -} - -registerPlugin( 'edit-post', { - render() { - return ( - <> - - { ( { onClose } ) => ( - <> - - - - - - { __( 'Help' ) } - - { - /* translators: accessibility text */ - __( '(opens in a new tab)' ) - } - - - - ) } - - - ); - }, -} ); diff --git a/packages/edit-post/src/plugins/keyboard-shortcuts-help-menu-item/index.js b/packages/edit-post/src/plugins/keyboard-shortcuts-help-menu-item/index.js deleted file mode 100644 index e86807ac4644f4..00000000000000 --- a/packages/edit-post/src/plugins/keyboard-shortcuts-help-menu-item/index.js +++ /dev/null @@ -1,36 +0,0 @@ -/** - * WordPress dependencies - */ -import { MenuItem } from '@wordpress/components'; -import { withDispatch } from '@wordpress/data'; -import { __ } from '@wordpress/i18n'; -import { displayShortcut } from '@wordpress/keycodes'; -import { privateApis as editorPrivateApis } from '@wordpress/editor'; - -/** - * Internal dependencies - */ -import { unlock } from '../../lock-unlock'; - -const { interfaceStore } = unlock( editorPrivateApis ); - -export function KeyboardShortcutsHelpMenuItem( { openModal } ) { - return ( - { - openModal( 'editor/keyboard-shortcut-help' ); - } } - shortcut={ displayShortcut.access( 'h' ) } - > - { __( 'Keyboard shortcuts' ) } - - ); -} - -export default withDispatch( ( dispatch ) => { - const { openModal } = dispatch( interfaceStore ); - - return { - openModal, - }; -} )( KeyboardShortcutsHelpMenuItem ); diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js index 902ccb19093d89..1f9f75902bc84e 100644 --- a/packages/edit-site/src/components/header-edit-mode/index.js +++ b/packages/edit-site/src/components/header-edit-mode/index.js @@ -31,7 +31,7 @@ import { /** * Internal dependencies */ -import MoreMenu from './more-menu'; +import SiteEditorMoreMenuItems from './more-menu'; import SaveButton from '../save-button'; import DocumentTools from './document-tools'; import { store as editSiteStore } from '../../store'; @@ -43,7 +43,7 @@ import { unlock } from '../../lock-unlock'; import { FOCUSABLE_ENTITIES } from '../../utils/constants'; const { useHasBlockToolbar } = unlock( blockEditorPrivateApis ); -const { PostViewLink, PreviewDropdown, PinnedItems } = +const { MoreMenu, PostViewLink, PreviewDropdown, PinnedItems } = unlock( editorPrivateApis ); export default function HeaderEditMode() { @@ -67,7 +67,6 @@ export default function HeaderEditMode() { templateType: getEditedPostType(), blockEditorMode: __unstableGetEditorMode(), blockSelectionStart: getBlockSelectionStart(), - showIconLabels: getPreference( 'core', 'showIconLabels' ), editorCanvasView: unlock( select( editSiteStore ) ).getEditorCanvasContainerView(), @@ -206,7 +205,8 @@ export default function HeaderEditMode() { { ! isDistractionFree && } - + + diff --git a/packages/edit-site/src/components/header-edit-mode/more-menu/index.js b/packages/edit-site/src/components/header-edit-mode/more-menu/index.js index 5e9577a6286321..f0df5cf57fe6f0 100644 --- a/packages/edit-site/src/components/header-edit-mode/more-menu/index.js +++ b/packages/edit-site/src/components/header-edit-mode/more-menu/index.js @@ -1,167 +1,30 @@ /** * WordPress dependencies */ -import { __, _x } from '@wordpress/i18n'; -import { useSelect, useDispatch } from '@wordpress/data'; -import { displayShortcut } from '@wordpress/keycodes'; -import { external, moreVertical } from '@wordpress/icons'; -import { - MenuGroup, - MenuItem, - VisuallyHidden, - DropdownMenu, -} from '@wordpress/components'; -import { - PreferenceToggleMenuItem, - store as preferencesStore, -} from '@wordpress/preferences'; +import { useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; -import { - store as editorStore, - privateApis as editorPrivateApis, -} from '@wordpress/editor'; +import { privateApis as editorPrivateApis } from '@wordpress/editor'; /** * Internal dependencies */ -import ToolsMoreMenuGroup from '../tools-more-menu-group'; import SiteExport from './site-export'; import WelcomeGuideMenuItem from './welcome-guide-menu-item'; -import CopyContentMenuItem from './copy-content-menu-item'; import { unlock } from '../../../lock-unlock'; -const { ModeSwitcher, ActionItem, interfaceStore, PreferencesModal } = - unlock( editorPrivateApis ); +const { ToolsMoreMenuGroup, PreferencesModal } = unlock( editorPrivateApis ); -export default function MoreMenu( { showIconLabels } ) { - const { openModal } = useDispatch( interfaceStore ); - const { set: setPreference } = useDispatch( preferencesStore ); +export default function MoreMenu() { const isBlockBasedTheme = useSelect( ( select ) => { return select( coreStore ).getCurrentTheme().is_block_theme; }, [] ); - const { toggleDistractionFree } = useDispatch( editorStore ); - - const turnOffDistractionFree = () => { - setPreference( 'core', 'distractionFree', false ); - }; - return ( <> - - { ( { onClose } ) => ( - <> - - - - - - - - - { isBlockBasedTheme && } - - openModal( 'editor/keyboard-shortcut-help' ) - } - shortcut={ displayShortcut.access( 'h' ) } - > - { __( 'Keyboard shortcuts' ) } - - - - - { __( 'Help' ) } - - { - /* translators: accessibility text */ - __( '(opens in a new tab)' ) - } - - - - - - - openModal( 'editor/preferences' ) - } - > - { __( 'Preferences' ) } - - - - ) } - + + { isBlockBasedTheme && } + + ); diff --git a/packages/edit-site/src/components/header-edit-mode/tools-more-menu-group/index.js b/packages/edit-site/src/components/header-edit-mode/tools-more-menu-group/index.js deleted file mode 100644 index 8babbdd0c3dc71..00000000000000 --- a/packages/edit-site/src/components/header-edit-mode/tools-more-menu-group/index.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * WordPress dependencies - */ -import { createSlotFill } from '@wordpress/components'; - -const { Fill: ToolsMoreMenuGroup, Slot } = createSlotFill( - 'EditSiteToolsMoreMenuGroup' -); - -ToolsMoreMenuGroup.Slot = ( { fillProps } ) => ( - - { ( fills ) => fills && fills.length > 0 } - -); - -export default ToolsMoreMenuGroup; diff --git a/packages/edit-site/src/components/header-edit-mode/more-menu/copy-content-menu-item.js b/packages/editor/src/components/more-menu/copy-content-menu-item.js similarity index 87% rename from packages/edit-site/src/components/header-edit-mode/more-menu/copy-content-menu-item.js rename to packages/editor/src/components/more-menu/copy-content-menu-item.js index 887817692239c9..8b9de82f7ac96a 100644 --- a/packages/edit-site/src/components/header-edit-mode/more-menu/copy-content-menu-item.js +++ b/packages/editor/src/components/more-menu/copy-content-menu-item.js @@ -12,18 +12,18 @@ import { __unstableSerializeAndClean } from '@wordpress/blocks'; /** * Internal dependencies */ -import { store as editSiteStore } from '../../../store'; +import { store as editorStore } from '../../store'; export default function CopyContentMenuItem() { const { createNotice } = useDispatch( noticesStore ); - const { getEditedPostId, getEditedPostType } = useSelect( editSiteStore ); + const { getCurrentPostId, getCurrentPostType } = useSelect( editorStore ); const { getEditedEntityRecord } = useSelect( coreStore ); function getText() { const record = getEditedEntityRecord( 'postType', - getEditedPostType(), - getEditedPostId() + getCurrentPostType(), + getCurrentPostId() ); if ( ! record ) { return ''; diff --git a/packages/editor/src/components/more-menu/index.js b/packages/editor/src/components/more-menu/index.js new file mode 100644 index 00000000000000..6ccc01c6ac049c --- /dev/null +++ b/packages/editor/src/components/more-menu/index.js @@ -0,0 +1,158 @@ +/** + * WordPress dependencies + */ +import { __, _x } from '@wordpress/i18n'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { displayShortcut } from '@wordpress/keycodes'; +import { external, moreVertical } from '@wordpress/icons'; +import { + MenuGroup, + MenuItem, + VisuallyHidden, + DropdownMenu, +} from '@wordpress/components'; +import { + PreferenceToggleMenuItem, + store as preferencesStore, +} from '@wordpress/preferences'; +import { store as interfaceStore, ActionItem } from '@wordpress/interface'; + +/** + * Internal dependencies + */ +import CopyContentMenuItem from './copy-content-menu-item'; +import ModeSwitcher from '../mode-switcher'; +import ToolsMoreMenuGroup from './tools-more-menu-group'; +import ViewMoreMenuGroup from './view-more-menu-group'; +import { store as editorStore } from '../../store'; + +export default function MoreMenu() { + const { openModal } = useDispatch( interfaceStore ); + const { set: setPreference } = useDispatch( preferencesStore ); + const { toggleDistractionFree } = useDispatch( editorStore ); + const showIconLabels = useSelect( + ( select ) => + select( preferencesStore ).get( 'core', 'showIconLabels' ), + [] + ); + const turnOffDistractionFree = () => { + setPreference( 'core', 'distractionFree', false ); + }; + + return ( + <> + + { ( { onClose } ) => ( + <> + + + + + + + + + + + openModal( 'editor/keyboard-shortcut-help' ) + } + shortcut={ displayShortcut.access( 'h' ) } + > + { __( 'Keyboard shortcuts' ) } + + + + { __( 'Help' ) } + + { + /* translators: accessibility text */ + __( '(opens in a new tab)' ) + } + + + + + + + openModal( 'editor/preferences' ) + } + > + { __( 'Preferences' ) } + + + + ) } + + + ); +} diff --git a/packages/editor/src/components/more-menu/tools-more-menu-group.js b/packages/editor/src/components/more-menu/tools-more-menu-group.js new file mode 100644 index 00000000000000..7dec9d9d490d86 --- /dev/null +++ b/packages/editor/src/components/more-menu/tools-more-menu-group.js @@ -0,0 +1,11 @@ +/** + * WordPress dependencies + */ +import { createSlotFill } from '@wordpress/components'; + +const { Fill: ToolsMoreMenuGroup, Slot } = + createSlotFill( 'ToolsMoreMenuGroup' ); + +ToolsMoreMenuGroup.Slot = ( { fillProps } ) => ; + +export default ToolsMoreMenuGroup; diff --git a/packages/editor/src/components/more-menu/view-more-menu-group.js b/packages/editor/src/components/more-menu/view-more-menu-group.js new file mode 100644 index 00000000000000..98561eac1f31f8 --- /dev/null +++ b/packages/editor/src/components/more-menu/view-more-menu-group.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { createSlotFill } from '@wordpress/components'; + +const { Fill: ViewMoreMenuGroup, Slot } = createSlotFill( + Symbol( 'ToolsMoreMenuGroup' ) +); + +ViewMoreMenuGroup.Slot = ( { fillProps } ) => ; + +export default ViewMoreMenuGroup; diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js index bff79cc034f1a7..aae3762794b4d6 100644 --- a/packages/editor/src/private-apis.js +++ b/packages/editor/src/private-apis.js @@ -15,7 +15,7 @@ import useBlockEditorSettings from './components/provider/use-block-editor-setti import DocumentTools from './components/document-tools'; import InserterSidebar from './components/inserter-sidebar'; import ListViewSidebar from './components/list-view-sidebar'; -import ModeSwitcher from './components/mode-switcher'; +import MoreMenu from './components/more-menu'; import PatternOverridesPanel from './components/pattern-overrides-panel'; import PluginPostExcerpt from './components/post-excerpt/plugin'; import PostPanelRow from './components/post-panel-row'; @@ -26,6 +26,8 @@ import PostActions from './components/post-actions'; import { usePostActions } from './components/post-actions/actions'; import PostCardPanel from './components/post-card-panel'; import PostStatus from './components/post-status'; +import ToolsMoreMenuGroup from './components/more-menu/tools-more-menu-group'; +import ViewMoreMenuGroup from './components/more-menu/view-more-menu-group'; const { store: interfaceStore, ...remainingInterfaceApis } = interfaceApis; @@ -37,7 +39,7 @@ lock( privateApis, { EntitiesSavedStatesExtensible, InserterSidebar, ListViewSidebar, - ModeSwitcher, + MoreMenu, PatternOverridesPanel, PluginPostExcerpt, PostActions, @@ -48,6 +50,8 @@ lock( privateApis, { usePostActions, PostCardPanel, PostStatus, + ToolsMoreMenuGroup, + ViewMoreMenuGroup, // This is a temporary private API while we're updating the site editor to use EditorProvider. useAutoSwitchEditorSidebars, From 4ac6137aed5aece36ac2af49e26ba9d3295fdbe0 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 22 Apr 2024 09:05:13 +0100 Subject: [PATCH 2/3] Fix mobile unit tests --- .../editor/src/components/more-menu/view-more-menu-group.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/more-menu/view-more-menu-group.js b/packages/editor/src/components/more-menu/view-more-menu-group.js index 98561eac1f31f8..23e2cf82d82c6d 100644 --- a/packages/editor/src/components/more-menu/view-more-menu-group.js +++ b/packages/editor/src/components/more-menu/view-more-menu-group.js @@ -2,9 +2,10 @@ * WordPress dependencies */ import { createSlotFill } from '@wordpress/components'; +import { Platform } from '@wordpress/element'; const { Fill: ViewMoreMenuGroup, Slot } = createSlotFill( - Symbol( 'ToolsMoreMenuGroup' ) + Platform.OS === 'web' ? Symbol( 'ViewMoreMenuGroup' ) : 'ViewMoreMenuGroup' ); ViewMoreMenuGroup.Slot = ( { fillProps } ) => ; From e1257a02c417ad51eac10c0a19f96203a44d06da Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 22 Apr 2024 09:48:06 +0100 Subject: [PATCH 3/3] Fix text labels in the site editor --- packages/edit-site/src/components/header-edit-mode/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js index 1f9f75902bc84e..f56e370de6438f 100644 --- a/packages/edit-site/src/components/header-edit-mode/index.js +++ b/packages/edit-site/src/components/header-edit-mode/index.js @@ -67,6 +67,7 @@ export default function HeaderEditMode() { templateType: getEditedPostType(), blockEditorMode: __unstableGetEditorMode(), blockSelectionStart: getBlockSelectionStart(), + showIconLabels: getPreference( 'core', 'showIconLabels' ), editorCanvasView: unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),