From 19e8135dc8d68610abc13015b22810ccc445023e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Mon, 19 Oct 2020 16:25:37 +0200 Subject: [PATCH] BlockListBlock: reduce passed props (#26251) --- .../src/components/block-list/block.js | 171 +++++++++--------- 1 file changed, 86 insertions(+), 85 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index c63c1e527d732..d2ebae05d2471 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -29,8 +29,12 @@ import { useSelect, useDispatch, } from '@wordpress/data'; -import { withViewportMatch } from '@wordpress/viewport'; -import { compose, pure, ifCondition } from '@wordpress/compose'; +import { + compose, + pure, + ifCondition, + useViewportMatch, +} from '@wordpress/compose'; /** * Internal dependencies @@ -78,7 +82,6 @@ function Block( { children, isHtml, ...props } ) { function BlockListBlock( { mode, - isFocusMode, isLocked, clientId, rootClientId, @@ -104,17 +107,21 @@ function BlockListBlock( { enableAnimation, activeEntityBlockId, } ) { + const isLargeViewport = useViewportMatch( 'medium' ); // In addition to withSelect, we should favor using useSelect in this // component going forward to avoid leaking new props to the public API // (editor.BlockListBlock filter) - const { isDragging, isHighlighted } = useSelect( + const { isDragging, isHighlighted, isFocusMode } = useSelect( ( select ) => { - const { isBlockBeingDragged, isBlockHighlighted } = select( - 'core/block-editor' - ); + const { + isBlockBeingDragged, + isBlockHighlighted, + getSettings, + } = select( 'core/block-editor' ); return { isDragging: isBlockBeingDragged( clientId ), isHighlighted: isBlockHighlighted( clientId ), + isFocusMode: getSettings().focusMode, }; }, [ clientId ] @@ -164,8 +171,10 @@ function BlockListBlock( { 'is-dragging': isDragging, 'is-typing': isTypingWithinBlock, 'is-focused': - isFocusMode && ( isSelected || isAncestorOfSelectedBlock ), - 'is-focus-mode': isFocusMode, + isFocusMode && + isLargeViewport && + ( isSelected || isAncestorOfSelectedBlock ), + 'is-focus-mode': isFocusMode && isLargeViewport, 'has-child-selected': isAncestorOfSelectedBlock && ! isDragging, 'is-active-entity': activeEntityBlockId === clientId, }, @@ -263,82 +272,75 @@ function BlockListBlock( { ); } -const applyWithSelect = withSelect( - ( select, { clientId, rootClientId, isLargeViewport } ) => { - const { - isBlockSelected, - isAncestorMultiSelected, - isBlockMultiSelected, - isFirstMultiSelectedBlock, - getLastMultiSelectedBlockClientId, - isTyping, - getBlockMode, - isSelectionEnabled, - getSettings, - hasSelectedInnerBlock, - getTemplateLock, - __unstableGetBlockWithoutInnerBlocks, - getMultiSelectedBlockClientIds, - } = select( 'core/block-editor' ); - const block = __unstableGetBlockWithoutInnerBlocks( clientId ); - const isSelected = isBlockSelected( clientId ); - const { focusMode, isRTL } = getSettings(); - const templateLock = getTemplateLock( rootClientId ); - const checkDeep = true; - - // "ancestor" is the more appropriate label due to "deep" check - const isAncestorOfSelectedBlock = hasSelectedInnerBlock( - clientId, - checkDeep - ); +const applyWithSelect = withSelect( ( select, { clientId, rootClientId } ) => { + const { + isBlockSelected, + isAncestorMultiSelected, + isBlockMultiSelected, + isFirstMultiSelectedBlock, + getLastMultiSelectedBlockClientId, + isTyping, + getBlockMode, + isSelectionEnabled, + hasSelectedInnerBlock, + getTemplateLock, + __unstableGetBlockWithoutInnerBlocks, + getMultiSelectedBlockClientIds, + } = select( 'core/block-editor' ); + const block = __unstableGetBlockWithoutInnerBlocks( clientId ); + const isSelected = isBlockSelected( clientId ); + const templateLock = getTemplateLock( rootClientId ); + const checkDeep = true; + + // "ancestor" is the more appropriate label due to "deep" check + const isAncestorOfSelectedBlock = hasSelectedInnerBlock( + clientId, + checkDeep + ); - // The fallback to `{}` is a temporary fix. - // This function should never be called when a block is not present in - // the state. It happens now because the order in withSelect rendering - // is not correct. - const { name, attributes, isValid } = block || {}; - const isFirstMultiSelected = isFirstMultiSelectedBlock( clientId ); - - // Do not add new properties here, use `useSelect` instead to avoid - // leaking new props to the public API (editor.BlockListBlock filter). - return { - isMultiSelected: isBlockMultiSelected( clientId ), - isPartOfMultiSelection: - isBlockMultiSelected( clientId ) || - isAncestorMultiSelected( clientId ), - isFirstMultiSelected, - isLastMultiSelected: - getLastMultiSelectedBlockClientId() === clientId, - multiSelectedClientIds: isFirstMultiSelected - ? getMultiSelectedBlockClientIds() - : undefined, - - // We only care about this prop when the block is selected - // Thus to avoid unnecessary rerenders we avoid updating the prop if - // the block is not selected. - isTypingWithinBlock: - ( isSelected || isAncestorOfSelectedBlock ) && isTyping(), - - mode: getBlockMode( clientId ), - isSelectionEnabled: isSelectionEnabled(), - isLocked: !! templateLock, - isFocusMode: focusMode && isLargeViewport, - isRTL, - - // Users of the editor.BlockListBlock filter used to be able to - // access the block prop. - // Ideally these blocks would rely on the clientId prop only. - // This is kept for backward compatibility reasons. - block, - - name, - attributes, - isValid, - isSelected, - isAncestorOfSelectedBlock, - }; - } -); + // The fallback to `{}` is a temporary fix. + // This function should never be called when a block is not present in + // the state. It happens now because the order in withSelect rendering + // is not correct. + const { name, attributes, isValid } = block || {}; + const isFirstMultiSelected = isFirstMultiSelectedBlock( clientId ); + + // Do not add new properties here, use `useSelect` instead to avoid + // leaking new props to the public API (editor.BlockListBlock filter). + return { + isMultiSelected: isBlockMultiSelected( clientId ), + isPartOfMultiSelection: + isBlockMultiSelected( clientId ) || + isAncestorMultiSelected( clientId ), + isFirstMultiSelected, + isLastMultiSelected: getLastMultiSelectedBlockClientId() === clientId, + multiSelectedClientIds: isFirstMultiSelected + ? getMultiSelectedBlockClientIds() + : undefined, + + // We only care about this prop when the block is selected + // Thus to avoid unnecessary rerenders we avoid updating the prop if + // the block is not selected. + isTypingWithinBlock: + ( isSelected || isAncestorOfSelectedBlock ) && isTyping(), + + mode: getBlockMode( clientId ), + isSelectionEnabled: isSelectionEnabled(), + isLocked: !! templateLock, + + // Users of the editor.BlockListBlock filter used to be able to + // access the block prop. + // Ideally these blocks would rely on the clientId prop only. + // This is kept for backward compatibility reasons. + block, + + name, + attributes, + isValid, + isSelected, + isAncestorOfSelectedBlock, + }; +} ); const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => { const { @@ -417,7 +419,6 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => { export default compose( pure, - withViewportMatch( { isLargeViewport: 'medium' } ), applyWithSelect, applyWithDispatch, // block is sometimes not mounted at the right time, causing it be undefined