Merge pull request #1704 from Automattic/fix/issue-1672

Varia: Add vertical margins to blocks inside Jetpack’s Layout Grid block.

varia/sass/vendors/_jetpack.scss

@@ -141,9 +141,35 @@ body {
 /**
  * Business Hours
  */
-
 .jetpack-business-hours {
 	dd {
 		padding-left: 0;
 	}
 }
+
+/**
+ * Layout Grid
+ */
+.wp-block-jetpack-layout-grid {
+
+	.wp-block-jetpack-layout-grid-column {
+
+		& > * {
+			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;
+			}
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+}

varia/style-rtl.css

@@ -3806,6 +3806,29 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 	padding-right: 0;
 }
 
+/**
+ * Layout Grid
+ */
+.wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column > * {
+	margin-top: 21.312px;
+	margin-bottom: 21.312px;
+}
+
+@media only screen and (min-width: 560px) {
+	.wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column > * {
+		margin-top: 32px;
+		margin-bottom: 32px;
+	}
+}
+
+.wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column > *:first-child {
+	margin-top: 0;
+}
+
+.wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column > *:last-child {
+	margin-bottom: 0;
+}
+
 /**
  * Full Site Editing
  * - Full Site Editing overrides

varia/style.css

@@ -3865,6 +3865,29 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 	padding-left: 0;
 }
 
+/**
+ * Layout Grid
+ */
+.wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column > * {
+	margin-top: 21.312px;
+	margin-bottom: 21.312px;
+}
+
+@media only screen and (min-width: 560px) {
+	.wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column > * {
+		margin-top: 32px;
+		margin-bottom: 32px;
+	}
+}
+
+.wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column > *:first-child {
+	margin-top: 0;
+}
+
+.wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column > *:last-child {
+	margin-bottom: 0;
+}
+
 /**
  * Full Site Editing
  * - Full Site Editing overrides