-
-
+export default () => {
+ const sidebarOpened = useSelect(
+ (select) => select('mailpoet-form-editor').getSidebarOpened(),
+ []
+ );
+ const layoutClass = classnames('edit-post-layout', {
+ 'is-sidebar-opened': sidebarOpened,
+ });
+ return (
+
+
+
+
+ { sidebarOpened ? : '' }
+
-
-
-
-
-);
+ );
+};
diff --git a/assets/js/src/form_editor/components/header.jsx b/assets/js/src/form_editor/components/header.jsx
index 13d08d856f..e6b6e509e1 100644
--- a/assets/js/src/form_editor/components/header.jsx
+++ b/assets/js/src/form_editor/components/header.jsx
@@ -1,22 +1,31 @@
import React from 'react';
import { IconButton } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
-export default () => (
-
-
-
-
-
null}
- isToggled
- />
+export default () => {
+ const sidebarOpened = useSelect(
+ (select) => select('mailpoet-form-editor').getSidebarOpened(),
+ []
+ );
+ const { toggleSidebar } = useDispatch('mailpoet-form-editor');
+ return (
+
+
+
+
+ toggleSidebar(!sidebarOpened)}
+ isToggled={sidebarOpened}
+ />
+
-
-);
+ );
+};
diff --git a/assets/js/src/form_editor/components/sidebar.jsx b/assets/js/src/form_editor/components/sidebar.jsx
index d2a08175fe..dc6267eff4 100644
--- a/assets/js/src/form_editor/components/sidebar.jsx
+++ b/assets/js/src/form_editor/components/sidebar.jsx
@@ -1,5 +1,6 @@
import React, { useState } from 'react';
import { IconButton } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
import PropTypes from 'prop-types';
import BlockSettings from './block_settings.jsx';
import FormSettings from './form_settings.jsx';
@@ -26,9 +27,12 @@ SidebarHeader.propTypes = {
export default () => {
const [activeTab, setActiveTab] = useState('form');
+
+ const { toggleSidebar } = useDispatch('mailpoet-form-editor');
+
return (
-
+ toggleSidebar(false)}>
-
,
appElement
diff --git a/assets/js/src/form_editor/store/actions.jsx b/assets/js/src/form_editor/store/actions.jsx
new file mode 100644
index 0000000000..41f90b0385
--- /dev/null
+++ b/assets/js/src/form_editor/store/actions.jsx
@@ -0,0 +1,8 @@
+export default {
+ toggleSidebar(toggleTo) {
+ return {
+ type: 'TOGGLE_SIDEBAR',
+ toggleTo,
+ };
+ },
+};
diff --git a/assets/js/src/form_editor/store/index.jsx b/assets/js/src/form_editor/store/index.jsx
new file mode 100644
index 0000000000..6216dd69f2
--- /dev/null
+++ b/assets/js/src/form_editor/store/index.jsx
@@ -0,0 +1,14 @@
+import { registerStore } from '@wordpress/data';
+import actions from './actions.jsx';
+import reducer from './reducer.jsx';
+import selectors from './selectors.jsx';
+
+const config = {
+ reducer,
+ actions,
+ selectors,
+ controls: {},
+ resolvers: {},
+};
+
+export default () => (registerStore('mailpoet-form-editor', config));
diff --git a/assets/js/src/form_editor/store/reducer.jsx b/assets/js/src/form_editor/store/reducer.jsx
new file mode 100644
index 0000000000..c3507f211a
--- /dev/null
+++ b/assets/js/src/form_editor/store/reducer.jsx
@@ -0,0 +1,15 @@
+const DEFAULT_STATE = {
+ sidebarOpened: true,
+};
+
+export default (state = DEFAULT_STATE, action) => {
+ switch (action.type) {
+ case 'TOGGLE_SIDEBAR':
+ return {
+ ...state,
+ sidebarOpened: action.toggleTo,
+ };
+ default:
+ return state;
+ }
+};
diff --git a/assets/js/src/form_editor/store/selectors.jsx b/assets/js/src/form_editor/store/selectors.jsx
new file mode 100644
index 0000000000..fff2b1f327
--- /dev/null
+++ b/assets/js/src/form_editor/store/selectors.jsx
@@ -0,0 +1,5 @@
+export default {
+ getSidebarOpened(state) {
+ return state.sidebarOpened;
+ },
+};