diff --git a/packages/js/email-editor/src/components/sidebar/edit-template-modal.tsx b/packages/js/email-editor/src/components/sidebar/edit-template-modal.tsx new file mode 100644 index 0000000000..3b47a2804a --- /dev/null +++ b/packages/js/email-editor/src/components/sidebar/edit-template-modal.tsx @@ -0,0 +1,45 @@ +import { __ } from '@wordpress/i18n'; +import { Button, Flex, FlexItem, Modal } from '@wordpress/components'; +import { useSelect } from '@wordpress/data'; +import { storeName } from '../../store'; +import { store as editorStore } from '@wordpress/editor'; + +export function EditTemplateModal( { close } ) { + const { onNavigateToEntityRecord, template } = useSelect( ( sel ) => { + const { getEditorSettings } = sel( editorStore ); + const editorSettings = getEditorSettings(); + return { + onNavigateToEntityRecord: + // @ts-expect-error onNavigateToEntityRecord type is not defined + editorSettings.onNavigateToEntityRecord, + template: sel( storeName ).getCurrentTemplate(), + }; + }, [] ); + + return ( + +

+ { __( + 'Note that the same template can be used by multiple emails, so any changes made here may affect other emails on the site. To switch back to editing the page content click the ‘Back’ button in the toolbar.', + 'mailpoet' + ) } +

+ + + + + +
+ ); +} 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 e5d7f0f5aa..a623cf01a3 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 @@ -30,70 +30,77 @@ export function EmailTypeInfo() { useState( false ); return ( - - - - - - -
-

{ __( 'Newsletter', 'mailpoet' ) }

- - { __( - 'Send or schedule a newsletter to connect with your subscribers.', - 'mailpoet' - ) } - -
-
- { template && ( + <> + + - - - Template - - - - { ( { onClose } ) => ( - <> - { - setEditTemplateModalOpen( - true - ); - onClose(); - } } - > - { __( - 'Edit template', - 'mailpoet' - ) } - - { - onClose(); - } } - > - { __( - 'Swap template', - 'mailpoet' - ) } - - - ) } - - - + + + +
+

{ __( 'Newsletter', 'mailpoet' ) }

+ + { __( + 'Send or schedule a newsletter to connect with your subscribers.', + 'mailpoet' + ) } + +
- ) } -
-
+ { template && ( + + + + Template + + + + { ( { onClose } ) => ( + <> + { + setEditTemplateModalOpen( + true + ); + onClose(); + } } + > + { __( + 'Edit template', + 'mailpoet' + ) } + + { + onClose(); + } } + > + { __( + 'Swap template', + 'mailpoet' + ) } + + + ) } + + + + + ) } +
+
+ { isEditTemplateModalOpen && ( + setEditTemplateModalOpen( false ) } + /> + ) } + ); }