diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index 5233c063ba2094..76f3d70041464f 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; * WordPress dependencies */ import { useMergeRefs } from '@wordpress/compose'; -import { forwardRef, useMemo } from '@wordpress/element'; +import { forwardRef, useMemo, memo } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; import { getBlockSupport, @@ -42,6 +42,8 @@ function BlockContext( { children, clientId } ) { ); } +const BlockListItemsMemo = memo( BlockListItems ); + /** * InnerBlocks is a component which allows a single block to have multiple blocks * as children. The UncontrolledInnerBlocks component is used whenever the inner @@ -117,8 +119,10 @@ function UncontrolledInnerBlocks( props ) { [ defaultLayout, usedLayout, allowSizingOnChildren ] ); + // For controlled inner blocks, we don't want a change in blocks to + // re-render the blocks list. const items = ( -