From 20043f37f3191f3bd0a8a35ef57f431670077f6c Mon Sep 17 00:00:00 2001
From: "Matthew Riley MacPherson (tofumatt)" <hi@tofumatt.com>
Date: Wed, 10 Oct 2018 02:06:17 +0100
Subject: [PATCH] try: Move block toolbar below block contents

Fix #3976
---
 packages/block-library/src/classic/editor.scss  |  4 ++++
 .../editor/src/components/block-list/block.js   |  2 +-
 .../editor/src/components/block-list/style.scss | 17 +++++++++++------
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/block-library/src/classic/editor.scss b/packages/block-library/src/classic/editor.scss
index 70c8e819c2169..2bd1244da2add 100644
--- 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
index c70c7faeba47a..f08b84938c5c7 100644
--- 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
index d349794e2128e..02545bc29ae62 100644
--- 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.