Theme: Apply grid layout to Latest Posts.

See #18

source/wp-content/themes/wporg-news-2021/block-template-parts/front-page/latest-posts.html

@@ -1,8 +1,8 @@
 <!-- `perPage` must match the value in `offset_paged_posts()`. -->
-<!-- wp:query {"query":{"perPage":5},"tagName":"section","className":"front__latest-posts"} -->
-<section class="front__latest-posts">
-	<!-- wp:heading {"level":2} -->
-	<h2>Latest Posts</h2>
+<!-- wp:query {"query":{"perPage":5},"tagName":"section","className":"front__latest-posts","align":"full"} -->
+<section class="front__latest-posts alignfull">
+	<!-- wp:heading {"level":2,"className":"front__latest-posts-heading"} -->
+	<h2 class="front__latest-posts-heading">Latest Posts</h2>
 	<!-- /wp:heading -->
 
 	<!-- wp:post-template -->
@@ -21,9 +21,7 @@ <h2>Latest Posts</h2>
 	<!-- /wp:post-template -->
 
 	<!-- wp:query-pagination -->
-	<div class="wp-block-query-pagination">
 		<!-- wp:query-pagination-next {"label":"See All Posts"} /-->
-	</div>
 	<!-- /wp:query-pagination -->
 </section>
 <!-- /wp:query -->

source/wp-content/themes/wporg-news-2021/sass/base/_alignment.scss

@@ -22,6 +22,7 @@
 
 		// However any containers that "bust out" should re-apply that gap but this time using padding instead of margins.
 		&.wp-block-template-part,
+		&.wp-block-template-part > section,
 		&.wp-block-columns,
 		&.wp-block-group {
 			@extend %edge-spacing-padding;

source/wp-content/themes/wporg-news-2021/sass/base/_layout.scss

@@ -23,3 +23,27 @@ body.admin-bar {
 		min-height: calc( 100vh - var(--wpadmin-bar--height) );
 	}
 }
+
+%two-column-grid-container {
+	@include break-wide() {
+		display: grid;
+		grid-template-columns:
+			calc( var(--wp--custom--layout--content-meta-size) - 32px )
+			auto
+		;
+
+		/*
+		 * This defines the minimum horizontal gap. An additional implicit gap is created because the right column
+		 * contents have a `max-width` and are justified in the center.
+		 */
+		grid-gap: 0 var( --wp--style--block-gap );
+	}
+}
+
+%two-column-grid-right-column {
+	@include break-wide() {
+		justify-self: center;
+		width: var(--wp--custom--layout--content-size);
+		max-width: var(--wp--custom--layout--content-size);
+	}
+}

source/wp-content/themes/wporg-news-2021/sass/components/front-page/_front-page.scss

@@ -15,18 +15,8 @@ body.news-front-page {
 	.site-content-container {
 		margin-top: 0;
 
-		> .wp-block-template-part > section {
-			padding-top: var(--wp--custom--alignment--edge-spacing);
-			padding-bottom: var(--wp--custom--alignment--edge-spacing);
-		}
-	}
-
-	.front__latest-release,
-	.front__latest-posts {
-		h2 {
-			@include break-small() {
-				border-right: 1px solid var(--wp--preset--color--blue-2);
-			}
+		> .wp-block-template-part {
+			margin-top: 0;
 		}
 	}
 }

source/wp-content/themes/wporg-news-2021/sass/components/front-page/_latest-posts.scss

@@ -0,0 +1,40 @@
+body.news-front-page .front__latest-posts {
+	@extend %two-column-grid-container;
+
+	@include break-wide() {
+		grid-template-areas:
+			"latest-posts   post-titles"
+			"see-all-posts  post-titles"
+		;
+	}
+
+	.front__latest-posts-heading {
+		padding-top: var(--wp--custom--alignment--edge-spacing);
+
+		@include break-wide() {
+			grid-area: latest-posts;
+			border-right: 1px solid var(--wp--preset--color--light-grey);
+		}
+	}
+
+	.wp-block-post-template {
+		@extend %two-column-grid-right-column;
+
+		@include break-wide() {
+			grid-area: post-titles;
+			margin-top: 0;
+			padding-top: var(--wp--custom--alignment--edge-spacing);
+			padding-bottom: var(--wp--custom--alignment--edge-spacing);
+		}
+	}
+
+	.wp-block-query-pagination {
+		margin-top: 0;
+
+		@include break-wide() {
+			grid-area: see-all-posts;
+			padding-bottom: var(--wp--custom--alignment--edge-spacing);
+			border-right: 1px solid var(--wp--preset--color--light-grey);
+		}
+	}
+}

source/wp-content/themes/wporg-news-2021/sass/style.scss

@@ -78,6 +78,7 @@ GNU General Public License for more details.
 // Specific templates are after global components, so they can override default styles.
 @import "components/front-page/front-page";
 @import "components/front-page/latest-release";
+@import "components/front-page/latest-posts";
 @import "components/front-page/people-of-wordpress";
 @import "components/categories";
 @import "components/404";