From 61d2b5074df9ee5d19534d38d5a9487643ff86d2 Mon Sep 17 00:00:00 2001
From: Rostislav Wolny <rosta.wolny@automattic.com>
Date: Tue, 26 Sep 2023 17:04:15 +0200
Subject: [PATCH] Add inserter sidebar

[MAILPOET-5603]
---
 .../engine/components/header/header.tsx       | 44 ++++++++++++++++++-
 .../inserter-sidebar/inserter-sidebar.tsx     | 24 ++++++++++
 .../src/email_editor_custom/engine/editor.tsx |  5 ++-
 .../engine/store/selectors.ts                 |  5 +++
 4 files changed, 76 insertions(+), 2 deletions(-)
 create mode 100644 mailpoet/assets/js/src/email_editor_custom/engine/components/inserter-sidebar/inserter-sidebar.tsx

diff --git a/mailpoet/assets/js/src/email_editor_custom/engine/components/header/header.tsx b/mailpoet/assets/js/src/email_editor_custom/engine/components/header/header.tsx
index ef331f76fa..21e7fc67a2 100644
--- a/mailpoet/assets/js/src/email_editor_custom/engine/components/header/header.tsx
+++ b/mailpoet/assets/js/src/email_editor_custom/engine/components/header/header.tsx
@@ -1,11 +1,53 @@
+import { useRef } from '@wordpress/element';
 import { PinnedItems } from '@wordpress/interface';
+import { Button, ToolbarItem } from '@wordpress/components';
+import { NavigableToolbar } from '@wordpress/block-editor';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { plus } from '@wordpress/icons';
 import { storeName } from '../../store';
 
 export function Header() {
+  const inserterButton = useRef();
+
+  const { toggleInserterSidebar } = useDispatch(storeName);
+  const { isInserterSidebarOpened } = useSelect(
+    (select) => ({
+      isInserterSidebarOpened: select(storeName).isInserterSidebarOpened(),
+    }),
+    [],
+  );
+
+  const preventDefault = (event) => {
+    event.preventDefault();
+  };
+
+  const shortLabel = !isInserterSidebarOpened ? __('Add') : __('Close');
+
   return (
     <div className="edit-post-header">
       <div className="edit-post-header__toolbar">
-        <div className="edit-post-header-toolbar">Todo Inserter etc.</div>
+        <NavigableToolbar
+          className="edit-post-header-toolbar"
+          aria-label={__('Email document tools', 'mailpoet')}
+        >
+          <div className="edit-post-header-toolbar__left">
+            <ToolbarItem
+              ref={inserterButton}
+              as={Button}
+              className="edit-post-header-toolbar__inserter-toggle"
+              variant="primary"
+              isPressed={isInserterSidebarOpened}
+              onMouseDown={preventDefault}
+              onClick={toggleInserterSidebar}
+              disabled={false}
+              icon={plus}
+              label={shortLabel}
+              showTooltip
+              aria-expanded={isInserterSidebarOpened}
+            />
+          </div>
+        </NavigableToolbar>
         <div className="edit-post-header__center">Todo Email Name</div>
       </div>
       <div className="edit-post-header__settings">
diff --git a/mailpoet/assets/js/src/email_editor_custom/engine/components/inserter-sidebar/inserter-sidebar.tsx b/mailpoet/assets/js/src/email_editor_custom/engine/components/inserter-sidebar/inserter-sidebar.tsx
new file mode 100644
index 0000000000..38abb6df2f
--- /dev/null
+++ b/mailpoet/assets/js/src/email_editor_custom/engine/components/inserter-sidebar/inserter-sidebar.tsx
@@ -0,0 +1,24 @@
+import { useDispatch } from '@wordpress/data';
+import { close } from '@wordpress/icons';
+import { Button } from '@wordpress/components';
+import { __experimentalLibrary as Library } from '@wordpress/block-editor';
+import { storeName } from '../../store';
+
+export function InserterSidebar() {
+  const { toggleInserterSidebar } = useDispatch(storeName);
+  return (
+    <div className="edit-post-editor__inserter-panel">
+      <div className="edit-post-editor__inserter-panel-header">
+        <Button icon={close} onClick={toggleInserterSidebar} />
+      </div>
+      <div className="edit-post-editor__inserter-panel-content">
+        <Library
+          showMostUsedBlocks
+          showInserterHelpPanel={false}
+          rootClientId={undefined}
+          __experimentalInsertionIndex={undefined}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/mailpoet/assets/js/src/email_editor_custom/engine/editor.tsx b/mailpoet/assets/js/src/email_editor_custom/engine/editor.tsx
index f3d2f33939..4719523a3f 100644
--- a/mailpoet/assets/js/src/email_editor_custom/engine/editor.tsx
+++ b/mailpoet/assets/js/src/email_editor_custom/engine/editor.tsx
@@ -8,12 +8,14 @@ import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
 import { Header } from './components/header';
 import { BlockEditor } from './components/block-editor';
 import { Sidebar } from './components/sidebar/sidebar';
+import { InserterSidebar } from './components/inserter-sidebar/inserter-sidebar';
 import { createStore, storeName } from './store';
 
 function Editor() {
-  const { isSidebarOpened } = useSelect(
+  const { isSidebarOpened, isInserterSidebarOpened } = useSelect(
     (select) => ({
       isSidebarOpened: select(storeName).isSidebarOpened(),
+      isInserterSidebarOpened: select(storeName).isInserterSidebarOpened(),
     }),
     [],
   );
@@ -32,6 +34,7 @@ function Editor() {
             header={<Header />}
             content={<BlockEditor />}
             sidebar={<ComplementaryArea.Slot scope={storeName} />}
+            secondarySidebar={isInserterSidebarOpened && <InserterSidebar />}
           />
           <Popover.Slot />
         </SlotFillProvider>
diff --git a/mailpoet/assets/js/src/email_editor_custom/engine/store/selectors.ts b/mailpoet/assets/js/src/email_editor_custom/engine/store/selectors.ts
index 967dee8012..d6549351aa 100644
--- a/mailpoet/assets/js/src/email_editor_custom/engine/store/selectors.ts
+++ b/mailpoet/assets/js/src/email_editor_custom/engine/store/selectors.ts
@@ -1,8 +1,13 @@
 import { createRegistrySelector } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
 import { storeName } from './constants';
+import { State } from './types';
 
 export const isSidebarOpened = createRegistrySelector(
   (select) => (): boolean =>
     !!select(interfaceStore).getActiveComplementaryArea(storeName),
 );
+
+export function isInserterSidebarOpened(state: State): boolean {
+  return state.inserterSidebar.isOpened;
+}