Add basic sidebar

[MAILPOET-4287]

mailpoet/assets/js/src/automation/editor/components/sidebar/index.tsx

@@ -0,0 +1,38 @@
+import { ComponentProps } from 'react';
+import { Platform } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { cog } from '@wordpress/icons';
+import { ComplementaryArea } from '@wordpress/interface';
+import { storeName } from '../../store';
+
+// See:
+//   https://github.com/WordPress/gutenberg/blob/5caeae34b3fb303761e3b9432311b26f4e5ea3a6/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js
+//   https://github.com/WordPress/gutenberg/blob/5caeae34b3fb303761e3b9432311b26f4e5ea3a6/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
+
+const sidebarActiveByDefault = Platform.select({
+  web: true,
+  native: false,
+});
+
+type Props = ComponentProps<typeof ComplementaryArea>;
+
+export function Sidebar(props: Props): JSX.Element {
+  const workflowName = 'Testing workflow';
+  return (
+    <ComplementaryArea
+      identifier="mailpoet/automation-editor/workflow"
+      closeLabel={__('Close settings')}
+      headerClassName="edit-post-sidebar__panel-tabs"
+      title={__('Settings')}
+      icon={cog}
+      className="edit-post-sidebar"
+      panelClassName="edit-post-sidebar"
+      smallScreenTitle={workflowName || __('(no title)')}
+      scope={storeName}
+      isActiveByDefault={sidebarActiveByDefault}
+      {...props}
+    >
+      Sidebar
+    </ComplementaryArea>
+  );
+}

mailpoet/assets/js/src/automation/editor/index.tsx

@@ -1,9 +1,15 @@
 import classnames from 'classnames';
 import ReactDOM from 'react-dom';
+import { SlotFillProvider } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { InterfaceSkeleton, FullscreenMode } from '@wordpress/interface';
+import {
+  ComplementaryArea,
+  InterfaceSkeleton,
+  FullscreenMode,
+} from '@wordpress/interface';
 import { Header } from './components/header';
-import { store } from './store';
+import { Sidebar } from './components/sidebar';
+import { store, storeName } from './store';
 
 // See: https://github.com/WordPress/gutenberg/blob/9601a33e30ba41bac98579c8d822af63dd961488/packages/edit-post/src/components/layout/index.js
 
@@ -21,16 +27,17 @@ function Editor(): JSX.Element {
   );
 
   return (
-    <>
+    <SlotFillProvider>
       <FullscreenMode isActive={isFullscreenActive} />
+      <Sidebar />
       <InterfaceSkeleton
         className={className}
         header={<Header />}
         content={<div>Content</div>}
-        sidebar={<div>Sidebar</div>}
+        sidebar={<ComplementaryArea.Slot scope={storeName} />}
         secondarySidebar={<div>Secondary sidebar</div>}
       />
-    </>
+    </SlotFillProvider>
   );
 }
 

mailpoet/assets/js/src/types/wordpress_modules.ts

@@ -2,6 +2,7 @@
 
 // there are no @types/wordpress__interface yet
 declare module '@wordpress/interface' {
+  export const ComplementaryArea: any;
   export const FullscreenMode: any;
   export const MoreMenuDropdown: any;
   export const InterfaceSkeleton: any;