Site Editor: Add New - Custom/General template

packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal.js

@@ -0,0 +1,97 @@
+/**
+ * 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 );
+
+		createTemplate(
+			{
+				slug:
+					'wp-custom-template-' + kebabCase( title || defaultTitle ),
+				title: title || defaultTitle,
+			},
+			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".'
+							) }
+						/>
+					</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;

packages/edit-site/src/components/add-new-template/new-template.js

@@ -24,6 +24,7 @@ import {
 	postDate,
 	search,
 	tag,
+	layout as customGenericTemplateIcon,
 } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
@@ -43,6 +44,7 @@ import {
 	useTaxonomyTag,
 	useExtraTemplates,
 } from './utils';
+import AddCustomGenericTemplateModal from './add-custom-generic-template-modal';
 import { useHistory } from '../routes';
 import { store as editSiteStore } from '../../store';
 
@@ -80,14 +82,18 @@ const TEMPLATE_ICONS = {
 export default function NewTemplate( { postType } ) {
 	const [ showCustomTemplateModal, setShowCustomTemplateModal ] =
 		useState( false );
-
+	const [
+		showCustomGenericTemplateModal,
+		setShowCustomGenericTemplateModal,
+	] = useState( false );
 	const [ entityForSuggestions, setEntityForSuggestions ] = useState( {} );
 
 	const history = useHistory();
 	const { saveEntityRecord } = useDispatch( coreStore );
 	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(
@@ -99,8 +105,8 @@ export default function NewTemplate( { postType } ) {
 					slug: slug.toString(),
 					status: 'publish',
 					title,
-					// This adds a post meta field in template, that is part of `is_custom` value calculation.
-					is_wp_suggestion: true,
+					// This adds a post meta field in template that is part of `is_custom` value calculation.
+					is_wp_suggestion: isWPSuggestion,
 				},
 				{ throwOnError: true }
 			);
@@ -180,6 +186,21 @@ export default function NewTemplate( { postType } ) {
 								);
 							} ) }
 						</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>
@@ -190,6 +211,12 @@ export default function NewTemplate( { postType } ) {
 					entityForSuggestions={ entityForSuggestions }
 				/>
 			) }
+			{ showCustomGenericTemplateModal && (
+				<AddCustomGenericTemplateModal
+					onClose={ () => setShowCustomGenericTemplateModal( false ) }
+					createTemplate={ createTemplate }
+				/>
+			) }
 		</>
 	);
 }

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;
+}