Merge pull request #2401 from Automattic/seedlet/add/alternating-grid-blog-posts-style

Add Alternating Grid block style to the Blog Posts block.

seedlet/assets/css/ie.css

@@ -5837,18 +5837,22 @@ img#wpstats {
 	}
 }
 
-.wp-block-newspack-blocks-homepage-articles .article-section-title {
-	font-size: 1em;
+.wp-block-newspack-blocks-homepage-articles h2.article-section-title {
+	font-size: 24px;
+	letter-spacing: normal;
+	line-height: 1.3;
 	margin-bottom: 15px;
 }
 
-.wp-block-a8c-blog-posts .article-section-title {
-	font-size: 1em;
+.wp-block-a8c-blog-posts h2.article-section-title {
+	font-size: 24px;
+	letter-spacing: normal;
+	line-height: 1.3;
 	margin-bottom: 15px;
 }
 
-.wp-block-newspack-blocks-homepage-articles .article-section-title + article,
-.wp-block-a8c-blog-posts .article-section-title + article {
+.wp-block-newspack-blocks-homepage-articles h2.article-section-title + article,
+.wp-block-a8c-blog-posts h2.article-section-title + article {
 	margin-top: 0;
 }
 
@@ -6063,7 +6067,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 +6147,60 @@ img#wpstats {
 	color: currentColor;
 }
 
+@media only screen and (min-width: 592px) {
+	.wp-block-newspack-blocks-homepage-articles.is-style-seedlet-alternating-grid .article-section-title {
+		margin-left: calc(50% + 13px);
+	}
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid .article-section-title {
+		margin-left: calc(50% + 13px);
+	}
+	.wp-block-newspack-blocks-homepage-articles.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 {
+		width: calc(50% - 13px);
+		max-width: calc(50% - 13px);
+		margin-top: 0;
+		margin-bottom: 30px;
+		text-align: right;
+		clear: both;
+	}
+	.wp-block-newspack-blocks-homepage-articles.is-style-seedlet-alternating-grid article .entry-meta,
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid article .entry-meta {
+		justify-content: flex-end;
+	}
+	.wp-block-newspack-blocks-homepage-articles.is-style-seedlet-alternating-grid article:nth-of-type(2n + 1),
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid article:nth-of-type(2n + 1) {
+		float: right;
+		text-align: left;
+	}
+	.wp-block-newspack-blocks-homepage-articles.is-style-seedlet-alternating-grid article:nth-of-type(2n + 1) .entry-meta,
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid article:nth-of-type(2n + 1) .entry-meta {
+		justify-content: flex-start;
+	}
+	.wp-block-newspack-blocks-homepage-articles.is-style-seedlet-alternating-grid .more-link,
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid .more-link {
+		display: inline-block;
+	}
+	.wp-block-newspack-blocks-homepage-articles.is-style-seedlet-alternating-grid.wpnbha.is-grid > div,
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid.wpnbha.is-grid > div {
+		display: inherit;
+	}
+	.wp-block-newspack-blocks-homepage-articles.is-style-seedlet-alternating-grid button {
+		clear: both;
+		margin: 30px auto;
+	}
+	.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

@@ -1651,7 +1651,9 @@ pre.wp-block-verse {
 }
 
 .wp-block-a8c-blog-posts .article-section-title {
-	font-size: var(--global--font-size-base);
+	font-size: var(--heading--font-size-h4);
+	letter-spacing: var(--heading--letter-spacing-h4);
+	line-height: var(--heading--line-height-h4);
 	margin-top: 0;
 	margin-bottom: calc(0.5 * var(--global--spacing-vertical));
 }
@@ -1753,7 +1755,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 +1782,42 @@ 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 .article-section-title {
+		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 article .more-link {
+		display: inline-block;
+	}
+	.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

@@ -32,7 +32,9 @@
 	}
 
 	.article-section-title {
-		font-size: var(--global--font-size-base);
+		font-size: var(--heading--font-size-h4);
+		letter-spacing: var(--heading--letter-spacing-h4);
+		line-height: var(--heading--line-height-h4);
 		margin-top: 0;
 		margin-bottom: calc(0.5 * var(--global--spacing-vertical));
 	}
@@ -129,7 +131,6 @@
 
 		a {
 			color: currentColor;
-			text-decoration: underline;
 
 			&:hover,
 			&:active {
@@ -146,6 +147,55 @@
 	}
 }
 
+// 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;
+
+		.article-section-title {
+			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;
+				}
+			}
+
+			.more-link {
+				display: inline-block;
+			}
+		}
+
+		// 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

@@ -32,8 +32,10 @@
 		}
 	}
 
-	.article-section-title {
-		font-size: var(--global--font-size-base);
+	h2.article-section-title {
+		font-size: var(--heading--font-size-h4);
+		letter-spacing: var(--heading--letter-spacing-h4);
+		line-height: var(--heading--line-height-h4);
 		margin-bottom: calc(0.5 * var(--global--spacing-vertical));
 
 		& + article {
@@ -137,7 +139,6 @@
 
 			a {
 				color: currentColor;
-				text-decoration: underline;
 
 				&:hover,
 				&:active {
@@ -155,6 +156,54 @@
 	}
 }
 
+// Block Style
+
+@include media(tablet) {
+	.wp-block-newspack-blocks-homepage-articles.is-style-seedlet-alternating-grid,
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid {
+
+		.article-section-title {
+			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;
+				}
+			}
+		}
+
+		.more-link {
+			display: inline-block;
+		}
+
+		// 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

@@ -4140,14 +4140,16 @@ img#wpstats {
 	}
 }
 
-.wp-block-newspack-blocks-homepage-articles .article-section-title,
-.wp-block-a8c-blog-posts .article-section-title {
-	font-size: var(--global--font-size-base);
+.wp-block-newspack-blocks-homepage-articles h2.article-section-title,
+.wp-block-a8c-blog-posts h2.article-section-title {
+	font-size: var(--heading--font-size-h4);
+	letter-spacing: var(--heading--letter-spacing-h4);
+	line-height: var(--heading--line-height-h4);
 	margin-bottom: calc(0.5 * var(--global--spacing-vertical));
 }
 
-.wp-block-newspack-blocks-homepage-articles .article-section-title + article,
-.wp-block-a8c-blog-posts .article-section-title + article {
+.wp-block-newspack-blocks-homepage-articles h2.article-section-title + article,
+.wp-block-a8c-blog-posts h2.article-section-title + article {
 	margin-top: 0;
 }
 
@@ -4306,7 +4308,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 +4359,48 @@ img#wpstats {
 	color: currentColor;
 }
 
+@media only screen and (min-width: 592px) {
+	.wp-block-newspack-blocks-homepage-articles.is-style-seedlet-alternating-grid .article-section-title,
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid .article-section-title {
+		margin-right: calc(50% + (0.5 * var(--global--spacing-horizontal)));
+	}
+	.wp-block-newspack-blocks-homepage-articles.is-style-seedlet-alternating-grid article,
+	.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-newspack-blocks-homepage-articles.is-style-seedlet-alternating-grid article .entry-meta,
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid article .entry-meta {
+		justify-content: flex-end;
+	}
+	.wp-block-newspack-blocks-homepage-articles.is-style-seedlet-alternating-grid article:nth-of-type(2n + 1),
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid article:nth-of-type(2n + 1) {
+		float: left;
+		text-align: right;
+	}
+	.wp-block-newspack-blocks-homepage-articles.is-style-seedlet-alternating-grid article:nth-of-type(2n + 1) .entry-meta,
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid article:nth-of-type(2n + 1) .entry-meta {
+		justify-content: flex-start;
+	}
+	.wp-block-newspack-blocks-homepage-articles.is-style-seedlet-alternating-grid .more-link,
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid .more-link {
+		display: inline-block;
+	}
+	.wp-block-newspack-blocks-homepage-articles.is-style-seedlet-alternating-grid.wpnbha.is-grid > div,
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid.wpnbha.is-grid > div {
+		display: inherit;
+	}
+	.wp-block-newspack-blocks-homepage-articles.is-style-seedlet-alternating-grid button,
+	.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

@@ -4165,14 +4165,16 @@ img#wpstats {
 	}
 }
 
-.wp-block-newspack-blocks-homepage-articles .article-section-title,
-.wp-block-a8c-blog-posts .article-section-title {
-	font-size: var(--global--font-size-base);
+.wp-block-newspack-blocks-homepage-articles h2.article-section-title,
+.wp-block-a8c-blog-posts h2.article-section-title {
+	font-size: var(--heading--font-size-h4);
+	letter-spacing: var(--heading--letter-spacing-h4);
+	line-height: var(--heading--line-height-h4);
 	margin-bottom: calc(0.5 * var(--global--spacing-vertical));
 }
 
-.wp-block-newspack-blocks-homepage-articles .article-section-title + article,
-.wp-block-a8c-blog-posts .article-section-title + article {
+.wp-block-newspack-blocks-homepage-articles h2.article-section-title + article,
+.wp-block-a8c-blog-posts h2.article-section-title + article {
 	margin-top: 0;
 }
 
@@ -4331,7 +4333,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 +4384,48 @@ img#wpstats {
 	color: currentColor;
 }
 
+@media only screen and (min-width: 592px) {
+	.wp-block-newspack-blocks-homepage-articles.is-style-seedlet-alternating-grid .article-section-title,
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid .article-section-title {
+		margin-left: calc(50% + (0.5 * var(--global--spacing-horizontal)));
+	}
+	.wp-block-newspack-blocks-homepage-articles.is-style-seedlet-alternating-grid article,
+	.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-newspack-blocks-homepage-articles.is-style-seedlet-alternating-grid article .entry-meta,
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid article .entry-meta {
+		justify-content: flex-end;
+	}
+	.wp-block-newspack-blocks-homepage-articles.is-style-seedlet-alternating-grid article:nth-of-type(2n + 1),
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid article:nth-of-type(2n + 1) {
+		float: right;
+		text-align: left;
+	}
+	.wp-block-newspack-blocks-homepage-articles.is-style-seedlet-alternating-grid article:nth-of-type(2n + 1) .entry-meta,
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid article:nth-of-type(2n + 1) .entry-meta {
+		justify-content: flex-start;
+	}
+	.wp-block-newspack-blocks-homepage-articles.is-style-seedlet-alternating-grid .more-link,
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid .more-link {
+		display: inline-block;
+	}
+	.wp-block-newspack-blocks-homepage-articles.is-style-seedlet-alternating-grid.wpnbha.is-grid > div,
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid.wpnbha.is-grid > div {
+		display: inherit;
+	}
+	.wp-block-newspack-blocks-homepage-articles.is-style-seedlet-alternating-grid button,
+	.wp-block-a8c-blog-posts.is-style-seedlet-alternating-grid button {
+		clear: both;
+		margin: var(--global--spacing-vertical) auto;
+	}
+}
+
 button,
 .button,
 input[type="submit"],