From 30bb83048ef0cb98a74033e6e037918511778567 Mon Sep 17 00:00:00 2001 From: Benjamin Intal Date: Thu, 17 Aug 2023 13:41:05 +0800 Subject: [PATCH] fix (reusable block): error when dragging blocks out of reusable block (#2817) * fix (reusable block): error when dragging blocks out of reusable block Fixes #2768 * fix, tabs block, column resizing, and margin bottom inside a group block gives an error --------- Co-authored-by: Benjamin Intal --- src/block-components/margin-bottom/index.js | 13 ++++++++----- src/block/tabs/edit.js | 4 ++-- src/components/resizable-column/index.js | 9 +++++---- src/hooks/use-block-context.js | 18 ++++-------------- 4 files changed, 19 insertions(+), 25 deletions(-) diff --git a/src/block-components/margin-bottom/index.js b/src/block-components/margin-bottom/index.js index 35333dd3b..8fdd19f28 100644 --- a/src/block-components/margin-bottom/index.js +++ b/src/block-components/margin-bottom/index.js @@ -15,6 +15,7 @@ import { import { useBlockEditContext } from '@wordpress/block-editor' import { applyFilters } from '@wordpress/hooks' import { memo } from '@wordpress/element' +import { select } from '@wordpress/data' export const MarginBottom = memo( props => { const { clientId } = useBlockEditContext() @@ -44,12 +45,14 @@ export const MarginBottom = memo( props => { } // Don't show the margin bottom draggable indicator if this is in a row block. - const isRowBlock = parentBlock && - parentBlock.name === 'core/group' && - parentBlock.attributes.layout?.type === 'flex' && - parentBlock.attributes.layout?.flexWrap === 'nowrap' + const isGroupBlock = parentBlock && parentBlock.name === 'core/group' + let isRowLayout = false + if ( isGroupBlock ) { + const attributes = select( 'core/block-editor' ).getBlockAttributes( parentBlock.clientId ) + isRowLayout = attributes.layout?.type === 'flex' && attributes.layout?.flexWrap === 'nowrap' + } - if ( isRowBlock ) { + if ( isGroupBlock && isRowLayout ) { return null } diff --git a/src/block/tabs/edit.js b/src/block/tabs/edit.js index d95f56e58..3951e8f96 100644 --- a/src/block/tabs/edit.js +++ b/src/block/tabs/edit.js @@ -48,7 +48,7 @@ import { * WordPress dependencies */ import { compose } from '@wordpress/compose' -import { dispatch } from '@wordpress/data' +import { dispatch, select } from '@wordpress/data' import { __, sprintf } from '@wordpress/i18n' const TEMPLATE = [ @@ -136,7 +136,7 @@ const Edit = props => { // Update the number of tab labels const clientId = tabLabelsBlock.clientId - const tabLabels = tabLabelsBlock.attributes.tabLabels + const tabLabels = select( 'core/block-editor' ).getBlockAttributes( tabLabelsBlock.clientId ).tabLabels // If we added a new tab, then add a new tab label if ( numColumns > tabLabels.length ) { diff --git a/src/components/resizable-column/index.js b/src/components/resizable-column/index.js index 296c5ef21..9c596eb7c 100644 --- a/src/components/resizable-column/index.js +++ b/src/components/resizable-column/index.js @@ -103,9 +103,6 @@ const ResizableColumn = props => { 'stk-column-resizeable', props.className, ] ) - const { - columnGap, columnGapTablet, columnGapMobile, - } = ( parentBlock?.attributes || {} ) const enable = { top: false, @@ -124,6 +121,11 @@ const ResizableColumn = props => { const onResizeStart = ( _event, _direction ) => { // toggleSelection( false ) + const parentBlock = select( 'core/block-editor' ).getBlock( parentBlockClientId ) + const { + columnGap, columnGapTablet, columnGapMobile, + } = ( parentBlock?.attributes || {} ) + // Get the column gap amounts, we need these to calculate percentages when resizing columns. const parentColumnGaps = { desktop: columnGap || 0, @@ -132,7 +134,6 @@ const ResizableColumn = props => { } const editorDom = getEditorDom() - const parentBlock = select( 'core/block-editor' ).getBlock( parentBlockClientId ) const adjacentBlocks = _adjacentBlocks.current = parentBlock.innerBlocks // In desktop, get all the column widths. diff --git a/src/hooks/use-block-context.js b/src/hooks/use-block-context.js index e0347aed4..c651f1534 100644 --- a/src/hooks/use-block-context.js +++ b/src/hooks/use-block-context.js @@ -142,10 +142,9 @@ let prevClientIds = null // changes. subscribe( () => { const tree = select( 'core/block-editor' ).__unstableGetClientIdsTree() - if ( ! prevClientIds ) { prevClientIds = tree - const blocks = fixReusableInnerBlocks( select( 'core/block-editor' ).getBlocks() ) + const blocks = fixReusableInnerBlocks( tree ) dispatch( 'stackable/block-context' ).setBlockTree( blocks ) return } @@ -155,7 +154,7 @@ subscribe( () => { // even when blocks are edited. if ( tree !== prevClientIds ) { prevClientIds = tree - const blocks = fixReusableInnerBlocks( select( 'core/block-editor' ).getBlocks() ) + const blocks = fixReusableInnerBlocks( tree ) dispatch( 'stackable/block-context' ).setBlockTree( blocks ) } } ) @@ -164,19 +163,10 @@ subscribe( () => { // Applies only core/block (reusable blocks) - Adds missing innerBlocks const fixReusableInnerBlocks = blocks => { return ( blocks || [] ).map( block => { - if ( ! [ 'core/widget-area', 'core/block', 'core/template-part', 'core/post-content' ].includes( block.name ) ) { - return { - ...block, - innerBlocks: fixReusableInnerBlocks( block.innerBlocks ), - } - } - const results = select( 'core/block-editor' ).__unstableGetClientIdsTree( block.clientId ) return { ...block, - innerBlocks: fixReusableInnerBlocks( results.map( ( { clientId } ) => { - const [ innerResult ] = select( 'core/block-editor' ).getBlocksByClientId( clientId ) - return innerResult - } ) ), + innerBlocks: fixReusableInnerBlocks( block.innerBlocks ), + name: select( 'core/block-editor' ).getBlockName( block.clientId ), } } ) }