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) {