Add settings

[MAILPOET-1798]

assets/css/src/components/_postEditorBlock.scss

@@ -5,4 +5,6 @@
 .mailpoet-block-create-new-content {
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
+  min-height: 60px;
 }

assets/js/src/post_editor_block/edit.jsx

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import Icon from './icon.jsx';
 
 const wp = window.wp;
-const { Placeholder } = wp.components;
+const { Placeholder, PanelBody } = wp.components;
-const { BlockIcon } = wp.blockEditor;
+const { BlockIcon, InspectorControls } = wp.blockEditor;
 const ServerSideRender = wp.serverSideRender;
 const allForms = window.mailpoet_forms;
 
@@ -20,7 +20,7 @@ function Edit({ attributes, setAttributes }) {
           });
         }}
         className="mailpoet-block-create-forms-list"
-        defaultValue={attributes.selectedForm}
+        value={attributes.selectedForm}
       >
         <option value="" disabled selected>Select a MailPoet form</option>
         {allForms.map((form) => (
@@ -41,34 +41,47 @@ function Edit({ attributes, setAttributes }) {
     );
   }
 
+  function selectFormSettings() {
+    return (
+      <div className="mailpoet-block-create-new-content">
+        <a
+          href="admin.php?page=mailpoet-forms"
+          target="_blank"
+          className="mailpoet-block-create-new-link"
+        >
+          Create a new form
+        </a>
+        {displayFormsSelect()}
+      </div>
+    );
+  }
+
   return (
-    <div className="mailpoet-block-div">
+    <>
-      {
+      <InspectorControls>
-        attributes.selectedForm === null && (
+        <PanelBody title="MailPoet Subscription Form" initialOpen>
-          <Placeholder
+          {selectFormSettings()}
-            className="mailpoet-block-create-new"
+        </PanelBody>
-            icon={<BlockIcon icon={Icon} showColors />}
+      </InspectorControls>
-            label="MailPoet Subscription Form"
+      <div className="mailpoet-block-div">
-          >
+        {
-            <div className="mailpoet-block-create-new-content">
+          attributes.selectedForm === null && (
-              <a
+            <Placeholder
-                href="admin.php?page=mailpoet-forms"
+              className="mailpoet-block-create-new"
-                target="_blank"
+              icon={<BlockIcon icon={Icon} showColors />}
-                className="mailpoet-block-create-new-link"
+              label="MailPoet Subscription Form"
-              >
+            >
-                Create a new form
+              {selectFormSettings()}
-              </a>
+            </Placeholder>
-              {displayFormsSelect()}
+          )
-            </div>
+        }
-          </Placeholder>
+        {
-        )
+          attributes.selectedForm !== null && (
-      }
+            renderForm()
-      {
+          )
-        attributes.selectedForm !== null && (
+        }
-          renderForm()
+      </div>
-        )
+    </>
-      }
-    </div>
   );
 }