From 90392d8ba9b7ee9a24873d8032370662e9b4d28e Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 3 Sep 2018 12:09:31 +0200
Subject: [PATCH] Fix image caption margins

In #7721, we introduced a new wrapping div for the image block.

As part of that, the margin for the figure was also zeroed out. This is what caused the regression.

Most themes don't touch the figure, and it's born with 1em margin top and bottom. In testing, however, we noticed that some themes _do_ provide figure styles, and they zero them out.

As such, this PR fixes the regression by:

- Removing the regression. Situations with figures that worked prior to the regression will work the same.
- Adding comments to the code to prevent this from happening again.
- Adding an additional bottom margin to the caption style, to ensure themes that zero out the figure have some bottom margin.

This PR adds a 1em bottom margin to all captions. This margin collapses if the figcaption is inside a figure, but is still there in case it's inside a div.
---
 edit-post/assets/stylesheets/_mixins.scss   |  1 +
 packages/block-library/src/image/style.scss | 10 +++++++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/edit-post/assets/stylesheets/_mixins.scss b/edit-post/assets/stylesheets/_mixins.scss
index 7b011093cf632..4695232b15946 100644
--- a/edit-post/assets/stylesheets/_mixins.scss
+++ b/edit-post/assets/stylesheets/_mixins.scss
@@ -295,6 +295,7 @@
 
 @mixin caption-style() {
 	margin-top: 0.5em;
+	margin-bottom: 1em;
 	color: $dark-gray-300;
 	text-align: center;
 	font-size: $default-font-size;
diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
index e825f126759dc..82754b506b623 100644
--- a/packages/block-library/src/image/style.scss
+++ b/packages/block-library/src/image/style.scss
@@ -20,7 +20,11 @@
 	.aligncenter,
 	&.is-resized {
 		display: table;
-		margin: 0;
+
+		// The figure is born with left and right margin.
+		// We remove this by default, and then customize it for left, right, and center.
+		margin-left: 0;
+		margin-right: 0;
 
 		> figcaption {
 			display: table-caption;
@@ -38,9 +42,9 @@
 		margin-left: 1em;
 	}
 
-	// Centered images.
 	.aligncenter {
-		margin: 0 auto;
+		margin-left: auto;
+		margin-right: auto;
 	}
 
 	// Supply caption styles to images, even if the theme hasn't opted in.