Add inserter sidebar

[MAILPOET-5603]

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">

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>
+  );
+}

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>

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;
+}