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 <[email protected]>
gambitph · Aug 17, 2023 · 30bb830 · 30bb830
1 parent 18a2613
commit 30bb830
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 ),
 		}
 	} )
 }