Add templates experiment panel with save component and post/template toggle WIP

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 && (
-        <Button
-          variant="primary"
-          onClick={() => {
-            onNavigateToEntityRecord({
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-ignore
-              postId: template.id,
-              postType: 'wp_template',
-            });
-          }}
-        >
-          {__('Edit template', 'mailpoet')}
-        </Button>
-      )}
       <TextareaControl
         className="mailpoet-settings-panel__subject"
         label={subjectLabel}

mailpoet/assets/js/src/email-editor/engine/components/sidebar/email-settings.tsx

@@ -1,11 +1,13 @@
 import { Panel } from '@wordpress/components';
 import { DetailsPanel } from './details-panel';
 import { EmailTypeInfo } from './email-type-info';
+import { TemplatesPanel } from './templates-panel';
 
 export function EmailSettings() {
   return (
     <Panel>
       <EmailTypeInfo />
+      <TemplatesPanel />
       <DetailsPanel />
     </Panel>
   );

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 (
+    <PanelBody
+      title={__('Templates Experiment', 'mailpoet')}
+      className="mailpoet-email-editor__settings-panel"
+    >
+      <p>
+        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.
+      </p>
+      <h3>Edit template toggle</h3>
+      {template && !hasHistory && (
+        <Button
+          variant="primary"
+          onClick={() => {
+            onNavigateToEntityRecord({
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              postId: template.id,
+              postType: 'wp_template',
+            });
+          }}
+        >
+          {__('Edit template', 'mailpoet')}
+        </Button>
+      )}
+
+      {hasHistory && <DocumentBar />}
+      <hr />
+      <h3>Save panel</h3>
+      <EntitiesSavedStates />
+    </PanelBody>
+  );
+}