From a4d712e4c7de1eb81b5bfab22f56741fac864c34 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Wed, 7 Jun 2017 21:19:47 +0200
Subject: [PATCH] Address responsive issues with emulated floats

We are emulating floats using margins. This works well enough, but has some responsive implications. This commit addresses those, by creating a mix-in that simplifies the breakpoints.

I couldn't quite figure out where to best place this mixin, and we also probably want to extract both the mixin, the variables, and even the left/right alignment code so that other blocks that utilize these don't have to copy the whole bit of code. But I wanted to push this so we can test, and then discuss.
---
 blocks/library/image/style.scss | 44 +++++++++++++++++++++++++++++----
 1 file changed, 39 insertions(+), 5 deletions(-)

diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss
index 7c86e3c66d0334..432250fdbb1f5c 100644
--- a/blocks/library/image/style.scss
+++ b/blocks/library/image/style.scss
@@ -1,3 +1,11 @@
+// @todo: these should be moved out to generic .is-left-aligned and .is-right-aligned classes
+@mixin editor-width( $width ) {
+	@media ( min-width: #{ ( $width ) } ) {
+		@content;
+	}
+}
+$float-margin: calc( 50% - #{ $visual-editor-max-width / 2 } );
+
 .editor-visual-editor__block[data-type="core/image"] {
 	&[data-align="left"],
 	&[data-align="right"] {
@@ -8,17 +16,43 @@
 
 	&[data-align="left"] {
 		float: left;
+
+		// mobile, and no sidebars
 		margin-right: $block-padding;
-		@include break-medium() {
-			margin-left: calc( 50% - #{ $visual-editor-max-width / 2 } );
+
+		// sidebar (folded)
+		.auto-fold .editor-layout:not( .is-sidebar-opened ) & {
+			@include editor-width( $admin-sidebar-width-collapsed + $visual-editor-max-width - $block-padding ) {
+				margin-left: $float-margin;
+			}
+		}
+
+		// sidebar and post settings
+		.auto-fold .is-sidebar-opened & {
+			@include editor-width( $admin-sidebar-width + $visual-editor-max-width + $sidebar-width  ) {
+				margin-left: $float-margin;
+			}
 		}
 	}
 
 	&[data-align="right"] {
 		float: right;
-		margin-left: $block-padding;
-		@include break-medium() {
-			margin-right: calc( 50% - #{ $visual-editor-max-width / 2 } );
+
+		// mobile, and no sidebars
+		margin-right: $block-padding;
+
+		// sidebar (folded)
+		.auto-fold .editor-layout:not( .is-sidebar-opened ) & {
+			@include editor-width( $admin-sidebar-width-collapsed + $visual-editor-max-width - $block-padding ) {
+				margin-right: $float-margin;
+			}
+		}
+
+		// sidebar and post settings
+		.auto-fold .is-sidebar-opened & {
+			@include editor-width( $admin-sidebar-width + $visual-editor-max-width + $sidebar-width  ) {
+				margin-right: $float-margin;
+			}
 		}
 	}