From d36cce22b89f717185db72fe0425f19223187624 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Wed, 1 Aug 2018 10:32:47 +0200
Subject: [PATCH] Make floats work in the editor, same as frontend.

This changes the editor float code for the image so it matches and works the same as the front-end.

That is, when an image is floated, the parent container (block container) retains its same max-width which usually allows a centered column to coexist with wide images. But it is zeroed out in height. The child element, the figure itself, is then floated, which allows the caption to share the same width as the figure, using a table-caption trick.

The CSS is the same, front and backend, but the markup is not the same, so some CSS references map to different things. With the ultimate goal of WYSIWYG, this might be worth revisiting in the future, but is way out of scope for this PR since there are a ton of React wrappers necessary for resizing and other things.

Note that this PR only touches images. If this is approved and merged in, we'll probably want to backport these changes to other blocks that can float, i.e. video, embed, cover image.
---
 core-blocks/image/editor.scss                 | 21 +++++++++++++++++++
 .../src/components/block-list/style.scss      |  4 +++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/core-blocks/image/editor.scss b/core-blocks/image/editor.scss
index 4f7b06a38587d..05c6544486052 100644
--- a/core-blocks/image/editor.scss
+++ b/core-blocks/image/editor.scss
@@ -103,3 +103,24 @@
 		margin: -1px;
 	}
 }
+
+// Although the float markup is different in the editor compared to the frontend,
+// this CSS uses the same technique to allow floats in a wide images context.
+// That is, the block retains its centering and max-width, and a child inside
+// is floated instead of the block itself.
+[data-type="core/image"][data-align="center"],
+[data-type="core/image"][data-align="left"],
+[data-type="core/image"][data-align="right"] {
+	.editor-block-list__block-edit {
+		figure {
+			margin: 0;
+			display: table;
+		}
+
+		// This maps to the figure on the frontend.
+		.editor-rich-text {
+			display: table-caption;
+			caption-side: bottom;
+		}
+	}
+}
diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
index e26bf5839040e..dd94a892eff15 100644
--- a/packages/editor/src/components/block-list/style.scss
+++ b/packages/editor/src/components/block-list/style.scss
@@ -346,7 +346,6 @@
 		width: 100%;
 
 		// When images are floated, the block itself should collapse to zero height.
-		margin-bottom: 0;
 		height: 0;
 
 		// Hide block outline when an image is floated.
@@ -354,6 +353,9 @@
 			&:before {
 				content: none;
 			}
+
+			// This margin won't collapse on its own, so zero it out.
+			margin-top: 0;
 		}
 
 		// Keep a 1px margin to compensate for the border/outline.