diff --git a/packages/block-editor/src/components/use-no-recursive-renders/index.js b/packages/block-editor/src/components/use-no-recursive-renders/index.js
index 75930f70b5283..81df505674771 100644
--- a/packages/block-editor/src/components/use-no-recursive-renders/index.js
+++ b/packages/block-editor/src/components/use-no-recursive-renders/index.js
@@ -41,7 +41,8 @@ function addToBlockType( renderedBlocks, blockName, uniqueId ) {
* tree. Blocks susceptible to recursion can use this hook in their `Edit`
* function to prevent said recursion.
*
- * @param {*} uniqueId Any value that acts as a unique identifier for a block instance.
+ * @param {*} uniqueId Any value that acts as a unique identifier for a block instance.
+ * @param {string} blockName Optional block name.
*
* @return {[boolean, Function]} A tuple of:
* - a boolean describing whether the provided id
@@ -49,9 +50,10 @@ function addToBlockType( renderedBlocks, blockName, uniqueId ) {
* - a React context provider to be used to wrap
* other elements.
*/
-export default function useNoRecursiveRenders( uniqueId ) {
+export default function useNoRecursiveRenders( uniqueId, blockName = '' ) {
const previouslyRenderedBlocks = useContext( RenderedRefsContext );
- const { name: blockName } = useBlockEditContext();
+ const { name } = useBlockEditContext();
+ blockName = blockName || name;
const hasAlreadyRendered = Boolean(
previouslyRenderedBlocks[ blockName ]?.has( uniqueId )
);
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index 8faaf999ed09c..3129e73eb8752 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -10,6 +10,7 @@ import { motion, AnimatePresence } from 'framer-motion';
import {
VisualEditorGlobalKeyboardShortcuts,
PostTitle,
+ store as editorStore,
} from '@wordpress/editor';
import {
WritingFlow,
@@ -28,6 +29,7 @@ import {
__experimentalLayoutStyle as LayoutStyle,
__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
__unstableIframe as Iframe,
+ __experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
} from '@wordpress/block-editor';
import { useRef } from '@wordpress/element';
import { Button } from '@wordpress/components';
@@ -80,14 +82,25 @@ function MaybeIframe( {
}
export default function VisualEditor( { styles } ) {
- const { deviceType, isTemplateMode } = useSelect( ( select ) => {
+ const {
+ deviceType,
+ isTemplateMode,
+ wrapperBlockName,
+ wrapperUniqueId,
+ } = useSelect( ( select ) => {
const {
isEditingTemplate,
__experimentalGetPreviewDeviceType,
} = select( editPostStore );
+ const { getCurrentPostId, getCurrentPostType } = select( editorStore );
return {
deviceType: __experimentalGetPreviewDeviceType(),
isTemplateMode: isEditingTemplate(),
+ wrapperBlockName:
+ getCurrentPostType() === 'wp_block'
+ ? 'core/block'
+ : 'core/post-content',
+ wrapperUniqueId: getCurrentPostId(),
};
}, [] );
const hasMetaBoxes = useSelect(
@@ -148,6 +161,11 @@ export default function VisualEditor( { styles } ) {
const blockSelectionClearerRef = useBlockSelectionClearer( true );
+ const [ , RecursionProvider ] = useNoRecursiveRenders(
+ wrapperUniqueId,
+ wrapperBlockName
+ );
+
return (
) }
-
+
+
+