Save active tab in email editor store
[MAILPOET-5638]
This commit is contained in:
@ -1,32 +1,35 @@
|
||||
import classnames from 'classnames';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useEffect } from '@wordpress/element';
|
||||
import { useDispatch, useSelect } from '@wordpress/data';
|
||||
import { store as blockEditorStore } from '@wordpress/block-editor';
|
||||
import { useDispatch, useSelect } from '@wordpress/data';
|
||||
import { useEffect } from '@wordpress/element';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import classnames from 'classnames';
|
||||
import {
|
||||
mainSidebarEmailKey,
|
||||
mainSidebarBlockKey,
|
||||
mainSidebarBlockTab,
|
||||
mainSidebarEmailTab,
|
||||
storeName,
|
||||
} from '../../store';
|
||||
|
||||
type Props = {
|
||||
sidebarKey: string;
|
||||
};
|
||||
|
||||
export function Header({ sidebarKey }: Props) {
|
||||
const { openSidebar } = useDispatch(storeName);
|
||||
export function Header() {
|
||||
const { toggleSettingsSidebarActiveTab } = useDispatch(storeName);
|
||||
|
||||
const selectedBlockId = useSelect(
|
||||
(select) => select(blockEditorStore).getSelectedBlockClientId(),
|
||||
[],
|
||||
);
|
||||
|
||||
const activeTab = useSelect(
|
||||
(select) => select(storeName).getSettingsSidebarActiveTab(),
|
||||
[],
|
||||
);
|
||||
|
||||
// Switch tab based on selected block.
|
||||
useEffect(() => {
|
||||
void openSidebar(
|
||||
selectedBlockId ? mainSidebarBlockKey : mainSidebarEmailKey,
|
||||
);
|
||||
}, [selectedBlockId, openSidebar]);
|
||||
if (selectedBlockId) {
|
||||
void toggleSettingsSidebarActiveTab(mainSidebarBlockTab);
|
||||
} else {
|
||||
void toggleSettingsSidebarActiveTab(mainSidebarEmailTab);
|
||||
}
|
||||
}, [selectedBlockId, toggleSettingsSidebarActiveTab]);
|
||||
|
||||
return (
|
||||
<div className="components-panel__header interface-complementary-area-header edit-post-sidebar__panel-tabs">
|
||||
@ -34,11 +37,11 @@ export function Header({ sidebarKey }: Props) {
|
||||
<li>
|
||||
<button
|
||||
onClick={() => {
|
||||
void openSidebar(mainSidebarEmailKey);
|
||||
void toggleSettingsSidebarActiveTab(mainSidebarEmailTab);
|
||||
}}
|
||||
className={classnames(
|
||||
'components-button edit-post-sidebar__panel-tab',
|
||||
{ 'is-active': sidebarKey === mainSidebarEmailKey },
|
||||
{ 'is-active': activeTab === mainSidebarEmailTab },
|
||||
)}
|
||||
data-automation-id="email_settings_tab"
|
||||
type="button"
|
||||
@ -49,11 +52,11 @@ export function Header({ sidebarKey }: Props) {
|
||||
<li>
|
||||
<button
|
||||
onClick={() => {
|
||||
void openSidebar(mainSidebarBlockKey);
|
||||
void toggleSettingsSidebarActiveTab(mainSidebarBlockTab);
|
||||
}}
|
||||
className={classnames(
|
||||
'components-button edit-post-sidebar__panel-tab',
|
||||
{ 'is-active': sidebarKey === mainSidebarBlockKey },
|
||||
{ 'is-active': activeTab === mainSidebarBlockTab },
|
||||
)}
|
||||
data-automation-id="mailpoet_block_settings_tab"
|
||||
type="button"
|
||||
|
@ -2,16 +2,14 @@ import { Panel } from '@wordpress/components';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useSelect } from '@wordpress/data';
|
||||
import { BlockInspector } from '@wordpress/block-editor';
|
||||
import {
|
||||
ComplementaryArea,
|
||||
store as interfaceStore,
|
||||
} from '@wordpress/interface';
|
||||
import { ComplementaryArea } from '@wordpress/interface';
|
||||
import { ComponentProps } from 'react';
|
||||
import { drawerRight } from '@wordpress/icons';
|
||||
import {
|
||||
storeName,
|
||||
mainSidebarEmailKey,
|
||||
mainSidebarBlockKey,
|
||||
mainSidebarEmailTab,
|
||||
mainSidebarBlockTab,
|
||||
mainSidebarId,
|
||||
} from '../../store';
|
||||
import { Header } from './header';
|
||||
import { EmailSettings } from './email-settings';
|
||||
@ -19,25 +17,24 @@ import { EmailSettings } from './email-settings';
|
||||
type Props = ComponentProps<typeof ComplementaryArea>;
|
||||
|
||||
export function Sidebar(props: Props): JSX.Element {
|
||||
const { sidebarKey } = useSelect((select) => ({
|
||||
sidebarKey:
|
||||
select(interfaceStore).getActiveComplementaryArea(storeName) ??
|
||||
mainSidebarEmailKey,
|
||||
}));
|
||||
const activeTab = useSelect(
|
||||
(select) => select(storeName).getSettingsSidebarActiveTab(),
|
||||
[],
|
||||
);
|
||||
|
||||
return (
|
||||
<ComplementaryArea
|
||||
identifier={sidebarKey}
|
||||
identifier={mainSidebarId}
|
||||
className="edit-post-sidebar"
|
||||
header={<Header sidebarKey={sidebarKey} />}
|
||||
header={<Header />}
|
||||
icon={drawerRight}
|
||||
scope={storeName}
|
||||
smallScreenTitle={__('No title', 'mailpoet')}
|
||||
isActiveByDefault
|
||||
{...props}
|
||||
>
|
||||
{sidebarKey === mainSidebarEmailKey && <EmailSettings />}
|
||||
{sidebarKey === mainSidebarBlockKey && (
|
||||
{activeTab === mainSidebarEmailTab && <EmailSettings />}
|
||||
{activeTab === mainSidebarBlockTab && (
|
||||
<Panel>
|
||||
<BlockInspector />
|
||||
</Panel>
|
||||
|
@ -5,7 +5,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
|
||||
import { store as noticesStore } from '@wordpress/notices';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { apiFetch } from '@wordpress/data-controls';
|
||||
import { storeName, mainSidebarEmailKey } from './constants';
|
||||
import { storeName, mainSidebarEmailTab } from './constants';
|
||||
import { SendingPreviewStatus, State, Feature } from './types';
|
||||
|
||||
export const toggleFeature =
|
||||
@ -47,7 +47,7 @@ export function updateSendPreviewEmail(toEmail: string) {
|
||||
}
|
||||
|
||||
export const openSidebar =
|
||||
(key = mainSidebarEmailKey) =>
|
||||
(key = mainSidebarEmailTab) =>
|
||||
({ registry }): unknown =>
|
||||
registry.dispatch(interfaceStore).enableComplementaryArea(storeName, key);
|
||||
|
||||
@ -56,6 +56,13 @@ export const closeSidebar =
|
||||
({ registry }): unknown =>
|
||||
registry.dispatch(interfaceStore).disableComplementaryArea(storeName);
|
||||
|
||||
export function toggleSettingsSidebarActiveTab(activeTab: string) {
|
||||
return {
|
||||
type: 'TOGGLE_SETTINGS_SIDEBAR_ACTIVE_TAB',
|
||||
state: { activeTab } as Partial<State['settingsSidebar']>,
|
||||
} as const;
|
||||
}
|
||||
|
||||
export function* saveEditedEmail() {
|
||||
const postId = select(storeName).getEmailPostId();
|
||||
// This returns a promise
|
||||
|
@ -1,5 +1,5 @@
|
||||
export const storeName = 'email-editor/editor';
|
||||
|
||||
export const mainSidebarId = 'email-editor/editor/main';
|
||||
export const mainSidebarEmailKey = 'email-editor/editor/main/email';
|
||||
export const mainSidebarBlockKey = 'email-editor/editor/main/block';
|
||||
export const mainSidebarEmailTab = 'email';
|
||||
export const mainSidebarBlockTab = 'block';
|
||||
|
@ -1,3 +1,4 @@
|
||||
import { mainSidebarEmailTab } from './constants';
|
||||
import { State } from './types';
|
||||
import {
|
||||
getEditorLayout,
|
||||
@ -15,6 +16,9 @@ export function getInitialState(): State {
|
||||
listviewSidebar: {
|
||||
isOpened: false,
|
||||
},
|
||||
settingsSidebar: {
|
||||
activeTab: mainSidebarEmailTab,
|
||||
},
|
||||
postId,
|
||||
editorSettings: getEditorSettings(),
|
||||
layoutStyles: getEmailLayoutStyles(),
|
||||
|
@ -31,6 +31,14 @@ export function reducer(state: State, action): State {
|
||||
...state,
|
||||
preview: { ...state.preview, ...action.state },
|
||||
};
|
||||
case 'TOGGLE_SETTINGS_SIDEBAR_ACTIVE_TAB':
|
||||
return {
|
||||
...state,
|
||||
settingsSidebar: {
|
||||
...state.settingsSidebar,
|
||||
activeTab: action.state.activeTab,
|
||||
},
|
||||
};
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
@ -111,6 +111,10 @@ export function isListviewSidebarOpened(state: State): boolean {
|
||||
return state.listviewSidebar.isOpened;
|
||||
}
|
||||
|
||||
export function getSettingsSidebarActiveTab(state: State): string {
|
||||
return state.settingsSidebar.activeTab;
|
||||
}
|
||||
|
||||
export function getInitialEditorSettings(
|
||||
state: State,
|
||||
): State['editorSettings'] {
|
||||
|
@ -48,6 +48,9 @@ export type State = {
|
||||
listviewSidebar: {
|
||||
isOpened: boolean;
|
||||
};
|
||||
settingsSidebar: {
|
||||
activeTab: string;
|
||||
};
|
||||
postId: number;
|
||||
editorSettings: EmailEditorSettings;
|
||||
layoutStyles: EmailLayoutStyles;
|
||||
|
Reference in New Issue
Block a user