diff --git a/mailpoet/assets/js/src/email-editor/engine/components/sidebar/details-panel.tsx b/mailpoet/assets/js/src/email-editor/engine/components/sidebar/details-panel.tsx index eb0ad00828..88763df385 100644 --- a/mailpoet/assets/js/src/email-editor/engine/components/sidebar/details-panel.tsx +++ b/mailpoet/assets/js/src/email-editor/engine/components/sidebar/details-panel.tsx @@ -3,19 +3,15 @@ import { ExternalLink, PanelBody, TextareaControl, - Button, } from '@wordpress/components'; -import { useDispatch, useSelect } from '@wordpress/data'; +import { useDispatch } from '@wordpress/data'; import { useEntityProp } from '@wordpress/core-data'; import { __ } from '@wordpress/i18n'; import ReactStringReplace from 'react-string-replace'; import { createInterpolateElement } from '@wordpress/element'; -import { store as editorStore } from '@wordpress/editor'; import classnames from 'classnames'; import { storeName } from '../../store'; -import { unlock } from '../../../lock-unlock'; - const previewTextMaxLength = 150; const previewTextRecommendedLength = 80; @@ -28,18 +24,6 @@ export function DetailsPanel() { const { updateEmailMailPoetProperty } = useDispatch(storeName); - const { onNavigateToEntityRecord, template } = useSelect((select) => { - // eslint-disable-next-line @typescript-eslint/naming-convention - const { getEditorSettings: _getEditorSettings } = unlock( - select(editorStore), - ); - const editorSettings = _getEditorSettings(); - return { - onNavigateToEntityRecord: editorSettings.onNavigateToEntityRecord, - template: select(storeName).getEditedPostTemplate(), - }; - }, []); - let subjectHelp = ReactStringReplace( __( 'Use shortcodes to personalize your email, or learn more about [link1]best practices[/link1] and using [link2]emoji in subject lines[/link2].', @@ -104,21 +88,6 @@ export function DetailsPanel() { title={__('Details', 'mailpoet')} className="mailpoet-email-editor__settings-panel" > - {template && ( - - )} + ); diff --git a/mailpoet/assets/js/src/email-editor/engine/components/sidebar/templates-panel.tsx b/mailpoet/assets/js/src/email-editor/engine/components/sidebar/templates-panel.tsx new file mode 100644 index 0000000000..584410e493 --- /dev/null +++ b/mailpoet/assets/js/src/email-editor/engine/components/sidebar/templates-panel.tsx @@ -0,0 +1,65 @@ +import { PanelBody, Button } from '@wordpress/components'; +import { useSelect } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; +import { + store as editorStore, + // @ts-expect-error Our current version of packages doesn't have EntitiesSavedStates export + EntitiesSavedStates, + // @ts-expect-error Our current version of packages doesn't have DocumentBar export + DocumentBar, +} from '@wordpress/editor'; + +import { storeName } from '../../store'; + +import { unlock } from '../../../lock-unlock'; + +export function TemplatesPanel() { + const { onNavigateToEntityRecord, template, hasHistory } = useSelect( + (select) => { + // eslint-disable-next-line @typescript-eslint/naming-convention + const { getEditorSettings: _getEditorSettings } = unlock( + select(editorStore), + ); + const editorSettings = _getEditorSettings(); + return { + onNavigateToEntityRecord: editorSettings.onNavigateToEntityRecord, + hasHistory: !!editorSettings.onNavigateToPreviousEntityRecord, + template: select(storeName).getEditedPostTemplate(), + }; + }, + [], + ); + + return ( + +

+ Components from this Panel will be placed in different areas of the UI. + They are place here in one place just to simplify the experiment. +

+

Edit template toggle

+ {template && !hasHistory && ( + + )} + + {hasHistory && } +
+

Save panel

+ +
+ ); +}