Varia: add styling for Blog Posts (Newspack) block.

varia/sass/blocks/_editor.scss

@@ -7,6 +7,7 @@
  *   files and conditionally loaded
  */
 
+@import "blog-posts/editor";
 @import "button/editor";
 @import "code/editor";
 @import "cover/editor";

varia/sass/blocks/_imports.scss

@@ -7,6 +7,7 @@
  */
 
 @import "audio/style";
+@import "blog-posts/style";
 @import "button/style";
 @import "code/style";
 @import "columns/style";

varia/sass/blocks/blog-posts/_editor.scss

@@ -0,0 +1,31 @@
+.wp-block-a8c-blog-posts {
+	article {
+		margin-bottom: 96px;
+	}
+
+	.post-thumbnail img {
+		width: auto;
+	}
+
+	.entry-title {
+		font-size: #{map-deep-get($config-heading, "font", "size", "h2")};
+		letter-spacing: #{map-deep-get($config-heading, "font", "letter-spacing", "h2")};
+		line-height: #{map-deep-get($config-heading, "font", "line-height", "h2")};
+
+		a {
+			color: #{map-deep-get($config-global, "color", "primary", "default")};
+			text-decoration: underline;
+
+			&:hover {
+				color: #{map-deep-get($config-global, "color", "primary", "hover")};
+			}
+		}
+	}
+
+	.entry-meta,
+	.entry-footer,
+	.cat-links {
+		color: #{map-deep-get($config-global, "color", "foreground", "light")};
+		font-size: #{map-deep-get($config-global, "font", "size", "sm")};
+	}
+}

varia/sass/blocks/blog-posts/_style.scss

@@ -0,0 +1,100 @@
+.wp-block-newspack-blocks-homepage-articles article {
+	display: block;
+
+	/* Vertical margins logic between posts */
+	margin-top: calc(3 * #{map-deep-get($config-global, "spacing", "vertical")});
+	margin-bottom: calc(3 * #{map-deep-get($config-global, "spacing", "vertical")});
+
+	&:first-child {
+		margin-top: 0;
+	}
+
+	&:last-child {
+		margin-bottom: calc(3 * #{map-deep-get($config-global, "spacing", "vertical")});
+	}
+
+	.post-thumbnail img {
+		width: auto;
+	}
+
+	.entry-title {
+		font-size: #{map-deep-get($config-heading, "font", "size", "h2")};
+		letter-spacing: #{map-deep-get($config-heading, "font", "letter-spacing", "h2")};
+		line-height: #{map-deep-get($config-heading, "font", "line-height", "h2")};
+
+		a {
+			color: #{map-deep-get($config-global, "color", "primary", "default")};
+			text-decoration: underline;
+
+			&:hover {
+				color: #{map-deep-get($config-global, "color", "primary", "hover")};
+			}
+		}
+	}
+
+	.entry-wrapper > * {
+		/* Vertical margins logic between post details */
+		margin-top: #{map-deep-get($config-global, "spacing", "unit")};
+		margin-bottom: #{map-deep-get($config-global, "spacing", "unit")};
+
+		&:first-child {
+			margin-top: 0;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	.more-link {
+		margin-top: #{map-deep-get($config-global, "spacing", "unit")};
+	}
+
+	.entry-meta,
+	.entry-footer,
+	.cat-links {
+		color: #{map-deep-get($config-global, "color", "foreground", "light")};
+		font-size: #{map-deep-get($config-global, "font", "size", "sm")};
+
+		> span {
+			display: inline-block;
+			margin-right: #{map-deep-get($config-global, "spacing", "unit")};
+
+			& > * {
+				display: inline-block;
+				vertical-align: middle;
+			}
+
+			&:last-child {
+				margin-right: 0;
+			}
+
+			.published + .updated {
+				display: none; // Hide updated date?
+			}
+		}
+
+		a {
+			color: currentColor;
+
+			&:hover,
+			&:active {
+				color: #{map-deep-get($config-global, "color", "primary", "hover")};
+			}
+		}
+
+		.svg-icon {
+			fill: currentColor;
+			position: relative;
+			display: inline-block;
+			vertical-align: middle;
+			margin-right: calc(0.25 * #{map-deep-get($config-global, "spacing", "unit")});
+		}
+	}
+}
+
+button[data-load-more-btn] {
+	// Extend button style
+	@extend %button-style;
+	display: inline-block;
+}

varia/style-editor.css

@@ -300,6 +300,36 @@ object {
  * - In the future the Block styles may get compiled to individual .css
  *   files and conditionally loaded
  */
+.wp-block-a8c-blog-posts article {
+	margin-bottom: 96px;
+}
+
+.wp-block-a8c-blog-posts .post-thumbnail img {
+	width: auto;
+}
+
+.wp-block-a8c-blog-posts .entry-title {
+	font-size: 2.48832rem;
+	letter-spacing: normal;
+	line-height: 1.125;
+}
+
+.wp-block-a8c-blog-posts .entry-title a {
+	color: blue;
+	text-decoration: underline;
+}
+
+.wp-block-a8c-blog-posts .entry-title a:hover {
+	color: indigo;
+}
+
+.wp-block-a8c-blog-posts .entry-meta,
+.wp-block-a8c-blog-posts .entry-footer,
+.wp-block-a8c-blog-posts .cat-links {
+	color: #767676;
+	font-size: 0.83333rem;
+}
+
 .wp-block-button {
 	/* Default Style */
 	/* Outline Style */
@@ -1042,7 +1072,7 @@ table th,
 	display: none;
 }
 
-.template-block .fse-template-part .wp-block-column .block-editor-block-list__layout [data-type='a8c/site-title']:first-child .site-title:not([data-align='full']) {
+.template-block .fse-template-part .wp-block-column .block-editor-block-list__layout [data-type='a8c/site-title']:first-child .site-title {
 	margin-top: 0;
 }
 

varia/style.css

@@ -148,7 +148,7 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  *   let’s use a placeholder to keep them all
  *   in-sync
  */
-button,
+button[data-load-more-btn], button,
 .button,
 input[type="submit"],
 .wp-block-button__link,
@@ -166,11 +166,11 @@ input[type="submit"],
 	padding: 16px 16px;
 }
 
-button:before,
+button[data-load-more-btn]:before, button:before,
 .button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button:after,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
 .button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
@@ -181,7 +181,7 @@ input[type="submit"]:after,
 	width: 0;
 }
 
-button:before,
+button[data-load-more-btn]:before, button:before,
 .button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
@@ -189,7 +189,7 @@ input[type="submit"]:before,
 	margin-bottom: -0.12em;
 }
 
-button:after,
+button[data-load-more-btn]:after, button:after,
 .button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
@@ -234,7 +234,7 @@ input.has-focus[type="submit"],
  *   let’s use a placeholder to keep them all
  *   in-sync
  */
-button,
+button[data-load-more-btn], button,
 .button,
 input[type="submit"],
 .wp-block-button__link,
@@ -252,11 +252,11 @@ input[type="submit"],
 	padding: 16px 16px;
 }
 
-button:before,
+button[data-load-more-btn]:before, button:before,
 .button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
-.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button:after,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
 .button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
@@ -267,7 +267,7 @@ input[type="submit"]:after,
 	width: 0;
 }
 
-button:before,
+button[data-load-more-btn]:before, button:before,
 .button:before,
 input[type="submit"]:before,
 .wp-block-button__link:before,
@@ -275,7 +275,7 @@ input[type="submit"]:before,
 	margin-bottom: -0.12em;
 }
 
-button:after,
+button[data-load-more-btn]:after, button:after,
 .button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
@@ -1189,6 +1189,119 @@ object {
 	min-width: 300px;
 }
 
+.wp-block-newspack-blocks-homepage-articles article {
+	display: block;
+	/* Vertical margins logic between posts */
+	margin-top: calc(3 * 32px);
+	margin-bottom: calc(3 * 32px);
+}
+
+.wp-block-newspack-blocks-homepage-articles article:first-child {
+	margin-top: 0;
+}
+
+.wp-block-newspack-blocks-homepage-articles article:last-child {
+	margin-bottom: calc(3 * 32px);
+}
+
+.wp-block-newspack-blocks-homepage-articles article .post-thumbnail img {
+	width: auto;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title {
+	font-size: 2.48832rem;
+	letter-spacing: normal;
+	line-height: 1.125;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: blue;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: indigo;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-wrapper > * {
+	/* Vertical margins logic between post details */
+	margin-top: 16px;
+	margin-bottom: 16px;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-wrapper > *:first-child {
+	margin-top: 0;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-wrapper > *:last-child {
+	margin-bottom: 0;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .more-link {
+	margin-top: 16px;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-meta,
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+.wp-block-newspack-blocks-homepage-articles article .cat-links {
+	color: #767676;
+	font-size: 0.83333rem;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-meta > span,
+.wp-block-newspack-blocks-homepage-articles article .entry-footer > span,
+.wp-block-newspack-blocks-homepage-articles article .cat-links > span {
+	display: inline-block;
+	margin-right: 16px;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-meta > span > *,
+.wp-block-newspack-blocks-homepage-articles article .entry-footer > span > *,
+.wp-block-newspack-blocks-homepage-articles article .cat-links > span > * {
+	display: inline-block;
+	vertical-align: middle;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-meta > span:last-child,
+.wp-block-newspack-blocks-homepage-articles article .entry-footer > span:last-child,
+.wp-block-newspack-blocks-homepage-articles article .cat-links > span:last-child {
+	margin-right: 0;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-meta > span .published + .updated,
+.wp-block-newspack-blocks-homepage-articles article .entry-footer > span .published + .updated,
+.wp-block-newspack-blocks-homepage-articles article .cat-links > span .published + .updated {
+	display: none;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-meta a,
+.wp-block-newspack-blocks-homepage-articles article .entry-footer a,
+.wp-block-newspack-blocks-homepage-articles article .cat-links a {
+	color: currentColor;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-meta a:hover, .wp-block-newspack-blocks-homepage-articles article .entry-meta a:active,
+.wp-block-newspack-blocks-homepage-articles article .entry-footer a:hover,
+.wp-block-newspack-blocks-homepage-articles article .entry-footer a:active,
+.wp-block-newspack-blocks-homepage-articles article .cat-links a:hover,
+.wp-block-newspack-blocks-homepage-articles article .cat-links a:active {
+	color: indigo;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-meta .svg-icon,
+.wp-block-newspack-blocks-homepage-articles article .entry-footer .svg-icon,
+.wp-block-newspack-blocks-homepage-articles article .cat-links .svg-icon {
+	fill: currentColor;
+	position: relative;
+	display: inline-block;
+	vertical-align: middle;
+	margin-right: calc(0.25 * 16px);
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
 /**
  * Button
  */