Restore the margins of blocks relying on the figure element (#29517)

* Restore the margins of blocks relying on the figure element * Remove margin bottom from the embed figure * Restore bottom margin for empty figure blocks
WordPress · Mar 8, 2021 · 4cc2212 · 4cc2212
1 parent a81afe8
commit 4cc2212
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 11 deletions.
diff --git a/packages/block-library/src/audio/style.scss b/packages/block-library/src/audio/style.scss
@@ -1,4 +1,6 @@
 .wp-block-audio {
+	margin: 0 0 1em 0;
+
 	// Supply caption styles to audio blocks, even if the theme hasn't opted in.
 	// Reason being: the new markup, <figcaptions>, are not likely to be styled in the majority of existing themes,
 	// so we supply the styles so as to not appear broken or unstyled in those themes.

diff --git a/packages/block-library/src/embed/style.scss b/packages/block-library/src/embed/style.scss
@@ -20,15 +20,14 @@
 }
 
 .wp-block-embed {
+	margin: 0 0 1em 0;
+
 	// Supply caption styles to embeds, even if the theme hasn't opted in.
 	// Reason being: the new markup, figcaptions, are not likely to be styled in the majority of existing themes,
 	// so we supply the styles so as to not appear broken or unstyled in those.
 	figcaption {
 		@include caption-style();
 	}
-	// The embed block is in a `figure` element, and many themes zero this out.
-	// This rule explicitly sets it, to ensure at least some bottom-margin in the flow.
-	margin-bottom: 1em;
 
 	// Don't allow iframe to overflow it's container.
 	iframe {

diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
@@ -1,7 +1,5 @@
 .wp-block-image {
-	// The image block is in a `figure` element, and many themes zero this out.
-	// This rule explicitly sets it, to ensure at least some bottom-margin in the flow.
-	margin-bottom: 1em;
+	margin: 0 0 1em 0;
 
 	img {
 		max-width: 100%;

diff --git a/packages/block-library/src/pullquote/style.scss b/packages/block-library/src/pullquote/style.scss
@@ -1,7 +1,6 @@
 .wp-block-pullquote {
+	margin: 0 0 1em 0;
 	padding: 3em 0;
-	margin-left: 0;
-	margin-right: 0;
 	text-align: center;
 
 	&.alignleft,

diff --git a/packages/block-library/src/table/style.scss b/packages/block-library/src/table/style.scss
@@ -1,4 +1,5 @@
 .wp-block-table {
+	margin: 0 0 1em 0;
 	$subtle-light-gray: #f3f4f5;
 	$subtle-pale-green: #e9fbe5;
 	$subtle-pale-blue: #e7f5fe;

diff --git a/packages/block-library/src/video/style.scss b/packages/block-library/src/video/style.scss
@@ -1,7 +1,5 @@
 .wp-block-video {
-	// Remove the left and right margin the figure is born with.
-	margin-left: 0;
-	margin-right: 0;
+	margin: 0 0 1em 0;
 
 	video {
 		width: 100%;