Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Add edit template modal

Browse Source 
[MAILPOET-6336
This commit is contained in:
Rostislav Wolny
2024-12-04 13:13:28 +01:00
committed by Rostislav Wolný
parent 7811535e72
commit 9f273a3ff2
2 changed files with 115 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
packages/js/email-editor/src/components/sidebar/edit-template-modal.tsx Normal file
View File

@ -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 (
<Modal size="medium" onRequestClose={ close } __experimentalHideHeader>
<p>
{ __(
'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'
) }
</p>
<Flex justify={ 'end' }>
<FlexItem>
<Button
variant="primary"
onClick={ () => {
onNavigateToEntityRecord( {
postId: template.id,
postType: 'wp_template',
} );
} }
disabled={ ! template.id }
>
{ __( 'Continue', 'mailpoet' ) }
</Button>
</FlexItem>
</Flex>
</Modal>
);
}

133
packages/js/email-editor/src/components/sidebar/email-type-info.tsx
View File

@ -30,70 +30,77 @@ export function EmailTypeInfo() {
useState( false );
return (
<Panel className="mailpoet-email-sidebar__email-type-info">
<PanelBody>
<PanelRow>
<span className="mailpoet-email-type-info__icon">
<Icon icon={ megaphone } />
</span>
<div className="mailpoet-email-type-info__content">
<h2>{ __( 'Newsletter', 'mailpoet' ) }</h2>
<span>
{ __(
'Send or schedule a newsletter to connect with your subscribers.',
'mailpoet'
) }
</span>
</div>
</PanelRow>
{ template && (
<>
<Panel className="mailpoet-email-sidebar__email-type-info">
<PanelBody>
<PanelRow>
<Flex justify={ 'start' }>
<FlexItem className="editor-post-panel__row-label">
Template
</FlexItem>
<FlexItem>
<DropdownMenu
icon={ null }
text={ template?.title }
label={ __(
'Template actions',
'mailpoet'
) }
>
{ ( { onClose } ) => (
<>
<MenuItem
onClick={ () => {
setEditTemplateModalOpen(
true
);
onClose();
} }
>
{ __(
'Edit template',
'mailpoet'
) }
</MenuItem>
<MenuItem
onClick={ () => {
onClose();
} }
>
{ __(
'Swap template',
'mailpoet'
) }
</MenuItem>
</>
) }
</DropdownMenu>
</FlexItem>
</Flex>
<span className="mailpoet-email-type-info__icon">
<Icon icon={ megaphone } />
</span>
<div className="mailpoet-email-type-info__content">
<h2>{ __( 'Newsletter', 'mailpoet' ) }</h2>
<span>
{ __(
'Send or schedule a newsletter to connect with your subscribers.',
'mailpoet'
) }
</span>
</div>
</PanelRow>
) }
</PanelBody>
</Panel>
{ template && (
<PanelRow>
<Flex justify={ 'start' }>
<FlexItem className="editor-post-panel__row-label">
Template
</FlexItem>
<FlexItem>
<DropdownMenu
icon={ null }
text={ template?.title }
label={ __(
'Template actions',
'mailpoet'
) }
>
{ ( { onClose } ) => (
<>
<MenuItem
onClick={ () => {
setEditTemplateModalOpen(
true
);
onClose();
} }
>
{ __(
'Edit template',
'mailpoet'
) }
</MenuItem>
<MenuItem
onClick={ () => {
onClose();
} }
>
{ __(
'Swap template',
'mailpoet'
) }
</MenuItem>
</>
) }
</DropdownMenu>
</FlexItem>
</Flex>
</PanelRow>
) }
</PanelBody>
</Panel>
{ isEditTemplateModalOpen && (
<EditTemplateModal
close={ () => setEditTemplateModalOpen( false ) }
/>
) }
</>
);
}