Add Alternating Grid block style to the Blog Posts block.

seedlet/assets/css/ie.css

@@ -6063,7 +6063,6 @@ img#wpstats {
 .wp-block-a8c-blog-posts article .entry-meta a,
 .wp-block-a8c-blog-posts article .cat-links a {
 	color: currentColor;
-	text-decoration: underline;
 }
 
 .wp-block-newspack-blocks-homepage-articles article .entry-meta a:hover {
@@ -6144,6 +6143,37 @@ img#wpstats {
 	color: currentColor;
 }
 
+@media only screen and (min-width: 592px) {
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid h2 {
+		margin-left: calc(50% + 13px);
+	}
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid article {
+		width: calc(50% - 13px);
+		max-width: calc(50% - 13px);
+		margin-top: 0;
+		margin-bottom: 30px;
+		text-align: right;
+		clear: both;
+	}
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid article .entry-meta {
+		justify-content: flex-end;
+	}
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid article:nth-of-type(2n + 1) {
+		float: right;
+		text-align: left;
+	}
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid article:nth-of-type(2n + 1) .entry-meta {
+		justify-content: flex-start;
+	}
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid.wpnbha.is-grid > div {
+		display: inherit;
+	}
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid button {
+		clear: both;
+		margin: 30px auto;
+	}
+}
+
 button {
 	line-height: 1;
 	color: #FFFFFF;

seedlet/assets/css/style-editor.css

@@ -1753,7 +1753,6 @@ pre.wp-block-verse {
 .wp-block-a8c-blog-posts .entry-meta a,
 .wp-block-a8c-blog-posts .cat-links a {
 	color: currentColor;
-	text-decoration: underline;
 }
 
 .wp-block-a8c-blog-posts .entry-meta a:hover, .wp-block-a8c-blog-posts .entry-meta a:active,
@@ -1781,6 +1780,39 @@ pre.wp-block-verse {
 	color: currentColor;
 }
 
+@media only screen and (min-width: 592px) {
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid {
+		overflow: hidden;
+	}
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid h2 {
+		margin-left: calc(50% + (0.5 * var(--global--spacing-horizontal)));
+	}
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid article {
+		width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+		max-width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+		margin-top: 0;
+		margin-bottom: var(--global--spacing-vertical);
+		text-align: right;
+		clear: both;
+	}
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid article .entry-meta {
+		justify-content: flex-end;
+	}
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid article:nth-of-type(2n + 1) {
+		float: right;
+		text-align: left;
+	}
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid article:nth-of-type(2n + 1) .entry-meta {
+		justify-content: flex-start;
+	}
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid.wpnbha.is-grid > div {
+		display: inherit;
+	}
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid + .wpnbha__wp-block-button__wrapper {
+		text-align: center;
+	}
+}
+
 .wp-block-search .wp-block-search__button, .wp-block-a8c-blog-posts + .button {
 	line-height: var(--button--line-height);
 	color: var(--button--color-text);

seedlet/assets/sass/vendors/jetpack/blocks/blog-posts/_editor.scss

@@ -129,7 +129,6 @@
 
 		a {
 			color: currentColor;
-			text-decoration: underline;
 
 			&:hover,
 			&:active {
@@ -146,6 +145,51 @@
 	}
 }
 
+// Block Style
+
+@include media(tablet) {
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid {
+
+		// Necessary so that the block boundaries are respected.
+		overflow: hidden;
+
+		h2 {
+			margin-left: calc(50% + (0.5 * var(--global--spacing-horizontal)));
+		}
+
+		article {
+			width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+			max-width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+			margin-top: 0;
+			margin-bottom: var(--global--spacing-vertical);
+			text-align: right;
+			clear: both;
+
+			.entry-meta {
+				justify-content: flex-end;
+			}
+
+			&:nth-of-type(2n + 1) {
+				float: right;
+				text-align: left;
+
+				.entry-meta {
+					justify-content: flex-start;
+				}
+			}
+		}
+
+		// Remove the styles that enforce the grid setting.
+		&.wpnbha.is-grid > div {
+			display: inherit;
+		}
+
+		+ .wpnbha__wp-block-button__wrapper {
+			text-align: center;
+		}
+	}
+}
+
 // Add theme style to load-more button
 
 @import "../../../../base/extends";

seedlet/assets/sass/vendors/jetpack/blocks/blog-posts/_style.scss

@@ -137,7 +137,6 @@
 
 			a {
 				color: currentColor;
-				text-decoration: underline;
 
 				&:hover,
 				&:active {
@@ -155,6 +154,49 @@
 	}
 }
 
+// Block Style
+
+@include media(tablet) {
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid {
+
+		h2 {
+			margin-left: calc(50% + (0.5 * var(--global--spacing-horizontal)));
+		}
+
+		article {
+			width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+			max-width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+			margin-top: 0;
+			margin-bottom: var(--global--spacing-vertical);
+			text-align: right;
+			clear: both;
+
+			.entry-meta {
+				justify-content: flex-end;
+			}
+
+			&:nth-of-type(2n + 1) {
+				float: right;
+				text-align: left;
+
+				.entry-meta {
+					justify-content: flex-start;
+				}
+			}
+		}
+
+		// Remove the styles that enforce the grid setting.
+		&.wpnbha.is-grid > div {
+			display: inherit;
+		}
+
+		button {
+			clear: both;
+			margin: var(--global--spacing-vertical) auto;
+		}
+	}
+}
+
 // Add theme style to load-more button
 
 @import "../../../../base/extends";

seedlet/inc/block-styles.php

@@ -10,7 +10,7 @@ if ( function_exists( 'register_block_style' ) ) {
 	function seedlet_register_block_styles() {
 
 		/**
-		 * Register block style
+		 * Register block styles
 		 */
 		register_block_style(
 			'core/latest-posts',
@@ -20,6 +20,14 @@ if ( function_exists( 'register_block_style' ) ) {
 				'style_handle' => 'seedlet-alternating-grid',
 			)
 		);
+		register_block_style(
+			'a8c/blog-posts',
+			array(
+				'name'         => 'seedlet-alternating-grid',
+				'label'        => 'Alternating Grid',
+				'style_handle' => 'seedlet-alternating-grid',
+			)
+		);
 	}
 
 	add_action( 'init', 'seedlet_register_block_styles' );

seedlet/style-rtl.css

@@ -4306,7 +4306,6 @@ img#wpstats {
 .wp-block-a8c-blog-posts article .entry-meta a,
 .wp-block-a8c-blog-posts article .cat-links a {
 	color: currentColor;
-	text-decoration: underline;
 }
 
 .wp-block-newspack-blocks-homepage-articles article .entry-meta a:hover, .wp-block-newspack-blocks-homepage-articles article .entry-meta a:active,
@@ -4358,6 +4357,40 @@ img#wpstats {
 	color: currentColor;
 }
 
+@media only screen and (min-width: 592px) {
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid {
+		overflow: hidden;
+	}
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid h2 {
+		margin-right: calc(50% + (0.5 * var(--global--spacing-horizontal)));
+	}
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid article {
+		width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+		max-width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+		margin-top: 0;
+		margin-bottom: var(--global--spacing-vertical);
+		text-align: left;
+		clear: both;
+	}
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid article .entry-meta {
+		justify-content: flex-end;
+	}
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid article:nth-of-type(2n + 1) {
+		float: left;
+		text-align: right;
+	}
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid article:nth-of-type(2n + 1) .entry-meta {
+		justify-content: flex-start;
+	}
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid.wpnbha.is-grid > div {
+		display: inherit;
+	}
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid button {
+		clear: both;
+		margin: var(--global--spacing-vertical) auto;
+	}
+}
+
 button,
 .button,
 input[type="submit"],

seedlet/style.css

@@ -4331,7 +4331,6 @@ img#wpstats {
 .wp-block-a8c-blog-posts article .entry-meta a,
 .wp-block-a8c-blog-posts article .cat-links a {
 	color: currentColor;
-	text-decoration: underline;
 }
 
 .wp-block-newspack-blocks-homepage-articles article .entry-meta a:hover, .wp-block-newspack-blocks-homepage-articles article .entry-meta a:active,
@@ -4383,6 +4382,37 @@ img#wpstats {
 	color: currentColor;
 }
 
+@media only screen and (min-width: 592px) {
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid h2 {
+		margin-left: calc(50% + (0.5 * var(--global--spacing-horizontal)));
+	}
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid article {
+		width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+		max-width: calc(50% - (0.5 * var(--global--spacing-horizontal)));
+		margin-top: 0;
+		margin-bottom: var(--global--spacing-vertical);
+		text-align: right;
+		clear: both;
+	}
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid article .entry-meta {
+		justify-content: flex-end;
+	}
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid article:nth-of-type(2n + 1) {
+		float: right;
+		text-align: left;
+	}
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid article:nth-of-type(2n + 1) .entry-meta {
+		justify-content: flex-start;
+	}
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid.wpnbha.is-grid > div {
+		display: inherit;
+	}
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid button {
+		clear: both;
+		margin: var(--global--spacing-vertical) auto;
+	}
+}
+
 button,
 .button,
 input[type="submit"],