diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/navigation-menu-editor.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/navigation-menu-editor.js index 640c8751a51ac1..7d3be6f631f438 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/navigation-menu-editor.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/navigation-menu-editor.js @@ -1,11 +1,10 @@ /** * WordPress dependencies */ -import { useCallback, useMemo } from '@wordpress/element'; +import { useMemo } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; import { BlockEditorProvider } from '@wordpress/block-editor'; import { createBlock } from '@wordpress/blocks'; -import { privateApis as routerPrivateApis } from '@wordpress/router'; /** * Internal dependencies @@ -13,48 +12,10 @@ import { privateApis as routerPrivateApis } from '@wordpress/router'; import { unlock } from '../../lock-unlock'; import { store as editSiteStore } from '../../store'; import NavigationMenuContent from '../sidebar-navigation-screen-navigation-menus/navigation-menu-content'; -import { - isPreviewingTheme, - currentlyPreviewingTheme, -} from '../../utils/is-previewing-theme'; - -const { useHistory } = unlock( routerPrivateApis ); const noop = () => {}; export default function NavigationMenuEditor( { navigationMenuId } ) { - const history = useHistory(); - - const onSelect = useCallback( - ( selectedBlock ) => { - const { attributes, name } = selectedBlock; - if ( - attributes.kind === 'post-type' && - attributes.id && - attributes.type && - history - ) { - history.push( { - postType: attributes.type, - postId: attributes.id, - ...( isPreviewingTheme() && { - gutenberg_theme_preview: currentlyPreviewingTheme(), - } ), - } ); - } - if ( name === 'core/page-list-item' && attributes.id && history ) { - history.push( { - postType: 'page', - postId: attributes.id, - ...( isPreviewingTheme() && { - gutenberg_theme_preview: currentlyPreviewingTheme(), - } ), - } ); - } - }, - [ history ] - ); - const { storedSettings } = useSelect( ( select ) => { const { getSettings } = unlock( select( editSiteStore ) ); @@ -83,10 +44,7 @@ export default function NavigationMenuEditor( { navigationMenuId } ) { onInput={ noop } >
- +
); diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js index 83921df8fae0b9..da89b3213632d8 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js @@ -5,15 +5,29 @@ import { chevronUp, chevronDown, moreVertical } from '@wordpress/icons'; import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; +import { useCallback } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; import { BlockTitle, store as blockEditorStore } from '@wordpress/block-editor'; +import { privateApis as routerPrivateApis } from '@wordpress/router'; const POPOVER_PROPS = { className: 'block-editor-block-settings-menu__popover', placement: 'bottom-start', }; +/** + * Internal dependencies + */ +import { + isPreviewingTheme, + currentlyPreviewingTheme, +} from '../../utils/is-previewing-theme'; +import { unlock } from '../../lock-unlock'; + +const { useHistory } = unlock( routerPrivateApis ); + export default function LeafMoreMenu( props ) { + const history = useHistory(); const { block } = props; const { clientId } = block; const { moveBlocksDown, moveBlocksUp, removeBlocks } = @@ -25,6 +39,12 @@ export default function LeafMoreMenu( props ) { BlockTitle( { clientId, maximumLength: 25 } ) ); + const goToLabel = sprintf( + /* translators: %s: block name */ + __( 'Go to %s' ), + BlockTitle( { clientId, maximumLength: 25 } ) + ); + const rootClientId = useSelect( ( select ) => { const { getBlockRootClientId } = select( blockEditorStore ); @@ -34,6 +54,36 @@ export default function LeafMoreMenu( props ) { [ clientId ] ); + const onGoToPage = useCallback( + ( selectedBlock ) => { + const { attributes, name } = selectedBlock; + if ( + attributes.kind === 'post-type' && + attributes.id && + attributes.type && + history + ) { + history.push( { + postType: attributes.type, + postId: attributes.id, + ...( isPreviewingTheme() && { + gutenberg_theme_preview: currentlyPreviewingTheme(), + } ), + } ); + } + if ( name === 'core/page-list-item' && attributes.id && history ) { + history.push( { + postType: 'page', + postId: attributes.id, + ...( isPreviewingTheme() && { + gutenberg_theme_preview: currentlyPreviewingTheme(), + } ), + } ); + } + }, + [ history ] + ); + return ( { __( 'Move down' ) } + { block.attributes?.id && ( + { + onGoToPage(); + onClose(); + } } + > + { goToLabel } + + ) } { const { @@ -89,11 +89,9 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) { block.clientId, createBlock( 'core/navigation-link', block.attributes ) ); - } else { - onSelect( block ); } }, - [ onSelect, __unstableMarkNextChangeAsNotPersistent, replaceBlock ] + [ __unstableMarkNextChangeAsNotPersistent, replaceBlock ] ); // The hidden block is needed because it makes block edit side effects trigger.