diff --git a/mailpoet/assets/js/src/email-editor/engine/components/sidebar/header.tsx b/mailpoet/assets/js/src/email-editor/engine/components/sidebar/header.tsx index 511fc14e01..51a8ae762a 100644 --- a/mailpoet/assets/js/src/email-editor/engine/components/sidebar/header.tsx +++ b/mailpoet/assets/js/src/email-editor/engine/components/sidebar/header.tsx @@ -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 (
@@ -34,11 +37,11 @@ export function Header({ sidebarKey }: Props) {