Alt sticky toolbar

WordPress · Jul 14, 2017 · 8085917 · 8085917
1 parent 90e8343
commit 8085917
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/blocks/library/freeform/old-editor.js b/blocks/library/freeform/old-editor.js
@@ -148,7 +148,7 @@ export default class OldEditor extends Component {
 				key="toolbar"
 				id={ id + '-toolbar' }
 				ref={ ref => this.ref = ref }
-				className="editor-visual-editor__block-controls freeform-toolbar"
+				className="freeform-toolbar"
 			/>,
 			<div
 				key="editor"

diff --git a/blocks/library/freeform/style.scss b/blocks/library/freeform/style.scss
@@ -56,6 +56,7 @@
 
 	&.mce-edit-focus {
 		outline: none;
+		margin-top: $item-spacing;
 	}
 
 	a {
@@ -84,13 +85,21 @@
 	}
 }
 
-.editor-visual-editor__block-controls.freeform-toolbar {
+.freeform-toolbar {
 	width: auto;
 }
 
 .freeform-toolbar .mce-tinymce-inline {
 	margin: 0;
 	background: transparent;
+	position: sticky;
+	top: $header-height - 1px;
+	z-index: z-index( '.editor-visual-editor__block-controls' );
+	margin-top: -$block-controls-height - $item-spacing;
+
+	@include break-medium() {
+		top: $header-height + $admin-bar-height + $item-spacing;
+	}
 }
 
 // Overwrite inline styles.
@@ -130,8 +139,7 @@ div.mce-toolbar-grp > div {
 
 .freeform-toolbar .mce-toolbar:not(:first-child) {
 	display: none;
-	position: absolute;
-	top: -44px;
+	margin-top: 6px;
 }
 
 .freeform-toolbar.has-advanced-toolbar .mce-toolbar {