Site Editor: Add New - Custom/General template

WordPress · Jul 4, 2022 · 3faa4df · 3faa4df
1 parent c489f75
commit 3faa4df
Show file tree

Hide file tree

Showing 3 changed files with 148 additions and 2 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
@@ -0,0 +1,100 @@
+/**
+ * External dependencies
+ */
+import { kebabCase } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import {
+	Button,
+	Flex,
+	FlexItem,
+	Modal,
+	TextControl,
+} from '@wordpress/components';
+
+function AddCustomGenericTemplateModal( { onClose, createTemplate } ) {
+	const [ title, setTitle ] = useState( '' );
+	const defaultTitle = __( 'Custom Template' );
+	const [ isBusy, setIsBusy ] = useState( false );
+	async function onCreateTemplate( event ) {
+		event.preventDefault();
+
+		if ( isBusy ) {
+			return;
+		}
+
+		setIsBusy( true );
+
+		await createTemplate(
+			{
+				slug:
+					'wp-custom-template-' + kebabCase( title || defaultTitle ),
+				title: title || defaultTitle,
+			},
+			false
+		);
+
+		setIsBusy( false );
+		onClose( false );
+	}
+	return (
+		<Modal
+			title={ __( 'Create custom template' ) }
+			closeLabel={ __( 'Close' ) }
+			onRequestClose={ () => {
+				onClose();
+			} }
+			overlayClassName="edit-site-custom-generic-template__modal"
+		>
+			<form onSubmit={ onCreateTemplate }>
+				<Flex align="flex-start" gap={ 8 }>
+					<FlexItem>
+						<TextControl
+							label={ __( 'Name' ) }
+							value={ title }
+							onChange={ setTitle }
+							placeholder={ defaultTitle }
+							disabled={ isBusy }
+							help={ __(
+								'Describe the purpose of the template, e.g. "Full Width". Custom templates can be applied to any post or page.'
+							) }
+						/>
+					</FlexItem>
+				</Flex>
+
+				<Flex
+					className="edit-site-custom-generic-template__modal-actions"
+					justify="flex-end"
+					expanded={ false }
+				>
+					<FlexItem>
+						<Button
+							variant="tertiary"
+							onClick={ () => {
+								onClose();
+							} }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+					</FlexItem>
+					<FlexItem>
+						<Button
+							variant="primary"
+							type="submit"
+							isBusy={ isBusy }
+							aria-disabled={ isBusy }
+						>
+							{ __( 'Create' ) }
+						</Button>
+					</FlexItem>
+				</Flex>
+			</form>
+		</Modal>
+	);
+}
+
+export default AddCustomGenericTemplateModal;
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
@@ -30,6 +30,7 @@ import {
 	postDate,
 	search,
 	tag,
+	layout as customGenericTemplateIcon,
 } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
@@ -38,6 +39,7 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import AddCustomTemplateModal from './add-custom-template-modal';
+import AddCustomGenericTemplateModal from './add-custom-generic-template-modal';
 import { usePostTypes, usePostTypesEntitiesInfo } from './utils';
 import { useHistory } from '../routes';
 import { store as editSiteStore } from '../../store';
@@ -78,6 +80,10 @@ export default function NewTemplate( { postType } ) {
 	const postTypes = usePostTypes();
 	const [ showCustomTemplateModal, setShowCustomTemplateModal ] =
 		useState( false );
+	const [
+		showCustomGenericTemplateModal,
+		setShowCustomGenericTemplateModal,
+	] = useState( false );
 	const [ entityForSuggestions, setEntityForSuggestions ] = useState( {} );
 	const { existingTemplates, defaultTemplateTypes } = useSelect(
 		( select ) => ( {
@@ -96,7 +102,7 @@ export default function NewTemplate( { postType } ) {
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { setTemplate } = useDispatch( editSiteStore );
 
-	async function createTemplate( template ) {
+	async function createTemplate( template, isWPSuggestion = true ) {
 		try {
 			const { title, description, slug } = template;
 			const newTemplate = await saveEntityRecord(
@@ -109,7 +115,7 @@ export default function NewTemplate( { postType } ) {
 					status: 'publish',
 					title,
 					// This adds a post meta field in template that is part of `is_custom` value calculation.
-					is_wp_suggestion: true,
+					is_wp_suggestion: isWPSuggestion,
 				},
 				{ throwOnError: true }
 			);
@@ -253,6 +259,19 @@ export default function NewTemplate( { postType } ) {
 								);
 							} ) }
 						</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>
 					</NavigableMenu>
 				) }
 			</DropdownMenu>
@@ -263,6 +282,12 @@ export default function NewTemplate( { postType } ) {
 					entityForSuggestions={ entityForSuggestions }
 				/>
 			) }
+			{ showCustomGenericTemplateModal && (
+				<AddCustomGenericTemplateModal
+					onClose={ () => setShowCustomGenericTemplateModal( false ) }
+					createTemplate={ createTemplate }
+				/>
+			) }
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/add-new-template/style.scss b/packages/edit-site/src/components/add-new-template/style.scss
@@ -125,3 +125,24 @@
 	margin-bottom: 0;
 	margin-top: $grid-unit-20;
 }
+
+
+.edit-site-custom-generic-template__modal {
+	.components-base-control {
+		@include break-medium() {
+			width: $grid-unit * 40;
+		}
+	}
+
+	.components-modal__header {
+		border-bottom: none;
+	}
+
+	.components-modal__content::before {
+		margin-bottom: $grid-unit-05;
+	}
+}
+
+.edit-site-custom-generic-template__modal-actions {
+	margin-top: $grid-unit-15;
+}