Add "Go to block" navigator menu action

WordPress · Jun 12, 2020 · fa5b9b0 · fa5b9b0
1 parent 85167ff
commit fa5b9b0
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 8 deletions.
diff --git a/packages/block-editor/src/components/block-navigation/block.js b/packages/block-editor/src/components/block-navigation/block.js
@@ -9,10 +9,13 @@ import classnames from 'classnames';
 import {
 	__experimentalTreeGridCell as TreeGridCell,
 	__experimentalTreeGridItem as TreeGridItem,
+	MenuGroup,
+	MenuItem,
 } from '@wordpress/components';
-
+import { __ } from '@wordpress/i18n';
 import { moreVertical } from '@wordpress/icons';
 import { useState, useRef, useEffect } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -30,7 +33,7 @@ import { useBlockNavigationContext } from './context';
 export default function BlockNavigationBlock( {
 	block,
 	isSelected,
-	selectBlock,
+	onClick,
 	position,
 	level,
 	rowCount,
@@ -41,6 +44,9 @@ export default function BlockNavigationBlock( {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
 	const [ isFocused, setIsFocused ] = useState( false );
+	const { selectBlock: selectEditorBlock } = useDispatch(
+		'core/block-editor'
+	);
 	const { clientId } = block;
 
 	// Subtract 1 from rowCount, as it includes the block appender.
@@ -93,7 +99,7 @@ export default function BlockNavigationBlock( {
 						/>
 						<BlockNavigationBlockContents
 							block={ block }
-							onClick={ () => selectBlock( block.clientId ) }
+							onClick={ () => onClick( block.clientId ) }
 							isSelected={ isSelected }
 							position={ position }
 							siblingCount={ siblingCount }
@@ -151,8 +157,18 @@ export default function BlockNavigationBlock( {
 								onFocus,
 							} }
 							disableOpenOnArrowDown
-							__experimentalSelectBlock={ selectBlock }
-						/>
+							__experimentalSelectBlock={ onClick }
+						>
+							<MenuGroup>
+								<MenuItem
+									onClick={ () => {
+										selectEditorBlock( clientId );
+									} }
+								>
+									{ __( 'Go to block' ) }
+								</MenuItem>
+							</MenuGroup>
+						</BlockSettingsDropdown>
 					) }
 				</TreeGridCell>
 			) }

diff --git a/packages/block-editor/src/components/block-navigation/branch.js b/packages/block-editor/src/components/block-navigation/branch.js
@@ -59,7 +59,7 @@ export default function BlockNavigationBranch( props ) {
 					<Fragment key={ clientId }>
 						<BlockNavigationBlock
 							block={ block }
-							selectBlock={ selectBlock }
+							onClick={ selectBlock }
 							isSelected={ selectedBlockClientId === clientId }
 							level={ level }
 							position={ position }

diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
@@ -16,7 +16,7 @@ import {
 import { useSelect } from '@wordpress/data';
 import { moreHorizontal } from '@wordpress/icons';
 
-import { useState, useCallback } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 import { serialize } from '@wordpress/blocks';
 
 /**
@@ -38,6 +38,7 @@ const POPOVER_PROPS = {
 export function BlockSettingsDropdown( {
 	clientIds,
 	__experimentalSelectBlock,
+	children,
 	...props
 } ) {
 	const blockClientIds = castArray( clientIds );
@@ -62,7 +63,6 @@ export function BlockSettingsDropdown( {
 		};
 	}, [] );
 
-	const [ hasCopied, setHasCopied ] = useState();
 	const updateSelection = useCallback(
 		__experimentalSelectBlock
 			? async ( clientIdsPromise ) => {
@@ -168,6 +168,7 @@ export function BlockSettingsDropdown( {
 								fillProps={ { onClose } }
 								clientIds={ clientIds }
 							/>
+							{ children }
 							<MenuGroup>
 								{ ! isLocked && (
 									<MenuItem