Fix: InnerBlocks allowed blocks change with different sizes.

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

@@ -1,9 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { useLayoutEffect, useMemo } from '@wordpress/element';
+import {
+	useLayoutEffect,
+	useMemo,
+	useRef,
+	useEffect,
+} 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 +21,20 @@ import { getLayoutType } from '../../layouts';
 
 const pendingSettingsUpdates = new WeakMap();
 
+function useShallowMemo( value ) {
+	const ref = useRef();
+
+	// Store current value in ref if it is not shallow equal to the previous value.
+	useEffect( () => {
+		if ( ! isShallowEqual( ref.current, value ) ) {
+			ref.current = value;
+		}
+	}, [ value ] ); // Re-run when value changes.
+
+	// Return previous value (happens before update in useEffect above).
+	return ref.current;
+}
+
 /**
  * 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 +90,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

@@ -9,7 +9,8 @@
 	};
 
 	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,20 @@
 				},
 				[ props.clientId ]
 			);
-
+            let allowedBlocks = allowedBlocksWhenSingleEmptyChild;
+            if ( props.numberOfChildren === 2 ) {
+                allowedBlocks = allowedBlocksWhenTwoChildren;
+            } else if( props.numberOfChildren > 2 ){
+                allowedBlocks = allowedBlocksWhenTreeOrMoreChildren;
+            }
 			return el(
 				'div',
 				{
 					...divProps,
 					'data-number-of-children': numberOfChildren,
 				},
 				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',
+		] );
 	} );
 } );