Site Editor: Move 'ErrorBoundary' up to the React tree

WordPress · Aug 5, 2024 · 0ca3565 · 0ca3565
1 parent 7559e74
commit 0ca3565
Showing 1 changed file with 50 additions and 50 deletions.
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -172,61 +172,61 @@ export default function Layout( { route } ) {
 
 					<EditorSnackbars />
 
-					{ isMobileViewport && areas.mobile && (
-						<div className="edit-site-layout__mobile">
-							{ canvasMode !== 'edit' && (
-								<SidebarContent routeKey={ routeKey }>
-									<SiteHubMobile
-										ref={ toggleRef }
-										isTransparent={
-											isResizableFrameOversized
-										}
-									/>
-								</SidebarContent>
+					<ErrorBoundary>
+						{ isMobileViewport && areas.mobile && (
+							<div className="edit-site-layout__mobile">
+								{ canvasMode !== 'edit' && (
+									<SidebarContent routeKey={ routeKey }>
+										<SiteHubMobile
+											ref={ toggleRef }
+											isTransparent={
+												isResizableFrameOversized
+											}
+										/>
+									</SidebarContent>
+								) }
+								{ areas.mobile }
+							</div>
+						) }
+
+						{ ! isMobileViewport &&
+							areas.content &&
+							canvasMode !== 'edit' && (
+								<div
+									className="edit-site-layout__area"
+									style={ {
+										maxWidth: widths?.content,
+									} }
+								>
+									{ areas.content }
+								</div>
 							) }
-							{ areas.mobile }
-						</div>
-					) }
 
-					{ ! isMobileViewport &&
-						areas.content &&
-						canvasMode !== 'edit' && (
+						{ ! isMobileViewport && areas.edit && (
 							<div
 								className="edit-site-layout__area"
 								style={ {
-									maxWidth: widths?.content,
+									maxWidth: widths?.edit,
 								} }
 							>
-								{ areas.content }
+								{ areas.edit }
 							</div>
 						) }
 
-					{ ! isMobileViewport && areas.edit && (
-						<div
-							className="edit-site-layout__area"
-							style={ {
-								maxWidth: widths?.edit,
-							} }
-						>
-							{ areas.edit }
-						</div>
-					) }
-
-					{ ! isMobileViewport && areas.preview && (
-						<div className="edit-site-layout__canvas-container">
-							{ canvasResizer }
-							{ !! canvasSize.width && (
-								<div
-									className={ clsx(
-										'edit-site-layout__canvas',
-										{
-											'is-right-aligned':
-												isResizableFrameOversized,
-										}
-									) }
-									ref={ animationRef }
-								>
-									<ErrorBoundary>
+						{ ! isMobileViewport && areas.preview && (
+							<div className="edit-site-layout__canvas-container">
+								{ canvasResizer }
+								{ !! canvasSize.width && (
+									<div
+										className={ clsx(
+											'edit-site-layout__canvas',
+											{
+												'is-right-aligned':
+													isResizableFrameOversized,
+											}
+										) }
+										ref={ animationRef }
+									>
 										<ResizableFrame
 											isReady={ ! isEditorLoading }
 											isFullWidth={
@@ -252,11 +252,11 @@ export default function Layout( { route } ) {
 										>
 											{ areas.preview }
 										</ResizableFrame>
-									</ErrorBoundary>
-								</div>
-							) }
-						</div>
-					) }
+									</div>
+								) }
+							</div>
+						) }
+					</ErrorBoundary>
 				</div>
 			</div>
 		</>