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

@@ -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;
+			}
 		}
 	}