From 2847947adc2efd3f6af502ae395f3f255ac7a336 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Tue, 16 May 2017 11:12:46 +0200
Subject: [PATCH 1/3] Fix problems with floated images & full-width

Fixes #784.
---
 blocks/library/image/style.scss       |  2 ++
 editor/modes/visual-editor/style.scss | 14 +++++---------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss
index f91f979a4d5bf..47dcfb9046ffe 100644
--- a/blocks/library/image/style.scss
+++ b/blocks/library/image/style.scss
@@ -9,11 +9,13 @@
 	&[data-align="left"] {
 		float: left;
 		margin-right: $block-padding;
+		margin-left: calc( 50% - #{ $visual-editor-max-width / 2 } );
 	}
 
 	&[data-align="right"] {
 		float: right;
 		margin-left: $block-padding;
+		margin-right: calc( 50% - #{ $visual-editor-max-width / 2 } );
 	}
 
 	&[data-align="wide"] {
diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss
index 5e4793d7ec90b..42c25aa396e23 100644
--- a/editor/modes/visual-editor/style.scss
+++ b/editor/modes/visual-editor/style.scss
@@ -71,13 +71,14 @@
 	}
 }
 
+$sticky-bottom-offset: 20px;
 .editor-visual-editor__block-controls {
 	@include animate_fade;
 	display: flex;
 	position: sticky;
 	z-index: z-index( '.editor-visual-editor__block-controls' );
 	margin-top: -$block-controls-height - $item-spacing;
-	margin-bottom: $item-spacing + 20px;	// 20px is the offset from the bottom of the selected block where it stops sticking
+	margin-bottom: $item-spacing + $sticky-bottom-offset;
 	height: $block-controls-height;
 
 	top: $header-height + $admin-bar-height-big + $item-spacing;
@@ -88,14 +89,9 @@
 }
 
 .editor-visual-editor__block-controls + div {
-	margin-top: -20px;
-
-	// prevent collapsing margins between the block and the toolbar
-	&:before {
-		content: "";
-		display: table;
-		clear: both;
-	}
+	// prevent collapsing margins between block and toolbar, matches the 20px bottom offset
+	margin-top: -$sticky-bottom-offset - 1px;
+	padding-top: 1px;
 }
 
 .editor-visual-editor__block-controls .components-toolbar {

From b87c92863ee13a8397ab1325678b57c4b6a88897 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Tue, 16 May 2017 11:16:47 +0200
Subject: [PATCH 2/3] Fix responsive.

---
 blocks/library/image/style.scss | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss
index 47dcfb9046ffe..2f57b348e948b 100644
--- a/blocks/library/image/style.scss
+++ b/blocks/library/image/style.scss
@@ -9,13 +9,19 @@
 	&[data-align="left"] {
 		float: left;
 		margin-right: $block-padding;
-		margin-left: calc( 50% - #{ $visual-editor-max-width / 2 } );
+
+		@include break-medium() {
+			margin-left: calc( 50% - #{ $visual-editor-max-width / 2 } );
+		}
 	}
 
 	&[data-align="right"] {
 		float: right;
 		margin-left: $block-padding;
-		margin-right: calc( 50% - #{ $visual-editor-max-width / 2 } );
+
+		@include break-medium() {
+			margin-right: calc( 50% - #{ $visual-editor-max-width / 2 } );
+		}
 	}
 
 	&[data-align="wide"] {

From 5352988d765f66456ce4c63ec0a0064e21136670 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Tue, 16 May 2017 12:48:17 +0200
Subject: [PATCH 3/3] Add float clearing to embed block.

This seems like the right thing to do, because videos normally have an intrinsice width and height, and so they would clear floats naturally just like how an image following a floating would. But because we are using CSS trickery to make the video responsive, we are essentially pulling the video out of the flow, which means it's technically abs positioned. By adding a clear, we emulate the behavior. The edgecases where the clear for an embed would be undesired are arguably edgecases.
---
 blocks/library/embed/style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/blocks/library/embed/style.scss b/blocks/library/embed/style.scss
index af0897ec53ca8..108693c6457ca 100644
--- a/blocks/library/embed/style.scss
+++ b/blocks/library/embed/style.scss
@@ -1,5 +1,6 @@
 .blocks-embed {
 	margin: 0;
+	clear: both;	// necessary because we use responsive trickery to set width/height, and therefore the video doesn't intrinsically clear floats like an img does
 }
 
 .blocks-embed .iframe-overlay {