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

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

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.