Site Editor: Wrap each router area in 'ErrorBoundary' (#64245)

* Use the error boundary from the `editor` package in the Site Editor. * Update the `ErrorBoundary` markup and remove the `Warning` component. It still matches the design. * Update letter casing for button labels. * Change "Copy post text" to "Copy contents" and make the action label more general. * Make the "Copy contents" action opt-in. * Use the primary button variant for "Copy error". Co-authored-by: Mamaduka <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: jasmussen <[email protected]>
WordPress · Dec 6, 2024 · b8bfb4d · b8bfb4d · github-actions · Dec 6, 2024
1 parent 6b16c73
commit b8bfb4d
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 137 deletions.
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -548,7 +548,7 @@ function Layout( {
 
 	return (
 		<SlotFillProvider>
-			<ErrorBoundary>
+			<ErrorBoundary canCopyContent>
 				<CommandMenu />
 				<WelcomeGuide postType={ currentPostType } />
 				<div

diff --git a/packages/edit-site/src/components/error-boundary/index.js b/packages/edit-site/src/components/error-boundary/index.js
diff --git a/packages/edit-site/src/components/error-boundary/test/error-boundary.js b/packages/edit-site/src/components/error-boundary/test/error-boundary.js
diff --git a/packages/edit-site/src/components/error-boundary/warning.js b/packages/edit-site/src/components/error-boundary/warning.js
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -25,6 +25,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import {
 	EditorSnackbars,
 	UnsavedChangesWarning,
+	ErrorBoundary,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
@@ -36,7 +37,6 @@ import { useDispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import ErrorBoundary from '../error-boundary';
 import { default as SiteHub, SiteHubMobile } from '../site-hub';
 import ResizableFrame from '../resizable-frame';
 import { unlock } from '../../lock-unlock';
@@ -136,7 +136,9 @@ function Layout() {
 											}
 											routeKey={ routeKey }
 										>
-											{ areas.sidebar }
+											<ErrorBoundary>
+												{ areas.sidebar }
+											</ErrorBoundary>
 										</SidebarContent>
 										<SaveHub />
 										<SavePanel />
@@ -160,7 +162,7 @@ function Layout() {
 									/>
 								</SidebarContent>
 							) }
-							{ areas.mobile }
+							<ErrorBoundary>{ areas.mobile }</ErrorBoundary>
 						</div>
 					) }
 
@@ -173,7 +175,7 @@ function Layout() {
 									maxWidth: widths?.content,
 								} }
 							>
-								{ areas.content }
+								<ErrorBoundary>{ areas.content }</ErrorBoundary>
 							</div>
 						) }
 
@@ -184,7 +186,7 @@ function Layout() {
 								maxWidth: widths?.edit,
 							} }
 						>
-							{ areas.edit }
+							<ErrorBoundary>{ areas.edit }</ErrorBoundary>
 						</div>
 					) }
 

diff --git a/packages/editor/src/components/error-boundary/index.js b/packages/editor/src/components/error-boundary/index.js
@@ -3,9 +3,12 @@
  */
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+} from '@wordpress/components';
 import { select } from '@wordpress/data';
-import { Warning } from '@wordpress/block-editor';
 import { useCopyToClipboard } from '@wordpress/compose';
 import { doAction } from '@wordpress/hooks';
 
@@ -26,10 +29,10 @@ function getContent() {
 	} catch ( error ) {}
 }
 
-function CopyButton( { text, children } ) {
+function CopyButton( { text, children, variant = 'secondary' } ) {
 	const ref = useCopyToClipboard( text );
 	return (
-		<Button __next40pxDefaultSize variant="secondary" ref={ ref }>
+		<Button __next40pxDefaultSize variant={ variant } ref={ ref }>
 			{ children }
 		</Button>
 	);
@@ -54,23 +57,34 @@ class ErrorBoundary extends Component {
 
 	render() {
 		const { error } = this.state;
+		const { canCopyContent = false } = this.props;
 		if ( ! error ) {
 			return this.props.children;
 		}
 
-		const actions = [
-			<CopyButton key="copy-post" text={ getContent }>
-				{ __( 'Copy Post Text' ) }
-			</CopyButton>,
-			<CopyButton key="copy-error" text={ error.stack }>
-				{ __( 'Copy Error' ) }
-			</CopyButton>,
-		];
-
 		return (
-			<Warning className="editor-error-boundary" actions={ actions }>
-				{ __( 'The editor has encountered an unexpected error.' ) }
-			</Warning>
+			<HStack
+				className="editor-error-boundary"
+				alignment="baseline"
+				spacing={ 4 }
+				justify="space-between"
+				expanded={ false }
+				wrap
+			>
+				<Text as="p">
+					{ __( 'The editor has encountered an unexpected error.' ) }
+				</Text>
+				<HStack expanded={ false }>
+					{ canCopyContent && (
+						<CopyButton text={ getContent }>
+							{ __( 'Copy contents' ) }
+						</CopyButton>
+					) }
+					<CopyButton variant="primary" text={ error?.stack }>
+						{ __( 'Copy error' ) }
+					</CopyButton>
+				</HStack>
+			</HStack>
 		);
 	}
 }

diff --git a/packages/editor/src/components/error-boundary/style.scss b/packages/editor/src/components/error-boundary/style.scss
@@ -1,7 +1,11 @@
 .editor-error-boundary {
+	font-family: $default-font;
 	margin: auto;
 	max-width: 780px;
-	padding: 20px;
+	padding: 1em;
 	margin-top: 60px;
 	box-shadow: $elevation-large;
+	border: $border-width solid $gray-900;
+	border-radius: $radius-small;
+	background-color: $white;
 }