Site Editor: Display a notice if export fails (#37131)

WordPress · Dec 7, 2021 · cc43fbb · cc43fbb
1 parent bd81e9c
commit cc43fbb
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 32 deletions.
diff --git a/packages/edit-site/src/plugins/index.js b/packages/edit-site/src/plugins/index.js
@@ -1,51 +1,21 @@
-/**
- * External dependencies
- */
-import downloadjs from 'downloadjs';
-
 /**
  * WordPress dependencies
  */
-import { MenuItem } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 import { registerPlugin } from '@wordpress/plugins';
-import apiFetch from '@wordpress/api-fetch';
-import { download } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import ToolsMoreMenuGroup from '../components/header/tools-more-menu-group';
+import SiteExport from './site-export';
 import WelcomeGuideMenuItem from './welcome-guide-menu-item';
 
 registerPlugin( 'edit-site', {
 	render() {
 		return (
 			<>
 				<ToolsMoreMenuGroup>
-					<MenuItem
-						role="menuitem"
-						icon={ download }
-						onClick={ () =>
-							apiFetch( {
-								path: '/wp-block-editor/v1/export',
-								parse: false,
-							} )
-								.then( ( res ) => res.blob() )
-								.then( ( blob ) =>
-									downloadjs(
-										blob,
-										'edit-site-export.zip',
-										'application/zip'
-									)
-								)
-						}
-						info={ __(
-							'Download your templates and template parts.'
-						) }
-					>
-						{ __( 'Export' ) }
-					</MenuItem>
+					<SiteExport />
 					<WelcomeGuideMenuItem />
 				</ToolsMoreMenuGroup>
 			</>

diff --git a/packages/edit-site/src/plugins/site-export.js b/packages/edit-site/src/plugins/site-export.js
@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import downloadjs from 'downloadjs';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { MenuItem } from '@wordpress/components';
+import apiFetch from '@wordpress/api-fetch';
+import { download } from '@wordpress/icons';
+import { useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+
+export default function SiteExport() {
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	async function handleExport() {
+		try {
+			const response = await apiFetch( {
+				path: '/wp-block-editor/v1/export',
+				parse: false,
+			} );
+			const blob = await response.blob();
+
+			downloadjs( blob, 'edit-site-export.zip', 'application/zip' );
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while creating the site export.' );
+
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+		}
+	}
+
+	return (
+		<MenuItem
+			role="menuitem"
+			icon={ download }
+			onClick={ handleExport }
+			info={ __( 'Download your templates and template parts.' ) }
+		>
+			{ __( 'Export' ) }
+		</MenuItem>
+	);
+}