Merge pull request #1237 from Automattic/fix/issue-1214

Varia: Add consistant margin to element in group block

varia/sass/blocks/group/_style.scss

@@ -4,9 +4,14 @@
 		margin-left: auto;
 		margin-right: auto;
 
-		h1, h2, h3, h4, h5, h6, p, hr {
-			margin-top: #{map-deep-get($config-global, "spacing", "unit")};
-			margin-bottom: #{map-deep-get($config-global, "spacing", "unit")};
+		> * {
+			margin-top: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };
+			margin-bottom: #{ 0.666 * map-deep-get($config-global, "spacing", "vertical") };
+
+			@include media(mobile) {
+				margin-top: map-deep-get($config-global, "spacing", "vertical");
+				margin-bottom: map-deep-get($config-global, "spacing", "vertical");
+			}
 
 			&:first-child {
 				margin-top: 0;

varia/style-rtl.css

@@ -1321,16 +1321,23 @@ input.has-focus[type="submit"],
 	margin-left: auto;
 }
 
-.wp-block-group .wp-block-group__inner-container h1, .wp-block-group .wp-block-group__inner-container h2, .wp-block-group .wp-block-group__inner-container h3, .wp-block-group .wp-block-group__inner-container h4, .wp-block-group .wp-block-group__inner-container h5, .wp-block-group .wp-block-group__inner-container h6, .wp-block-group .wp-block-group__inner-container p, .wp-block-group .wp-block-group__inner-container hr {
-	margin-top: 16px;
-	margin-bottom: 16px;
+.wp-block-group .wp-block-group__inner-container > * {
+	margin-top: 21.312px;
+	margin-bottom: 21.312px;
+}
+
+@media only screen and (min-width: 560px) {
+	.wp-block-group .wp-block-group__inner-container > * {
+		margin-top: 32px;
+		margin-bottom: 32px;
+	}
 }
 
-.wp-block-group .wp-block-group__inner-container h1:first-child, .wp-block-group .wp-block-group__inner-container h2:first-child, .wp-block-group .wp-block-group__inner-container h3:first-child, .wp-block-group .wp-block-group__inner-container h4:first-child, .wp-block-group .wp-block-group__inner-container h5:first-child, .wp-block-group .wp-block-group__inner-container h6:first-child, .wp-block-group .wp-block-group__inner-container p:first-child, .wp-block-group .wp-block-group__inner-container hr:first-child {
+.wp-block-group .wp-block-group__inner-container > *:first-child {
 	margin-top: 0;
 }
 
-.wp-block-group .wp-block-group__inner-container h1:last-child, .wp-block-group .wp-block-group__inner-container h2:last-child, .wp-block-group .wp-block-group__inner-container h3:last-child, .wp-block-group .wp-block-group__inner-container h4:last-child, .wp-block-group .wp-block-group__inner-container h5:last-child, .wp-block-group .wp-block-group__inner-container h6:last-child, .wp-block-group .wp-block-group__inner-container p:last-child, .wp-block-group .wp-block-group__inner-container hr:last-child {
+.wp-block-group .wp-block-group__inner-container > *:last-child {
 	margin-bottom: 0;
 }
 

varia/style.css

@@ -1321,16 +1321,23 @@ input.has-focus[type="submit"],
 	margin-right: auto;
 }
 
-.wp-block-group .wp-block-group__inner-container h1, .wp-block-group .wp-block-group__inner-container h2, .wp-block-group .wp-block-group__inner-container h3, .wp-block-group .wp-block-group__inner-container h4, .wp-block-group .wp-block-group__inner-container h5, .wp-block-group .wp-block-group__inner-container h6, .wp-block-group .wp-block-group__inner-container p, .wp-block-group .wp-block-group__inner-container hr {
-	margin-top: 16px;
-	margin-bottom: 16px;
+.wp-block-group .wp-block-group__inner-container > * {
+	margin-top: 21.312px;
+	margin-bottom: 21.312px;
+}
+
+@media only screen and (min-width: 560px) {
+	.wp-block-group .wp-block-group__inner-container > * {
+		margin-top: 32px;
+		margin-bottom: 32px;
+	}
 }
 
-.wp-block-group .wp-block-group__inner-container h1:first-child, .wp-block-group .wp-block-group__inner-container h2:first-child, .wp-block-group .wp-block-group__inner-container h3:first-child, .wp-block-group .wp-block-group__inner-container h4:first-child, .wp-block-group .wp-block-group__inner-container h5:first-child, .wp-block-group .wp-block-group__inner-container h6:first-child, .wp-block-group .wp-block-group__inner-container p:first-child, .wp-block-group .wp-block-group__inner-container hr:first-child {
+.wp-block-group .wp-block-group__inner-container > *:first-child {
 	margin-top: 0;
 }
 
-.wp-block-group .wp-block-group__inner-container h1:last-child, .wp-block-group .wp-block-group__inner-container h2:last-child, .wp-block-group .wp-block-group__inner-container h3:last-child, .wp-block-group .wp-block-group__inner-container h4:last-child, .wp-block-group .wp-block-group__inner-container h5:last-child, .wp-block-group .wp-block-group__inner-container h6:last-child, .wp-block-group .wp-block-group__inner-container p:last-child, .wp-block-group .wp-block-group__inner-container hr:last-child {
+.wp-block-group .wp-block-group__inner-container > *:last-child {
 	margin-bottom: 0;
 }