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,15 +41,8 @@ function Edit({ attributes, setAttributes }) {
     );
   }
 
+  function selectFormSettings() {
     return (
-    <div className="mailpoet-block-div">
-      {
-        attributes.selectedForm === null && (
-          <Placeholder
-            className="mailpoet-block-create-new"
-            icon={<BlockIcon icon={Icon} showColors />}
-            label="MailPoet Subscription Form"
-          >
       <div className="mailpoet-block-create-new-content">
         <a
           href="admin.php?page=mailpoet-forms"
@@ -60,6 +53,25 @@ function Edit({ attributes, setAttributes }) {
         </a>
         {displayFormsSelect()}
       </div>
+    );
+  }
+
+  return (
+    <>
+      <InspectorControls>
+        <PanelBody title="MailPoet Subscription Form" initialOpen>
+          {selectFormSettings()}
+        </PanelBody>
+      </InspectorControls>
+      <div className="mailpoet-block-div">
+        {
+          attributes.selectedForm === null && (
+            <Placeholder
+              className="mailpoet-block-create-new"
+              icon={<BlockIcon icon={Icon} showColors />}
+              label="MailPoet Subscription Form"
+            >
+              {selectFormSettings()}
             </Placeholder>
           )
         }
@@ -69,6 +81,7 @@ function Edit({ attributes, setAttributes }) {
           )
         }
       </div>
+    </>
   );
 }