[Site Editor]: Fix multiple templates creation while in the process o…

…f creating one (#44146) * [Site Editor]: Fix multiple templates creation while in the process of creating one * add overlay with spinners * try fullscreen overlay * make modal full height
WordPress · Sep 15, 2022 · ce37fe9 · ce37fe9
1 parent 61e41f0
commit ce37fe9
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 60 deletions.
diff --git a/packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal.js b/packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal.js
@@ -16,27 +16,38 @@ import {
 	TextControl,
 } from '@wordpress/components';
 
-function AddCustomGenericTemplateModal( { onClose, createTemplate } ) {
+/**
+ * Internal dependencies
+ */
+import TemplateActionsLoadingScreen from './template-actions-loading-screen';
+
+function AddCustomGenericTemplateModal( {
+	onClose,
+	createTemplate,
+	isCreatingTemplate,
+} ) {
 	const [ title, setTitle ] = useState( '' );
 	const defaultTitle = __( 'Custom Template' );
 	const [ isBusy, setIsBusy ] = useState( false );
 	async function onCreateTemplate( event ) {
 		event.preventDefault();
-
 		if ( isBusy ) {
 			return;
 		}
-
 		setIsBusy( true );
-
-		createTemplate(
-			{
-				slug:
-					'wp-custom-template-' + kebabCase( title || defaultTitle ),
-				title: title || defaultTitle,
-			},
-			false
-		);
+		try {
+			await createTemplate(
+				{
+					slug:
+						'wp-custom-template-' +
+						kebabCase( title || defaultTitle ),
+					title: title || defaultTitle,
+				},
+				false
+			);
+		} finally {
+			setIsBusy( false );
+		}
 	}
 	return (
 		<Modal
@@ -47,6 +58,7 @@ function AddCustomGenericTemplateModal( { onClose, createTemplate } ) {
 			} }
 			overlayClassName="edit-site-custom-generic-template__modal"
 		>
+			{ isCreatingTemplate && <TemplateActionsLoadingScreen /> }
 			<form onSubmit={ onCreateTemplate }>
 				<Flex align="flex-start" gap={ 8 }>
 					<FlexItem>

diff --git a/packages/edit-site/src/components/add-new-template/add-custom-template-modal.js b/packages/edit-site/src/components/add-new-template/add-custom-template-modal.js
@@ -21,6 +21,7 @@ import { useEntityRecords } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
+import TemplateActionsLoadingScreen from './template-actions-loading-screen';
 import { mapToIHasNameAndId } from './utils';
 
 const EMPTY_ARRAY = [];
@@ -160,7 +161,12 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 	);
 }
 
-function AddCustomTemplateModal( { onClose, onSelect, entityForSuggestions } ) {
+function AddCustomTemplateModal( {
+	onClose,
+	onSelect,
+	entityForSuggestions,
+	isCreatingTemplate,
+} ) {
 	const [ showSearchEntities, setShowSearchEntities ] = useState(
 		entityForSuggestions.hasGeneralTemplate
 	);
@@ -176,6 +182,7 @@ function AddCustomTemplateModal( { onClose, onSelect, entityForSuggestions } ) {
 			closeLabel={ __( 'Close' ) }
 			onRequestClose={ onClose }
 		>
+			{ isCreatingTemplate && <TemplateActionsLoadingScreen /> }
 			{ ! showSearchEntities && (
 				<>
 					<p>

diff --git a/packages/edit-site/src/components/add-new-template/new-template.js b/packages/edit-site/src/components/add-new-template/new-template.js
@@ -44,6 +44,7 @@ import {
 	usePostTypeArchiveMenuItems,
 } from './utils';
 import AddCustomGenericTemplateModal from './add-custom-generic-template-modal';
+import TemplateActionsLoadingScreen from './template-actions-loading-screen';
 import { useHistory } from '../routes';
 import { store as editSiteStore } from '../../store';
 
@@ -86,6 +87,7 @@ export default function NewTemplate( { postType } ) {
 		setShowCustomGenericTemplateModal,
 	] = useState( false );
 	const [ entityForSuggestions, setEntityForSuggestions ] = useState( {} );
+	const [ isCreatingTemplate, setIsCreatingTemplate ] = useState( false );
 
 	const history = useHistory();
 	const { saveEntityRecord } = useDispatch( coreStore );
@@ -94,6 +96,10 @@ export default function NewTemplate( { postType } ) {
 	const { setTemplate } = useDispatch( editSiteStore );
 
 	async function createTemplate( template, isWPSuggestion = true ) {
+		if ( isCreatingTemplate ) {
+			return;
+		}
+		setIsCreatingTemplate( true );
 		try {
 			const { title, description, slug, templatePrefix } = template;
 			let templateContent = template.content;
@@ -151,6 +157,8 @@ export default function NewTemplate( { postType } ) {
 			createErrorNotice( errorMessage, {
 				type: 'snackbar',
 			} );
+		} finally {
+			setIsCreatingTemplate( false );
 		}
 	}
 
@@ -176,66 +184,75 @@ export default function NewTemplate( { postType } ) {
 				} }
 			>
 				{ () => (
-					<NavigableMenu className="edit-site-new-template-dropdown__popover">
-						<MenuGroup label={ postType.labels.add_new_item }>
-							{ missingTemplates.map( ( template ) => {
-								const {
-									title,
-									description,
-									slug,
-									onClick,
-									icon,
-								} = template;
-								return (
-									<MenuItem
-										icon={
-											icon ||
-											TEMPLATE_ICONS[ slug ] ||
-											post
-										}
-										iconPosition="left"
-										info={ description }
-										key={ slug }
-										onClick={ () =>
-											onClick
-												? onClick( template )
-												: createTemplate( template )
-										}
-									>
-										{ title }
-									</MenuItem>
-								);
-							} ) }
-						</MenuGroup>
-						<MenuGroup>
-							<MenuItem
-								icon={ customGenericTemplateIcon }
-								iconPosition="left"
-								info={ __(
-									'Custom templates can be applied to any post or page.'
-								) }
-								key="custom-template"
-								onClick={ () =>
-									setShowCustomGenericTemplateModal( true )
-								}
-							>
-								{ __( 'Custom template' ) }
-							</MenuItem>
-						</MenuGroup>
-					</NavigableMenu>
+					<>
+						{ isCreatingTemplate && (
+							<TemplateActionsLoadingScreen />
+						) }
+						<NavigableMenu className="edit-site-new-template-dropdown__popover">
+							<MenuGroup label={ postType.labels.add_new_item }>
+								{ missingTemplates.map( ( template ) => {
+									const {
+										title,
+										description,
+										slug,
+										onClick,
+										icon,
+									} = template;
+									return (
+										<MenuItem
+											icon={
+												icon ||
+												TEMPLATE_ICONS[ slug ] ||
+												post
+											}
+											iconPosition="left"
+											info={ description }
+											key={ slug }
+											onClick={ () =>
+												onClick
+													? onClick( template )
+													: createTemplate( template )
+											}
+										>
+											{ title }
+										</MenuItem>
+									);
+								} ) }
+							</MenuGroup>
+							<MenuGroup>
+								<MenuItem
+									icon={ customGenericTemplateIcon }
+									iconPosition="left"
+									info={ __(
+										'Custom templates can be applied to any post or page.'
+									) }
+									key="custom-template"
+									onClick={ () =>
+										setShowCustomGenericTemplateModal(
+											true
+										)
+									}
+								>
+									{ __( 'Custom template' ) }
+								</MenuItem>
+							</MenuGroup>
+						</NavigableMenu>
+					</>
 				) }
 			</DropdownMenu>
 			{ showCustomTemplateModal && (
 				<AddCustomTemplateModal
 					onClose={ () => setShowCustomTemplateModal( false ) }
 					onSelect={ createTemplate }
 					entityForSuggestions={ entityForSuggestions }
+					isCreatingTemplate={ isCreatingTemplate }
 				/>
 			) }
 			{ showCustomGenericTemplateModal && (
 				<AddCustomGenericTemplateModal
 					onClose={ () => setShowCustomGenericTemplateModal( false ) }
 					createTemplate={ createTemplate }
+					isCreatingTemplate={ isCreatingTemplate }
 				/>
 			) }
 		</>

diff --git a/packages/edit-site/src/components/add-new-template/style.scss b/packages/edit-site/src/components/add-new-template/style.scss
@@ -158,3 +158,22 @@
 .edit-site-custom-generic-template__modal-actions {
 	margin-top: $grid-unit-15;
 }
+
+.edit-site-template-actions-loading-screen-modal {
+	backdrop-filter: none;
+	background-color: transparent;
+
+	&.is-full-screen {
+		background-color: $white;
+		box-shadow: 0 0 0 transparent;
+		min-width: 100%;
+		min-height: 100%;
+	}
+
+	&__content {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+	}
+}
diff --git a/packages/edit-site/src/components/add-new-template/template-actions-loading-screen.js b/packages/edit-site/src/components/add-new-template/template-actions-loading-screen.js
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { Spinner, Modal } from '@wordpress/components';
+
+export default function TemplateActionsLoadingScreen() {
+	const baseCssClass = 'edit-site-template-actions-loading-screen-modal';
+	return (
+		<Modal
+			isFullScreen
+			isDismissible={ false }
+			shouldCloseOnClickOutside={ false }
+			shouldCloseOnEsc={ false }
+			onRequestClose={ () => {} }
+			__experimentalHideHeader
+			className={ baseCssClass }
+		>
+			<div className={ `${ baseCssClass }__content` }>
+				<Spinner />
+			</div>
+		</Modal>
+	);
+}