Merge pull request #1710 from Automattic/update/blog-posts-block-styles

Template-First Themes: add styling for Blog Posts (Newspack) block.

alves/sass/_extra-child-theme.scss

@@ -182,9 +182,9 @@ body:not(.fse-enabled) {
 		grid-template-rows: auto;
 		grid-column-gap: #{map-deep-get($config-global, "spacing", "unit")};
 		grid-template-areas:
-			"site-logo site-logo"
-			"site-title main-navigation"
-			"site-description social-navigation";
+				"site-logo site-logo"
+				"site-title main-navigation"
+				"site-description social-navigation";
 
 		&:before,
 		&:after {
@@ -255,7 +255,7 @@ body:not(.fse-enabled) {
 				}
 
 				& > .menu-item-has-children > a::after {
-						font-size: #{0.5 * map-deep-get($config-global, "font", "size", "base")};
+					font-size: #{0.5 * map-deep-get($config-global, "font", "size", "base")};
 				}
 			}
 
@@ -335,7 +335,7 @@ body:not(.fse-enabled) {
  * 3. Main Wrapper and Content
  */
 
- .home.page.hide-homepage-title {
+.home.page.hide-homepage-title {
 	.site-content {
 		.site-main {
 			padding-top: 0;
@@ -517,3 +517,7 @@ body:not(.fse-enabled) {
 		margin-top: $spacing_vertical;
 	}
 }
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	text-decoration: none;
+}

alves/style-editor.css

@@ -295,6 +295,52 @@ 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: calc(3 * 32px);
+}
+
+.wp-block-a8c-blog-posts .post-thumbnail img {
+	width: auto;
+}
+
+.wp-block-a8c-blog-posts .entry-title a {
+	color: #3E7D98;
+	text-decoration: underline;
+}
+
+.wp-block-a8c-blog-posts .entry-title a:hover {
+	color: #2f5f74;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-title a {
+	color: currentColor;
+}
+
+.wp-block-a8c-blog-posts .entry-meta,
+.wp-block-a8c-blog-posts .entry-footer,
+.wp-block-a8c-blog-posts .cat-links {
+	color: #4d6974;
+	font-size: 1.04167rem;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .cat-links {
+	color: currentColor;
+}
+
 .wp-block-button {
 	/* Default Style */
 	/* Outline Style */

alves/style-rtl.css

@@ -194,7 +194,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,
@@ -212,11 +212,11 @@ input[type="submit"],
 	padding: 16px 48px;
 }
 
-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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,117 @@ 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 a {
+	color: #3E7D98;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #2f5f74;
+}
+
+.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: #4d6974;
+	font-size: 1.04167rem;
+}
+
+.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-left: 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-left: 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: #2f5f74;
+}
+
+.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-left: calc(0.25 * 16px);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
 /**
  * Button
  */
@@ -4080,6 +4191,10 @@ body:not(.fse-enabled) #masthead {
 	margin-top: 32px;
 }
 
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	text-decoration: none;
+}
+
 /**
  * Full Site Editing
  * - Full Site Editing overrides

alves/style.css

@@ -194,7 +194,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,
@@ -212,11 +212,11 @@ input[type="submit"],
 	padding: 16px 48px;
 }
 
-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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,148 @@ 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 a {
+	color: #3E7D98;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #2f5f74;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: currentColor;
+}
+
+.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: #4d6974;
+	font-size: 1.04167rem;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .cat-links {
+	color: currentColor;
+}
+
+.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: #2f5f74;
+}
+
+.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);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+	margin-bottom: calc(3 * 32px);
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
+.has-background:not(.has-background-background-color) button[data-load-more-btn],
+[class*="background-color"]:not(.has-background-background-color) button[data-load-more-btn],
+[style*="background-color"] button[data-load-more-btn] {
+	background-color: transparent;
+	border: 2px solid currentColor;
+	color: currentColor;
+}
+
 /**
  * Button
  */
@@ -4109,6 +4251,10 @@ body:not(.fse-enabled) #masthead {
 	margin-top: 32px;
 }
 
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	text-decoration: none;
+}
+
 /**
  * Full Site Editing
  * - Full Site Editing overrides

balasana/sass/_extra-child-theme.scss

@@ -76,9 +76,9 @@ dt {
 // Site Header
 .site-header {
 
- 	align-items: center;
- 	display: flex;
- 	justify-content: space-between;
+	align-items: center;
+	display: flex;
+	justify-content: space-between;
 
 	& > * {
 		margin-top: 0;
@@ -164,13 +164,13 @@ dt {
 			}
 
 			& > .menu-item-has-children > a::after {
-					border-left: #{0.25 * $spacing_unit} solid transparent;
-					border-right: #{0.25 * $spacing_unit} solid transparent;
-					border-top: #{0.25 * $spacing_unit} solid $color_primary;
-					content: "";
-					margin: 0;
-					margin-left: #{0.25 * $spacing_unit};
-					vertical-align: middle;
+				border-left: #{0.25 * $spacing_unit} solid transparent;
+				border-right: #{0.25 * $spacing_unit} solid transparent;
+				border-top: #{0.25 * $spacing_unit} solid $color_primary;
+				content: "";
+				margin: 0;
+				margin-left: #{0.25 * $spacing_unit};
+				vertical-align: middle;
 			}
 		}
 
@@ -307,9 +307,11 @@ dt {
 // Entry Title
 .entry-title,
 .page-title,
-.a8c-posts-list .a8c-posts-list-item__title {
+.a8c-posts-list .a8c-posts-list-item__title,
+.wp-block-newspack-blocks-homepage-articles article .entry-title {
 	a {
 		color: inherit;
+		text-decoration: none;
 
 		&:active,
 		&:focus,
@@ -460,9 +462,9 @@ dt {
 table,
 .wp-block-table {
 	td,
- 	th {
- 		border-color: $color_border;
- 	}
+	th {
+		border-color: $color_border;
+	}
 }
 
 // Posts List

balasana/style-editor.css

@@ -294,6 +294,52 @@ 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: calc(3 * 32px);
+}
+
+.wp-block-a8c-blog-posts .post-thumbnail img {
+	width: auto;
+}
+
+.wp-block-a8c-blog-posts .entry-title a {
+	color: #19744C;
+	text-decoration: underline;
+}
+
+.wp-block-a8c-blog-posts .entry-title a:hover {
+	color: #145f3e;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-title a {
+	color: currentColor;
+}
+
+.wp-block-a8c-blog-posts .entry-meta,
+.wp-block-a8c-blog-posts .entry-footer,
+.wp-block-a8c-blog-posts .cat-links {
+	color: #505050;
+	font-size: 0.83333rem;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .cat-links {
+	color: currentColor;
+}
+
 .wp-block-button {
 	/* Default Style */
 	/* Outline Style */

balasana/style-rtl.css

@@ -194,7 +194,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,
@@ -212,11 +212,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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,117 @@ 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 a {
+	color: #19744C;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #145f3e;
+}
+
+.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: #505050;
+	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-left: 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-left: 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: #145f3e;
+}
+
+.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-left: calc(0.25 * 16px);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
 /**
  * Button
  */
@@ -3945,8 +4056,10 @@ dt {
 
 .entry-title a,
 .page-title a,
-.a8c-posts-list .a8c-posts-list-item__title a {
+.a8c-posts-list .a8c-posts-list-item__title a,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
 	color: inherit;
+	text-decoration: none;
 }
 
 .entry-title a:active, .entry-title a:focus, .entry-title a:hover,
@@ -3955,7 +4068,10 @@ dt {
 .page-title a:hover,
 .a8c-posts-list .a8c-posts-list-item__title a:active,
 .a8c-posts-list .a8c-posts-list-item__title a:focus,
-.a8c-posts-list .a8c-posts-list-item__title a:hover {
+.a8c-posts-list .a8c-posts-list-item__title a:hover,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:active,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
 	color: #19744C;
 }
 

balasana/style.css

@@ -194,7 +194,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,
@@ -212,11 +212,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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,148 @@ 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 a {
+	color: #19744C;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #145f3e;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: currentColor;
+}
+
+.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: #505050;
+	font-size: 0.83333rem;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .cat-links {
+	color: currentColor;
+}
+
+.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: #145f3e;
+}
+
+.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);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+	margin-bottom: calc(3 * 32px);
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
+.has-background:not(.has-background-background-color) button[data-load-more-btn],
+[class*="background-color"]:not(.has-background-background-color) button[data-load-more-btn],
+[style*="background-color"] button[data-load-more-btn] {
+	background-color: transparent;
+	border: 2px solid currentColor;
+	color: currentColor;
+}
+
 /**
  * Button
  */
@@ -3974,8 +4116,10 @@ dt {
 
 .entry-title a,
 .page-title a,
-.a8c-posts-list .a8c-posts-list-item__title a {
+.a8c-posts-list .a8c-posts-list-item__title a,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
 	color: inherit;
+	text-decoration: none;
 }
 
 .entry-title a:active, .entry-title a:focus, .entry-title a:hover,
@@ -3984,7 +4128,10 @@ dt {
 .page-title a:hover,
 .a8c-posts-list .a8c-posts-list-item__title a:active,
 .a8c-posts-list .a8c-posts-list-item__title a:focus,
-.a8c-posts-list .a8c-posts-list-item__title a:hover {
+.a8c-posts-list .a8c-posts-list-item__title a:hover,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:active,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
 	color: #19744C;
 }
 

barnsbury/sass/_extra-child-theme.scss

@@ -58,9 +58,9 @@ a {
 		grid-template-rows: auto;
 		grid-column-gap: $spacing_unit;
 		grid-template-areas:
-			"site-logo site-logo"
-			"site-title social-navigation"
-			"site-description main-navigation";
+				"site-logo site-logo"
+				"site-title social-navigation"
+				"site-description main-navigation";
 
 		&:before,
 		&:after {
@@ -112,7 +112,7 @@ a {
 			}
 
 			& > .menu-item-has-children > a::after {
-					font-size: #{0.5 * map-deep-get($config-global, "font", "size", "base")};
+				font-size: #{0.5 * map-deep-get($config-global, "font", "size", "base")};
 			}
 		}
 
@@ -172,9 +172,9 @@ a {
 .site-main > .page-header,
 .site-main > .not-found > .page-header {
 	margin-top: #{0.666 * $spacing_vertical};
-		@include media(mobile) {
-			margin-top: #{2 * $spacing_vertical};
-		}
+	@include media(mobile) {
+		margin-top: #{2 * $spacing_vertical};
+	}
 }
 
 .site-main > {
@@ -199,7 +199,8 @@ a {
 
 .entry-title,
 .page-title,
-.a8c-posts-list .a8c-posts-list-item__title {
+.a8c-posts-list .a8c-posts-list-item__title,
+.wp-block-newspack-blocks-homepage-articles article .entry-title {
 	a {
 		color: inherit;
 		text-decoration: none;

barnsbury/style-editor.css

@@ -294,6 +294,52 @@ 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: calc(3 * 32px);
+}
+
+.wp-block-a8c-blog-posts .post-thumbnail img {
+	width: auto;
+}
+
+.wp-block-a8c-blog-posts .entry-title a {
+	color: #20603C;
+	text-decoration: underline;
+}
+
+.wp-block-a8c-blog-posts .entry-title a:hover {
+	color: #133a24;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-title a {
+	color: currentColor;
+}
+
+.wp-block-a8c-blog-posts .entry-meta,
+.wp-block-a8c-blog-posts .entry-footer,
+.wp-block-a8c-blog-posts .cat-links {
+	color: #844d4d;
+	font-size: 0.84746rem;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .cat-links {
+	color: currentColor;
+}
+
 .wp-block-button {
 	/* Default Style */
 	/* Outline Style */

barnsbury/style-rtl.css

@@ -194,7 +194,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,
@@ -212,11 +212,11 @@ input[type="submit"],
 	padding: 18px 18px;
 }
 
-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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,117 @@ 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 a {
+	color: #20603C;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #133a24;
+}
+
+.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: #844d4d;
+	font-size: 0.84746rem;
+}
+
+.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-left: 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-left: 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: #133a24;
+}
+
+.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-left: calc(0.25 * 16px);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
 /**
  * Button
  */
@@ -3841,7 +3952,8 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
  */
 .entry-title a,
 .page-title a,
-.a8c-posts-list .a8c-posts-list-item__title a {
+.a8c-posts-list .a8c-posts-list-item__title a,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
 	color: inherit;
 	text-decoration: none;
 }
@@ -3852,7 +3964,10 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 .page-title a:hover,
 .a8c-posts-list .a8c-posts-list-item__title a:active,
 .a8c-posts-list .a8c-posts-list-item__title a:focus,
-.a8c-posts-list .a8c-posts-list-item__title a:hover {
+.a8c-posts-list .a8c-posts-list-item__title a:hover,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:active,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
 	color: #20603C;
 }
 

barnsbury/style.css

@@ -194,7 +194,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,
@@ -212,11 +212,11 @@ input[type="submit"],
 	padding: 18px 18px;
 }
 
-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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,148 @@ 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 a {
+	color: #20603C;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #133a24;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: currentColor;
+}
+
+.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: #844d4d;
+	font-size: 0.84746rem;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .cat-links {
+	color: currentColor;
+}
+
+.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: #133a24;
+}
+
+.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);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+	margin-bottom: calc(3 * 32px);
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
+.has-background:not(.has-background-background-color) button[data-load-more-btn],
+[class*="background-color"]:not(.has-background-background-color) button[data-load-more-btn],
+[style*="background-color"] button[data-load-more-btn] {
+	background-color: transparent;
+	border: 2px solid currentColor;
+	color: currentColor;
+}
+
 /**
  * Button
  */
@@ -3870,7 +4012,8 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
  */
 .entry-title a,
 .page-title a,
-.a8c-posts-list .a8c-posts-list-item__title a {
+.a8c-posts-list .a8c-posts-list-item__title a,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
 	color: inherit;
 	text-decoration: none;
 }
@@ -3881,7 +4024,10 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 .page-title a:hover,
 .a8c-posts-list .a8c-posts-list-item__title a:active,
 .a8c-posts-list .a8c-posts-list-item__title a:focus,
-.a8c-posts-list .a8c-posts-list-item__title a:hover {
+.a8c-posts-list .a8c-posts-list-item__title a:hover,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:active,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
 	color: #20603C;
 }
 

brompton/sass/_extra-child-theme.scss

@@ -89,7 +89,7 @@
 		z-index: 2;
 	}
 
-  @include media(mobile) {
+	@include media(mobile) {
 		padding: #{map-deep-get($config-global, "spacing", "vertical")} #{2* map-deep-get($config-global, "spacing", "horizontal")};
 
 		.main-navigation {
@@ -239,32 +239,33 @@
 	}
 
 	a {
-    color: inherit;
+		color: inherit;
 		text-decoration: none;
 
-    &:active,
-    &:focus,
-    &:hover {
-      color: #{map-deep-get($config-global, "color", "primary", "default")};
-    }
-  }
+		&:active,
+		&:focus,
+		&:hover {
+			color: #{map-deep-get($config-global, "color", "primary", "default")};
+		}
+	}
 }
 
 article .entry-header .entry-title,
 .page-title,
-.a8c-posts-list .a8c-posts-list-item__title {
+.a8c-posts-list .a8c-posts-list-item__title,
+.wp-block-newspack-blocks-homepage-articles article .entry-title {
 	margin-top: #{map-deep-get($config-global, "spacing", "vertical")};
 
-  a {
-    color: inherit;
+	a {
+		color: inherit;
 		text-decoration: none;
 
-    &:active,
-    &:focus,
-    &:hover {
-      color: #{map-deep-get($config-global, "color", "primary", "default")};
-    }
-  }
+		&:active,
+		&:focus,
+		&:hover {
+			color: #{map-deep-get($config-global, "color", "primary", "default")};
+		}
+	}
 }
 
 // Cover & Hero block
@@ -291,9 +292,9 @@ article .entry-header .entry-title,
 
 // Quote block
 .wp-block-quote {
-  p {
-    @include font-family( map-deep-get($config-global, "font", "family", "secondary") );
-  }
+	p {
+		@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
+	}
 }
 
 // Table block
@@ -347,30 +348,30 @@ table,
 
 // Pagination
 .pagination {
-  text-align: center;
+	text-align: center;
 
-  .nav-links {
+	.nav-links {
 		& > * {
-	    color: #{map-deep-get($config-global, "color", "foreground", "default")};
+			color: #{map-deep-get($config-global, "color", "foreground", "default")};
 			font-size: #{map-deep-get($config-global, "font", "size", "base")};
 			font-weight: 900;
-	    text-transform: uppercase;
+			text-transform: uppercase;
 
-	    &.current,
-	    &:active,
-	    &:focus,
-	    &:hover {
-	      color: #{map-deep-get($config-global, "color", "primary", "default")};
-	    }
-	  }
+			&.current,
+			&:active,
+			&:focus,
+			&:hover {
+				color: #{map-deep-get($config-global, "color", "primary", "default")};
+			}
+		}
 
 		a {
 			text-decoration: none;
 		}
 
-	  .svg-icon {
-	    display: none;
-	  }
+		.svg-icon {
+			display: none;
+		}
 	}
 }
 
@@ -559,12 +560,12 @@ table,
 
 // Comments Navigation
 .comment-navigation {
-    a {
-    font-size: #{map-deep-get($config-global, "font", "size", "base")};
+	a {
+		font-size: #{map-deep-get($config-global, "font", "size", "base")};
 		font-weight: 900;
 		text-decoration: none;
-    text-transform: uppercase;
-  }
+		text-transform: uppercase;
+	}
 }
 
 // Widgets
@@ -573,42 +574,42 @@ table,
 	padding-top: #{map-deep-get($config-global, "spacing", "vertical")};
 	width: 100%;
 
-  .widget-title,
-  .widgettitle {
-  	font-size: #{map-deep-get($config-global, "font", "size", "base")};
-    margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
-    text-transform: uppercase;
-
-    &:empty {
-      display: none;
-    }
-  }
-
-  @include media(laptop) {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-
-    & > *:nth-child(2) {
-      margin-top: 0;
-    }
-
-    .widget {
-      width: calc(50% - #{map-deep-get($config-global, "spacing", "horizontal")});
-    }
-  }
+	.widget-title,
+	.widgettitle {
+		font-size: #{map-deep-get($config-global, "font", "size", "base")};
+		margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
+		text-transform: uppercase;
+
+		&:empty {
+			display: none;
+		}
+	}
+
+	@include media(laptop) {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+
+		& > *:nth-child(2) {
+			margin-top: 0;
+		}
+
+		.widget {
+			width: calc(50% - #{map-deep-get($config-global, "spacing", "horizontal")});
+		}
+	}
 }
 
 .widget_calendar,
 .widget_calendar {
-  caption {
-    font-weight: bold;
-  }
-
-  td,
-  th {
-	   text-align: center;
-  }
+	caption {
+		font-weight: bold;
+	}
+
+	td,
+	th {
+		text-align: center;
+	}
 }
 
 .widget_archive,
@@ -626,45 +627,45 @@ table,
 .widget_jp_blogs_i_follow,
 .widget_top-click,
 .widget_upcoming_events_widget {
-  ul {
-    border-bottom: 1px solid map-deep-get($config-global, "color", "border", "light");
-    list-style: none;
-    margin-left: 0;
-  }
-
-  li {
-    border-top: 1px solid map-deep-get($config-global, "color", "border", "light");
-    padding: #{0.25 * map-deep-get($config-global, "spacing", "vertical")} 0;
-  }
+	ul {
+		border-bottom: 1px solid map-deep-get($config-global, "color", "border", "light");
+		list-style: none;
+		margin-left: 0;
+	}
+
+	li {
+		border-top: 1px solid map-deep-get($config-global, "color", "border", "light");
+		padding: #{0.25 * map-deep-get($config-global, "spacing", "vertical")} 0;
+	}
 }
 
 .widget_categories .children,
 .widget_nav_menu .sub-menu,
 .widget_pages .children {
-  border-bottom: 0;
-  margin-bottom: #{-0.25 * map-deep-get($config-global, "spacing", "vertical")};
-  margin-top: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
-  padding-left: map-deep-get($config-global, "spacing", "horizontal");
+	border-bottom: 0;
+	margin-bottom: #{-0.25 * map-deep-get($config-global, "spacing", "vertical")};
+	margin-top: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
+	padding-left: map-deep-get($config-global, "spacing", "horizontal");
 }
 
 .widget_recent_entries .post-date {
-  display: block;
+	display: block;
 }
 
 .widget_rss {
-  cite,
-  .rssSummary,
-  .rss-date {
-    display: block;
-  }
+	cite,
+	.rssSummary,
+	.rss-date {
+		display: block;
+	}
 }
 
 .widget_search {
-  input[type="search"] {
-    display: block;
-    margin-bottom: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
-    width: 100%;
-  }
+	input[type="search"] {
+		display: block;
+		margin-bottom: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
+		width: 100%;
+	}
 }
 
 // Homepage, if first block is full-width

brompton/style-editor.css

@@ -294,6 +294,52 @@ 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: calc(3 * 32px);
+}
+
+.wp-block-a8c-blog-posts .post-thumbnail img {
+	width: auto;
+}
+
+.wp-block-a8c-blog-posts .entry-title a {
+	color: #C04239;
+	text-decoration: underline;
+}
+
+.wp-block-a8c-blog-posts .entry-title a:hover {
+	color: #252E36;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-title a {
+	color: currentColor;
+}
+
+.wp-block-a8c-blog-posts .entry-meta,
+.wp-block-a8c-blog-posts .entry-footer,
+.wp-block-a8c-blog-posts .cat-links {
+	color: #666666;
+	font-size: 0.83333rem;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .cat-links {
+	color: currentColor;
+}
+
 .wp-block-button {
 	/* Default Style */
 	/* Outline Style */

brompton/style-rtl.css

@@ -194,7 +194,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,
@@ -212,11 +212,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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,117 @@ 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 a {
+	color: #C04239;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #252E36;
+}
+
+.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: #666666;
+	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-left: 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-left: 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: #252E36;
+}
+
+.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-left: calc(0.25 * 16px);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
 /**
  * Button
  */
@@ -3881,13 +3992,15 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 
 article .entry-header .entry-title,
 .page-title,
-.a8c-posts-list .a8c-posts-list-item__title {
+.a8c-posts-list .a8c-posts-list-item__title,
+.wp-block-newspack-blocks-homepage-articles article .entry-title {
 	margin-top: 32px;
 }
 
 article .entry-header .entry-title a,
 .page-title a,
-.a8c-posts-list .a8c-posts-list-item__title a {
+.a8c-posts-list .a8c-posts-list-item__title a,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
 	color: inherit;
 	text-decoration: none;
 }
@@ -3898,7 +4011,10 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 .page-title a:hover,
 .a8c-posts-list .a8c-posts-list-item__title a:active,
 .a8c-posts-list .a8c-posts-list-item__title a:focus,
-.a8c-posts-list .a8c-posts-list-item__title a:hover {
+.a8c-posts-list .a8c-posts-list-item__title a:hover,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:active,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
 	color: #C04239;
 }
 

brompton/style.css

@@ -194,7 +194,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,
@@ -212,11 +212,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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,148 @@ 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 a {
+	color: #C04239;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #252E36;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: currentColor;
+}
+
+.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: #666666;
+	font-size: 0.83333rem;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .cat-links {
+	color: currentColor;
+}
+
+.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: #252E36;
+}
+
+.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);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+	margin-bottom: calc(3 * 32px);
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
+.has-background:not(.has-background-background-color) button[data-load-more-btn],
+[class*="background-color"]:not(.has-background-background-color) button[data-load-more-btn],
+[style*="background-color"] button[data-load-more-btn] {
+	background-color: transparent;
+	border: 2px solid currentColor;
+	color: currentColor;
+}
+
 /**
  * Button
  */
@@ -3910,13 +4052,15 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 
 article .entry-header .entry-title,
 .page-title,
-.a8c-posts-list .a8c-posts-list-item__title {
+.a8c-posts-list .a8c-posts-list-item__title,
+.wp-block-newspack-blocks-homepage-articles article .entry-title {
 	margin-top: 32px;
 }
 
 article .entry-header .entry-title a,
 .page-title a,
-.a8c-posts-list .a8c-posts-list-item__title a {
+.a8c-posts-list .a8c-posts-list-item__title a,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
 	color: inherit;
 	text-decoration: none;
 }
@@ -3927,7 +4071,10 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 .page-title a:hover,
 .a8c-posts-list .a8c-posts-list-item__title a:active,
 .a8c-posts-list .a8c-posts-list-item__title a:focus,
-.a8c-posts-list .a8c-posts-list-item__title a:hover {
+.a8c-posts-list .a8c-posts-list-item__title a:hover,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:active,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
 	color: #C04239;
 }
 

coutoire/sass/_extra-child-theme.scss

@@ -187,6 +187,19 @@ a.wp-block-file__button {
 	text-transform: uppercase;
 }
 
+.wp-block-newspack-blocks-homepage-articles article .entry-title {
+	text-transform: none;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	text-decoration-color: $color_primary_hover;
+
+	&:hover,
+	&:focus {
+		text-decoration: none;
+	}
+}
+
 @include media(mobile-only) {
 	.site-header {
 		position: relative;

coutoire/style-editor.css

@@ -294,6 +294,52 @@ 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: calc(3 * 32px);
+}
+
+.wp-block-a8c-blog-posts .post-thumbnail img {
+	width: auto;
+}
+
+.wp-block-a8c-blog-posts .entry-title a {
+	color: black;
+	text-decoration: underline;
+}
+
+.wp-block-a8c-blog-posts .entry-title a:hover {
+	color: #FF7A5C;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-title a {
+	color: currentColor;
+}
+
+.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;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .cat-links {
+	color: currentColor;
+}
+
 .wp-block-button {
 	/* Default Style */
 	/* Outline Style */

coutoire/style-rtl.css

@@ -194,7 +194,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,
@@ -211,11 +211,11 @@ input[type="submit"],
 	padding: 11.6px 11.6px;
 }
 
-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,
@@ -226,7 +226,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,
@@ -234,7 +234,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,
@@ -1148,6 +1148,117 @@ 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 a {
+	color: black;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #FF7A5C;
+}
+
+.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-left: 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-left: 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: #FF7A5C;
+}
+
+.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-left: calc(0.25 * 16px);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
 /**
  * Button
  */
@@ -3841,6 +3952,18 @@ a.wp-block-file__button {
 	text-transform: uppercase;
 }
 
+.wp-block-newspack-blocks-homepage-articles article .entry-title {
+	text-transform: none;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	text-decoration-color: #FF7A5C;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover, .wp-block-newspack-blocks-homepage-articles article .entry-title a:focus {
+	text-decoration: none;
+}
+
 @media only screen and (max-width: 559px) {
 	.site-header {
 		position: relative;

coutoire/style.css

@@ -194,7 +194,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,
@@ -211,11 +211,11 @@ input[type="submit"],
 	padding: 11.6px 11.6px;
 }
 
-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,
@@ -226,7 +226,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,
@@ -234,7 +234,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,
@@ -1148,6 +1148,148 @@ 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 a {
+	color: black;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #FF7A5C;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: currentColor;
+}
+
+.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;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .cat-links {
+	color: currentColor;
+}
+
+.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: #FF7A5C;
+}
+
+.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);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+	margin-bottom: calc(3 * 32px);
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
+.has-background:not(.has-background-background-color) button[data-load-more-btn],
+[class*="background-color"]:not(.has-background-background-color) button[data-load-more-btn],
+[style*="background-color"] button[data-load-more-btn] {
+	background-color: transparent;
+	border: 2px solid currentColor;
+	color: currentColor;
+}
+
 /**
  * Button
  */
@@ -3870,6 +4012,18 @@ a.wp-block-file__button {
 	text-transform: uppercase;
 }
 
+.wp-block-newspack-blocks-homepage-articles article .entry-title {
+	text-transform: none;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	text-decoration-color: #FF7A5C;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover, .wp-block-newspack-blocks-homepage-articles article .entry-title a:focus {
+	text-decoration: none;
+}
+
 @media only screen and (max-width: 559px) {
 	.site-header {
 		position: relative;

dalston/sass/_extra-child-theme.scss

@@ -52,9 +52,9 @@ a {
 		grid-auto-flow: row;
 		grid-column-gap: $spacing_unit;
 		grid-template-areas:
-			"site-branding site-branding"
-			"site-description site-description"
-			"main-navigation social-navigation";
+				"site-branding site-branding"
+				"site-description site-description"
+				"main-navigation social-navigation";
 
 		&:before,
 		&:after {
@@ -107,7 +107,7 @@ a {
 				}
 
 				& > .menu-item-has-children > a::after {
-						font-size: #{0.5 * map-deep-get($config-global, "font", "size", "base")};
+					font-size: #{0.5 * map-deep-get($config-global, "font", "size", "base")};
 				}
 			}
 
@@ -179,8 +179,8 @@ a {
 		grid-auto-flow: row;
 		grid-column-gap: #{2 * $spacing_unit};
 		grid-template-areas:
-			". main-navigation social-navigation"
-			"site-branding site-description social-navigation";
+				". main-navigation social-navigation"
+				"site-branding site-description social-navigation";
 
 	}
 }
@@ -248,6 +248,10 @@ a {
 	font-weight: 600;
 }
 
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	text-decoration: none;
+}
+
 /**
  * Blocks
  */

dalston/style-editor.css

@@ -294,6 +294,52 @@ 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: calc(3 * 32px);
+}
+
+.wp-block-a8c-blog-posts .post-thumbnail img {
+	width: auto;
+}
+
+.wp-block-a8c-blog-posts .entry-title a {
+	color: #0073AA;
+	text-decoration: underline;
+}
+
+.wp-block-a8c-blog-posts .entry-title a:hover {
+	color: #005177;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-title a {
+	color: currentColor;
+}
+
+.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.86957rem;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .cat-links {
+	color: currentColor;
+}
+
 .wp-block-button {
 	/* Default Style */
 	/* Outline Style */

dalston/style-rtl.css

@@ -194,7 +194,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,
@@ -212,11 +212,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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,117 @@ 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 a {
+	color: #0073AA;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #005177;
+}
+
+.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.86957rem;
+}
+
+.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-left: 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-left: 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: #005177;
+}
+
+.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-left: calc(0.25 * 16px);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
 /**
  * Button
  */
@@ -3878,6 +3989,10 @@ a {
 	font-weight: 600;
 }
 
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	text-decoration: none;
+}
+
 /**
  * Blocks
  */

dalston/style.css

@@ -194,7 +194,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,
@@ -212,11 +212,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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,148 @@ 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 a {
+	color: #0073AA;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #005177;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: currentColor;
+}
+
+.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.86957rem;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .cat-links {
+	color: currentColor;
+}
+
+.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: #005177;
+}
+
+.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);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+	margin-bottom: calc(3 * 32px);
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
+.has-background:not(.has-background-background-color) button[data-load-more-btn],
+[class*="background-color"]:not(.has-background-background-color) button[data-load-more-btn],
+[style*="background-color"] button[data-load-more-btn] {
+	background-color: transparent;
+	border: 2px solid currentColor;
+	color: currentColor;
+}
+
 /**
  * Button
  */
@@ -3907,6 +4049,10 @@ a {
 	font-weight: 600;
 }
 
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	text-decoration: none;
+}
+
 /**
  * Blocks
  */

exford/sass/_extra-child-theme.scss

@@ -111,15 +111,16 @@ a {
 
 .site-main > article > .entry-header {
 	margin-top: #{0.666 * $spacing_vertical};
-		@include media(mobile) {
-			margin-top: $spacing_vertical;
-		}
+	@include media(mobile) {
+		margin-top: $spacing_vertical;
+	}
 }
 
 // Entry Title Link
 .entry-title,
 .page-title,
-.a8c-posts-list .a8c-posts-list-item__title {
+.a8c-posts-list .a8c-posts-list-item__title,
+.wp-block-newspack-blocks-homepage-articles article .entry-title {
 	a {
 		color: inherit;
 		text-decoration: none;

exford/style-editor.css

@@ -295,6 +295,52 @@ 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: calc(3 * 32px);
+}
+
+.wp-block-a8c-blog-posts .post-thumbnail img {
+	width: auto;
+}
+
+.wp-block-a8c-blog-posts .entry-title a {
+	color: #23883D;
+	text-decoration: underline;
+}
+
+.wp-block-a8c-blog-posts .entry-title a:hover {
+	color: #195f2b;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-title a {
+	color: currentColor;
+}
+
+.wp-block-a8c-blog-posts .entry-meta,
+.wp-block-a8c-blog-posts .entry-footer,
+.wp-block-a8c-blog-posts .cat-links {
+	color: #6E6E6E;
+	font-size: 0.83333rem;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .cat-links {
+	color: currentColor;
+}
+
 .wp-block-button {
 	/* Default Style */
 	/* Outline Style */

exford/style-rtl.css

@@ -194,7 +194,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,
@@ -212,11 +212,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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,117 @@ 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 a {
+	color: #23883D;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #195f2b;
+}
+
+.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: #6E6E6E;
+	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-left: 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-left: 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: #195f2b;
+}
+
+.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-left: calc(0.25 * 16px);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
 /**
  * Button
  */
@@ -3777,7 +3888,8 @@ p:not(.site-title) a:hover {
 
 .entry-title a,
 .page-title a,
-.a8c-posts-list .a8c-posts-list-item__title a {
+.a8c-posts-list .a8c-posts-list-item__title a,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
 	color: inherit;
 	text-decoration: none;
 }
@@ -3788,7 +3900,10 @@ p:not(.site-title) a:hover {
 .page-title a:hover,
 .a8c-posts-list .a8c-posts-list-item__title a:active,
 .a8c-posts-list .a8c-posts-list-item__title a:focus,
-.a8c-posts-list .a8c-posts-list-item__title a:hover {
+.a8c-posts-list .a8c-posts-list-item__title a:hover,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:active,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
 	color: #23883D;
 }
 

exford/style.css

@@ -194,7 +194,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,
@@ -212,11 +212,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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,148 @@ 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 a {
+	color: #23883D;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #195f2b;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: currentColor;
+}
+
+.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: #6E6E6E;
+	font-size: 0.83333rem;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .cat-links {
+	color: currentColor;
+}
+
+.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: #195f2b;
+}
+
+.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);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+	margin-bottom: calc(3 * 32px);
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
+.has-background:not(.has-background-background-color) button[data-load-more-btn],
+[class*="background-color"]:not(.has-background-background-color) button[data-load-more-btn],
+[style*="background-color"] button[data-load-more-btn] {
+	background-color: transparent;
+	border: 2px solid currentColor;
+	color: currentColor;
+}
+
 /**
  * Button
  */
@@ -3806,7 +3948,8 @@ p:not(.site-title) a:hover {
 
 .entry-title a,
 .page-title a,
-.a8c-posts-list .a8c-posts-list-item__title a {
+.a8c-posts-list .a8c-posts-list-item__title a,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
 	color: inherit;
 	text-decoration: none;
 }
@@ -3817,7 +3960,10 @@ p:not(.site-title) a:hover {
 .page-title a:hover,
 .a8c-posts-list .a8c-posts-list-item__title a:active,
 .a8c-posts-list .a8c-posts-list-item__title a:focus,
-.a8c-posts-list .a8c-posts-list-item__title a:hover {
+.a8c-posts-list .a8c-posts-list-item__title a:hover,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:active,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
 	color: #23883D;
 }
 

hever/sass/_extra-child-theme.scss

@@ -22,14 +22,14 @@ a {
 /**
  * Wide Header & Footer
  */
-body:not(.fse-enabled) { 
+body:not(.fse-enabled) {
 	#masthead,
 	#colophon {
 		padding-left: 16px;
 		padding-right: 16px;
 		position: relative;
 		@extend %responsive-alignwide;
-	
+
 		@include media(mobile) {
 			padding-left: 0;
 			padding-right: 0;
@@ -67,9 +67,9 @@ body:not(.fse-enabled) {
 		grid-template-rows: auto;
 		grid-column-gap: #{map-deep-get($config-global, "spacing", "unit")};
 		grid-template-areas:
-			"site-logo site-logo"
-			"site-title main-navigation"
-			"site-description social-navigation";
+				"site-logo site-logo"
+				"site-title main-navigation"
+				"site-description social-navigation";
 
 		&:before,
 		&:after {
@@ -120,7 +120,7 @@ body:not(.fse-enabled) {
 				}
 
 				& > .menu-item-has-children > a::after {
-						font-size: #{0.5 * map-deep-get($config-global, "font", "size", "base")};
+					font-size: #{0.5 * map-deep-get($config-global, "font", "size", "base")};
 				}
 			}
 
@@ -245,7 +245,7 @@ table,
  * Hentry
  */
 // Entry Title
-.singular .hentry .entry-title,
+.singular .hentry .entry-header .entry-title,
 .page-title {
 	text-align: center;
 
@@ -283,17 +283,18 @@ table,
 // Entry Title Link
 article .entry-header .entry-title,
 .page-title,
-.a8c-posts-list .a8c-posts-list-item__title {
-  a {
-    color: inherit;
+.a8c-posts-list .a8c-posts-list-item__title,
+.wp-block-newspack-blocks-homepage-articles article .entry-title {
+	a {
+		color: inherit;
 		text-decoration: none;
 
-    &:active,
-    &:focus,
-    &:hover {
-      color: #{map-deep-get($config-global, "color", "primary", "default")};
-    }
-  }
+		&:active,
+		&:focus,
+		&:hover {
+			color: #{map-deep-get($config-global, "color", "primary", "default")};
+		}
+	}
 }
 
 // Remove margin if alignfull is first element
@@ -354,15 +355,15 @@ article .entry-header .entry-title,
 
 	.widget-title,
 	.widgettitle {
-  	font-size: #{map-deep-get($config-global, "font", "size", "md")};
-    margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
+		font-size: #{map-deep-get($config-global, "font", "size", "md")};
+		margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
 
-    &:empty {
-      display: none;
-    }
-  }
+		&:empty {
+			display: none;
+		}
+	}
 
-  @include media(laptop) {
+	@include media(laptop) {
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: space-between;
@@ -372,9 +373,9 @@ article .entry-header .entry-title,
 		}
 
 		& > *:nth-child(2) {
-      margin-top: 0;
-    }
-  }
+			margin-top: 0;
+		}
+	}
 
 	@include media(desktop) {
 		.widget {
@@ -382,21 +383,21 @@ article .entry-header .entry-title,
 		}
 
 		& > *:nth-child(3) {
-      margin-top: 0;
-    }
-  }
+			margin-top: 0;
+		}
+	}
 }
 
 .widget_calendar,
 .widget_calendar {
-  caption {
-    font-weight: bold;
-  }
-
-  td,
-  th {
-	   text-align: center;
-  }
+	caption {
+		font-weight: bold;
+	}
+
+	td,
+	th {
+		text-align: center;
+	}
 }
 
 .widget_archive,
@@ -414,43 +415,43 @@ article .entry-header .entry-title,
 .widget_jp_blogs_i_follow,
 .widget_top-click,
 .widget_upcoming_events_widget {
-  ul {
-    border-bottom: 1px solid map-deep-get($config-global, "color", "border", "default");
-    list-style: none;
-    padding-left: 0;
-  }
-
-  li {
-    border-top: 1px solid map-deep-get($config-global, "color", "border", "default");
-    padding: #{0.25 * map-deep-get($config-global, "spacing", "vertical")} 0;
-  }
+	ul {
+		border-bottom: 1px solid map-deep-get($config-global, "color", "border", "default");
+		list-style: none;
+		padding-left: 0;
+	}
+
+	li {
+		border-top: 1px solid map-deep-get($config-global, "color", "border", "default");
+		padding: #{0.25 * map-deep-get($config-global, "spacing", "vertical")} 0;
+	}
 }
 
 .widget_categories .children,
 .widget_nav_menu .sub-menu,
 .widget_pages .children {
-  border-bottom: 0;
-  margin-bottom: #{-0.25 * map-deep-get($config-global, "spacing", "vertical")};
-  margin-top: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
-  padding-left: map-deep-get($config-global, "spacing", "horizontal");
+	border-bottom: 0;
+	margin-bottom: #{-0.25 * map-deep-get($config-global, "spacing", "vertical")};
+	margin-top: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
+	padding-left: map-deep-get($config-global, "spacing", "horizontal");
 }
 
 .widget_recent_entries .post-date {
-  display: block;
+	display: block;
 }
 
 .widget_rss {
-  cite,
-  .rssSummary,
-  .rss-date {
-    display: block;
-  }
+	cite,
+	.rssSummary,
+	.rss-date {
+		display: block;
+	}
 }
 
 .widget_search {
-  input[type="search"] {
-    display: block;
-    margin-bottom: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
-    width: 100%;
-  }
+	input[type="search"] {
+		display: block;
+		margin-bottom: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
+		width: 100%;
+	}
 }

hever/style-editor.css

@@ -295,6 +295,52 @@ 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: calc(3 * 32px);
+}
+
+.wp-block-a8c-blog-posts .post-thumbnail img {
+	width: auto;
+}
+
+.wp-block-a8c-blog-posts .entry-title a {
+	color: #1279BE;
+	text-decoration: underline;
+}
+
+.wp-block-a8c-blog-posts .entry-title a:hover {
+	color: #303030;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-title a {
+	color: currentColor;
+}
+
+.wp-block-a8c-blog-posts .entry-meta,
+.wp-block-a8c-blog-posts .entry-footer,
+.wp-block-a8c-blog-posts .cat-links {
+	color: #757575;
+	font-size: 0.86957rem;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .cat-links {
+	color: currentColor;
+}
+
 .wp-block-button {
 	/* Default Style */
 	/* Outline Style */

hever/style-rtl.css

@@ -194,7 +194,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,
@@ -212,11 +212,11 @@ input[type="submit"],
 	padding: 16px 24px;
 }
 
-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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,117 @@ 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 a {
+	color: #1279BE;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #303030;
+}
+
+.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: #757575;
+	font-size: 0.86957rem;
+}
+
+.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-left: 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-left: 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: #303030;
+}
+
+.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-left: calc(0.25 * 16px);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
 /**
  * Button
  */
@@ -3437,7 +3548,7 @@ body:not(.fse-enabled) #colophon {
 	}
 }
 
-.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title:before, .singular .hentry .entry-title:after,
+.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-header .entry-title:before, .singular .hentry .entry-header .entry-title:after,
 .page-title:before,
 .page-title:after {
 	margin-right: -16px;
@@ -3448,7 +3559,7 @@ body:not(.fse-enabled) #colophon {
 }
 
 @media only screen and (min-width: 560px) {
-	.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title:before, .singular .hentry .entry-title:after,
+	.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-header .entry-title:before, .singular .hentry .entry-header .entry-title:after,
 	.page-title:before,
 	.page-title:after {
 		margin-right: inherit;
@@ -3897,12 +4008,12 @@ table th,
 /**
  * Hentry
  */
-.singular .hentry .entry-title,
+.singular .hentry .entry-header .entry-title,
 .page-title {
 	text-align: center;
 }
 
-.singular .hentry .entry-title:before, .singular .hentry .entry-title:after,
+.singular .hentry .entry-header .entry-title:before, .singular .hentry .entry-header .entry-title:after,
 .page-title:before,
 .page-title:after {
 	background: #F8F8F8;
@@ -3913,20 +4024,20 @@ table th,
 }
 
 @media only screen and (min-width: 560px) {
-	.singular .hentry .entry-title:before, .singular .hentry .entry-title:after,
+	.singular .hentry .entry-header .entry-title:before, .singular .hentry .entry-header .entry-title:after,
 	.page-title:before,
 	.page-title:after {
 		margin-bottom: 64px;
 	}
 }
 
-.singular .hentry .entry-title:after,
+.singular .hentry .entry-header .entry-title:after,
 .page-title:after {
 	margin-top: 16px;
 }
 
 @media only screen and (min-width: 560px) {
-	.singular .hentry .entry-title:after,
+	.singular .hentry .entry-header .entry-title:after,
 	.page-title:after {
 		margin-top: 64px;
 	}
@@ -3938,7 +4049,8 @@ table th,
 
 article .entry-header .entry-title a,
 .page-title a,
-.a8c-posts-list .a8c-posts-list-item__title a {
+.a8c-posts-list .a8c-posts-list-item__title a,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
 	color: inherit;
 	text-decoration: none;
 }
@@ -3949,7 +4061,10 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 .page-title a:hover,
 .a8c-posts-list .a8c-posts-list-item__title a:active,
 .a8c-posts-list .a8c-posts-list-item__title a:focus,
-.a8c-posts-list .a8c-posts-list-item__title a:hover {
+.a8c-posts-list .a8c-posts-list-item__title a:hover,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:active,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
 	color: #1279BE;
 }
 

hever/style.css

@@ -194,7 +194,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,
@@ -212,11 +212,11 @@ input[type="submit"],
 	padding: 16px 24px;
 }
 
-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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,148 @@ 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 a {
+	color: #1279BE;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #303030;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: currentColor;
+}
+
+.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: #757575;
+	font-size: 0.86957rem;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .cat-links {
+	color: currentColor;
+}
+
+.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: #303030;
+}
+
+.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);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+	margin-bottom: calc(3 * 32px);
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
+.has-background:not(.has-background-background-color) button[data-load-more-btn],
+[class*="background-color"]:not(.has-background-background-color) button[data-load-more-btn],
+[style*="background-color"] button[data-load-more-btn] {
+	background-color: transparent;
+	border: 2px solid currentColor;
+	color: currentColor;
+}
+
 /**
  * Button
  */
@@ -3454,7 +3596,7 @@ body:not(.fse-enabled) #colophon {
 	}
 }
 
-.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title:before, .singular .hentry .entry-title:after,
+.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-header .entry-title:before, .singular .hentry .entry-header .entry-title:after,
 .page-title:before,
 .page-title:after {
 	margin-left: -16px;
@@ -3465,7 +3607,7 @@ body:not(.fse-enabled) #colophon {
 }
 
 @media only screen and (min-width: 560px) {
-	.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-title:before, .singular .hentry .entry-title:after,
+	.entry-content > .alignfull, .entry-content > .alignfull.wp-block-jetpack-gif, .entry-content > .alignfull.wp-block-jetpack-tiled-gallery, .singular .hentry .entry-header .entry-title:before, .singular .hentry .entry-header .entry-title:after,
 	.page-title:before,
 	.page-title:after {
 		margin-left: inherit;
@@ -3926,12 +4068,12 @@ table th,
 /**
  * Hentry
  */
-.singular .hentry .entry-title,
+.singular .hentry .entry-header .entry-title,
 .page-title {
 	text-align: center;
 }
 
-.singular .hentry .entry-title:before, .singular .hentry .entry-title:after,
+.singular .hentry .entry-header .entry-title:before, .singular .hentry .entry-header .entry-title:after,
 .page-title:before,
 .page-title:after {
 	background: #F8F8F8;
@@ -3942,20 +4084,20 @@ table th,
 }
 
 @media only screen and (min-width: 560px) {
-	.singular .hentry .entry-title:before, .singular .hentry .entry-title:after,
+	.singular .hentry .entry-header .entry-title:before, .singular .hentry .entry-header .entry-title:after,
 	.page-title:before,
 	.page-title:after {
 		margin-bottom: 64px;
 	}
 }
 
-.singular .hentry .entry-title:after,
+.singular .hentry .entry-header .entry-title:after,
 .page-title:after {
 	margin-top: 16px;
 }
 
 @media only screen and (min-width: 560px) {
-	.singular .hentry .entry-title:after,
+	.singular .hentry .entry-header .entry-title:after,
 	.page-title:after {
 		margin-top: 64px;
 	}
@@ -3967,7 +4109,8 @@ table th,
 
 article .entry-header .entry-title a,
 .page-title a,
-.a8c-posts-list .a8c-posts-list-item__title a {
+.a8c-posts-list .a8c-posts-list-item__title a,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
 	color: inherit;
 	text-decoration: none;
 }
@@ -3978,7 +4121,10 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 .page-title a:hover,
 .a8c-posts-list .a8c-posts-list-item__title a:active,
 .a8c-posts-list .a8c-posts-list-item__title a:focus,
-.a8c-posts-list .a8c-posts-list-item__title a:hover {
+.a8c-posts-list .a8c-posts-list-item__title a:hover,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:active,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
 	color: #1279BE;
 }
 

leven/sass/_extra-child-theme.scss

@@ -67,9 +67,9 @@ a {
 		grid-template-rows: auto;
 		grid-column-gap: #{map-deep-get($config-global, "spacing", "unit")};
 		grid-template-areas:
-			"site-logo site-logo"
-			"site-branding main-navigation"
-			"site-branding social-navigation";
+				"site-logo site-logo"
+				"site-branding main-navigation"
+				"site-branding social-navigation";
 
 		&:before,
 		&:after {
@@ -113,3 +113,7 @@ a {
 		}
 	}
 }
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	text-decoration: none;
+}

leven/style-editor.css

@@ -294,6 +294,52 @@ 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: calc(3 * 32px);
+}
+
+.wp-block-a8c-blog-posts .post-thumbnail img {
+	width: auto;
+}
+
+.wp-block-a8c-blog-posts .entry-title a {
+	color: #ff302c;
+	text-decoration: underline;
+}
+
+.wp-block-a8c-blog-posts .entry-title a:hover {
+	color: #1285ce;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-title a {
+	color: currentColor;
+}
+
+.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.82474rem;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .cat-links {
+	color: currentColor;
+}
+
 .wp-block-button {
 	/* Default Style */
 	/* Outline Style */

leven/style-rtl.css

@@ -194,7 +194,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,
@@ -212,11 +212,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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,117 @@ 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 a {
+	color: #ff302c;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #1285ce;
+}
+
+.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.82474rem;
+}
+
+.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-left: 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-left: 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: #1285ce;
+}
+
+.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-left: calc(0.25 * 16px);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
 /**
  * Button
  */
@@ -3761,3 +3872,7 @@ p:not(.site-title) a:hover {
 		justify-content: flex-end;
 	}
 }
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	text-decoration: none;
+}

leven/style.css

@@ -194,7 +194,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,
@@ -212,11 +212,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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,148 @@ 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 a {
+	color: #ff302c;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #1285ce;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: currentColor;
+}
+
+.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.82474rem;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .cat-links {
+	color: currentColor;
+}
+
+.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: #1285ce;
+}
+
+.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);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+	margin-bottom: calc(3 * 32px);
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
+.has-background:not(.has-background-background-color) button[data-load-more-btn],
+[class*="background-color"]:not(.has-background-background-color) button[data-load-more-btn],
+[style*="background-color"] button[data-load-more-btn] {
+	background-color: transparent;
+	border: 2px solid currentColor;
+	color: currentColor;
+}
+
 /**
  * Button
  */
@@ -3790,3 +3932,7 @@ p:not(.site-title) a:hover {
 		justify-content: flex-end;
 	}
 }
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	text-decoration: none;
+}

mayland/sass/_extra-child-theme.scss

@@ -108,9 +108,9 @@ a {
 .site-main > .page-header,
 .site-main > .not-found > .page-header {
 	margin-top: #{0.666 * $spacing_vertical};
-		@include media(mobile) {
-			margin-top: #{2 * $spacing_vertical};
-		}
+	@include media(mobile) {
+		margin-top: #{2 * $spacing_vertical};
+	}
 }
 
 .site-main > {
@@ -132,7 +132,8 @@ a {
 // Entry Title Link
 .entry-title,
 .page-title,
-.a8c-posts-list .a8c-posts-list-item__title {
+.a8c-posts-list .a8c-posts-list-item__title,
+.wp-block-newspack-blocks-homepage-articles article .entry-title {
 	a {
 		color: inherit;
 		text-decoration: none;

mayland/style-editor.css

@@ -294,6 +294,52 @@ 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: calc(3 * 32px);
+}
+
+.wp-block-a8c-blog-posts .post-thumbnail img {
+	width: auto;
+}
+
+.wp-block-a8c-blog-posts .entry-title a {
+	color: black;
+	text-decoration: underline;
+}
+
+.wp-block-a8c-blog-posts .entry-title a:hover {
+	color: #666666;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-title a {
+	color: currentColor;
+}
+
+.wp-block-a8c-blog-posts .entry-meta,
+.wp-block-a8c-blog-posts .entry-footer,
+.wp-block-a8c-blog-posts .cat-links {
+	color: #666666;
+	font-size: 0.83333rem;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .cat-links {
+	color: currentColor;
+}
+
 .wp-block-button {
 	/* Default Style */
 	/* Outline Style */

mayland/style-rtl.css

@@ -194,7 +194,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,
@@ -212,11 +212,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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,117 @@ 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 a {
+	color: black;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #666666;
+}
+
+.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: #666666;
+	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-left: 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-left: 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: #666666;
+}
+
+.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-left: calc(0.25 * 16px);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
 /**
  * Button
  */
@@ -3777,7 +3888,8 @@ strong {
 
 .entry-title a,
 .page-title a,
-.a8c-posts-list .a8c-posts-list-item__title a {
+.a8c-posts-list .a8c-posts-list-item__title a,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
 	color: inherit;
 	text-decoration: none;
 }
@@ -3788,7 +3900,10 @@ strong {
 .page-title a:hover,
 .a8c-posts-list .a8c-posts-list-item__title a:active,
 .a8c-posts-list .a8c-posts-list-item__title a:focus,
-.a8c-posts-list .a8c-posts-list-item__title a:hover {
+.a8c-posts-list .a8c-posts-list-item__title a:hover,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:active,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
 	color: black;
 }
 

mayland/style.css

@@ -194,7 +194,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,
@@ -212,11 +212,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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,148 @@ 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 a {
+	color: black;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #666666;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: currentColor;
+}
+
+.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: #666666;
+	font-size: 0.83333rem;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .cat-links {
+	color: currentColor;
+}
+
+.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: #666666;
+}
+
+.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);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+	margin-bottom: calc(3 * 32px);
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
+.has-background:not(.has-background-background-color) button[data-load-more-btn],
+[class*="background-color"]:not(.has-background-background-color) button[data-load-more-btn],
+[style*="background-color"] button[data-load-more-btn] {
+	background-color: transparent;
+	border: 2px solid currentColor;
+	color: currentColor;
+}
+
 /**
  * Button
  */
@@ -3806,7 +3948,8 @@ strong {
 
 .entry-title a,
 .page-title a,
-.a8c-posts-list .a8c-posts-list-item__title a {
+.a8c-posts-list .a8c-posts-list-item__title a,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
 	color: inherit;
 	text-decoration: none;
 }
@@ -3817,7 +3960,10 @@ strong {
 .page-title a:hover,
 .a8c-posts-list .a8c-posts-list-item__title a:active,
 .a8c-posts-list .a8c-posts-list-item__title a:focus,
-.a8c-posts-list .a8c-posts-list-item__title a:hover {
+.a8c-posts-list .a8c-posts-list-item__title a:hover,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:active,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
 	color: black;
 }
 

maywood/sass/_extra-child-theme.scss

@@ -116,9 +116,9 @@ a {
 
 .site-main > article > .entry-header {
 	margin-top: #{0.666 * $spacing_vertical};
-		@include media(mobile) {
-			margin-top: $spacing_vertical;
-		}
+	@include media(mobile) {
+		margin-top: $spacing_vertical;
+	}
 }
 
 // Entry Title
@@ -137,7 +137,8 @@ a {
 // Entry Title Link
 .entry-title,
 .page-title,
-.a8c-posts-list .a8c-posts-list-item__title {
+.a8c-posts-list .a8c-posts-list-item__title,
+.wp-block-newspack-blocks-homepage-articles article .entry-title {
 	a {
 		color: inherit;
 		text-decoration: none;

maywood/style-editor.css

@@ -295,6 +295,52 @@ 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: calc(3 * 32px);
+}
+
+.wp-block-a8c-blog-posts .post-thumbnail img {
+	width: auto;
+}
+
+.wp-block-a8c-blog-posts .entry-title a {
+	color: #897248;
+	text-decoration: underline;
+}
+
+.wp-block-a8c-blog-posts .entry-title a:hover {
+	color: #685636;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-title a {
+	color: currentColor;
+}
+
+.wp-block-a8c-blog-posts .entry-meta,
+.wp-block-a8c-blog-posts .entry-footer,
+.wp-block-a8c-blog-posts .cat-links {
+	color: #686868;
+	font-size: 0.83333rem;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .cat-links {
+	color: currentColor;
+}
+
 .wp-block-button {
 	/* Default Style */
 	/* Outline Style */

maywood/style-rtl.css

@@ -194,7 +194,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,
@@ -212,11 +212,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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,117 @@ 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 a {
+	color: #897248;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #685636;
+}
+
+.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: #686868;
+	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-left: 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-left: 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: #685636;
+}
+
+.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-left: calc(0.25 * 16px);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
 /**
  * Button
  */
@@ -3795,7 +3906,8 @@ p:not(.site-title) a:hover {
 
 .entry-title a,
 .page-title a,
-.a8c-posts-list .a8c-posts-list-item__title a {
+.a8c-posts-list .a8c-posts-list-item__title a,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
 	color: inherit;
 	text-decoration: none;
 }
@@ -3806,7 +3918,10 @@ p:not(.site-title) a:hover {
 .page-title a:hover,
 .a8c-posts-list .a8c-posts-list-item__title a:active,
 .a8c-posts-list .a8c-posts-list-item__title a:focus,
-.a8c-posts-list .a8c-posts-list-item__title a:hover {
+.a8c-posts-list .a8c-posts-list-item__title a:hover,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:active,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
 	color: #897248;
 }
 

maywood/style.css

@@ -194,7 +194,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,
@@ -212,11 +212,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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,148 @@ 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 a {
+	color: #897248;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #685636;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: currentColor;
+}
+
+.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: #686868;
+	font-size: 0.83333rem;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .cat-links {
+	color: currentColor;
+}
+
+.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: #685636;
+}
+
+.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);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+	margin-bottom: calc(3 * 32px);
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
+.has-background:not(.has-background-background-color) button[data-load-more-btn],
+[class*="background-color"]:not(.has-background-background-color) button[data-load-more-btn],
+[style*="background-color"] button[data-load-more-btn] {
+	background-color: transparent;
+	border: 2px solid currentColor;
+	color: currentColor;
+}
+
 /**
  * Button
  */
@@ -3824,7 +3966,8 @@ p:not(.site-title) a:hover {
 
 .entry-title a,
 .page-title a,
-.a8c-posts-list .a8c-posts-list-item__title a {
+.a8c-posts-list .a8c-posts-list-item__title a,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
 	color: inherit;
 	text-decoration: none;
 }
@@ -3835,7 +3978,10 @@ p:not(.site-title) a:hover {
 .page-title a:hover,
 .a8c-posts-list .a8c-posts-list-item__title a:active,
 .a8c-posts-list .a8c-posts-list-item__title a:focus,
-.a8c-posts-list .a8c-posts-list-item__title a:hover {
+.a8c-posts-list .a8c-posts-list-item__title a:hover,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:active,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
 	color: #897248;
 }
 

morden/sass/_extra-child-theme.scss

@@ -101,9 +101,9 @@ body {
 		grid-template-rows: auto;
 		grid-column-gap: #{map-deep-get($config-global, "spacing", "unit")};
 		grid-template-areas:
-			"site-logo site-logo"
-			"site-title main-navigation"
-			"site-description social-navigation";
+				"site-logo site-logo"
+				"site-title main-navigation"
+				"site-description social-navigation";
 
 		&:before,
 		&:after {
@@ -144,7 +144,7 @@ body {
 				justify-content: flex-end;
 
 				& > .menu-item-has-children > a::after {
-						font-size: #{0.5 * map-deep-get($config-global, "font", "size", "base")};
+					font-size: #{0.5 * map-deep-get($config-global, "font", "size", "base")};
 				}
 			}
 
@@ -282,7 +282,7 @@ table,
  * Hentry
  */
 // Entry Title
-.singular .hentry .entry-title,
+.singular .hentry .entry-header .entry-title,
 .page-title {
 	background: #{map-deep-get($config-global, "color", "background", "light")};
 	margin-top: -#{0.5 * map-deep-get($config-global, "spacing", "vertical")};
@@ -317,17 +317,18 @@ table,
 // Entry Title Link
 article .entry-header .entry-title,
 .page-title,
-.a8c-posts-list .a8c-posts-list-item__title {
-  a {
-    color: inherit;
+.a8c-posts-list .a8c-posts-list-item__title,
+.wp-block-newspack-blocks-homepage-articles article .entry-title {
+	a {
+		color: inherit;
 		text-decoration: none;
 
-    &:active,
-    &:focus,
-    &:hover {
-      color: #{map-deep-get($config-global, "color", "primary", "default")};
-    }
-  }
+		&:active,
+		&:focus,
+		&:hover {
+			color: #{map-deep-get($config-global, "color", "primary", "default")};
+		}
+	}
 }
 
 // Remove margin if alignfull is first element
@@ -388,15 +389,15 @@ article .entry-header .entry-title,
 
 	.widget-title,
 	.widgettitle {
-  	font-size: #{map-deep-get($config-global, "font", "size", "md")};
-    margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
+		font-size: #{map-deep-get($config-global, "font", "size", "md")};
+		margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
 
-    &:empty {
-      display: none;
-    }
-  }
+		&:empty {
+			display: none;
+		}
+	}
 
-  @include media(laptop) {
+	@include media(laptop) {
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: space-between;
@@ -406,9 +407,9 @@ article .entry-header .entry-title,
 		}
 
 		& > *:nth-child(2) {
-      margin-top: 0;
-    }
-  }
+			margin-top: 0;
+		}
+	}
 
 	@include media(desktop) {
 		.widget {
@@ -416,21 +417,21 @@ article .entry-header .entry-title,
 		}
 
 		& > *:nth-child(3) {
-      margin-top: 0;
-    }
-  }
+			margin-top: 0;
+		}
+	}
 }
 
 .widget_calendar,
 .widget_calendar {
-  caption {
-    font-weight: bold;
-  }
-
-  td,
-  th {
-	   text-align: center;
-  }
+	caption {
+		font-weight: bold;
+	}
+
+	td,
+	th {
+		text-align: center;
+	}
 }
 
 .widget_archive,
@@ -448,43 +449,43 @@ article .entry-header .entry-title,
 .widget_jp_blogs_i_follow,
 .widget_top-click,
 .widget_upcoming_events_widget {
-  ul {
-    border-bottom: 1px solid map-deep-get($config-global, "color", "border", "default");
-    list-style: none;
-    padding-left: 0;
-  }
-
-  li {
-    border-top: 1px solid map-deep-get($config-global, "color", "border", "default");
-    padding: #{0.25 * map-deep-get($config-global, "spacing", "vertical")} 0;
-  }
+	ul {
+		border-bottom: 1px solid map-deep-get($config-global, "color", "border", "default");
+		list-style: none;
+		padding-left: 0;
+	}
+
+	li {
+		border-top: 1px solid map-deep-get($config-global, "color", "border", "default");
+		padding: #{0.25 * map-deep-get($config-global, "spacing", "vertical")} 0;
+	}
 }
 
 .widget_categories .children,
 .widget_nav_menu .sub-menu,
 .widget_pages .children {
-  border-bottom: 0;
-  margin-bottom: #{-0.25 * map-deep-get($config-global, "spacing", "vertical")};
-  margin-top: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
-  padding-left: map-deep-get($config-global, "spacing", "horizontal");
+	border-bottom: 0;
+	margin-bottom: #{-0.25 * map-deep-get($config-global, "spacing", "vertical")};
+	margin-top: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
+	padding-left: map-deep-get($config-global, "spacing", "horizontal");
 }
 
 .widget_recent_entries .post-date {
-  display: block;
+	display: block;
 }
 
 .widget_rss {
-  cite,
-  .rssSummary,
-  .rss-date {
-    display: block;
-  }
+	cite,
+	.rssSummary,
+	.rss-date {
+		display: block;
+	}
 }
 
 .widget_search {
-  input[type="search"] {
-    display: block;
-    margin-bottom: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
-    width: 100%;
-  }
+	input[type="search"] {
+		display: block;
+		margin-bottom: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
+		width: 100%;
+	}
 }

morden/style-editor.css

@@ -295,6 +295,52 @@ 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: calc(3 * 32px);
+}
+
+.wp-block-a8c-blog-posts .post-thumbnail img {
+	width: auto;
+}
+
+.wp-block-a8c-blog-posts .entry-title a {
+	color: #CD2220;
+	text-decoration: underline;
+}
+
+.wp-block-a8c-blog-posts .entry-title a:hover {
+	color: #303030;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-title a {
+	color: currentColor;
+}
+
+.wp-block-a8c-blog-posts .entry-meta,
+.wp-block-a8c-blog-posts .entry-footer,
+.wp-block-a8c-blog-posts .cat-links {
+	color: #757575;
+	font-size: 0.86957rem;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .cat-links {
+	color: currentColor;
+}
+
 .wp-block-button {
 	/* Default Style */
 	/* Outline Style */

morden/style-rtl.css

@@ -194,7 +194,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,
@@ -212,11 +212,11 @@ input[type="submit"],
 	padding: 16px 24px;
 }
 
-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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,117 @@ 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 a {
+	color: #CD2220;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #303030;
+}
+
+.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: #757575;
+	font-size: 0.86957rem;
+}
+
+.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-left: 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-left: 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: #303030;
+}
+
+.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-left: calc(0.25 * 16px);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
 /**
  * Button
  */
@@ -3926,7 +4037,7 @@ table th,
 /**
  * Hentry
  */
-.singular .hentry .entry-title,
+.singular .hentry .entry-header .entry-title,
 .page-title {
 	background: #F8F8F8;
 	margin-top: -16px;
@@ -3936,7 +4047,7 @@ table th,
 }
 
 @media only screen and (min-width: 560px) {
-	.singular .hentry .entry-title,
+	.singular .hentry .entry-header .entry-title,
 	.page-title {
 		margin-bottom: 64px;
 		margin-top: -64px;
@@ -3959,7 +4070,8 @@ table th,
 
 article .entry-header .entry-title a,
 .page-title a,
-.a8c-posts-list .a8c-posts-list-item__title a {
+.a8c-posts-list .a8c-posts-list-item__title a,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
 	color: inherit;
 	text-decoration: none;
 }
@@ -3970,7 +4082,10 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 .page-title a:hover,
 .a8c-posts-list .a8c-posts-list-item__title a:active,
 .a8c-posts-list .a8c-posts-list-item__title a:focus,
-.a8c-posts-list .a8c-posts-list-item__title a:hover {
+.a8c-posts-list .a8c-posts-list-item__title a:hover,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:active,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
 	color: #CD2220;
 }
 

morden/style.css

@@ -194,7 +194,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,
@@ -212,11 +212,11 @@ input[type="submit"],
 	padding: 16px 24px;
 }
 
-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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,148 @@ 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 a {
+	color: #CD2220;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #303030;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: currentColor;
+}
+
+.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: #757575;
+	font-size: 0.86957rem;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .cat-links {
+	color: currentColor;
+}
+
+.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: #303030;
+}
+
+.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);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+	margin-bottom: calc(3 * 32px);
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
+.has-background:not(.has-background-background-color) button[data-load-more-btn],
+[class*="background-color"]:not(.has-background-background-color) button[data-load-more-btn],
+[style*="background-color"] button[data-load-more-btn] {
+	background-color: transparent;
+	border: 2px solid currentColor;
+	color: currentColor;
+}
+
 /**
  * Button
  */
@@ -3955,7 +4097,7 @@ table th,
 /**
  * Hentry
  */
-.singular .hentry .entry-title,
+.singular .hentry .entry-header .entry-title,
 .page-title {
 	background: #F8F8F8;
 	margin-top: -16px;
@@ -3965,7 +4107,7 @@ table th,
 }
 
 @media only screen and (min-width: 560px) {
-	.singular .hentry .entry-title,
+	.singular .hentry .entry-header .entry-title,
 	.page-title {
 		margin-bottom: 64px;
 		margin-top: -64px;
@@ -3988,7 +4130,8 @@ table th,
 
 article .entry-header .entry-title a,
 .page-title a,
-.a8c-posts-list .a8c-posts-list-item__title a {
+.a8c-posts-list .a8c-posts-list-item__title a,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
 	color: inherit;
 	text-decoration: none;
 }
@@ -3999,7 +4142,10 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 .page-title a:hover,
 .a8c-posts-list .a8c-posts-list-item__title a:active,
 .a8c-posts-list .a8c-posts-list-item__title a:focus,
-.a8c-posts-list .a8c-posts-list-item__title a:hover {
+.a8c-posts-list .a8c-posts-list-item__title a:hover,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:active,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
 	color: #CD2220;
 }
 

redhill/sass/_extra-child-theme.scss

@@ -31,17 +31,17 @@ a {
 
 	&:before {
 		border-top: 1px solid rgba(#fff, 0.5);
-    content: "";
-    left: 0;
-    position: absolute;
-    top: -5px;
-    width: 100%;
+		content: "";
+		left: 0;
+		position: absolute;
+		top: -5px;
+		width: 100%;
 	}
 }
 
 // Header
 #masthead {
-  padding-top: map-deep-get($config-global, "spacing", "vertical");
+	padding-top: map-deep-get($config-global, "spacing", "vertical");
 
 	.custom-logo-link {
 		display: inline-block;
@@ -175,7 +175,7 @@ a {
 		}
 
 		& > div > ul > .menu-item-has-children > a::after {
-				opacity: 0.67;
+			opacity: 0.67;
 		}
 	}
 }
@@ -240,9 +240,9 @@ a {
 
 // Quote block
 .wp-block-quote {
-  p {
-    @include font-family( map-deep-get($config-global, "font", "family", "primary") );
-  }
+	p {
+		@include font-family( map-deep-get($config-global, "font", "family", "primary") );
+	}
 }
 
 // Table block
@@ -275,20 +275,36 @@ table,
 
 article .entry-header .entry-title,
 .page-title,
-.a8c-posts-list-item__title {
+.a8c-posts-list-item__title  {
 	@include font-family( map-deep-get($config-global, "font", "family", "primary") );
 	font-size: #{map-deep-get($config-global, "font", "size", "xxxl")};
 	margin-bottom: #{1.5 * map-deep-get($config-global, "spacing", "vertical")};
 
-  a {
-    color: inherit;
+	a {
+		color: inherit;
+
+		&:active,
+		&:focus,
+		&:hover {
+			color: #{map-deep-get($config-global, "color", "primary", "default")};
+		}
+	}
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title {
+	@include font-family( map-deep-get($config-global, "font", "family", "primary") );
+	margin-top: #{map-deep-get($config-global, "spacing", "vertical")};
+
+	a {
+		color: inherit;
+		text-decoration: none;
 
-    &:active,
-    &:focus,
-    &:hover {
-      color: #{map-deep-get($config-global, "color", "primary", "default")};
-    }
-  }
+		&:active,
+		&:focus,
+		&:hover {
+			color: #{map-deep-get($config-global, "color", "primary", "default")};
+		}
+	}
 }
 
 .entry-content {
@@ -297,27 +313,27 @@ article .entry-header .entry-title,
 
 // Pagination
 .pagination {
-  text-align: center;
-
-  .nav-links > * {
-    color: map-deep-get($config-global, "color", "foreground", "light");
-    @include font-family( map-deep-get($config-global, "font", "family", "secondary") );
-    font-size: #{map-deep-get($config-global, "font", "size", "base")};
-    text-transform: uppercase;
-
-    &.current,
-    &:active,
-    &:focus,
-    &:hover {
-      color: map-deep-get($config-global, "color", "primary", "default");
-    }
-  }
-
-  svg {
-    fill: currentColor;
-  }
-
-  &:before {
+	text-align: center;
+
+	.nav-links > * {
+		color: map-deep-get($config-global, "color", "foreground", "light");
+		@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
+		font-size: #{map-deep-get($config-global, "font", "size", "base")};
+		text-transform: uppercase;
+
+		&.current,
+		&:active,
+		&:focus,
+		&:hover {
+			color: map-deep-get($config-global, "color", "primary", "default");
+		}
+	}
+
+	svg {
+		fill: currentColor;
+	}
+
+	&:before {
 		background: map-deep-get($config-global, "color", "border", "default");;
 		height: 1px;
 		content: "";
@@ -409,87 +425,87 @@ article .entry-header .entry-title,
 }
 
 .comment-meta {
-  .comment-metadata {
-    color: map-deep-get($config-global, "color", "foreground", "light");
-    @include font-family( map-deep-get($config-global, "font", "family", "secondary") );
+	.comment-metadata {
+		color: map-deep-get($config-global, "color", "foreground", "light");
+		@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
 
-    a {
-      color: inherit;
-    }
+		a {
+			color: inherit;
+		}
 
-    a:active,
-    a:focus,
-    a:hover {
-      color: map-deep-get($config-global, "color", "primary", "default");
-    }
-  }
+		a:active,
+		a:focus,
+		a:hover {
+			color: map-deep-get($config-global, "color", "primary", "default");
+		}
+	}
 }
 
 // Comments Navigation
 .comment-navigation {
-    a {
-    color: map-deep-get($config-global, "color", "foreground", "light");
-    @include font-family( map-deep-get($config-global, "font", "family", "secondary") );
-    font-size: #{map-deep-get($config-global, "font", "size", "sm")};
-    text-transform: uppercase;
+	a {
+		color: map-deep-get($config-global, "color", "foreground", "light");
+		@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
+		font-size: #{map-deep-get($config-global, "font", "size", "sm")};
+		text-transform: uppercase;
 
-    &:active,
-    &:focus,
-    &:hover {
-      color: map-deep-get($config-global, "color", "primary", "default");
-    }
-  }
+		&:active,
+		&:focus,
+		&:hover {
+			color: map-deep-get($config-global, "color", "primary", "default");
+		}
+	}
 
-  .comments-title + & {
-    display: none;
-  }
+	.comments-title + & {
+		display: none;
+	}
 }
 
 // Widgets
 .widget-area {
-  font-size: #{map-deep-get($config-global, "font", "size", "sm")};
+	font-size: #{map-deep-get($config-global, "font", "size", "sm")};
 
-  .widget-title,
-  .widgettitle {
-    @include font-family( map-deep-get($config-global, "font", "family", "secondary") );
-    font-size: #{map-deep-get($config-global, "font", "size", "base")};
-    margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
-    text-transform: uppercase;
+	.widget-title,
+	.widgettitle {
+		@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
+		font-size: #{map-deep-get($config-global, "font", "size", "base")};
+		margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
+		text-transform: uppercase;
 
-    &:empty {
-      display: none;
-    }
-  }
+		&:empty {
+			display: none;
+		}
+	}
 
-  @include media(mobile) {
-    padding-top: map-deep-get($config-global, "spacing", "vertical");
-  }
+	@include media(mobile) {
+		padding-top: map-deep-get($config-global, "spacing", "vertical");
+	}
 
-  @include media(laptop) {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
+	@include media(laptop) {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
 
-    & > *:nth-child(2) {
-      margin-top: 0;
-    }
+		& > *:nth-child(2) {
+			margin-top: 0;
+		}
 
-    .widget {
-      width: calc(50% - #{map-deep-get($config-global, "spacing", "horizontal")});
-    }
-  }
+		.widget {
+			width: calc(50% - #{map-deep-get($config-global, "spacing", "horizontal")});
+		}
+	}
 }
 
 .widget_calendar,
 .widget_calendar {
-  caption {
-    font-weight: bold;
-  }
+	caption {
+		font-weight: bold;
+	}
 
-  td,
-  th {
-	   text-align: center;
-  }
+	td,
+	th {
+		text-align: center;
+	}
 }
 
 .widget_archive,
@@ -507,43 +523,43 @@ article .entry-header .entry-title,
 .widget_jp_blogs_i_follow,
 .widget_top-click,
 .widget_upcoming_events_widget {
-  ul {
-    border-bottom: 1px solid map-deep-get($config-global, "color", "border", "light");
-    list-style: none;
-    padding-left: 0;
-  }
+	ul {
+		border-bottom: 1px solid map-deep-get($config-global, "color", "border", "light");
+		list-style: none;
+		padding-left: 0;
+	}
 
-  li {
-    border-top: 1px solid map-deep-get($config-global, "color", "border", "light");
-    padding: #{0.25 * map-deep-get($config-global, "spacing", "vertical")} 0;
-  }
+	li {
+		border-top: 1px solid map-deep-get($config-global, "color", "border", "light");
+		padding: #{0.25 * map-deep-get($config-global, "spacing", "vertical")} 0;
+	}
 }
 
 .widget_categories .children,
 .widget_nav_menu .sub-menu,
 .widget_pages .children {
-  border-bottom: 0;
-  margin-bottom: #{-0.25 * map-deep-get($config-global, "spacing", "vertical")};
-  margin-top: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
-  padding-left: map-deep-get($config-global, "spacing", "horizontal");
+	border-bottom: 0;
+	margin-bottom: #{-0.25 * map-deep-get($config-global, "spacing", "vertical")};
+	margin-top: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
+	padding-left: map-deep-get($config-global, "spacing", "horizontal");
 }
 
 .widget_recent_entries .post-date {
-  display: block;
+	display: block;
 }
 
 .widget_rss {
-  cite,
-  .rssSummary,
-  .rss-date {
-    display: block;
-  }
+	cite,
+	.rssSummary,
+	.rss-date {
+		display: block;
+	}
 }
 
 .widget_search {
-  input[type="search"] {
-    display: block;
-    margin-bottom: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
-    width: 100%;
-  }
+	input[type="search"] {
+		display: block;
+		margin-bottom: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
+		width: 100%;
+	}
 }

redhill/style-editor.css

@@ -306,6 +306,52 @@ 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: calc(3 * 32px);
+}
+
+.wp-block-a8c-blog-posts .post-thumbnail img {
+	width: auto;
+}
+
+.wp-block-a8c-blog-posts .entry-title a {
+	color: #CA2017;
+	text-decoration: underline;
+}
+
+.wp-block-a8c-blog-posts .entry-title a:hover {
+	color: #222222;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-title a {
+	color: currentColor;
+}
+
+.wp-block-a8c-blog-posts .entry-meta,
+.wp-block-a8c-blog-posts .entry-footer,
+.wp-block-a8c-blog-posts .cat-links {
+	color: #666666;
+	font-size: 0.83333rem;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .cat-links {
+	color: currentColor;
+}
+
 .wp-block-button {
 	/* Default Style */
 	/* Outline Style */

redhill/style-rtl.css

@@ -194,7 +194,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,
@@ -212,11 +212,11 @@ input[type="submit"],
 	padding: 16px 24px;
 }
 
-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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,117 @@ 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 a {
+	color: #CA2017;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #222222;
+}
+
+.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: #666666;
+	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-left: 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-left: 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: #222222;
+}
+
+.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-left: calc(0.25 * 16px);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
 /**
  * Button
  */
@@ -3944,6 +4055,21 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	color: #CA2017;
 }
 
+.wp-block-newspack-blocks-homepage-articles article .entry-title {
+	font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif;
+	font-family: var(--font-headings, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif);
+	margin-top: 32px;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: inherit;
+	text-decoration: none;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:active, .wp-block-newspack-blocks-homepage-articles article .entry-title a:focus, .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #CA2017;
+}
+
 .entry-content {
 	font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif;
 	font-family: var(--font-headings, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif);

redhill/style.css

@@ -194,7 +194,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,
@@ -212,11 +212,11 @@ input[type="submit"],
 	padding: 16px 24px;
 }
 
-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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,148 @@ 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 a {
+	color: #CA2017;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #222222;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: currentColor;
+}
+
+.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: #666666;
+	font-size: 0.83333rem;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .cat-links {
+	color: currentColor;
+}
+
+.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: #222222;
+}
+
+.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);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+	margin-bottom: calc(3 * 32px);
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
+.has-background:not(.has-background-background-color) button[data-load-more-btn],
+[class*="background-color"]:not(.has-background-background-color) button[data-load-more-btn],
+[style*="background-color"] button[data-load-more-btn] {
+	background-color: transparent;
+	border: 2px solid currentColor;
+	color: currentColor;
+}
+
 /**
  * Button
  */
@@ -3973,6 +4115,21 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	color: #CA2017;
 }
 
+.wp-block-newspack-blocks-homepage-articles article .entry-title {
+	font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif;
+	font-family: var(--font-headings, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif);
+	margin-top: 32px;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: inherit;
+	text-decoration: none;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:active, .wp-block-newspack-blocks-homepage-articles article .entry-title a:focus, .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #CA2017;
+}
+
 .entry-content {
 	font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif;
 	font-family: var(--font-headings, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Times, "Times New Roman", serif);

rivington/sass/_extra-child-theme.scss

@@ -60,7 +60,7 @@ a {
 		grid-template-rows: auto;
 		grid-column-gap: #{map-deep-get($config-global, "spacing", "unit")};
 		grid-template-areas:
-			"site-branding main-navigation";
+				"site-branding main-navigation";
 
 		&:before,
 		&:after {
@@ -166,9 +166,9 @@ a {
 .site-main > .page-header,
 .site-main > .not-found > .page-header {
 	margin-top: #{0.666 * $spacing_vertical};
-		@include media(mobile) {
-			margin-top: #{2 * $spacing_vertical};
-		}
+	@include media(mobile) {
+		margin-top: #{2 * $spacing_vertical};
+	}
 }
 
 /**
@@ -178,7 +178,8 @@ a {
 // Entry Title Link
 .entry-title,
 .page-title,
-.a8c-posts-list .a8c-posts-list-item__title {
+.a8c-posts-list .a8c-posts-list-item__title,
+.wp-block-newspack-blocks-homepage-articles article .entry-title {
 	a {
 		color: inherit;
 		text-decoration: none;

rivington/style-editor.css

@@ -294,6 +294,52 @@ 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: calc(3 * 32px);
+}
+
+.wp-block-a8c-blog-posts .post-thumbnail img {
+	width: auto;
+}
+
+.wp-block-a8c-blog-posts .entry-title a {
+	color: #CAAB57;
+	text-decoration: underline;
+}
+
+.wp-block-a8c-blog-posts .entry-title a:hover {
+	color: #b59439;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-title a {
+	color: currentColor;
+}
+
+.wp-block-a8c-blog-posts .entry-meta,
+.wp-block-a8c-blog-posts .entry-footer,
+.wp-block-a8c-blog-posts .cat-links {
+	color: white;
+	font-size: 0.8rem;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .cat-links {
+	color: currentColor;
+}
+
 .wp-block-button {
 	/* Default Style */
 	/* Outline Style */

rivington/style-rtl.css

@@ -194,7 +194,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,
@@ -212,11 +212,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,
@@ -227,7 +227,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,
@@ -235,7 +235,7 @@ input[type="submit"]:before,
 	margin-bottom: -0.195em;
 }
 
-button:after,
+button[data-load-more-btn]:after, button:after,
 .button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
@@ -1149,6 +1149,117 @@ 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 a {
+	color: #CAAB57;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #b59439;
+}
+
+.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: white;
+	font-size: 0.8rem;
+}
+
+.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-left: 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-left: 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: #b59439;
+}
+
+.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-left: calc(0.25 * 16px);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
 /**
  * Button
  */
@@ -3822,7 +3933,8 @@ p:not(.site-title) a:hover {
  */
 .entry-title a,
 .page-title a,
-.a8c-posts-list .a8c-posts-list-item__title a {
+.a8c-posts-list .a8c-posts-list-item__title a,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
 	color: inherit;
 	text-decoration: none;
 }
@@ -3833,7 +3945,10 @@ p:not(.site-title) a:hover {
 .page-title a:hover,
 .a8c-posts-list .a8c-posts-list-item__title a:active,
 .a8c-posts-list .a8c-posts-list-item__title a:focus,
-.a8c-posts-list .a8c-posts-list-item__title a:hover {
+.a8c-posts-list .a8c-posts-list-item__title a:hover,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:active,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
 	color: #CAAB57;
 }
 

rivington/style.css

@@ -194,7 +194,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,
@@ -212,11 +212,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,
@@ -227,7 +227,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,
@@ -235,7 +235,7 @@ input[type="submit"]:before,
 	margin-bottom: -0.195em;
 }
 
-button:after,
+button[data-load-more-btn]:after, button:after,
 .button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
@@ -1149,6 +1149,148 @@ 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 a {
+	color: #CAAB57;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #b59439;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: currentColor;
+}
+
+.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: white;
+	font-size: 0.8rem;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .cat-links {
+	color: currentColor;
+}
+
+.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: #b59439;
+}
+
+.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);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+	margin-bottom: calc(3 * 32px);
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
+.has-background:not(.has-background-background-color) button[data-load-more-btn],
+[class*="background-color"]:not(.has-background-background-color) button[data-load-more-btn],
+[style*="background-color"] button[data-load-more-btn] {
+	background-color: transparent;
+	border: 2px solid currentColor;
+	color: currentColor;
+}
+
 /**
  * Button
  */
@@ -3851,7 +3993,8 @@ p:not(.site-title) a:hover {
  */
 .entry-title a,
 .page-title a,
-.a8c-posts-list .a8c-posts-list-item__title a {
+.a8c-posts-list .a8c-posts-list-item__title a,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
 	color: inherit;
 	text-decoration: none;
 }
@@ -3862,7 +4005,10 @@ p:not(.site-title) a:hover {
 .page-title a:hover,
 .a8c-posts-list .a8c-posts-list-item__title a:active,
 .a8c-posts-list .a8c-posts-list-item__title a:focus,
-.a8c-posts-list .a8c-posts-list-item__title a:hover {
+.a8c-posts-list .a8c-posts-list-item__title a:hover,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:active,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
 	color: #CAAB57;
 }
 

rockfield/sass/_extra-child-theme.scss

@@ -108,7 +108,7 @@ a {
 	margin: 0;
 	text-align: right;
 
- 	> div {
+	> div {
 		background: #{map-deep-get($config-global, "color", "foreground", "dark")};
 		border-top: #{0.25 * map-deep-get($config-global, "spacing", "vertical")} solid #{map-deep-get($config-global, "color", "foreground", "dark")};
 		box-shadow: inset 0 1px 0 0 #{map-deep-get($config-global, "color", "primary", "default")};
@@ -132,7 +132,7 @@ a {
 			justify-content: flex-end;
 
 			& > .menu-item-has-children > a::after {
-					font-size: #{0.5 * map-deep-get($config-global, "font", "size", "base")};
+				font-size: #{0.5 * map-deep-get($config-global, "font", "size", "base")};
 			}
 
 			.sub-menu .menu-item a {
@@ -404,6 +404,33 @@ table,
 	}
 }
 
+/**
+ * Blog Posts (Newspack)
+ */
+.wp-block-newspack-blocks-homepage-articles article {
+	margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
+	margin-top: #{map-deep-get($config-global, "spacing", "vertical")};
+
+	@include media(mobile) {
+		margin-bottom: #{2 * map-deep-get($config-global, "spacing", "vertical")};
+		margin-top: #{2 * map-deep-get($config-global, "spacing", "vertical")};
+	}
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	text-decoration: none;
+}
+
+.wp-block-newspack-blocks-homepage-articles article p {
+	&:not(:last-child) {
+		margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
+
+		@include media(mobile) {
+			margin-bottom: #{2 * map-deep-get($config-global, "spacing", "vertical")};
+		}
+	}
+}
+
 /**
  * Comments
  */
@@ -419,9 +446,9 @@ table,
 
 .comment-body {
 	content: "";
-  display: table;
-  table-layout: fixed;
-  width: 100%;
+	display: table;
+	table-layout: fixed;
+	width: 100%;
 }
 
 .comment-meta .comment-metadata {
@@ -465,7 +492,7 @@ table,
 
 			.avatar,
 			.fn {
-		    display: block;
+				display: block;
 				margin-bottom: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
 			}
 		}
@@ -504,43 +531,43 @@ table,
 		@extend %responsive-alignfull;
 	}
 
-  .widget-title,
-  .widgettitle {
-    font-size: #{map-deep-get($config-global, "font", "size", "base")};
-    @include font-family( map-deep-get($config-global, "font", "family", "ui") );
-    margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
+	.widget-title,
+	.widgettitle {
+		font-size: #{map-deep-get($config-global, "font", "size", "base")};
+		@include font-family( map-deep-get($config-global, "font", "family", "ui") );
+		margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
 
-    &:empty {
-      display: none;
-    }
-  }
+		&:empty {
+			display: none;
+		}
+	}
 
-  @include media(laptop) {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
+	@include media(laptop) {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
 
-    & > *:nth-child(2) {
-      margin-top: 0;
-    }
+		& > *:nth-child(2) {
+			margin-top: 0;
+		}
 
-    .widget {
-      width: calc(50% - #{map-deep-get($config-global, "spacing", "horizontal")});
-    }
-  }
+		.widget {
+			width: calc(50% - #{map-deep-get($config-global, "spacing", "horizontal")});
+		}
+	}
 }
 
 // Widgets
 .widget_calendar,
 .widget_calendar {
-  caption {
-    font-weight: bold;
-  }
+	caption {
+		font-weight: bold;
+	}
 
-  td,
-  th {
-	   text-align: center;
-  }
+	td,
+	th {
+		text-align: center;
+	}
 }
 
 .widget_archive,
@@ -558,45 +585,45 @@ table,
 .widget_jp_blogs_i_follow,
 .widget_top-click,
 .widget_upcoming_events_widget {
-  ul {
-    border-bottom: 1px solid map-deep-get($config-global, "color", "border", "default");
-    list-style: none;
-    padding-left: 0;
-  }
+	ul {
+		border-bottom: 1px solid map-deep-get($config-global, "color", "border", "default");
+		list-style: none;
+		padding-left: 0;
+	}
 
-  li {
-    border-top: 1px solid map-deep-get($config-global, "color", "border", "default");
-    padding: #{0.25 * map-deep-get($config-global, "spacing", "vertical")} 0;
-  }
+	li {
+		border-top: 1px solid map-deep-get($config-global, "color", "border", "default");
+		padding: #{0.25 * map-deep-get($config-global, "spacing", "vertical")} 0;
+	}
 }
 
 .widget_categories .children,
 .widget_nav_menu .sub-menu,
 .widget_pages .children {
-  border-bottom: 0;
-  margin-bottom: #{-0.25 * map-deep-get($config-global, "spacing", "vertical")};
-  margin-top: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
-  padding-left: map-deep-get($config-global, "spacing", "horizontal");
+	border-bottom: 0;
+	margin-bottom: #{-0.25 * map-deep-get($config-global, "spacing", "vertical")};
+	margin-top: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
+	padding-left: map-deep-get($config-global, "spacing", "horizontal");
 }
 
 .widget_recent_entries .post-date {
-  display: block;
+	display: block;
 }
 
 .widget_rss {
-  cite,
-  .rssSummary,
-  .rss-date {
-    display: block;
-  }
+	cite,
+	.rssSummary,
+	.rss-date {
+		display: block;
+	}
 }
 
 .widget_search {
-  input[type="search"] {
-    display: block;
-    margin-bottom: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
-    width: 100%;
-  }
+	input[type="search"] {
+		display: block;
+		margin-bottom: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
+		width: 100%;
+	}
 }
 
 /**

rockfield/style-editor.css

@@ -294,6 +294,52 @@ 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: calc(3 * 32px);
+}
+
+.wp-block-a8c-blog-posts .post-thumbnail img {
+	width: auto;
+}
+
+.wp-block-a8c-blog-posts .entry-title a {
+	color: #222222;
+	text-decoration: underline;
+}
+
+.wp-block-a8c-blog-posts .entry-title a:hover {
+	color: #444444;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-title a {
+	color: currentColor;
+}
+
+.wp-block-a8c-blog-posts .entry-meta,
+.wp-block-a8c-blog-posts .entry-footer,
+.wp-block-a8c-blog-posts .cat-links {
+	color: #757575;
+	font-size: 0.83333rem;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .cat-links {
+	color: currentColor;
+}
+
 .wp-block-button {
 	/* Default Style */
 	/* Outline Style */

rockfield/style-rtl.css

@@ -194,7 +194,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,
@@ -212,11 +212,11 @@ input[type="submit"],
 	padding: 16px 20px;
 }
 
-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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,117 @@ 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 a {
+	color: #222222;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #444444;
+}
+
+.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: #757575;
+	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-left: 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-left: 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: #444444;
+}
+
+.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-left: calc(0.25 * 16px);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
 /**
  * Button
  */
@@ -4053,6 +4164,35 @@ table th,
 	}
 }
 
+/**
+ * Blog Posts (Newspack)
+ */
+.wp-block-newspack-blocks-homepage-articles article {
+	margin-bottom: 32px;
+	margin-top: 32px;
+}
+
+@media only screen and (min-width: 560px) {
+	.wp-block-newspack-blocks-homepage-articles article {
+		margin-bottom: 64px;
+		margin-top: 64px;
+	}
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	text-decoration: none;
+}
+
+.wp-block-newspack-blocks-homepage-articles article p:not(:last-child) {
+	margin-bottom: 32px;
+}
+
+@media only screen and (min-width: 560px) {
+	.wp-block-newspack-blocks-homepage-articles article p:not(:last-child) {
+		margin-bottom: 64px;
+	}
+}
+
 /**
  * Comments
  */

rockfield/style.css

@@ -194,7 +194,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,
@@ -212,11 +212,11 @@ input[type="submit"],
 	padding: 16px 20px;
 }
 
-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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,148 @@ 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 a {
+	color: #222222;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #444444;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: currentColor;
+}
+
+.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: #757575;
+	font-size: 0.83333rem;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .cat-links {
+	color: currentColor;
+}
+
+.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: #444444;
+}
+
+.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);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+	margin-bottom: calc(3 * 32px);
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
+.has-background:not(.has-background-background-color) button[data-load-more-btn],
+[class*="background-color"]:not(.has-background-background-color) button[data-load-more-btn],
+[style*="background-color"] button[data-load-more-btn] {
+	background-color: transparent;
+	border: 2px solid currentColor;
+	color: currentColor;
+}
+
 /**
  * Button
  */
@@ -4082,6 +4224,35 @@ table th,
 	}
 }
 
+/**
+ * Blog Posts (Newspack)
+ */
+.wp-block-newspack-blocks-homepage-articles article {
+	margin-bottom: 32px;
+	margin-top: 32px;
+}
+
+@media only screen and (min-width: 560px) {
+	.wp-block-newspack-blocks-homepage-articles article {
+		margin-bottom: 64px;
+		margin-top: 64px;
+	}
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	text-decoration: none;
+}
+
+.wp-block-newspack-blocks-homepage-articles article p:not(:last-child) {
+	margin-bottom: 32px;
+}
+
+@media only screen and (min-width: 560px) {
+	.wp-block-newspack-blocks-homepage-articles article p:not(:last-child) {
+		margin-bottom: 64px;
+	}
+}
+
 /**
  * Comments
  */

shawburn/sass/_extra-child-theme.scss

@@ -152,6 +152,19 @@ hr.wp-block-separator.is-style-wide,
 		text-align: center;
 	}
 
+	.wp-block-newspack-blocks-homepage-articles article .entry-title {
+		a {
+			color: inherit;
+			text-decoration: none;
+
+			&:active,
+			&:focus,
+			&:hover {
+				color: map-deep-get($config-global, "color", "primary", "default");
+			}
+		}
+	}
+
 	.a8c-posts-list-item__excerpt {
 		text-align: left;
 	}
@@ -286,14 +299,14 @@ table,
  * Widgets
  */
 .widget_calendar {
-  caption {
-    font-weight: bold;
-  }
-
-  td,
-  th {
-	   text-align: center;
-  }
+	caption {
+		font-weight: bold;
+	}
+
+	td,
+	th {
+		text-align: center;
+	}
 }
 
 .widget_archive,
@@ -311,35 +324,35 @@ table,
 .widget_jp_blogs_i_follow,
 .widget_top-click,
 .widget_upcoming_events_widget {
-  ul {
-    border-bottom: 1px solid map-deep-get($config-global, "color", "border", "default");
-    list-style: none;
-    padding-left: 0;
-  }
-
-  li {
-    border-top: 1px solid map-deep-get($config-global, "color", "border", "default");
-    padding: #{0.25 * map-deep-get($config-global, "spacing", "vertical")} 0;
-  }
+	ul {
+		border-bottom: 1px solid map-deep-get($config-global, "color", "border", "default");
+		list-style: none;
+		padding-left: 0;
+	}
+
+	li {
+		border-top: 1px solid map-deep-get($config-global, "color", "border", "default");
+		padding: #{0.25 * map-deep-get($config-global, "spacing", "vertical")} 0;
+	}
 }
 
 .widget_categories .children,
 .widget_nav_menu .sub-menu,
 .widget_pages .children {
-  border-bottom: 0;
-  margin-bottom: #{-0.25 * map-deep-get($config-global, "spacing", "vertical")};
-  margin-top: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
-  padding-left: map-deep-get($config-global, "spacing", "horizontal");
+	border-bottom: 0;
+	margin-bottom: #{-0.25 * map-deep-get($config-global, "spacing", "vertical")};
+	margin-top: #{0.25 * map-deep-get($config-global, "spacing", "vertical")};
+	padding-left: map-deep-get($config-global, "spacing", "horizontal");
 }
 
 .widget_recent_entries .post-date {
-  display: block;
+	display: block;
 }
 
 .widget_rss {
-  cite,
-  .rssSummary,
-  .rss-date {
-    display: block;
-  }
+	cite,
+	.rssSummary,
+	.rss-date {
+		display: block;
+	}
 }

shawburn/style-editor.css

@@ -295,6 +295,52 @@ 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: calc(3 * 32px);
+}
+
+.wp-block-a8c-blog-posts .post-thumbnail img {
+	width: auto;
+}
+
+.wp-block-a8c-blog-posts .entry-title a {
+	color: #0C80A1;
+	text-decoration: underline;
+}
+
+.wp-block-a8c-blog-posts .entry-title a:hover {
+	color: #085a72;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-title a {
+	color: currentColor;
+}
+
+.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;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .cat-links {
+	color: currentColor;
+}
+
 .wp-block-button {
 	/* Default Style */
 	/* Outline Style */

shawburn/style-rtl.css

@@ -194,7 +194,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,
@@ -212,11 +212,11 @@ input[type="submit"],
 	padding: 16px 24px;
 }
 
-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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,117 @@ 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 a {
+	color: #0C80A1;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #085a72;
+}
+
+.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-left: 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-left: 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: #085a72;
+}
+
+.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-left: calc(0.25 * 16px);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
 /**
  * Button
  */
@@ -3807,6 +3918,15 @@ hr.wp-block-separator.is-style-wide,
 	text-align: center;
 }
 
+#page .wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: inherit;
+	text-decoration: none;
+}
+
+#page .wp-block-newspack-blocks-homepage-articles article .entry-title a:active, #page .wp-block-newspack-blocks-homepage-articles article .entry-title a:focus, #page .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #0C80A1;
+}
+
 #page .a8c-posts-list-item__excerpt {
 	text-align: right;
 }

shawburn/style.css

@@ -194,7 +194,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,
@@ -212,11 +212,11 @@ input[type="submit"],
 	padding: 16px 24px;
 }
 
-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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,148 @@ 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 a {
+	color: #0C80A1;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #085a72;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: currentColor;
+}
+
+.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;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .cat-links {
+	color: currentColor;
+}
+
+.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: #085a72;
+}
+
+.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);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+	margin-bottom: calc(3 * 32px);
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
+.has-background:not(.has-background-background-color) button[data-load-more-btn],
+[class*="background-color"]:not(.has-background-background-color) button[data-load-more-btn],
+[style*="background-color"] button[data-load-more-btn] {
+	background-color: transparent;
+	border: 2px solid currentColor;
+	color: currentColor;
+}
+
 /**
  * Button
  */
@@ -3836,6 +3978,15 @@ hr.wp-block-separator.is-style-wide,
 	text-align: center;
 }
 
+#page .wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: inherit;
+	text-decoration: none;
+}
+
+#page .wp-block-newspack-blocks-homepage-articles article .entry-title a:active, #page .wp-block-newspack-blocks-homepage-articles article .entry-title a:focus, #page .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #0C80A1;
+}
+
 #page .a8c-posts-list-item__excerpt {
 	text-align: left;
 }

stow/sass/_extra-child-theme.scss

@@ -132,18 +132,18 @@ body:not( .fse-enabled ) {
 		margin-left: 0;
 		margin-right: 0;
 		text-align: center;
-	
+
 		& > div {
 			text-align: left;
 		}
-	
+
 		&.main-navigation {
-	
+
 			& > div {
 				padding-left: #{map-deep-get($config-global, "spacing", "unit")};
 				padding-right: #{map-deep-get($config-global, "spacing", "unit")};
 			}
-	
+
 			ul {
 				li {
 					&.current-menu-item {
@@ -368,3 +368,10 @@ body:not( .fse-enabled ) {
 		}
 	}
 }
+
+/**
+ * 6.1. Blog Posts (Newspack) Block
+ */
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	text-decoration: none;
+}

stow/style-editor.css

@@ -295,6 +295,52 @@ 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: calc(3 * 32px);
+}
+
+.wp-block-a8c-blog-posts .post-thumbnail img {
+	width: auto;
+}
+
+.wp-block-a8c-blog-posts .entry-title a {
+	color: #404040;
+	text-decoration: underline;
+}
+
+.wp-block-a8c-blog-posts .entry-title a:hover {
+	color: #f25f70;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-title a {
+	color: currentColor;
+}
+
+.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;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .cat-links {
+	color: currentColor;
+}
+
 .wp-block-button {
 	/* Default Style */
 	/* Outline Style */

stow/style-rtl.css

@@ -194,7 +194,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,
@@ -212,11 +212,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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,117 @@ 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 a {
+	color: #404040;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #f25f70;
+}
+
+.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-left: 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-left: 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: #f25f70;
+}
+
+.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-left: calc(0.25 * 16px);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
 /**
  * Button
  */
@@ -4011,6 +4122,13 @@ body:not(.fse-enabled) #site-navigation.main-navigation #toggle-menu, body:not(.
 	margin-bottom: .857em;
 }
 
+/**
+ * 6.1. Blog Posts (Newspack) Block
+ */
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	text-decoration: none;
+}
+
 /**
  * Full Site Editing
  * - Full Site Editing overrides

stow/style.css

@@ -194,7 +194,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,
@@ -212,11 +212,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,
@@ -227,7 +227,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,
@@ -235,7 +235,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,
@@ -1149,6 +1149,148 @@ 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 a {
+	color: #404040;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #f25f70;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: currentColor;
+}
+
+.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;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .cat-links {
+	color: currentColor;
+}
+
+.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: #f25f70;
+}
+
+.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);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+	margin-bottom: calc(3 * 32px);
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
+.has-background:not(.has-background-background-color) button[data-load-more-btn],
+[class*="background-color"]:not(.has-background-background-color) button[data-load-more-btn],
+[style*="background-color"] button[data-load-more-btn] {
+	background-color: transparent;
+	border: 2px solid currentColor;
+	color: currentColor;
+}
+
 /**
  * Button
  */
@@ -4040,6 +4182,13 @@ body:not(.fse-enabled) #site-navigation.main-navigation #toggle-menu, body:not(.
 	margin-bottom: .857em;
 }
 
+/**
+ * 6.1. Blog Posts (Newspack) Block
+ */
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	text-decoration: none;
+}
+
 /**
  * Full Site Editing
  * - Full Site Editing overrides

stratford/sass/_extra-child-theme.scss

@@ -217,7 +217,7 @@ a {
 	}
 }
 
- @include media(mobile-only) {
+@include media(mobile-only) {
 	.site-title,
 	.site-description {
 		font-size: $font_size_xl;
@@ -344,12 +344,17 @@ a {
 	}
 }
 
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	text-decoration: none;
+}
+
 button,
 .button,
 input[type="submit"],
 .wp-block-button__link,
 .wp-block-file__button,
-.a8c-posts-list__view-all {
+.a8c-posts-list__view-all,
+button[data-load-more-btn] {
 	border: 0;
 	border-radius: 5em;
 	text-transform: uppercase;
@@ -381,7 +386,7 @@ input[type="submit"],
 			}
 			> time {
 				&.wp-block-latest-posts__post-date {
-				 font-size: $font_size_base;
+					font-size: $font_size_base;
 				}
 			}
 		}

stratford/style-editor.css

@@ -294,6 +294,52 @@ 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: calc(3 * 32px);
+}
+
+.wp-block-a8c-blog-posts .post-thumbnail img {
+	width: auto;
+}
+
+.wp-block-a8c-blog-posts .entry-title a {
+	color: #2c313f;
+	text-decoration: underline;
+}
+
+.wp-block-a8c-blog-posts .entry-title a:hover {
+	color: #3e69dc;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-title a {
+	color: currentColor;
+}
+
+.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;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .cat-links {
+	color: currentColor;
+}
+
 .wp-block-button {
 	/* Default Style */
 	/* Outline Style */

stratford/style-rtl.css

@@ -194,7 +194,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,
@@ -212,11 +212,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,
@@ -227,7 +227,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,
@@ -235,7 +235,7 @@ input[type="submit"]:before,
 	margin-bottom: -0.34em;
 }
 
-button:after,
+button[data-load-more-btn]:after, button:after,
 .button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
@@ -1149,6 +1149,117 @@ 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 a {
+	color: #2c313f;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #3e69dc;
+}
+
+.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-left: 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-left: 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: #3e69dc;
+}
+
+.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-left: calc(0.25 * 16px);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
 /**
  * Button
  */
@@ -3954,12 +4065,17 @@ p:not(.site-title) a:hover {
 	border: 2px solid;
 }
 
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	text-decoration: none;
+}
+
 button,
 .button,
 input[type="submit"],
 .wp-block-button__link,
 .wp-block-file__button,
-.a8c-posts-list__view-all {
+.a8c-posts-list__view-all,
+button[data-load-more-btn] {
 	border: 0;
 	border-radius: 5em;
 	text-transform: uppercase;
@@ -3980,7 +4096,10 @@ input[type="submit"].has-background:visited,
 .wp-block-file__button.has-background:visited,
 .a8c-posts-list__view-all.has-background:focus,
 .a8c-posts-list__view-all.has-background:hover,
-.a8c-posts-list__view-all.has-background:visited {
+.a8c-posts-list__view-all.has-background:visited,
+button[data-load-more-btn].has-background:focus,
+button[data-load-more-btn].has-background:hover,
+button[data-load-more-btn].has-background:visited {
 	opacity: .8;
 }
 

stratford/style.css

@@ -194,7 +194,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,
@@ -212,11 +212,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,
@@ -227,7 +227,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,
@@ -235,7 +235,7 @@ input[type="submit"]:before,
 	margin-bottom: -0.34em;
 }
 
-button:after,
+button[data-load-more-btn]:after, button:after,
 .button:after,
 input[type="submit"]:after,
 .wp-block-button__link:after,
@@ -1149,6 +1149,148 @@ 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 a {
+	color: #2c313f;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: #3e69dc;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: currentColor;
+}
+
+.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;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .cat-links {
+	color: currentColor;
+}
+
+.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: #3e69dc;
+}
+
+.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);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+	margin-bottom: calc(3 * 32px);
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
+.has-background:not(.has-background-background-color) button[data-load-more-btn],
+[class*="background-color"]:not(.has-background-background-color) button[data-load-more-btn],
+[style*="background-color"] button[data-load-more-btn] {
+	background-color: transparent;
+	border: 2px solid currentColor;
+	color: currentColor;
+}
+
 /**
  * Button
  */
@@ -3983,12 +4125,17 @@ p:not(.site-title) a:hover {
 	border: 2px solid;
 }
 
+.wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	text-decoration: none;
+}
+
 button,
 .button,
 input[type="submit"],
 .wp-block-button__link,
 .wp-block-file__button,
-.a8c-posts-list__view-all {
+.a8c-posts-list__view-all,
+button[data-load-more-btn] {
 	border: 0;
 	border-radius: 5em;
 	text-transform: uppercase;
@@ -4009,7 +4156,10 @@ input[type="submit"].has-background:visited,
 .wp-block-file__button.has-background:visited,
 .a8c-posts-list__view-all.has-background:focus,
 .a8c-posts-list__view-all.has-background:hover,
-.a8c-posts-list__view-all.has-background:visited {
+.a8c-posts-list__view-all.has-background:visited,
+button[data-load-more-btn].has-background:focus,
+button[data-load-more-btn].has-background:hover,
+button[data-load-more-btn].has-background:visited {
 	opacity: .8;
 }
 

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,39 @@
+.wp-block-a8c-blog-posts {
+	article {
+		margin-bottom: calc(3 * #{map-deep-get($config-global, "spacing", "vertical")});
+	}
+
+	.post-thumbnail img {
+		width: auto;
+	}
+
+	.entry-title {
+		a {
+			color: #{map-deep-get($config-global, "color", "primary", "default")};
+			text-decoration: underline;
+
+			&:hover {
+				color: #{map-deep-get($config-global, "color", "primary", "hover")};
+			}
+
+			.has-background:not(.has-background-background-color) &,
+			[class*="background-color"]:not(.has-background-background-color) &,
+			[style*="background-color"] & {
+				color: currentColor;
+			}
+		}
+	}
+
+	.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")};
+
+		.has-background:not(.has-background-background-color) &,
+		[class*="background-color"]:not(.has-background-background-color) &,
+		[style*="background-color"] & {
+			color: currentColor;
+		}
+	}
+}

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

@@ -0,0 +1,121 @@
+.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 {
+		a {
+			color: #{map-deep-get($config-global, "color", "primary", "default")};
+			text-decoration: underline;
+
+			&:hover {
+				color: #{map-deep-get($config-global, "color", "primary", "hover")};
+			}
+
+			.has-background:not(.has-background-background-color) &,
+			[class*="background-color"]:not(.has-background-background-color) &,
+			[style*="background-color"] & {
+				color: currentColor;
+			}
+		}
+	}
+
+	.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")};
+
+		.has-background:not(.has-background-background-color) &,
+		[class*="background-color"]:not(.has-background-background-color) &,
+		[style*="background-color"] & {
+			color: currentColor;
+		}
+
+		> 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")});
+		}
+	}
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+	margin-bottom: calc(3 * #{map-deep-get($config-global, "spacing", "vertical")});
+}
+
+button[data-load-more-btn] {
+	// Extend button style
+	@extend %button-style;
+	display: inline-block;
+
+	.has-background:not(.has-background-background-color) &,
+	[class*="background-color"]:not(.has-background-background-color) &,
+	[style*="background-color"] & {
+		background-color: transparent;
+		border: 2px solid currentColor;
+		color: currentColor;
+	}
+}

varia/style-editor.css

@@ -300,6 +300,52 @@ 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: calc(3 * 32px);
+}
+
+.wp-block-a8c-blog-posts .post-thumbnail img {
+	width: auto;
+}
+
+.wp-block-a8c-blog-posts .entry-title a {
+	color: blue;
+	text-decoration: underline;
+}
+
+.wp-block-a8c-blog-posts .entry-title a:hover {
+	color: indigo;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-title a,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-title a {
+	color: currentColor;
+}
+
+.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;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-a8c-blog-posts .entry-meta,
+[style*="background-color"] .wp-block-a8c-blog-posts .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .entry-footer,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-a8c-blog-posts .cat-links,
+[style*="background-color"]
+.wp-block-a8c-blog-posts .cat-links {
+	color: currentColor;
+}
+
 .wp-block-button {
 	/* Default Style */
 	/* Outline Style */
@@ -1042,7 +1088,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-rtl.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,118 @@ 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 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-left: 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-left: 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-left: calc(0.25 * 16px);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+	margin-bottom: calc(3 * 32px);
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
 /**
  * Button
  */

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,148 @@ 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 a {
+	color: blue;
+	text-decoration: underline;
+}
+
+.wp-block-newspack-blocks-homepage-articles article .entry-title a:hover {
+	color: indigo;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-title a,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-title a {
+	color: currentColor;
+}
+
+.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;
+}
+
+.has-background:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[class*="background-color"]:not(.has-background-background-color) .wp-block-newspack-blocks-homepage-articles article .entry-meta,
+[style*="background-color"] .wp-block-newspack-blocks-homepage-articles article .entry-meta, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .entry-footer,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .entry-footer, .has-background:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[class*="background-color"]:not(.has-background-background-color)
+.wp-block-newspack-blocks-homepage-articles article .cat-links,
+[style*="background-color"]
+.wp-block-newspack-blocks-homepage-articles article .cat-links {
+	color: currentColor;
+}
+
+.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);
+}
+
+.wp-block-newspack-blocks-homepage-articles.is-grid article {
+	margin-top: 0;
+	margin-bottom: calc(3 * 32px);
+}
+
+button[data-load-more-btn] {
+	display: inline-block;
+}
+
+.has-background:not(.has-background-background-color) button[data-load-more-btn],
+[class*="background-color"]:not(.has-background-background-color) button[data-load-more-btn],
+[style*="background-color"] button[data-load-more-btn] {
+	background-color: transparent;
+	border: 2px solid currentColor;
+	color: currentColor;
+}
+
 /**
  * Button
  */