Skip to content

Commit

Permalink
useBlockProps: combine store subscriptions (#56847)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ellatrix
ellatrix authored Dec 7, 2023
1 parent 26a5d6d commit f76dcf3
Show file tree
Hide file tree
Showing 10 changed files with 128 additions and 269 deletions.
92 changes: 71 additions & 21 deletions packages/block-editor/src/components/block-list/use-block-props/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import { __, sprintf } from '@wordpress/i18n';
import {
__unstableGetBlockProps as getBlockProps,
getBlockType,
isReusableBlock,
getBlockDefaultClassName,
store as blocksStore,
} from '@wordpress/blocks';
import { useMergeRefs, useDisabled } from '@wordpress/compose';
Expand All @@ -25,17 +27,12 @@ import { BlockListBlockContext } from '../block-list-block-context';
import { useFocusFirstElement } from './use-focus-first-element';
import { useIsHovered } from './use-is-hovered';
import { useBlockEditContext } from '../../block-edit/context';
import { useBlockClassNames } from './use-block-class-names';
import { useBlockDefaultClassName } from './use-block-default-class-name';
import { useBlockCustomClassName } from './use-block-custom-class-name';
import { useBlockMovingModeClassNames } from './use-block-moving-mode-class-names';
import { useFocusHandler } from './use-focus-handler';
import { useEventHandlers } from './use-selected-block-event-handlers';
import { useNavModeExit } from './use-nav-mode-exit';
import { useBlockRefProvider } from './use-block-refs';
import { useIntersectionObserver } from './use-intersection-observer';
import { store as blockEditorStore } from '../../../store';
import useBlockOverlayActive from '../../block-content-overlay';
import { unlock } from '../../../lock-unlock';

/**
Expand Down Expand Up @@ -99,10 +96,15 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
name,
blockApiVersion,
blockTitle,
isSelected,
isPartOfSelection,
adjustScrolling,
enableAnimation,
isSubtreeDisabled,
isOutlineEnabled,
hasOverlay,
initialPosition,
classNames,
} = useSelect(
( select ) => {
const {
Expand All @@ -117,48 +119,98 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
isAncestorMultiSelected,
isFirstMultiSelectedBlock,
isBlockSubtreeDisabled,
getSettings,
isBlockHighlighted,
__unstableIsFullySelected,
__unstableSelectionHasUnmergeableBlock,
isBlockBeingDragged,
hasSelectedInnerBlock,
hasBlockMovingClientId,
canInsertBlockType,
getBlockRootClientId,
__unstableHasActiveBlockOverlayActive,
__unstableGetEditorMode,
getSelectedBlocksInitialCaretPosition,
} = unlock( select( blockEditorStore ) );
const { getActiveBlockVariation } = select( blocksStore );
const isSelected = isBlockSelected( clientId );
const _isSelected = isBlockSelected( clientId );
const isPartOfMultiSelection =
isBlockMultiSelected( clientId ) ||
isAncestorMultiSelected( clientId );
const blockName = getBlockName( clientId );
const blockType = getBlockType( blockName );
const attributes = getBlockAttributes( clientId );
const match = getActiveBlockVariation( blockName, attributes );
const { outlineMode } = getSettings();
const isMultiSelected = isBlockMultiSelected( clientId );
const checkDeep = true;
const isAncestorOfSelectedBlock = hasSelectedInnerBlock(
clientId,
checkDeep
);
const typing = isTyping();
const hasLightBlockWrapper = blockType?.apiVersion > 1;
const movingClientId = hasBlockMovingClientId();

return {
index: getBlockIndex( clientId ),
mode: getBlockMode( clientId ),
name: blockName,
blockApiVersion: blockType?.apiVersion || 1,
blockTitle: match?.title || blockType?.title,
isPartOfSelection: isSelected || isPartOfMultiSelection,
isSelected: _isSelected,
isPartOfSelection: _isSelected || isPartOfMultiSelection,
adjustScrolling:
isSelected || isFirstMultiSelectedBlock( clientId ),
_isSelected || isFirstMultiSelectedBlock( clientId ),
enableAnimation:
! isTyping() &&
! typing &&
getGlobalBlockCount() <= BLOCK_ANIMATION_THRESHOLD,
isSubtreeDisabled: isBlockSubtreeDisabled( clientId ),
isOutlineEnabled: outlineMode,
hasOverlay: __unstableHasActiveBlockOverlayActive( clientId ),
initialPosition:
_isSelected && __unstableGetEditorMode() === 'edit'
? getSelectedBlocksInitialCaretPosition()
: undefined,
classNames: classnames( {
'is-selected': _isSelected,
'is-highlighted': isBlockHighlighted( clientId ),
'is-multi-selected': isMultiSelected,
'is-partially-selected':
isMultiSelected &&
! __unstableIsFullySelected() &&
! __unstableSelectionHasUnmergeableBlock(),
'is-reusable': isReusableBlock( blockType ),
'is-dragging': isBlockBeingDragged( clientId ),
'has-child-selected': isAncestorOfSelectedBlock,
'remove-outline': _isSelected && outlineMode && typing,
'is-block-moving-mode': !! movingClientId,
'can-insert-moving-block':
movingClientId &&
canInsertBlockType(
getBlockName( movingClientId ),
getBlockRootClientId( clientId )
),
[ attributes.className ]: hasLightBlockWrapper,
[ getBlockDefaultClassName( blockName ) ]:
hasLightBlockWrapper,
} ),
};
},
[ clientId ]
);

const hasOverlay = useBlockOverlayActive( clientId );

// translators: %s: Type of block (i.e. Text, Image etc)
const blockLabel = sprintf( __( 'Block: %s' ), blockTitle );
const htmlSuffix = mode === 'html' && ! __unstableIsHtml ? '-visual' : '';
const mergedRefs = useMergeRefs( [
props.ref,
useFocusFirstElement( clientId ),
useFocusFirstElement( { clientId, initialPosition } ),
useBlockRefProvider( clientId ),
useFocusHandler( clientId ),
useEventHandlers( clientId ),
useEventHandlers( { clientId, isSelected } ),
useNavModeExit( clientId ),
useIsHovered(),
useIsHovered( { isEnabled: isOutlineEnabled } ),
useIntersectionObserver(),
useMovingAnimation( {
isSelected: isPartOfSelection,
Expand Down Expand Up @@ -190,18 +242,16 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
'data-title': blockTitle,
inert: isSubtreeDisabled ? 'true' : undefined,
className: classnames(
// The wp-block className is important for editor styles.
classnames( 'block-editor-block-list__block', {
'block-editor-block-list__block',
{
// The wp-block className is important for editor styles.
'wp-block': ! isAligned,
'has-block-overlay': hasOverlay,
} ),
},
className,
props.className,
wrapperProps.className,
useBlockClassNames( clientId ),
useBlockDefaultClassName( clientId ),
useBlockCustomClassName( clientId ),
useBlockMovingModeClassNames( clientId )
classNames
),
style: { ...wrapperProps.style, ...props.style },
};
Expand Down
66 changes: 0 additions & 66 deletions packages/block-editor/src/components/block-list/use-block-props/use-block-class-names.js
View file

This file was deleted.

44 changes: 0 additions & 44 deletions ...ges/block-editor/src/components/block-list/use-block-props/use-block-custom-class-name.js
View file

This file was deleted.

35 changes: 0 additions & 35 deletions ...es/block-editor/src/components/block-list/use-block-props/use-block-default-class-name.js
View file

This file was deleted.

35 changes: 1 addition & 34 deletions packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,38 +18,6 @@ import { store as blockEditorStore } from '../../../store';

/** @typedef {import('@wordpress/element').RefObject} RefObject */

/**
* Returns the initial position if the block needs to be focussed, `undefined`
* otherwise. The initial position is either 0 (start) or -1 (end).
*
* @param {string} clientId Block client ID.
*
* @return {number} The initial position, either 0 (start) or -1 (end).
*/
function useInitialPosition( clientId ) {
return useSelect(
( select ) => {
const {
getSelectedBlocksInitialCaretPosition,
__unstableGetEditorMode,
isBlockSelected,
} = select( blockEditorStore );

if ( ! isBlockSelected( clientId ) ) {
return;
}

if ( __unstableGetEditorMode() !== 'edit' ) {
return;
}

// If there's no initial position, return 0 to focus the start.
return getSelectedBlocksInitialCaretPosition();
},
[ clientId ]
);
}

/**
* Transitions focus to the block or inner tabbable when the block becomes
* selected and an initial position is set.
Expand All @@ -58,9 +26,8 @@ function useInitialPosition( clientId ) {
*
* @return {RefObject} React ref with the block element.
*/
export function useFocusFirstElement( clientId ) {
export function useFocusFirstElement( { clientId, initialPosition } ) {
const ref = useRef();
const initialPosition = useInitialPosition( clientId );
const { isBlockSelected, isMultiSelecting } = useSelect( blockEditorStore );

useEffect( () => {
Expand Down
Loading

1 comment on commit f76dcf3

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in f76dcf3.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7126856180
📝 Reported issues:

Please sign in to comment.