Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor useShowMoversGestures hook #52792

Merged
merged 2 commits into from
Jul 31, 2023
Merged

Refactor useShowMoversGestures hook #52792

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bf1a3b4
Refactor `useShowMoversGestures` hook
ntsekouras Jul 20, 2023
a944784
feedback
ntsekouras Jul 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 30 additions & 42 deletions packages/block-editor/src/components/block-parent-selector/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { useRef } from '@wordpress/element';
*/
import useBlockDisplayInformation from '../use-block-display-information';
import BlockIcon from '../block-icon';
import { useShowMoversGestures } from '../block-toolbar/utils';
import { useShowHoveredOrFocusedGestures } from '../block-toolbar/utils';
import { store as blockEditorStore } from '../../store';
import { unlock } from '../../lock-unlock';

Expand All @@ -23,52 +23,40 @@ import { unlock } from '../../lock-unlock';
* @return {WPComponent} Parent block selector.
*/
export default function BlockParentSelector() {
const { selectBlock, toggleBlockHighlight } =
useDispatch( blockEditorStore );
const { firstParentClientId, isVisible, isDistractionFree } = useSelect(
( select ) => {
const {
getBlockName,
getBlockParents,
getSelectedBlockClientId,
getSettings,
getBlockEditingMode,
} = unlock( select( blockEditorStore ) );
const { hasBlockSupport } = select( blocksStore );
const selectedBlockClientId = getSelectedBlockClientId();
const parents = getBlockParents( selectedBlockClientId );
const _firstParentClientId = parents[ parents.length - 1 ];
const parentBlockName = getBlockName( _firstParentClientId );
const _parentBlockType = getBlockType( parentBlockName );
const settings = getSettings();
return {
firstParentClientId: _firstParentClientId,
isVisible:
_firstParentClientId &&
getBlockEditingMode( _firstParentClientId ) === 'default' &&
hasBlockSupport(
_parentBlockType,
'__experimentalParentSelector',
true
),
isDistractionFree: settings.isDistractionFree,
};
},
[]
);
const { selectBlock } = useDispatch( blockEditorStore );
const { firstParentClientId, isVisible } = useSelect( ( select ) => {
const {
getBlockName,
getBlockParents,
getSelectedBlockClientId,
getBlockEditingMode,
} = unlock( select( blockEditorStore ) );
const { hasBlockSupport } = select( blocksStore );
const selectedBlockClientId = getSelectedBlockClientId();
const parents = getBlockParents( selectedBlockClientId );
const _firstParentClientId = parents[ parents.length - 1 ];
const parentBlockName = getBlockName( _firstParentClientId );
const _parentBlockType = getBlockType( parentBlockName );
return {
firstParentClientId: _firstParentClientId,
isVisible:
_firstParentClientId &&
getBlockEditingMode( _firstParentClientId ) === 'default' &&
hasBlockSupport(
_parentBlockType,
'__experimentalParentSelector',
true
),
};
}, [] );
const blockInformation = useBlockDisplayInformation( firstParentClientId );

// Allows highlighting the parent block outline when focusing or hovering
// the parent block selector within the child.
const nodeRef = useRef();
const { gestures: showMoversGestures } = useShowMoversGestures( {
const showHoveredOrFocusedGestures = useShowHoveredOrFocusedGestures( {
ref: nodeRef,
onChange( isFocused ) {
if ( isFocused && isDistractionFree ) {
return;
}
toggleBlockHighlight( firstParentClientId, isFocused );
},
highlightParent: true,
} );

if ( ! isVisible ) {
Expand All @@ -80,7 +68,7 @@ export default function BlockParentSelector() {
className="block-editor-block-parent-selector"
key={ firstParentClientId }
ref={ nodeRef }
{ ...showMoversGestures }
{ ...showHoveredOrFocusedGestures }
>
<ToolbarButton
className="block-editor-block-parent-selector__button"
Expand Down
17 changes: 4 additions & 13 deletions packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ 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 { useShowMoversGestures } from '../block-toolbar/utils';
import { useShowHoveredOrFocusedGestures } from '../block-toolbar/utils';

const POPOVER_PROPS = {
className: 'block-editor-block-settings-menu__popover',
Expand Down Expand Up @@ -60,7 +60,6 @@ export function BlockSettingsDropdown( {
const firstBlockClientId = blockClientIds[ 0 ];
const {
firstParentClientId,
isDistractionFree,
onlyBlock,
parentBlockType,
previousBlockClientId,
Expand All @@ -73,7 +72,6 @@ export function BlockSettingsDropdown( {
getBlockRootClientId,
getPreviousBlockClientId,
getSelectedBlockClientIds,
getSettings,
getBlockAttributes,
} = select( blockEditorStore );

Expand All @@ -86,7 +84,6 @@ export function BlockSettingsDropdown( {

return {
firstParentClientId: _firstParentClientId,
isDistractionFree: getSettings().isDistractionFree,
onlyBlock: 1 === getBlockCount( _firstParentClientId ),
parentBlockType:
_firstParentClientId &&
Expand Down Expand Up @@ -122,8 +119,7 @@ export function BlockSettingsDropdown( {
}, [] );
const isMatch = __unstableUseShortcutEventMatch();

const { selectBlock, toggleBlockHighlight } =
useDispatch( blockEditorStore );
const { selectBlock } = useDispatch( blockEditorStore );
const hasSelectedBlocks = selectedBlockClientIds.length > 0;

const updateSelectionAfterDuplicate = useCallback(
Expand Down Expand Up @@ -168,14 +164,9 @@ export function BlockSettingsDropdown( {
// Allows highlighting the parent block outline when focusing or hovering
// the parent block selector within the child.
const selectParentButtonRef = useRef();
const { gestures: showParentOutlineGestures } = useShowMoversGestures( {
const showParentOutlineGestures = useShowHoveredOrFocusedGestures( {
ref: selectParentButtonRef,
onChange( isFocused ) {
if ( isFocused && isDistractionFree ) {
return;
}
toggleBlockHighlight( firstParentClientId, isFocused );
},
highlightParent: true,
} );

// This can occur when the selected block (the parent)
Expand Down
99 changes: 36 additions & 63 deletions packages/block-editor/src/components/block-toolbar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { useSelect, useDispatch } from '@wordpress/data';
import { useSelect } from '@wordpress/data';
import { useRef } from '@wordpress/element';
import { useViewportMatch } from '@wordpress/compose';
import {
Expand All @@ -29,76 +29,52 @@ import BlockSettingsMenu from '../block-settings-menu';
import { BlockLockToolbar } from '../block-lock';
import { BlockGroupToolbar } from '../convert-to-group-buttons';
import BlockEditVisuallyButton from '../block-edit-visually-button';
import { useShowMoversGestures } from './utils';
import { useShowHoveredOrFocusedGestures } from './utils';
import { store as blockEditorStore } from '../../store';
import __unstableBlockNameContext from './block-name-context';
import { unlock } from '../../lock-unlock';

const BlockToolbar = ( { hideDragHandle } ) => {
const { getSelectedBlockClientId } = useSelect( blockEditorStore );
const {
blockClientIds,
blockType,
hasFixedToolbar,
isDistractionFree,
isValid,
isVisual,
blockEditingMode,
} = useSelect( ( select ) => {
const {
getBlockName,
getBlockMode,
getSelectedBlockClientIds,
isBlockValid,
getBlockRootClientId,
getSettings,
getBlockEditingMode,
} = unlock( select( blockEditorStore ) );
const selectedBlockClientIds = getSelectedBlockClientIds();
const selectedBlockClientId = selectedBlockClientIds[ 0 ];
const blockRootClientId = getBlockRootClientId( selectedBlockClientId );
const settings = getSettings();

return {
blockClientIds: selectedBlockClientIds,
blockType:
selectedBlockClientId &&
getBlockType( getBlockName( selectedBlockClientId ) ),
hasFixedToolbar: settings.hasFixedToolbar,
isDistractionFree: settings.isDistractionFree,
rootClientId: blockRootClientId,
isValid: selectedBlockClientIds.every( ( id ) =>
isBlockValid( id )
),
isVisual: selectedBlockClientIds.every(
( id ) => getBlockMode( id ) === 'visual'
),
blockEditingMode: getBlockEditingMode( selectedBlockClientId ),
};
}, [] );
const { blockClientIds, blockType, isValid, isVisual, blockEditingMode } =
useSelect( ( select ) => {
const {
getBlockName,
getBlockMode,
getSelectedBlockClientIds,
isBlockValid,
getBlockRootClientId,
getBlockEditingMode,
} = unlock( select( blockEditorStore ) );
const selectedBlockClientIds = getSelectedBlockClientIds();
const selectedBlockClientId = selectedBlockClientIds[ 0 ];
const blockRootClientId = getBlockRootClientId(
selectedBlockClientId
);
return {
blockClientIds: selectedBlockClientIds,
blockType:
selectedBlockClientId &&
getBlockType( getBlockName( selectedBlockClientId ) ),
rootClientId: blockRootClientId,
isValid: selectedBlockClientIds.every( ( id ) =>
isBlockValid( id )
),
isVisual: selectedBlockClientIds.every(
( id ) => getBlockMode( id ) === 'visual'
),
blockEditingMode: getBlockEditingMode( selectedBlockClientId ),
};
}, [] );

const toolbarWrapperRef = useRef( null );

// Handles highlighting the current block outline on hover or focus of the
// block type toolbar area.
const { toggleBlockHighlight } = useDispatch( blockEditorStore );
const nodeRef = useRef();
const { showMovers, gestures: showMoversGestures } = useShowMoversGestures(
{
ref: nodeRef,
onChange( isFocused ) {
if ( isFocused && isDistractionFree ) {
return;
}
toggleBlockHighlight( getSelectedBlockClientId(), isFocused );
},
}
);
const showHoveredOrFocusedGestures = useShowHoveredOrFocusedGestures( {
ref: nodeRef,
} );

// Account for the cases where the block toolbar is rendered within the
// header area and not contextually to the block.
const displayHeaderToolbar =
useViewportMatch( 'medium', '<' ) || hasFixedToolbar;
const isLargeViewport = ! useViewportMatch( 'medium', '<' );

if ( blockType ) {
Expand All @@ -107,8 +83,6 @@ const BlockToolbar = ( { hideDragHandle } ) => {
}
}

const shouldShowMovers = displayHeaderToolbar || showMovers;

if ( blockClientIds.length === 0 ) {
return null;
}
Expand All @@ -119,7 +93,6 @@ const BlockToolbar = ( { hideDragHandle } ) => {
isReusableBlock( blockType ) || isTemplatePart( blockType );

const classes = classnames( 'block-editor-block-toolbar', {
'is-showing-movers': shouldShowMovers,
'is-synced': isSynced,
} );

Expand All @@ -130,7 +103,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
blockEditingMode === 'default' && <BlockParentSelector /> }
{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
blockEditingMode === 'default' && (
<div ref={ nodeRef } { ...showMoversGestures }>
<div ref={ nodeRef } { ...showHoveredOrFocusedGestures }>
<ToolbarGroup className="block-editor-block-toolbar__block-controls">
<BlockSwitcher clientIds={ blockClientIds } />
{ ! isMultiToolbar && (
Expand Down
Loading