Edit Post: Prevent rendering self also wwhen the wrapper block matches (

#31592)
WordPress · May 11, 2021 · ad26537 · ad26537
1 parent cb8ecd0
commit ad26537
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 17 deletions.
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
@@ -41,17 +41,19 @@ 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
  *                                 has already been rendered;
  *                               - 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
@@ -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 (
 		<motion.div
 			className={ classnames( 'edit-post-visual-editor', {
@@ -200,19 +218,21 @@ export default function VisualEditor( { styles } ) {
 											<PostTitle />
 										</div>
 									) }
-									<BlockList
-										__experimentalLayout={
-											themeSupportsLayout
-												? {
-														type: 'default',
-														// Find a way to inject this in the support flag code (hooks).
-														alignments: themeSupportsLayout
-															? alignments
-															: undefined,
-												  }
-												: undefined
-										}
-									/>
+									<RecursionProvider>
+										<BlockList
+											__experimentalLayout={
+												themeSupportsLayout
+													? {
+															type: 'default',
+															// Find a way to inject this in the support flag code (hooks).
+															alignments: themeSupportsLayout
+																? alignments
+																: undefined,
+													  }
+													: undefined
+											}
+										/>
+									</RecursionProvider>
 								</WritingFlow>
 							</motion.div>
 						</AnimatePresence>