Replace logic for detection of editor mode by the useEditorMode hook

[MAILPOET-6336]

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

@@ -1,3 +1,6 @@
+/**
+ * WordPress dependencies
+ */
 import { useRef, useState } from '@wordpress/element';
 import { PinnedItems } from '@wordpress/interface';
 import { Button, ToolbarItem as WpToolbarItem } from '@wordpress/components';
@@ -13,6 +16,10 @@ import { DocumentBar, store as editorStore } from '@wordpress/editor';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { __ } from '@wordpress/i18n';
 import { plus, listView, undo, redo, next, previous } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
 import classnames from 'classnames';
 import { storeName } from '../../store';
 import { MoreMenu } from './more-menu';
@@ -20,6 +27,7 @@ import { PreviewDropdown } from '../preview';
 import { SaveButton } from './save-button';
 import { CampaignName } from './campaign-name';
 import { SendButton } from './send-button';
+import { useEditorMode } from '../../hooks';
 
 // Build type for ToolbarItem contains only "as" and "children" properties but it takes all props from
 // component passed to "as" property (in this case Button). So as fix for TS errors we need to pass all props from Button to ToolbarItem.
@@ -57,11 +65,7 @@ export function Header() {
 		isBlockSelected,
 		hasUndo,
 		hasRedo,
-		hasDocumentNavigationHistory,
 	} = useSelect( ( select ) => {
-		const { getEditorSettings } = select( editorStore );
-		const editorSettings = getEditorSettings();
-
 		return {
 			// @ts-expect-error missing types.
 			isInserterSidebarOpened: select( editorStore ).isInserterOpened(),
@@ -75,13 +79,11 @@ export function Header() {
 				!! select( blockEditorStore ).getBlockSelectionStart(),
 			hasUndo: select( coreDataStore ).hasUndo(),
 			hasRedo: select( coreDataStore ).hasRedo(),
-
-			hasDocumentNavigationHistory:
-				// @ts-expect-error No types for this exist yet.
-				!! editorSettings.onNavigateToPreviousEntityRecord,
 		};
 	}, [] );
 
+	const [ editorMode ] = useEditorMode();
+
 	const preventDefault = ( event ) => {
 		event.preventDefault();
 	};
@@ -198,7 +200,7 @@ export function Header() {
 				! isBlockSelected ||
 				isBlockToolsCollapsed ) && (
 				<div className="editor-header__center edit-post-header__center">
-					{ hasDocumentNavigationHistory ? (
+					{ editorMode === 'template' ? (
 						<DocumentBar />
 					) : (
 						<CampaignName />

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

@@ -1,14 +1,13 @@
 import { __ } from '@wordpress/i18n';
 import { Button } from '@wordpress/components';
 import {
-	store as editorStore,
 	// @ts-expect-error No types available for useEntitiesSavedStatesIsDirty
 	useEntitiesSavedStatesIsDirty,
 } from '@wordpress/editor';
 import { useEntityProp } from '@wordpress/core-data';
 import { MailPoetEmailData, storeName } from '../../store';
 import { useSelect } from '@wordpress/data';
-import { useContentValidation } from '../../hooks';
+import { useContentValidation, useEditorMode } from '../../hooks';
 
 export function SendButton() {
 	const [ mailpoetEmail ] = useEntityProp(
@@ -20,18 +19,18 @@ export function SendButton() {
 	const { isDirty } = useEntitiesSavedStatesIsDirty();
 
 	const { validateContent, isValid } = useContentValidation();
-	const { hasEmptyContent, isEmailSent, isEditingTemplate } = useSelect(
+	const { hasEmptyContent, isEmailSent } = useSelect(
 		( select ) => ( {
 			hasEmptyContent: select( storeName ).hasEmptyContent(),
 			isEmailSent: select( storeName ).isEmailSent(),
-			isEditingTemplate:
-				select( editorStore ).getCurrentPostType() === 'wp_template',
 		} ),
 		[]
 	);
 
+	const [ editorMode ] = useEditorMode();
+
 	const isDisabled =
-		isEditingTemplate ||
+		editorMode === 'template' ||
 		hasEmptyContent ||
 		isEmailSent ||
 		isValid ||

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

@@ -1,3 +1,6 @@
+/**
+ * WordPress dependencies
+ */
 import {
 	__experimentalLibrary as Library, // eslint-disable-line
 	store as blockEditorStore,
@@ -5,18 +8,23 @@ import {
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 
+/**
+ * Internal dependencies
+ */
+import { useEditorMode } from '../../hooks';
+
 export function InserterSidebar() {
-	const { postContentId, isEditingEmailContent } = useSelect( ( select ) => {
+	const { postContentId } = useSelect( ( select ) => {
 		const blocks = select( blockEditorStore ).getBlocks();
 		return {
 			postContentId: blocks.find(
 				( block ) => block.name === 'core/post-content'
 			)?.clientId,
-			isEditingEmailContent:
-				select( editorStore ).getCurrentPostType() !== 'wp_template',
 		};
 	} );
 
+	const [ editorMode ] = useEditorMode();
+
 	// @ts-expect-error missing types.
 	const { setIsInserterOpened } = useDispatch( editorStore );
 
@@ -28,7 +36,7 @@ export function InserterSidebar() {
 					showInserterHelpPanel={ false }
 					// In the email content mode we insert primarily into the post content block.
 					rootClientId={
-						isEditingEmailContent ? postContentId : null
+						editorMode === 'email' ? postContentId : null
 					}
 					onClose={ () => setIsInserterOpened( false ) }
 				/>

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

@@ -10,7 +10,6 @@ import {
 } from '@wordpress/block-editor';
 import { ComplementaryArea } from '@wordpress/interface';
 import { drawerRight } from '@wordpress/icons';
-import { store as editorStore } from '@wordpress/editor';
 
 /**
  * WordPress private dependencies
@@ -29,19 +28,14 @@ import {
 import { Header } from './header';
 import { EmailSettings } from './email-settings';
 import { TemplateSettings } from './template-settings';
+import { useEditorMode } from '../../hooks';
 
 import './index.scss';
 
 type Props = React.ComponentProps< typeof ComplementaryArea >;
 
 function SidebarContent( props: Props ) {
-	const { isEditingTemplate } = useSelect(
-		( select ) => ( {
-			isEditingTemplate:
-				select( editorStore ).getCurrentPostType() === 'wp_template',
-		} ),
-		[]
-	);
+	const [ editorMode ] = useEditorMode();
 
 	const tabListRef = useRef( null );
 	// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
@@ -65,7 +59,7 @@ function SidebarContent( props: Props ) {
 		>
 			<Tabs.Context.Provider value={ tabsContextValue }>
 				<Tabs.TabPanel tabId={ mainSidebarEmailTab }>
-					{ isEditingTemplate ? (
+					{ editorMode === 'template' ? (
 						<TemplateSettings />
 					) : (
 						<EmailSettings />