diff --git a/packages/js/email-editor/src/components/sidebar/email-type-info.tsx b/packages/js/email-editor/src/components/sidebar/email-type-info.tsx index a623cf01a3..91860d4123 100644 --- a/packages/js/email-editor/src/components/sidebar/email-type-info.tsx +++ b/packages/js/email-editor/src/components/sidebar/email-type-info.tsx @@ -20,6 +20,7 @@ import { useState } from '@wordpress/element'; */ import { storeName } from '../../store'; import { EditTemplateModal } from './edit-template-modal'; +import { SelectTemplateModal } from '../template-select'; export function EmailTypeInfo() { const template = useSelect( @@ -28,6 +29,8 @@ export function EmailTypeInfo() { ); const [ isEditTemplateModalOpen, setEditTemplateModalOpen ] = useState( false ); + const [ isSelectTemplateModalOpen, setSelectTemplateModalOpen ] = + useState( false ); return ( <> @@ -79,6 +82,9 @@ export function EmailTypeInfo() { { + setSelectTemplateModalOpen( + true + ); onClose(); } } > @@ -101,6 +107,14 @@ export function EmailTypeInfo() { close={ () => setEditTemplateModalOpen( false ) } /> ) } + { isSelectTemplateModalOpen && ( + + setSelectTemplateModalOpen( false ) + } + closeCallback={ () => setSelectTemplateModalOpen( false ) } + /> + ) } ); } diff --git a/packages/js/email-editor/src/components/template-select/select-modal.tsx b/packages/js/email-editor/src/components/template-select/select-modal.tsx index acbaad01b2..167b7c2df7 100644 --- a/packages/js/email-editor/src/components/template-select/select-modal.tsx +++ b/packages/js/email-editor/src/components/template-select/select-modal.tsx @@ -17,7 +17,10 @@ import { storeName, TemplatePreview } from '../../store'; const BLANK_TEMPLATE = 'email-general'; -export function SelectTemplateModal( { onSelectCallback } ) { +export function SelectTemplateModal( { + onSelectCallback, + closeCallback = null, +} ) { const [ templates ] = usePreviewTemplates(); const hasTemplates = templates?.length > 0; @@ -46,7 +49,9 @@ export function SelectTemplateModal( { onSelectCallback } ) { return ( handleCloseWithoutSelection() } + onRequestClose={ () => + closeCallback ? closeCallback() : handleCloseWithoutSelection() + } isFullScreen >