diff --git a/assets/js/src/form_editor/components/editor.jsx b/assets/js/src/form_editor/components/editor.jsx index 9642d413d4..b0010cee88 100644 --- a/assets/js/src/form_editor/components/editor.jsx +++ b/assets/js/src/form_editor/components/editor.jsx @@ -1,20 +1,31 @@ import React from 'react'; +import { useSelect } from '@wordpress/data'; +import classnames from 'classnames'; import Header from './header.jsx'; import Sidebar from './sidebar.jsx'; import FormTitle from './form_title.jsx'; -export default () => ( -
-
-
-
-
- +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)}>