Seedlet: Fix layout grid margins (#2219)

* Add padding to children of layout grid block columns.

* Fix margins on columns inserter.

* Round IE calc values.

seedlet/assets/css/ie.css

@@ -1142,32 +1142,32 @@ hr.wp-block-separator.is-style-wide {
  * - Sets spacing-vertical margin logic
  */
 .site-footer > * {
-	margin-top: 19.98px;
-	margin-bottom: 19.98px;
+	margin-top: 20px;
+	margin-bottom: 20px;
 }
 .site-main > article > * {
-	margin-top: 19.98px;
-	margin-bottom: 19.98px;
+	margin-top: 20px;
+	margin-bottom: 20px;
 }
 .site-main > .not-found > * {
-	margin-top: 19.98px;
-	margin-bottom: 19.98px;
+	margin-top: 20px;
+	margin-bottom: 20px;
 }
 .entry-content > * {
-	margin-top: 19.98px;
-	margin-bottom: 19.98px;
+	margin-top: 20px;
+	margin-bottom: 20px;
 }
 [class*="inner-container"] > * {
-	margin-top: 19.98px;
-	margin-bottom: 19.98px;
+	margin-top: 20px;
+	margin-bottom: 20px;
 }
 .widget-area > * {
-	margin-top: 19.98px;
-	margin-bottom: 19.98px;
+	margin-top: 20px;
+	margin-bottom: 20px;
 }
 .widget-column > * {
-	margin-top: 19.98px;
-	margin-bottom: 19.98px;
+	margin-top: 20px;
+	margin-bottom: 20px;
 }
 
 @media only screen and (min-width: 482px) {
@@ -1410,59 +1410,59 @@ input[type="submit"]:after,
 }
 
 button:before {
-	margin-bottom: -calc(0.5em + -0.38);
+	margin-bottom: -calc(1em + 0);
 }
 
 .button:before {
-	margin-bottom: -calc(0.5em + -0.38);
+	margin-bottom: -calc(1em + 0);
 }
 
 input[type="submit"]:before {
-	margin-bottom: -calc(0.5em + -0.38);
+	margin-bottom: -calc(1em + 0);
 }
 
 .wp-block-button__link:before {
-	margin-bottom: -calc(0.5em + -0.38);
+	margin-bottom: -calc(1em + 0);
 }
 
 .wp-block-file .wp-block-file__button:before {
-	margin-bottom: -calc(0.5em + -0.38);
+	margin-bottom: -calc(1em + 0);
 }
 
 .a8c-posts-list__view-all:before {
-	margin-bottom: -calc(0.5em + -0.38);
+	margin-bottom: -calc(1em + 0);
 }
 
 button[data-load-more-btn]:before {
-	margin-bottom: -calc(0.5em + -0.38);
+	margin-bottom: -calc(1em + 0);
 }
 
 button:after {
-	margin-top: -calc(0.5em + -0.39);
+	margin-top: -calc(1em + 0);
 }
 
 .button:after {
-	margin-top: -calc(0.5em + -0.39);
+	margin-top: -calc(1em + 0);
 }
 
 input[type="submit"]:after {
-	margin-top: -calc(0.5em + -0.39);
+	margin-top: -calc(1em + 0);
 }
 
 .wp-block-button__link:after {
-	margin-top: -calc(0.5em + -0.39);
+	margin-top: -calc(1em + 0);
 }
 
 .wp-block-file .wp-block-file__button:after {
-	margin-top: -calc(0.5em + -0.39);
+	margin-top: -calc(1em + 0);
 }
 
 .a8c-posts-list__view-all:after {
-	margin-top: -calc(0.5em + -0.39);
+	margin-top: -calc(1em + 0);
 }
 
 button[data-load-more-btn]:after {
-	margin-top: -calc(0.5em + -0.39);
+	margin-top: -calc(1em + 0);
 }
 
 button:active {
@@ -2446,8 +2446,8 @@ object {
 }
 
 .wp-block-columns .wp-block-column > * {
-	margin-top: 19.8px;
-	margin-bottom: 19.8px;
+	margin-top: 20px;
+	margin-bottom: 20px;
 }
 
 @media only screen and (min-width: 482px) {
@@ -2470,7 +2470,7 @@ object {
 }
 
 .wp-block-columns .wp-block-column:not(:last-child) {
-	margin-bottom: 19.8px;
+	margin-bottom: 20px;
 }
 
 @media only screen and (min-width: 482px) {
@@ -2620,13 +2620,13 @@ object {
 }
 
 .wp-block-cover .wp-block-cover__inner-container > * {
-	margin-top: 19.98px;
-	margin-bottom: 19.98px;
+	margin-top: 20px;
+	margin-bottom: 20px;
 }
 
 .wp-block-cover-image .wp-block-cover__inner-container > * {
-	margin-top: 19.98px;
-	margin-bottom: 19.98px;
+	margin-top: 20px;
+	margin-bottom: 20px;
 }
 
 @media only screen and (min-width: 482px) {
@@ -2716,7 +2716,7 @@ object {
 
 .wp-block-file .wp-block-file__button {
 	display: inline-block;
-	padding: 11.5px 12.5px;
+	padding: 12px 13px;
 }
 
 .wp-block-gallery {
@@ -2755,8 +2755,8 @@ object {
 }
 
 .wp-block-group .wp-block-group__inner-container > * {
-	margin-top: 19.98px;
-	margin-bottom: 19.98px;
+	margin-top: 20px;
+	margin-bottom: 20px;
 }
 
 @media only screen and (min-width: 482px) {
@@ -2775,7 +2775,7 @@ object {
 }
 
 .wp-block-group.has-background {
-	padding: 19.98px;
+	padding: 20px;
 }
 
 @media only screen and (min-width: 482px) {
@@ -3248,8 +3248,8 @@ dd {
 }
 
 .wp-block-media-text .wp-block-media-text__content > * {
-	margin-top: 19.98px;
-	margin-bottom: 19.98px;
+	margin-top: 20px;
+	margin-bottom: 20px;
 }
 
 @media only screen and (min-width: 482px) {
@@ -3283,7 +3283,7 @@ dd {
 }
 
 .wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content {
-	padding: 13.2px;
+	padding: 13px;
 }
 
 .wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__label {
@@ -3303,7 +3303,7 @@ dd {
 .wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container {
 	border: none;
 	left: 0;
-	margin-left: 13.2px;
+	margin-left: 13px;
 	min-width: max-content;
 	opacity: 0;
 	padding: 0;
@@ -3313,7 +3313,7 @@ dd {
 
 .wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container .wp-block-navigation-link .wp-block-navigation-link__content {
 	display: inline-block;
-	padding: 6.6px 13.2px;
+	padding: 7px 13px;
 }
 
 .wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container .wp-block-navigation-link__submenu-icon {
@@ -3372,7 +3372,7 @@ p.has-background {
 	font-weight: bold;
 	font-size: 16px;
 	line-height: 1;
-	padding: 10px 13.2px;
+	padding: 10px 13px;
 }
 
 .a8c-posts-list__item {
@@ -3783,7 +3783,7 @@ p.has-background {
 	color: #333333;
 	line-height: 1.7;
 	max-width: inherit;
-	margin-right: 16.5px;
+	margin-right: 17px;
 	padding: 10px;
 }
 
@@ -4691,16 +4691,16 @@ nav a {
 		width: 0;
 	}
 	.primary-navigation > div > ul > li > a:before {
-		margin-bottom: -calc(0.5em + -0.38);
+		margin-bottom: -calc(1em + 0);
 	}
 	.woo-navigation > div > ul > li > a:before {
-		margin-bottom: -calc(0.5em + -0.38);
+		margin-bottom: -calc(1em + 0);
 	}
 	.primary-navigation > div > ul > li > a:after {
-		margin-top: -calc(0.5em + -0.39);
+		margin-top: -calc(1em + 0);
 	}
 	.woo-navigation > div > ul > li > a:after {
-		margin-top: -calc(0.5em + -0.39);
+		margin-top: -calc(1em + 0);
 	}
 }
 
@@ -4787,7 +4787,7 @@ nav a {
 	font-family: 'Playfair Display', Georgia, Times, serif;
 	font-size: 32px;
 	font-weight: normal;
-	padding: 6.6px 0;
+	padding: 7px 0;
 }
 
 .woo-navigation a {
@@ -4796,7 +4796,7 @@ nav a {
 	font-family: 'Playfair Display', Georgia, Times, serif;
 	font-size: 32px;
 	font-weight: normal;
-	padding: 6.6px 0;
+	padding: 7px 0;
 }
 
 @media only screen and (min-width: 482px) {
@@ -4804,13 +4804,13 @@ nav a {
 		font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
 		font-size: 16px;
 		font-weight: normal;
-		padding: 13.2px;
+		padding: 13px;
 	}
 	.woo-navigation a {
 		font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
 		font-size: 16px;
 		font-weight: normal;
-		padding: 13.2px;
+		padding: 13px;
 	}
 }
 
@@ -4828,26 +4828,26 @@ nav a {
 
 .primary-navigation .sub-menu {
 	list-style: none;
-	margin-left: 13.2px;
+	margin-left: 13px;
 }
 
 .woo-navigation .sub-menu {
 	list-style: none;
-	margin-left: 13.2px;
+	margin-left: 13px;
 }
 
 .primary-navigation .sub-menu .menu-item a {
 	font-size: 24px;
 	font-style: italic;
-	padding-top: 6.6px;
-	padding-bottom: 6.6px;
+	padding-top: 7px;
+	padding-bottom: 7px;
 }
 
 .woo-navigation .sub-menu .menu-item a {
 	font-size: 24px;
 	font-style: italic;
-	padding-top: 6.6px;
-	padding-bottom: 6.6px;
+	padding-top: 7px;
+	padding-bottom: 7px;
 }
 
 @media only screen and (min-width: 482px) {
@@ -4874,12 +4874,12 @@ nav a {
 	.primary-navigation .menu-item-has-children > .svg-icon {
 		display: inline-block;
 		height: 100%;
-		margin-right: 13.2px;
+		margin-right: 13px;
 	}
 	.woo-navigation .menu-item-has-children > .svg-icon {
 		display: inline-block;
 		height: 100%;
-		margin-right: 13.2px;
+		margin-right: 13px;
 	}
 }
 
@@ -4912,7 +4912,7 @@ nav a {
 }
 
 .social-navigation > div > ul > li {
-	margin-bottom: 13.2px;
+	margin-bottom: 13px;
 }
 
 .social-navigation > div > ul > li:first-of-type > a {
@@ -4926,7 +4926,7 @@ nav a {
 .social-navigation a {
 	color: #333333;
 	display: inline-block;
-	padding: 0 6.6px;
+	padding: 0 7px;
 }
 
 .social-navigation a:hover {
@@ -5038,7 +5038,7 @@ nav a {
 	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
 	font-size: 16px;
 	font-weight: normal;
-	padding: 13.2px;
+	padding: 13px;
 	color: currentColor;
 }
 
@@ -5382,8 +5382,8 @@ nav a {
 	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
 	font-size: 16px;
 	font-weight: normal;
-	margin-left: 13.2px;
-	margin-right: 13.2px;
+	margin-left: 13px;
+	margin-right: 13px;
 }
 
 .pagination .nav-links > *.current {
@@ -5495,7 +5495,7 @@ nav a {
 .comment-meta .comment-author {
 	line-height: 1.3;
 	margin-bottom: 5px;
-	padding-right: 62.5px;
+	padding-right: 63px;
 	max-width: calc(100% - 75px);
 }
 
@@ -5759,7 +5759,7 @@ nav a {
 
 @media only screen and (min-width: 482px) {
 	.comment-form > p.comment-form-author {
-		margin-right: 37.5px;
+		margin-right: 38px;
 	}
 	.comment-form > p.comment-notes, .comment-form > p.logged-in-as {
 		display: block;
@@ -5843,7 +5843,7 @@ img#wpstats {
 	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
 	font-size: 14px;
 	line-height: 1;
-	padding: 5px 6.6px;
+	padding: 5px 7px;
 }
 
 .page-title {
@@ -6325,59 +6325,59 @@ input[type="submit"]:after,
 }
 
 button:before {
-	margin-bottom: -calc(0.5em + -0.38);
+	margin-bottom: -calc(1em + 0);
 }
 
 .button:before {
-	margin-bottom: -calc(0.5em + -0.38);
+	margin-bottom: -calc(1em + 0);
 }
 
 input[type="submit"]:before {
-	margin-bottom: -calc(0.5em + -0.38);
+	margin-bottom: -calc(1em + 0);
 }
 
 .wp-block-button__link:before {
-	margin-bottom: -calc(0.5em + -0.38);
+	margin-bottom: -calc(1em + 0);
 }
 
 .wp-block-file .wp-block-file__button:before {
-	margin-bottom: -calc(0.5em + -0.38);
+	margin-bottom: -calc(1em + 0);
 }
 
 .a8c-posts-list__view-all:before {
-	margin-bottom: -calc(0.5em + -0.38);
+	margin-bottom: -calc(1em + 0);
 }
 
 button[data-load-more-btn]:before {
-	margin-bottom: -calc(0.5em + -0.38);
+	margin-bottom: -calc(1em + 0);
 }
 
 button:after {
-	margin-top: -calc(0.5em + -0.39);
+	margin-top: -calc(1em + 0);
 }
 
 .button:after {
-	margin-top: -calc(0.5em + -0.39);
+	margin-top: -calc(1em + 0);
 }
 
 input[type="submit"]:after {
-	margin-top: -calc(0.5em + -0.39);
+	margin-top: -calc(1em + 0);
 }
 
 .wp-block-button__link:after {
-	margin-top: -calc(0.5em + -0.39);
+	margin-top: -calc(1em + 0);
 }
 
 .wp-block-file .wp-block-file__button:after {
-	margin-top: -calc(0.5em + -0.39);
+	margin-top: -calc(1em + 0);
 }
 
 .a8c-posts-list__view-all:after {
-	margin-top: -calc(0.5em + -0.39);
+	margin-top: -calc(1em + 0);
 }
 
 button[data-load-more-btn]:after {
-	margin-top: -calc(0.5em + -0.39);
+	margin-top: -calc(1em + 0);
 }
 
 button:active {
@@ -6565,6 +6565,26 @@ button[data-load-more-btn],
 	padding-right: 20px !important;
 }
 
+.wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column > * {
+	margin-top: 20px;
+	margin-bottom: 20px;
+}
+
+@media only screen and (min-width: 482px) {
+	.wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column > * {
+		margin-top: 30px;
+		margin-bottom: 30px;
+	}
+}
+
+.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;
+}
+
 /* Gutter Options */
 .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-gutter__none {
 	grid-gap: 0px !important;

seedlet/assets/css/style-editor.css

@@ -1548,9 +1548,10 @@ pre.wp-block-verse {
 	padding-left: calc(var(--layout-grid--gutter-huge) + var(--layout-grid--background-offset));
 }
 
-/* Overlay grid */
+/* Overlay styles and margin reset */
 .wp-block-jetpack-layout-grid {
 	/* wpcom-overlay-grid is the classname targeting the grid overlay visual aid displayed in the editor */
+	/* Override default block margin rules */
 }
 
 .wp-block-jetpack-layout-grid .wpcom-overlay-grid {
@@ -1564,6 +1565,11 @@ pre.wp-block-verse {
 	padding-right: 0;
 }
 
+.wp-block-jetpack-layout-grid [data-type="jetpack/layout-grid-column"] {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
 .wp-block-jetpack-layout-grid.wp-block-jetpack-layout-gutter__none .wpcom-overlay-grid {
 	grid-gap: var(--layout-grid--gutter-none);
 }

seedlet/assets/sass/vendors/jetpack/blocks/layout-grid/_editor.scss

@@ -69,7 +69,7 @@
 	}
 }
 
-/* Overlay grid */
+/* Overlay styles and margin reset */
 .wp-block-jetpack-layout-grid {
 	/* wpcom-overlay-grid is the classname targeting the grid overlay visual aid displayed in the editor */
 	.wpcom-overlay-grid {
@@ -84,6 +84,12 @@
 			padding-right: 0;
 		}
 	}
+
+	/* Override default block margin rules */ 
+	[data-type="jetpack/layout-grid-column"] {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
 }
 
 @each $size in $layout-gutter-sizes {

seedlet/assets/sass/vendors/jetpack/blocks/layout-grid/_style.scss

@@ -17,12 +17,30 @@
 			padding-left: var(--layout-grid--background-offset) !important;
 			padding-right: var(--layout-grid--background-offset) !important;
 		}
+
+		> * {
+			margin-top: calc( 0.666 * var(--global--spacing-vertical) );
+			margin-bottom: calc( 0.666 * var(--global--spacing-vertical) );
+
+			@include media(mobile) {
+				margin-top: var(--global--spacing-vertical);
+				margin-bottom: var(--global--spacing-vertical);
+			}
+
+			&:first-child {
+				margin-top: 0;
+			}
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
 	}
 }
 
 /* Gutter Options */
 @each $size in $layout-gutter-sizes {
-.wp-block-jetpack-layout-grid .wp-block-jetpack-layout-gutter__#{$size} {
+	.wp-block-jetpack-layout-grid .wp-block-jetpack-layout-gutter__#{$size} {
 		grid-gap: var(--layout-grid--gutter-#{$size}) !important;
 	}
 }

seedlet/postcss.config.js

@@ -5,6 +5,8 @@ module.exports = {
 			"preserve": false,
 			"preserveAtRulesOrder": true
 		}),
-		require( 'postcss-calc' )
+		require( 'postcss-calc' )({
+			"precision": 0
+		})
 	]
 }

seedlet/style-rtl.css

@@ -4286,6 +4286,26 @@ button[data-load-more-btn],
 	padding-left: var(--layout-grid--background-offset) !important;
 }
 
+.wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column > * {
+	margin-top: calc( 0.666 * var(--global--spacing-vertical));
+	margin-bottom: calc( 0.666 * var(--global--spacing-vertical));
+}
+
+@media only screen and (min-width: 482px) {
+	.wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column > * {
+		margin-top: var(--global--spacing-vertical);
+		margin-bottom: var(--global--spacing-vertical);
+	}
+}
+
+.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;
+}
+
 /* Gutter Options */
 .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-gutter__none {
 	grid-gap: var(--layout-grid--gutter-none) !important;

seedlet/style.css

@@ -4312,6 +4312,26 @@ button[data-load-more-btn],
 	padding-right: var(--layout-grid--background-offset) !important;
 }
 
+.wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column > * {
+	margin-top: calc( 0.666 * var(--global--spacing-vertical));
+	margin-bottom: calc( 0.666 * var(--global--spacing-vertical));
+}
+
+@media only screen and (min-width: 482px) {
+	.wp-block-jetpack-layout-grid .wp-block-jetpack-layout-grid-column > * {
+		margin-top: var(--global--spacing-vertical);
+		margin-bottom: var(--global--spacing-vertical);
+	}
+}
+
+.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;
+}
+
 /* Gutter Options */
 .wp-block-jetpack-layout-grid .wp-block-jetpack-layout-gutter__none {
 	grid-gap: var(--layout-grid--gutter-none) !important;