Use @wordpress/editor store with email editor components

MAILPOET-6303

packages/js/email-editor/src/components/block-editor/layout.tsx

@@ -1,5 +1,5 @@
 import { BlockSelectionClearer } from '@wordpress/block-editor';
-import { UnsavedChangesWarning } from '@wordpress/editor';
+import { store as editorStore, UnsavedChangesWarning } from '@wordpress/editor';
 import { uploadMedia } from '@wordpress/media-utils';
 import classnames from 'classnames';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -42,10 +42,10 @@ export function Layout() {
 			isFullscreenActive:
 				select( storeName ).isFeatureActive( 'fullscreenMode' ),
 			isSidebarOpened: select( storeName ).isSidebarOpened(),
-			isInserterSidebarOpened:
+			// @ts-expect-error isInserterOpened is missing in types.
-				select( storeName ).isInserterSidebarOpened(),
+			isInserterSidebarOpened: select( editorStore ).isInserterOpened(),
-			isListviewSidebarOpened:
+			// @ts-expect-error isListViewOpened is missing in types.
-				select( storeName ).isListviewSidebarOpened(),
+			isListviewSidebarOpened: select( editorStore ).isListViewOpened(),
 			initialSettings: select( storeName ).getInitialEditorSettings(),
 			previewDeviceType: select( storeName ).getDeviceType(),
 			canUserEditMedia: select( coreStore ).canUser( 'create', 'media' ),
@@ -57,7 +57,8 @@ export function Layout() {
 		[]
 	);
 
-	const { toggleInserterSidebar } = useDispatch( storeName );
+	// @ts-expect-error isInserterOpened is missing in types.
+	const { setIsInserterOpened } = useDispatch( editorStore );
 
 	const [ emailCss ] = useEmailCss();
 	const className = classnames( 'edit-post-layout', {
@@ -105,7 +106,7 @@ export function Layout() {
 							onClick={ () => {
 								// Clear inserter sidebar when canvas is clicked.
 								if ( isInserterSidebarOpened ) {
-									void toggleInserterSidebar();
+									void setIsInserterOpened( false );
 								}
 							} }
 						>

packages/js/email-editor/src/components/header/header.tsx

@@ -48,9 +48,10 @@ export function Header() {
 	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
 		useState( false );
 
-	const { toggleInserterSidebar, toggleListviewSidebar } =
-		useDispatch( storeName );
 	const { undo: undoAction, redo: redoAction } = useDispatch( coreDataStore );
+	// @ts-expect-error missing types.
+	const { setIsInserterOpened, setIsListViewOpened } =
+		useDispatch( editorStore );
 	const {
 		isInserterSidebarOpened,
 		isListviewSidebarOpened,
@@ -67,10 +68,10 @@ export function Header() {
 		const editorSettings = _getEditorSettings();
 
 		return {
-			isInserterSidebarOpened:
+			// @ts-expect-error missing types.
-				select( storeName ).isInserterSidebarOpened(),
+			isInserterSidebarOpened: select( editorStore ).isInserterOpened(),
-			isListviewSidebarOpened:
+			// @ts-expect-error missing types.
-				select( storeName ).isListviewSidebarOpened(),
+			isListviewSidebarOpened: select( editorStore ).isListViewOpened(),
 			isFixedToolbarActive: select( preferencesStore ).get(
 				'core',
 				'fixedToolbar'
@@ -88,6 +89,20 @@ export function Header() {
 		event.preventDefault();
 	};
 
+	const toggleTheInserterSidebar = () => {
+		if ( isInserterSidebarOpened ) {
+			return setIsInserterOpened( false );
+		}
+		return setIsInserterOpened( true );
+	};
+
+	const toggleTheListviewSidebar = () => {
+		if ( isListviewSidebarOpened ) {
+			return setIsListViewOpened( false );
+		}
+		return setIsListViewOpened( true );
+	};
+
 	const shortLabelInserter = ! isInserterSidebarOpened
 		? __( 'Add', 'mailpoet' )
 		: __( 'Close', 'mailpoet' );
@@ -107,7 +122,7 @@ export function Header() {
 							variant="primary"
 							isPressed={ isInserterSidebarOpened }
 							onMouseDown={ preventDefault }
-							onClick={ toggleInserterSidebar }
+							onClick={ toggleTheInserterSidebar }
 							disabled={ false }
 							icon={ plus }
 							label={ shortLabelInserter }
@@ -144,7 +159,7 @@ export function Header() {
 							className="editor-header-toolbar__document-overview-toggle edit-post-header-toolbar__document-overview-toggle"
 							isPressed={ isListviewSidebarOpened }
 							onMouseDown={ preventDefault }
-							onClick={ toggleListviewSidebar }
+							onClick={ toggleTheListviewSidebar }
 							disabled={ false }
 							icon={ listView }
 							label={ __( 'List view', 'mailpoet' ) }

packages/js/email-editor/src/components/inserter-sidebar/inserter-sidebar.tsx

@@ -4,7 +4,6 @@ import {
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
-import { storeName } from '../../store';
 
 export function InserterSidebar() {
 	const { postContentId, isEditingEmailContent } = useSelect( ( select ) => {
@@ -18,7 +17,8 @@ export function InserterSidebar() {
 		};
 	} );
 
-	const { toggleInserterSidebar } = useDispatch( storeName );
+	// @ts-expect-error missing types.
+	const { setIsInserterOpened } = useDispatch( editorStore );
 
 	return (
 		<div className="editor-inserter-sidebar">
@@ -30,7 +30,7 @@ export function InserterSidebar() {
 					rootClientId={
 						isEditingEmailContent ? postContentId : null
 					}
-					onClose={ toggleInserterSidebar }
+					onClose={ () => setIsInserterOpened( false ) }
 				/>
 			</div>
 		</div>

packages/js/email-editor/src/store/actions.ts

@@ -14,20 +14,6 @@ export const toggleFeature =
 	( { registry } ): unknown =>
 		registry.dispatch( preferencesStore ).toggle( storeName, feature );
 
-export const toggleInserterSidebar =
-	() =>
-	( { registry } ) => {
-		const status = registry.select( editorStore ).isInserterOpened();
-		void registry.dispatch( editorStore ).setIsInserterOpened( ! status );
-	};
-
-export const toggleListviewSidebar =
-	() =>
-	( { registry } ) => {
-		const status = registry.select( editorStore ).isListViewOpened();
-		void registry.dispatch( editorStore ).setIsListViewOpened( ! status );
-	};
-
 export const changePreviewDeviceType =
 	( deviceType: string ) =>
 	( { registry } ) =>

packages/js/email-editor/src/store/selectors.ts

@@ -231,18 +231,6 @@ export function getEmailPostId( state: State ): number {
 	return state.postId;
 }
 
-export const isInserterSidebarOpened = createRegistrySelector(
-	( select ) => () =>
-		// @ts-expect-error isInserterOpened is missing in types.
-		select( editorStore ).isInserterOpened() as boolean
-);
-
-export const isListviewSidebarOpened = createRegistrySelector(
-	( select ) => () =>
-		// @ts-expect-error isListViewOpened is missing in types.
-		select( editorStore ).isListViewOpened() as boolean
-);
-
 export function getSettingsSidebarActiveTab( state: State ): string {
 	return state.settingsSidebar.activeTab;
 }