Columns mobile block: avoid returning unstable innerWidths from useSe…

…lect (#46403)
WordPress · Dec 12, 2022 · 6690494 · 6690494
1 parent 7c4fe12
commit 6690494
Showing 1 changed file with 18 additions and 21 deletions.
diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { View, Dimensions } from 'react-native';
-import { map } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -445,7 +445,7 @@ const ColumnsEdit = ( props ) => {
 	const {
 		columnCount,
 		isDefaultColumns,
-		innerWidths = [],
+		innerBlocks,
 		hasParents,
 		parentBlockAlignment,
 		editorSidebarOpened,
@@ -458,38 +458,35 @@ const ColumnsEdit = ( props ) => {
 				getBlockAttributes,
 			} = select( blockEditorStore );
 			const { isEditorSidebarOpened } = select( 'core/edit-post' );
-			const innerBlocks = getBlocks( clientId );
 
-			const isContentEmpty = map(
-				innerBlocks,
-				( innerBlock ) => innerBlock.innerBlocks.length
+			const innerBlocksList = getBlocks( clientId );
+
+			const isContentEmpty = innerBlocksList.every(
+				( innerBlock ) => innerBlock.innerBlocks.length === 0
 			);
 
-			const innerColumnsWidths = innerBlocks.map( ( inn ) => ( {
-				clientId: inn.clientId,
-				attributes: { width: inn.attributes.width },
-			} ) );
 			const parents = getBlockParents( clientId, true );
 
 			return {
 				columnCount: getBlockCount( clientId ),
-				isDefaultColumns: ! isContentEmpty.filter( Boolean ).length,
-				innerWidths: innerColumnsWidths,
-				hasParents: !! parents.length,
+				isDefaultColumns: isContentEmpty,
+				innerBlocks: innerBlocksList,
+				hasParents: parents.length > 0,
 				parentBlockAlignment: getBlockAttributes( parents[ 0 ] )?.align,
 				editorSidebarOpened: isSelected && isEditorSidebarOpened(),
 			};
 		},
 		[ clientId, isSelected ]
 	);
 
-	const memoizedInnerWidths = useMemo( () => {
-		return innerWidths;
-	}, [
-		// The JSON.stringify is used because innerWidth is always a new reference.
-		// The innerBlocks is a new reference after each attribute change of any nested block.
-		JSON.stringify( innerWidths ),
-	] );
+	const innerWidths = useMemo(
+		() =>
+			innerBlocks.map( ( inn ) => ( {
+				clientId: inn.clientId,
+				attributes: { width: inn.attributes.width },
+			} ) ),
+		[ innerBlocks ]
+	);
 
 	const [ isVisible, setIsVisible ] = useState( false );
 
@@ -509,7 +506,7 @@ const ColumnsEdit = ( props ) => {
 		<View style={ style }>
 			<ColumnsEditContainerWrapper
 				columnCount={ columnCount }
-				innerWidths={ memoizedInnerWidths }
+				innerWidths={ innerWidths }
 				hasParents={ hasParents }
 				parentBlockAlignment={ parentBlockAlignment }
 				editorSidebarOpened={ editorSidebarOpened }