diff --git a/assets/css/src/components/_postEditorBlock.scss b/assets/css/src/components/_postEditorBlock.scss index 3194d52407..dabafb7a2a 100644 --- a/assets/css/src/components/_postEditorBlock.scss +++ b/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; } diff --git a/assets/js/src/post_editor_block/edit.jsx b/assets/js/src/post_editor_block/edit.jsx index b4e7f93b2c..759b0ac7e4 100644 --- a/assets/js/src/post_editor_block/edit.jsx +++ b/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 { BlockIcon } = wp.blockEditor; +const { Placeholder, PanelBody } = wp.components; +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} > {allForms.map((form) => ( @@ -41,34 +41,47 @@ function Edit({ attributes, setAttributes }) { ); } + function selectFormSettings() { + return ( +
+ + Create a new form + + {displayFormsSelect()} +
+ ); + } + return ( -
- { - attributes.selectedForm === null && ( - } - label="MailPoet Subscription Form" - > -
- - Create a new form - - {displayFormsSelect()} -
-
- ) - } - { - attributes.selectedForm !== null && ( - renderForm() - ) - } -
+ <> + + + {selectFormSettings()} + + +
+ { + attributes.selectedForm === null && ( + } + label="MailPoet Subscription Form" + > + {selectFormSettings()} + + ) + } + { + attributes.selectedForm !== null && ( + renderForm() + ) + } +
+ ); }