try: Move block toolbar below block contents

Fix #3976
WordPress · Oct 10, 2018 · 20043f3 · 20043f3
1 parent 1349d23
commit 20043f3
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/packages/block-library/src/classic/editor.scss b/packages/block-library/src/classic/editor.scss
@@ -148,8 +148,10 @@ div[data-type="core/freeform"] .editor-block-contextual-toolbar + div {
 	width: auto;
 	margin: 0 #{ -$block-padding };
 	position: sticky;
+	position: absolute;
 	z-index: z-index(".freeform-toolbar");
 	top: $block-padding;
+	top: 0;
 	transform: translateY(-$block-padding);
 
 	// On mobile, toolbars go edge to edge.
@@ -211,7 +213,9 @@ div[data-type="core/freeform"] .editor-block-contextual-toolbar + div {
 			float: right;
 			margin-right: -$block-side-ui-clearance - $border-width;
 			transform: translateY(-#{ $block-padding - $border-width });
+			position: absolute;
 			top: $block-padding;
+			top: 0;
 
 			.editor-block-toolbar {
 				border: none;

diff --git a/packages/editor/src/components/block-list/block.js b/packages/editor/src/components/block-list/block.js
@@ -513,7 +513,6 @@ export class BlockListBlock extends Component {
 						isHidden={ ! ( isHovered || isSelected ) || hoverArea !== 'left' }
 					/>
 				) }
-				{ shouldShowContextualToolbar && <BlockContextualToolbar /> }
 				{ isFirstMultiSelected && (
 					<BlockMultiControls rootClientId={ rootClientId } />
 				) }
@@ -546,6 +545,7 @@ export class BlockListBlock extends Component {
 					) }
 					{ !! error && <BlockCrashWarning /> }
 				</IgnoreNestedEvents>
+				{ shouldShowContextualToolbar && <BlockContextualToolbar /> }
 				{ showEmptyBlockSideInserter && (
 					<Fragment>
 						<div className="editor-block-list__side-inserter">

diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
@@ -44,6 +44,7 @@
 	@include break-small() {
 		padding-left: $block-container-side-padding;
 		padding-right: $block-container-side-padding;
+		position: relative;
 	}
 
 	// Don't add side padding for nested blocks.
@@ -726,7 +727,8 @@
  */
 
 .editor-block-list__block .editor-block-contextual-toolbar {
-	position: sticky;
+	// position: sticky;
+	position: absolute;
 	z-index: z-index(".editor-block-contextual-toolbar");
 	white-space: nowrap;
 	text-align: left;
@@ -799,12 +801,15 @@
 			transform: translateY(-$block-toolbar-height -$block-padding -$border-width);
 
 			// IE11 does not support `position: sticky`.
-			@supports (position: sticky) {
-				position: sticky;
+			// @supports (position: sticky) {
+			// 	position: sticky;
 
-				// Compensate for translate, so the sticky sticks to the top.
-				top: $block-toolbar-height + $block-padding;
-			}
+			// 	// Compensate for translate, so the sticky sticks to the top.
+			// 	top: $block-toolbar-height + $block-padding;
+			// }
+
+			position: absolute;
+			top: 0;
 
 			// This is an important one. Because the toolbar is sticky, it's part of the flow.
 			// It behaves as relative, in other words, until it reaches an edge and then behaves as fixed.