Fix header appearance in the form editor

[MAILPOET-6054]

mailpoet/assets/css/src/components-form-editor/_block-editor.scss

@@ -12,12 +12,6 @@
   }
 }
 
-// Fix for settings toolbar placement in header
-.edit-post-header {
-  flex-direction: row-reverse;
-  justify-content: space-between;
-}
-
 // Fix for default appender appearance
 // We don't use any default block (WP Post editor has paragraph)
 // and CSS distributed within packages is works only with the paragraph block
@@ -140,18 +134,6 @@ h2 {
   padding: 10px;
 }
 
-// Close button animation
-.edit-post-header-toolbar.edit-post-header-toolbar__left
-  > .edit-post-header-toolbar__inserter-toggle {
-  svg {
-    transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
-  }
-
-  &.is-pressed svg {
-    transform: rotate(45deg);
-  }
-}
-
 // Hide block selector header with close button on desktops
 
 @include respond-to(not-small-screen) {

mailpoet/assets/css/src/components-form-editor/_header.scss

@@ -1,9 +1,26 @@
+// Fix for settings toolbar placement in header
+.edit-post-header {
+  flex-direction: row-reverse;
+  justify-content: space-between;
+}
+
+// Header buttons spacing
 .mailpoet-editor-header-button {
   padding-left: 8px;
   padding-right: 8px;
 
   @media (min-width: 600px) {
-    margin-right: 12px;
     padding: 0 12px;
   }
 }
+
+// Close button animation
+.editor-document-tools__left > .edit-post-header-toolbar__inserter-toggle {
+  svg {
+    transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
+  }
+
+  &.is-pressed svg {
+    transform: rotate(45deg);
+  }
+}

mailpoet/assets/js/src/form-editor/components/header.jsx

@@ -35,8 +35,8 @@ function Header({ isInserterOpened, setIsInserterOpened }) {
     useDispatch(storeName);
 
   return (
-    <div className="edit-post-header">
+    <div className="editor-header edit-post-header">
-      <div className="edit-post-header__settings">
+      <div className="editor-header__settings">
         <Button
           variant="secondary"
           onClick={showPreview}
@@ -87,27 +87,29 @@ function Header({ isInserterOpened, setIsInserterOpened }) {
           )}
         </DropdownMenu>
       </div>
-      <div className="edit-post-header__toolbar">
+      <div className="editor-header__toolbar">
-        <div className="toolbar edit-post-header-toolbar edit-post-header-toolbar__left">
+        <div className="toolbar edit-post-header-toolbar">
-          <Button
+          <div className="editor-document-tools__left">
-            variant="secondary"
+            <Button
-            href="?page=mailpoet-forms#/"
+              variant="secondary"
-            className="mailpoet-editor-header-button"
+              href="?page=mailpoet-forms#/"
-          >
+              className="mailpoet-editor-header-button"
-            {MailPoet.I18n.t('back')}
+            >
-          </Button>
+              {MailPoet.I18n.t('back')}
-          <ToolbarItem
+            </Button>
-            as={Button}
+            <ToolbarItem
-            data-automation-id="form_inserter_open"
+              as={Button}
-            className="edit-post-header-toolbar__inserter-toggle"
+              data-automation-id="form_inserter_open"
-            isPrimary
+              className="edit-post-header-toolbar__inserter-toggle"
-            isPressed={isInserterOpened}
+              variant="primary"
-            onClick={() => setIsInserterOpened(!isInserterOpened)}
+              isPressed={isInserterOpened}
-            icon={plus}
+              onClick={() => setIsInserterOpened(!isInserterOpened)}
-            label={_x('Add block', 'Generic label for block inserter button')}
+              icon={plus}
-          />
+              label={_x('Add block', 'Generic label for block inserter button')}
-          <HistoryUndo data-automation-id="form_undo_button" />
+            />
-          <HistoryRedo data-automation-id="form_redo_button" />
+            <HistoryUndo data-automation-id="form_undo_button" />
+            <HistoryRedo data-automation-id="form_redo_button" />
+          </div>
         </div>
       </div>
     </div>