Merge pull request #2188 from Automattic/fix/seedlet-widget-spacing

Seedlet: Add vertical spacing logic to widget areas.

seedlet/assets/sass/structure/_vertical-margins.scss

@@ -109,7 +109,8 @@
 .site-main > .not-found > *, // apply vertical margins to article level
 .entry-content > *,
 [class*="inner-container"] > *,
-.widget-area > * {
+.widget-area > *,
+.widget-column > * {
 
 	margin-top: calc( 0.666 * var(--global--spacing-vertical) );
 	margin-bottom: calc( 0.666 * var(--global--spacing-vertical) );
@@ -138,7 +139,7 @@
 .page-content > *,
 .comment-content > *,
 .author-bio > *,
-.widget-area > .widget > * {
+.widget > * {
 	margin-top: var(--global--spacing-unit);
 	margin-bottom: var(--global--spacing-unit);
 

seedlet/style-rtl.css

@@ -303,7 +303,8 @@ Included in theme screenshot.
 .site-main > .not-found > *,
 .entry-content > *,
 [class*="inner-container"] > *,
-.widget-area > * {
+.widget-area > *,
+.widget-column > * {
 	margin-top: calc( 0.666 * var(--global--spacing-vertical));
 	margin-bottom: calc( 0.666 * var(--global--spacing-vertical));
 }
@@ -314,7 +315,8 @@ Included in theme screenshot.
 	.site-main > .not-found > *,
 	.entry-content > *,
 	[class*="inner-container"] > *,
-	.widget-area > * {
+	.widget-area > *,
+	.widget-column > * {
 		margin-top: var(--global--spacing-vertical);
 		margin-bottom: var(--global--spacing-vertical);
 	}
@@ -325,7 +327,8 @@ Included in theme screenshot.
 .site-main > .not-found > *:first-child,
 .entry-content > *:first-child,
 [class*="inner-container"] > *:first-child,
-.widget-area > *:first-child {
+.widget-area > *:first-child,
+.widget-column > *:first-child {
 	margin-top: 0;
 }
 
@@ -334,7 +337,8 @@ Included in theme screenshot.
 .site-main > .not-found > *:last-child,
 .entry-content > *:last-child,
 [class*="inner-container"] > *:last-child,
-.widget-area > *:last-child {
+.widget-area > *:last-child,
+.widget-column > *:last-child {
 	margin-bottom: 0;
 }
 
@@ -348,7 +352,7 @@ Included in theme screenshot.
 .page-content > *,
 .comment-content > *,
 .author-bio > *,
-.widget-area > .widget > * {
+.widget > * {
 	margin-top: var(--global--spacing-unit);
 	margin-bottom: var(--global--spacing-unit);
 }
@@ -359,7 +363,7 @@ Included in theme screenshot.
 .page-content > *:first-child,
 .comment-content > *:first-child,
 .author-bio > *:first-child,
-.widget-area > .widget > *:first-child {
+.widget > *:first-child {
 	margin-top: 0;
 }
 
@@ -369,7 +373,7 @@ Included in theme screenshot.
 .page-content > *:last-child,
 .comment-content > *:last-child,
 .author-bio > *:last-child,
-.widget-area > .widget > *:last-child {
+.widget > *:last-child {
 	margin-bottom: 0;
 }
 

seedlet/style.css

@@ -311,7 +311,8 @@ Included in theme screenshot.
 .site-main > .not-found > *,
 .entry-content > *,
 [class*="inner-container"] > *,
-.widget-area > * {
+.widget-area > *,
+.widget-column > * {
 	margin-top: calc( 0.666 * var(--global--spacing-vertical));
 	margin-bottom: calc( 0.666 * var(--global--spacing-vertical));
 }
@@ -322,7 +323,8 @@ Included in theme screenshot.
 	.site-main > .not-found > *,
 	.entry-content > *,
 	[class*="inner-container"] > *,
-	.widget-area > * {
+	.widget-area > *,
+	.widget-column > * {
 		margin-top: var(--global--spacing-vertical);
 		margin-bottom: var(--global--spacing-vertical);
 	}
@@ -333,7 +335,8 @@ Included in theme screenshot.
 .site-main > .not-found > *:first-child,
 .entry-content > *:first-child,
 [class*="inner-container"] > *:first-child,
-.widget-area > *:first-child {
+.widget-area > *:first-child,
+.widget-column > *:first-child {
 	margin-top: 0;
 }
 
@@ -342,7 +345,8 @@ Included in theme screenshot.
 .site-main > .not-found > *:last-child,
 .entry-content > *:last-child,
 [class*="inner-container"] > *:last-child,
-.widget-area > *:last-child {
+.widget-area > *:last-child,
+.widget-column > *:last-child {
 	margin-bottom: 0;
 }
 
@@ -356,7 +360,7 @@ Included in theme screenshot.
 .page-content > *,
 .comment-content > *,
 .author-bio > *,
-.widget-area > .widget > * {
+.widget > * {
 	margin-top: var(--global--spacing-unit);
 	margin-bottom: var(--global--spacing-unit);
 }
@@ -367,7 +371,7 @@ Included in theme screenshot.
 .page-content > *:first-child,
 .comment-content > *:first-child,
 .author-bio > *:first-child,
-.widget-area > .widget > *:first-child {
+.widget > *:first-child {
 	margin-top: 0;
 }
 
@@ -377,7 +381,7 @@ Included in theme screenshot.
 .page-content > *:last-child,
 .comment-content > *:last-child,
 .author-bio > *:last-child,
-.widget-area > .widget > *:last-child {
+.widget > *:last-child {
 	margin-bottom: 0;
 }