Code review

WordPress · Nov 19, 2021 · cd5bfea · cd5bfea
1 parent f5565a5
commit cd5bfea
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 32 deletions.
diff --git a/packages/edit-site/src/components/add-new-template/new-template-part.js b/packages/edit-site/src/components/add-new-template/new-template-part.js
@@ -8,9 +8,8 @@ import { kebabCase } from 'lodash';
  */
 import { useState } from '@wordpress/element';
 import { Button } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
 import { addQueryArgs } from '@wordpress/url';
+import apiFetch from '@wordpress/api-fetch';
 
 /**
  * Internal dependencies
@@ -19,30 +18,32 @@ import CreateTemplatePartModal from '../create-template-part-modal';
 
 export default function NewTemplatePart( { postType } ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const { saveEntityRecord } = useDispatch( coreStore );
 
 	async function createTemplatePart( { title, area } ) {
-		if ( ! title || ! area ) {
+		if ( ! title ) {
 			return;
 		}
 
-		const templatePart = await saveEntityRecord(
-			'postType',
-			'wp_template_part',
-			{
+		const templatePart = await apiFetch( {
+			path: '/wp/v2/template-parts',
+			method: 'POST',
+			data: {
 				slug: kebabCase( title ),
 				title,
 				content: '',
 				area,
-			}
-		);
+			},
+		} );
 
 		// Navigate to the created template part editor.
 		window.location.search = addQueryArgs( '', {
 			page: 'gutenberg-edit-site',
 			postId: templatePart.id,
 			postType: 'wp_template_part',
 		} );
+
+		// Wait for async navigation to happen before closing the modal.
+		await new Promise( () => {} );
 	}
 
 	return (

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
@@ -12,15 +12,11 @@ import {
 	MenuItem,
 	NavigableMenu,
 } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
 import { addQueryArgs } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
+import apiFetch from '@wordpress/api-fetch';
 
 const DEFAULT_TEMPLATE_SLUGS = [
 	'front-page',
@@ -45,23 +41,26 @@ export default function NewTemplate( { postType } ) {
 		} ),
 		[]
 	);
-	const { addTemplate } = useDispatch( editSiteStore );
 
-	async function createTemplate( slug ) {
+	async function createTemplate( { slug } ) {
 		const { title, description } = find( defaultTemplateTypes, { slug } );
 
-		const { templateId } = await addTemplate( {
-			excerpt: description,
-			// Slugs need to be strings, so this is for template `404`
-			slug: slug.toString(),
-			status: 'publish',
-			title,
+		const template = await apiFetch( {
+			path: '/wp/v2/templates',
+			method: 'POST',
+			data: {
+				excerpt: description,
+				// Slugs need to be strings, so this is for template `404`
+				slug: slug.toString(),
+				status: 'publish',
+				title,
+			},
 		} );
 
 		// Navigate to the created template editor.
 		window.location.search = addQueryArgs( '', {
 			page: 'gutenberg-edit-site',
-			postId: templateId,
+			postId: template.id,
 			postType: 'wp_template',
 		} );
 	}
@@ -92,7 +91,7 @@ export default function NewTemplate( { postType } ) {
 				variant: 'primary',
 			} }
 		>
-			{ ( { onClose } ) => (
+			{ () => (
 				<NavigableMenu className="edit-site-new-template-dropdown__popover">
 					<MenuGroup label={ postType.labels.add_new_item }>
 						{ map(
@@ -102,8 +101,8 @@ export default function NewTemplate( { postType } ) {
 									info={ description }
 									key={ slug }
 									onClick={ () => {
-										createTemplate( slug );
-										onClose();
+										createTemplate( { slug } );
+										// We will be navigated way so no need to close the dropdown.
 									} }
 								>
 									{ title }

diff --git a/packages/edit-site/src/components/create-template-part-modal/index.js b/packages/edit-site/src/components/create-template-part-modal/index.js
@@ -28,6 +28,7 @@ import { TEMPLATE_PART_AREA_GENERAL } from '../../store/constants';
 export default function CreateTemplatePartModal( { closeModal, onCreate } ) {
 	const [ title, setTitle ] = useState( '' );
 	const [ area, setArea ] = useState( TEMPLATE_PART_AREA_GENERAL );
+	const [ isSubmitting, setIsSubmitting ] = useState( false );
 	const instanceId = useInstanceId( CreateTemplatePartModal );
 
 	const templatePartAreas = useSelect(
@@ -46,10 +47,12 @@ export default function CreateTemplatePartModal( { closeModal, onCreate } ) {
 			<form
 				onSubmit={ async ( event ) => {
 					event.preventDefault();
-					if ( ! title || ! area ) {
+					if ( ! title ) {
 						return;
 					}
+					setIsSubmitting( true );
 					await onCreate( { title, area } );
+					setIsSubmitting( false );
 					closeModal();
 				} }
 			>
@@ -70,7 +73,6 @@ export default function CreateTemplatePartModal( { closeModal, onCreate } ) {
 						id={ `edit-site-create-template-part-modal__area-selection-${ instanceId }` }
 						onChange={ setArea }
 						checked={ area }
-						required
 					>
 						{ templatePartAreas.map(
 							( { icon, label, area: value, description } ) => (
@@ -117,7 +119,8 @@ export default function CreateTemplatePartModal( { closeModal, onCreate } ) {
 						<Button
 							variant="primary"
 							type="submit"
-							disabled={ ! title || ! area }
+							disabled={ ! title }
+							isBusy={ isSubmitting }
 						>
 							{ __( 'Create' ) }
 						</Button>

diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js
@@ -116,7 +116,8 @@ export function* removeTemplate( template ) {
 		'deleteEntityRecord',
 		'postType',
 		template.type,
-		template.id
+		template.id,
+		{ force: true }
 	);
 }