Skip to content

Commit

Permalink
Block Editor: Move 'ParentSelectorMenuItem' into a separate folder
Browse files Browse the repository at this point in the history
  • Loading branch information
Mamaduka committed Feb 18, 2024
1 parent 98e6dab commit bfa2827
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 43 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/**
* WordPress dependencies
*/
import { useRef } from '@wordpress/element';
import { MenuItem } from '@wordpress/components';
import { useViewportMatch } from '@wordpress/compose';
import { useDispatch } from '@wordpress/data';
import { __, sprintf } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import BlockIcon from '../block-icon';
import { useShowHoveredOrFocusedGestures } from '../block-toolbar/utils';
import { store as blockEditorStore } from '../../store';

export default function BlockParentSelectorMenuItem( {
parentClientId,
parentBlockType,
} ) {
const isSmallViewport = useViewportMatch( 'medium', '<' );
const { selectBlock } = useDispatch( blockEditorStore );

// Allows highlighting the parent block outline when focusing or hovering
// the parent block selector within the child.
const menuItemRef = useRef();
const gesturesProps = useShowHoveredOrFocusedGestures( {
ref: menuItemRef,
highlightParent: true,
} );

if ( ! isSmallViewport ) {
return null;
}

return (
<MenuItem
{ ...gesturesProps }
ref={ menuItemRef }
icon={ <BlockIcon icon={ parentBlockType.icon } /> }
onClick={ () => selectBlock( parentClientId ) }
>
{ sprintf(
/* translators: %s: Name of the block's parent. */
__( 'Select parent block (%s)' ),
parentBlockType.title
) }
</MenuItem>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -9,30 +9,24 @@ import {
import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
import { useDispatch, useSelect } from '@wordpress/data';
import { moreVertical } from '@wordpress/icons';
import {
Children,
cloneElement,
useCallback,
useRef,
} from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import { Children, cloneElement, useCallback } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import {
store as keyboardShortcutsStore,
__unstableUseShortcutEventMatch,
} from '@wordpress/keyboard-shortcuts';
import { pipe, useCopyToClipboard, useViewportMatch } from '@wordpress/compose';
import { pipe, useCopyToClipboard } from '@wordpress/compose';

/**
* Internal dependencies
*/
import BlockActions from '../block-actions';
import BlockIcon from '../block-icon';
import BlockHTMLConvertButton from './block-html-convert-button';
import __unstableBlockSettingsMenuFirstItem from './block-settings-menu-first-item';
import BlockSettingsMenuControls from '../block-settings-menu-controls';
import BlockParentSelectorMenuItem from './block-parent-selector-menu-item';
import { store as blockEditorStore } from '../../store';
import { unlock } from '../../lock-unlock';
import { useShowHoveredOrFocusedGestures } from '../block-toolbar/utils';

const POPOVER_PROPS = {
className: 'block-editor-block-settings-menu__popover',
Expand All @@ -45,38 +39,6 @@ function CopyMenuItem( { blocks, onCopy, label } ) {
return <MenuItem ref={ ref }>{ copyMenuItemLabel }</MenuItem>;
}

function ParentSelectorMenuItem( { parentClientId, parentBlockType } ) {
const isSmallViewport = useViewportMatch( 'medium', '<' );
const { selectBlock } = useDispatch( blockEditorStore );

// Allows highlighting the parent block outline when focusing or hovering
// the parent block selector within the child.
const menuItemRef = useRef();
const gesturesProps = useShowHoveredOrFocusedGestures( {
ref: menuItemRef,
highlightParent: true,
} );

if ( ! isSmallViewport ) {
return null;
}

return (
<MenuItem
{ ...gesturesProps }
ref={ menuItemRef }
icon={ <BlockIcon icon={ parentBlockType.icon } /> }
onClick={ () => selectBlock( parentClientId ) }
>
{ sprintf(
/* translators: %s: Name of the block's parent. */
__( 'Select parent block (%s)' ),
parentBlockType.title
) }
</MenuItem>
);
}

export function BlockSettingsDropdown( {
block,
clientIds,
Expand Down Expand Up @@ -314,7 +276,7 @@ export function BlockSettingsDropdown( {
/>
{ ! parentBlockIsSelected &&
!! firstParentClientId && (
<ParentSelectorMenuItem
<BlockParentSelectorMenuItem
parentClientId={
firstParentClientId
}
Expand Down

0 comments on commit bfa2827

Please sign in to comment.