From 4e71b21c5e0eccbfb819d0bbc97feeea64accd0f Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Mon, 26 Nov 2018 10:48:19 +0100
Subject: [PATCH] Fix wide image jumping.

Fixes #12292.

This PR fixes an issue where the block toolbar would cause an image to jump downwards when the wide or fullwide buttons were pressed.

Recently as part of a floats refactor, we also refactored how the block toolbar worked. This meant the removal of a floats rule to the toolbar itself, because it was both unnecessary and interfered with adjacent floats. This PR restores that rule, but for wide and fullwide only, fixing the regression.
---
 .../src/components/visual-editor/style.scss          | 12 ++++++++----
 packages/editor/src/components/block-list/style.scss |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss
index 67128f843aca47..f796ed8e4c7594 100644
--- a/packages/edit-post/src/components/visual-editor/style.scss
+++ b/packages/edit-post/src/components/visual-editor/style.scss
@@ -35,9 +35,17 @@
 			height: 0; // This collapses the container to an invisible element without margin.
 			text-align: center;
 
+			// This float rule takes the toolbar out of the flow, without it having to be absolute positioned.
+			// This is necessary because otherwise the mere presence of the toolbar can push down content.
+			// Pairs with relative rule on line 49.
+			float: left;
+
 			.editor-block-toolbar {
 				max-width: $content-width;
 				width: 100%;
+
+				// Necessary for the toolbar to be centered.
+				// This unsets an absolute position that will otherwise left align the toolbar.
 				position: relative;
 			}
 		}
@@ -47,10 +55,6 @@
 			width: 100%;
 			margin-left: 0;
 			margin-right: 0;
-
-			.editor-block-toolbar {
-				max-width: $content-width - $border-width - $border-width;
-			}
 		}
 	}
 }
diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
index e7e13f8a9e06aa..3ecb8dcc263b82 100644
--- a/packages/editor/src/components/block-list/style.scss
+++ b/packages/editor/src/components/block-list/style.scss
@@ -870,7 +870,7 @@
 		// Hide right border on desktop, where the .components-toolbar instead has a right border.
 		border-right: none;
 
-		// This prevents floats from messing up the position.
+		// This prevents floats from messing up the position of the block toolbar on floats-adjacent blocks when selected.
 		position: absolute;
 		left: 0;
 	}