Fix: InnerBlocks allowed blocks change with different sizes. (#53943)

Co-authored-by: George Mamadashvili <[email protected]>

packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js

@@ -1,9 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { useLayoutEffect, useMemo } from '@wordpress/element';
+import { useLayoutEffect, useMemo, useState } from '@wordpress/element';
 import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
+import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies
@@ -15,6 +16,14 @@ import { getLayoutType } from '../../layouts';
 
 const pendingSettingsUpdates = new WeakMap();
 
+function useShallowMemo( value ) {
+	const [ prevValue, setPrevValue ] = useState( value );
+	if ( ! isShallowEqual( prevValue, value ) ) {
+		setPrevValue( value );
+	}
+	return prevValue;
+}
+
 /**
  * This hook is a side effect which updates the block-editor store when changes
  * happen to inner block settings. The given props are transformed into a
@@ -70,16 +79,12 @@ export default function useNestedSettingsUpdate(
 		[ clientId ]
 	);
 
-	// Memoize allowedBlocks and prioritisedInnerBlocks based on the contents
-	// of the arrays. Implementors often pass a new array on every render,
+	// Implementors often pass a new array on every render,
 	// and the contents of the arrays are just strings, so the entire array
-	// can be passed as dependencies.
-
-	const _allowedBlocks = useMemo(
-		() => allowedBlocks,
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		allowedBlocks
-	);
+	// can be passed as dependencies but We need to include the length of the array,
+	// otherwise if the arrays change length but the first elements are equal the comparison,
+	// does not works as expected.
+	const _allowedBlocks = useShallowMemo( allowedBlocks );
 
 	const _prioritizedInserterBlocks = useMemo(
 		() => prioritizedInserterBlocks,

packages/e2e-tests/plugins/inner-blocks-allowed-blocks/index.js

@@ -2,14 +2,15 @@
 	const { useSelect } = wp.data;
 	const { registerBlockType } = wp.blocks;
 	const { createElement: el } = wp.element;
-	const { InnerBlocks } = wp.blockEditor;
+	const { InnerBlocks, useBlockProps } = wp.blockEditor;
 	const divProps = {
 		className: 'product',
 		style: { outline: '1px solid gray', padding: 5 },
 	};
 
 	const allowedBlocksWhenSingleEmptyChild = [ 'core/image', 'core/list' ];
-	const allowedBlocksWhenMultipleChildren = [ 'core/gallery', 'core/video' ];
+	const allowedBlocksWhenTwoChildren = [ 'core/gallery', 'core/video' ];
+	const allowedBlocksWhenTreeOrMoreChildren = [ 'core/gallery', 'core/video', 'core/list'  ];
 
 	registerBlockType( 'test/allowed-blocks-dynamic', {
 		apiVersion: 3,
@@ -25,18 +26,23 @@
 				},
 				[ props.clientId ]
 			);
+			const blockProps = useBlockProps({
+				...divProps,
+				'data-number-of-children': numberOfChildren,
+			});
+
+			let allowedBlocks = allowedBlocksWhenSingleEmptyChild;
+			if ( numberOfChildren === 2 ) {
+				allowedBlocks = allowedBlocksWhenTwoChildren;
+			} else if( numberOfChildren > 2 ){
+				allowedBlocks = allowedBlocksWhenTreeOrMoreChildren;
+			}
 
 			return el(
 				'div',
-				{
-					...divProps,
-					'data-number-of-children': numberOfChildren,
-				},
+				blockProps,
 				el( InnerBlocks, {
-					allowedBlocks:
-						numberOfChildren < 2
-							? allowedBlocksWhenSingleEmptyChild
-							: allowedBlocksWhenMultipleChildren,
+					allowedBlocks
 				} )
 			);
 		},

test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js

@@ -142,5 +142,17 @@ test.describe( 'Allowed Blocks Setting on InnerBlocks', () => {
 			'Gallery',
 			'Video',
 		] );
+
+		await blockListBox.getByRole( 'option', { name: 'Gallery' } ).click();
+
+		await editor.clickBlockToolbarButton( 'Select Allowed Blocks Dynamic' );
+		await blockAppender.click();
+
+		// It should display a different allowed block list.
+		await expect( blockListBox.getByRole( 'option' ) ).toHaveText( [
+			'Gallery',
+			'List',
+			'Video',
+		] );
 	} );
 } );