Merge pull request #1148 from Automattic/fix/spacer-block-mobile

Varia: Improve spacer blocks on Mobile

varia/sass/abstracts/_mixins.scss

@@ -5,7 +5,7 @@
 @mixin media( $res ) {
 
 	@if mobile-only == $res {
-		@media only screen and (max-width: calc(map-deep-get($config-global, "breakpoint", "sm") - 1)) {
+		@media only screen and (max-width: #{map-deep-get($config-global, "breakpoint", "sm") - 1}) {
 			@content;
 		}
 	}

varia/sass/blocks/spacer/_style.scss

@@ -1,6 +1,12 @@
 .wp-block-spacer {
 	display: block;
 	// Remove vertical margins
-	margin-bottom: 0;
-	margin-top: 0;
+	margin-bottom: 0 !important;
+	margin-top: 0 !important;
+
+	@include media(mobile-only) {
+		&[style] {
+			height: map-deep-get($config-global, "spacing", "unit") !important;
+		}
+	}
 }

varia/style-rtl.css

@@ -1810,8 +1810,14 @@ hr.is-style-dots:before {
 
 .wp-block-spacer {
 	display: block;
-	margin-bottom: 0;
-	margin-top: 0;
+	margin-bottom: 0 !important;
+	margin-top: 0 !important;
+}
+
+@media only screen and (max-width: 559px) {
+	.wp-block-spacer[style] {
+		height: 16px !important;
+	}
 }
 
 table,

varia/style.css

@@ -1810,8 +1810,14 @@ hr.is-style-dots:before {
 
 .wp-block-spacer {
 	display: block;
-	margin-bottom: 0;
-	margin-top: 0;
+	margin-bottom: 0 !important;
+	margin-top: 0 !important;
+}
+
+@media only screen and (max-width: 559px) {
+	.wp-block-spacer[style] {
+		height: 16px !important;
+	}
 }
 
 table,