Merge pull request #2704 from Automattic/fix/spearhead-block-posts-design

Spearhead: adapted jetpack posts block to the design

spearhead/assets/sass/_block-extends.scss

@@ -4,4 +4,5 @@
 @import "block-extends/links";
 @import "block-extends/navigation";
 @import "block-extends/related-posts";
+@import "block-extends/blog-posts";
 @import "block-extends/search";

spearhead/assets/sass/block-extends/_blog-posts.scss

@@ -0,0 +1,42 @@
+.wp-block-newspack-blocks-homepage-articles,
+.wp-block-a8c-blog-posts {
+
+	&.wpnbha article {
+		margin: 0 auto;
+		padding: var(--global--spacing-vertical) 0;
+	}
+
+	article {
+
+		.entry-wrapper {
+			margin: 0;
+			
+			p {
+				margin-top: 0;
+				margin-bottom: 0;
+			}
+		}
+
+		.entry-title {
+			margin-bottom: calc( 0.48 * var(--global--spacing-vertical));
+			a {
+				font-size: var(--global--font-size-lg);
+				color: var(--entry-header--color-link);
+				font-weight: var(--heading--font-weight);
+
+				&:hover,
+				&:focus {
+					color: var(--entry-header--color-hover);
+				}
+
+				&:active {
+					color: var(--entry-header--color-link);
+				}
+			}
+		}
+
+		.more-link {
+			margin-top: 0;
+		}
+	}
+}

spearhead/style-rtl.css

@@ -455,6 +455,51 @@ ul.wp-block-categories,
 	text-transform: uppercase;
 }
 
+.wp-block-newspack-blocks-homepage-articles.wpnbha article,
+.wp-block-a8c-blog-posts.wpnbha article {
+	margin: 0 auto;
+	padding: var(--global--spacing-vertical) 0;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-wrapper,
+.wp-block-a8c-blog-posts article .entry-wrapper {
+	margin: 0;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-wrapper p,
+.wp-block-a8c-blog-posts article .entry-wrapper p {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title,
+.wp-block-a8c-blog-posts article .entry-title {
+	margin-bottom: calc( 0.48 * var(--global--spacing-vertical));
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a,
+.wp-block-a8c-blog-posts article .entry-title a {
+	font-size: var(--global--font-size-lg);
+	color: var(--entry-header--color-link);
+	font-weight: var(--heading--font-weight);
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover, .wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
+.wp-block-a8c-blog-posts article .entry-title a:hover,
+.wp-block-a8c-blog-posts article .entry-title a:focus {
+	color: var(--entry-header--color-hover);
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:active,
+.wp-block-a8c-blog-posts article .entry-title a:active {
+	color: var(--entry-header--color-link);
+}
+
+.wp-block-newspack-blocks-homepage-articles article .more-link,
+.wp-block-a8c-blog-posts article .more-link {
+	margin-top: 0;
+}
+
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
 	padding: 0;
 }

spearhead/style.css

@@ -455,6 +455,51 @@ ul.wp-block-categories,
 	text-transform: uppercase;
 }
 
+.wp-block-newspack-blocks-homepage-articles.wpnbha article,
+.wp-block-a8c-blog-posts.wpnbha article {
+	margin: 0 auto;
+	padding: var(--global--spacing-vertical) 0;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-wrapper,
+.wp-block-a8c-blog-posts article .entry-wrapper {
+	margin: 0;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-wrapper p,
+.wp-block-a8c-blog-posts article .entry-wrapper p {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title,
+.wp-block-a8c-blog-posts article .entry-title {
+	margin-bottom: calc( 0.48 * var(--global--spacing-vertical));
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a,
+.wp-block-a8c-blog-posts article .entry-title a {
+	font-size: var(--global--font-size-lg);
+	color: var(--entry-header--color-link);
+	font-weight: var(--heading--font-weight);
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover, .wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
+.wp-block-a8c-blog-posts article .entry-title a:hover,
+.wp-block-a8c-blog-posts article .entry-title a:focus {
+	color: var(--entry-header--color-hover);
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:active,
+.wp-block-a8c-blog-posts article .entry-title a:active {
+	color: var(--entry-header--color-link);
+}
+
+.wp-block-newspack-blocks-homepage-articles article .more-link,
+.wp-block-a8c-blog-posts article .more-link {
+	margin-top: 0;
+}
+
 .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
 	padding: 0;
 }