From 52832a8747cc50e9fac64c088dfd618abd653d35 Mon Sep 17 00:00:00 2001 From: Ella van Durpe Date: Fri, 8 May 2020 10:45:04 +0200 Subject: [PATCH 1/2] Block: move new props to hook --- .../src/components/block-list/block.js | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index e9923bc4273b31..8200e60c525b54 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -39,7 +39,6 @@ function BlockListBlock( { isLocked, clientId, rootClientId, - isHighlighted, isSelected, isMultiSelected, isPartOfMultiSelection, @@ -66,9 +65,13 @@ function BlockListBlock( { // 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 { isDraggingBlocks } = useSelect( ( select ) => { + const { isDragging, isHighlighted } = useSelect( ( select ) => { + const { isDraggingBlocks, isBlockHighlighted } = select( + 'core/block-editor' + ); return { - isDraggingBlocks: select( 'core/block-editor' ).isDraggingBlocks(), + isDragging: isDraggingBlocks(), + isHighlighted: isBlockHighlighted( clientId ), }; }, [] ); @@ -83,8 +86,6 @@ function BlockListBlock( { false ); const isUnregisteredBlock = name === getUnregisteredTypeHandlerName(); - const isDragging = - isDraggingBlocks && ( isSelected || isPartOfMultiSelection ); // Determine whether the block has props to apply to the wrapper. if ( blockType.getEditWrapperProps ) { @@ -113,7 +114,8 @@ function BlockListBlock( { 'is-highlighted': isHighlighted, 'is-multi-selected': isMultiSelected, 'is-reusable': isReusableBlock( blockType ), - 'is-dragging': isDragging, + 'is-dragging': + isDragging && ( isSelected || isPartOfMultiSelection ), 'is-typing': isTypingWithinBlock, 'is-focused': isFocusMode && ( isSelected || isAncestorOfSelectedBlock ), @@ -219,7 +221,6 @@ const applyWithSelect = withSelect( getTemplateLock, __unstableGetBlockWithoutInnerBlocks, isNavigationMode, - isBlockHighlighted, } = select( 'core/block-editor' ); const block = __unstableGetBlockWithoutInnerBlocks( clientId ); const isSelected = isBlockSelected( clientId ); @@ -239,8 +240,9 @@ const applyWithSelect = withSelect( // is not correct. const { name, attributes, isValid } = block || {}; + // Do not add new properties here, use `useDispatch` instead to avoid + // leaking new props to the public API (editor.BlockListBlock filter). return { - isHighlighted: isBlockHighlighted( clientId ), isMultiSelected: isBlockMultiSelected( clientId ), isPartOfMultiSelection: isBlockMultiSelected( clientId ) || @@ -287,6 +289,8 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => { __unstableMarkLastChangeAsPersistent, } = dispatch( 'core/block-editor' ); + // Do not add new properties here, use `useDispatch` instead to avoid + // leaking new props to the public API (editor.BlockListBlock filter). return { setAttributes( newAttributes ) { const { clientId } = ownProps; From 03e7e1922db29ef937f64820b7a753548f4fd821 Mon Sep 17 00:00:00 2001 From: Ella van Durpe Date: Fri, 8 May 2020 10:49:15 +0200 Subject: [PATCH 2/2] Fix typo --- packages/block-editor/src/components/block-list/block.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index 8200e60c525b54..240f6220a234f6 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -240,7 +240,7 @@ const applyWithSelect = withSelect( // is not correct. const { name, attributes, isValid } = block || {}; - // Do not add new properties here, use `useDispatch` instead to avoid + // 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 ),