Avoid rendering the template part replacement modal within the recurs…

…ion provider (#44256)
WordPress · Sep 26, 2022 · c7e090e · c7e090e
1 parent 8f396e8
commit c7e090e
Showing 1 changed file with 60 additions and 58 deletions.
diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
@@ -133,64 +133,66 @@ export default function TemplatePartEdit( {
 	}
 
 	return (
-		<RecursionProvider uniqueId={ templatePartId }>
-			<TemplatePartAdvancedControls
-				tagName={ tagName }
-				setAttributes={ setAttributes }
-				isEntityAvailable={ isEntityAvailable }
-				templatePartId={ templatePartId }
-				defaultWrapper={ areaObject.tagName }
-			/>
-			{ isPlaceholder && (
-				<TagName { ...blockProps }>
-					<TemplatePartPlaceholder
-						area={ attributes.area }
-						templatePartId={ templatePartId }
-						clientId={ clientId }
-						setAttributes={ setAttributes }
-						onOpenSelectionModal={ () =>
-							setIsTemplatePartSelectionOpen( true )
-						}
-					/>
-				</TagName>
-			) }
-			{ canReplace && (
-				<BlockSettingsMenuControls>
-					{ () => (
-						<MenuItem
-							onClick={ () => {
-								setIsTemplatePartSelectionOpen( true );
-							} }
-						>
-							{ createInterpolateElement(
-								__( 'Replace <BlockTitle />' ),
-								{
-									BlockTitle: (
-										<BlockTitle
-											clientId={ clientId }
-											maximumLength={ 25 }
-										/>
-									),
-								}
-							) }
-						</MenuItem>
-					) }
-				</BlockSettingsMenuControls>
-			) }
-			{ isEntityAvailable && (
-				<TemplatePartInnerBlocks
-					tagName={ TagName }
-					blockProps={ blockProps }
-					postId={ templatePartId }
-					hasInnerBlocks={ innerBlocks.length > 0 }
-					layout={ layout }
+		<>
+			<RecursionProvider uniqueId={ templatePartId }>
+				<TemplatePartAdvancedControls
+					tagName={ tagName }
+					setAttributes={ setAttributes }
+					isEntityAvailable={ isEntityAvailable }
+					templatePartId={ templatePartId }
+					defaultWrapper={ areaObject.tagName }
 				/>
-			) }
-			{ ! isPlaceholder && ! isResolved && (
-				<TagName { ...blockProps }>
-					<Spinner />
-				</TagName>
-			) }
+				{ isPlaceholder && (
+					<TagName { ...blockProps }>
+						<TemplatePartPlaceholder
+							area={ attributes.area }
+							templatePartId={ templatePartId }
+							clientId={ clientId }
+							setAttributes={ setAttributes }
+							onOpenSelectionModal={ () =>
+								setIsTemplatePartSelectionOpen( true )
+							}
+						/>
+					</TagName>
+				) }
+				{ canReplace && (
+					<BlockSettingsMenuControls>
+						{ () => (
+							<MenuItem
+								onClick={ () => {
+									setIsTemplatePartSelectionOpen( true );
+								} }
+							>
+								{ createInterpolateElement(
+									__( 'Replace <BlockTitle />' ),
+									{
+										BlockTitle: (
+											<BlockTitle
+												clientId={ clientId }
+												maximumLength={ 25 }
+											/>
+										),
+									}
+								) }
+							</MenuItem>
+						) }
+					</BlockSettingsMenuControls>
+				) }
+				{ isEntityAvailable && (
+					<TemplatePartInnerBlocks
+						tagName={ TagName }
+						blockProps={ blockProps }
+						postId={ templatePartId }
+						hasInnerBlocks={ innerBlocks.length > 0 }
+						layout={ layout }
+					/>
+				) }
+				{ ! isPlaceholder && ! isResolved && (
+					<TagName { ...blockProps }>
+						<Spinner />
+					</TagName>
+				) }
+			</RecursionProvider>
 			{ isTemplatePartSelectionOpen && (
 				<Modal
 					overlayClassName="block-editor-template-part__selection-modal"
@@ -215,6 +217,6 @@ export default function TemplatePartEdit( {
 					/>
 				</Modal>
 			) }
-		</RecursionProvider>
+		</>
 	);
 }