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
new file mode 100644
index 00000000000000..6af6f61fc1406b
--- /dev/null
+++ b/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 (
+ {
+ onClose();
+ } }
+ overlayClassName="edit-site-custom-generic-template__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
index 4b1c7eafcb9e8f..cdc907f27115c8 100644
--- a/packages/edit-site/src/components/add-new-template/new-template.js
+++ b/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 } ) {
);
} ) }
+
+
+
) }
@@ -190,6 +211,12 @@ export default function NewTemplate( { postType } ) {
entityForSuggestions={ entityForSuggestions }
/>
) }
+ { showCustomGenericTemplateModal && (
+ 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
index 81fe785680062e..7ee65f4f94a9f8 100644
--- 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;
+}