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 } ) { ); } ) } + + + setShowCustomGenericTemplateModal( true ) + } + > + { __( 'Custom template' ) } + + ) } @@ -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; +}