diff --git a/packages/js/email-editor/src/components/block-editor/layout.tsx b/packages/js/email-editor/src/components/block-editor/layout.tsx index 8a9dd3ec18..f8354151a8 100644 --- a/packages/js/email-editor/src/components/block-editor/layout.tsx +++ b/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: - select( storeName ).isInserterSidebarOpened(), - isListviewSidebarOpened: - select( storeName ).isListviewSidebarOpened(), + // @ts-expect-error isInserterOpened is missing in types. + isInserterSidebarOpened: select( editorStore ).isInserterOpened(), + // @ts-expect-error isListViewOpened is missing in types. + 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 ); } } } > diff --git a/packages/js/email-editor/src/components/header/header.tsx b/packages/js/email-editor/src/components/header/header.tsx index 7987b6fa22..d0cfea2f23 100644 --- a/packages/js/email-editor/src/components/header/header.tsx +++ b/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: - select( storeName ).isInserterSidebarOpened(), - isListviewSidebarOpened: - select( storeName ).isListviewSidebarOpened(), + // @ts-expect-error missing types. + isInserterSidebarOpened: select( editorStore ).isInserterOpened(), + // @ts-expect-error missing types. + 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' ) } diff --git a/packages/js/email-editor/src/components/inserter-sidebar/inserter-sidebar.tsx b/packages/js/email-editor/src/components/inserter-sidebar/inserter-sidebar.tsx index 4ea6a8128f..5f19580d4a 100644 --- a/packages/js/email-editor/src/components/inserter-sidebar/inserter-sidebar.tsx +++ b/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 (