Switch sidebar tab when block is selected

[MAILPOET-2451]

assets/js/src/form_editor/components/sidebar.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { IconButton } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
@@ -34,8 +34,21 @@ export default () => {
     []
   );
 
+  const selectedBlockId = useSelect(
+    (select) => select('core/block-editor').getSelectedBlockClientId(),
+    []
+  );
+
   const { toggleSidebar, switchSidebarTab } = useDispatch('mailpoet-form-editor');
 
+  useEffect(() => {
+    if (selectedBlockId) {
+      switchSidebarTab('block');
+    } else {
+      switchSidebarTab('form');
+    }
+  }, [selectedBlockId, switchSidebarTab]);
+
   return (
     <div className="edit-post-sidebar">
       <SidebarHeader closeSidebar={() => toggleSidebar(false)}>