Add select-parent button to block toolbar "More options" menu. (#40105)

* Add select-parent button to block toolbar "More options" menu. * Update packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js Co-authored-by: Alex Stine <[email protected]> Co-authored-by: Alex Stine <[email protected]>
WordPress · Apr 7, 2022 · 90849f9 · 90849f9
1 parent 4ef32a1
commit 90849f9
Showing 1 changed file with 62 additions and 4 deletions.
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
@@ -6,25 +6,32 @@ import { castArray, flow, noop } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { getBlockType, serialize } from '@wordpress/blocks';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { moreVertical } from '@wordpress/icons';
-import { Children, cloneElement, useCallback } from '@wordpress/element';
-import { serialize } from '@wordpress/blocks';
+import {
+ Children,
+ cloneElement,
+ useCallback,
+ useRef,
+} from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { useCopyToClipboard } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import BlockActions from '../block-actions';
+import BlockIcon from '../block-icon';
 import BlockModeToggle from './block-mode-toggle';
 import BlockHTMLConvertButton from './block-html-convert-button';
 import __unstableBlockSettingsMenuFirstItem from './block-settings-menu-first-item';
 import BlockSettingsMenuControls from '../block-settings-menu-controls';
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
+import { useShowMoversGestures } from '../block-toolbar/utils';
 
 const POPOVER_PROPS = {
  className: 'block-editor-block-settings-menu__popover',
@@ -47,20 +54,34 @@ export function BlockSettingsDropdown( {
  const count = blockClientIds.length;
  const firstBlockClientId = blockClientIds[ 0 ];
  const {
+ firstParentClientId,
+ hasReducedUI,
  onlyBlock,
+ parentBlockType,
  previousBlockClientId,
  nextBlockClientId,
  selectedBlockClientIds,
  } = useSelect(
  ( select ) => {
  const {
  getBlockCount,
+ getBlockName,
+ getBlockParents,
  getPreviousBlockClientId,
  getNextBlockClientId,
  getSelectedBlockClientIds,
+ getSettings,
  } = select( blockEditorStore );
+
+ const parents = getBlockParents( firstBlockClientId );
+ const _firstParentClientId = parents[ parents.length - 1 ];
+ const parentBlockName = getBlockName( _firstParentClientId );
+
  return {
+ firstParentClientId: _firstParentClientId,
+ hasReducedUI: getSettings().hasReducedUI,
  onlyBlock: 1 === getBlockCount(),
+ parentBlockType: getBlockType( parentBlockName ),
  previousBlockClientId: getPreviousBlockClientId(
  firstBlockClientId
  ),
@@ -87,6 +108,10 @@ export function BlockSettingsDropdown( {
  };
  }, [] );
 
+ const { selectBlock, toggleBlockHighlight } = useDispatch(
+ blockEditorStore
+ );
+
  const updateSelectionAfterDuplicate = useCallback(
  __experimentalSelectBlock
  ? async ( clientIdsPromise ) => {
@@ -135,6 +160,19 @@ export function BlockSettingsDropdown( {
  );
  const removeBlockLabel = count === 1 ? label : __( 'Remove blocks' );
 
+ // Allows highlighting the parent block outline when focusing or hovering
+ // the parent block selector within the child.
+ const selectParentButtonRef = useRef();
+ const { gestures: showParentOutlineGestures } = useShowMoversGestures( {
+ ref: selectParentButtonRef,
+ onChange( isFocused ) {
+ if ( isFocused && hasReducedUI ) {
+ return;
+ }
+ toggleBlockHighlight( firstParentClientId, isFocused );
+ },
+ } );
+
  return (
  <BlockActions
  clientIds={ clientIds }
@@ -167,6 +205,26 @@ export function BlockSettingsDropdown( {
  <__unstableBlockSettingsMenuFirstItem.Slot
  fillProps={ { onClose } }
  />
+ { firstParentClientId !== undefined && (
+ <MenuItem
+ { ...showParentOutlineGestures }
+ ref={ selectParentButtonRef }
+ icon={
+ <BlockIcon
+ icon={ parentBlockType.icon }
+ />
+ }
+ onClick={ () =>
+ selectBlock( firstParentClientId )
+ }
+ >
+ { sprintf(
+ /* translators: %s: Name of the block's parent. */
+ __( 'Select parent block (%s)' ),
+ parentBlockType.title
+ ) }
+ </MenuItem>
+ ) }
  { count === 1 && (
  <BlockHTMLConvertButton
  clientId={ firstBlockClientId }