Single post view

source/wp-content/themes/wporg-news-2021/block-template-parts/content-single.html

@@ -0,0 +1,27 @@
+<!-- wp:group {"tagName":"article","layout":{"inherit":true}} -->
+<article class="wp-block-group">
+	<!-- wp:group {"tagName":"header","align":"wide","className":"entry-header"} -->
+	<header class="wp-block-group alignwide entry-header">
+		<!-- wp:group {"className":"entry-meta"} -->
+		<div class="wp-block-group entry-meta">
+			<!-- wp:post-date /-->
+			By <!-- wp:post-author {"showAvatar":false} /-->
+			in <!-- wp:post-terms {"term":"category"} /-->
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:post-title {"level":1} /-->
+	</header>
+	<!-- /wp:group -->
+
+	<!-- wp:separator {"color":"light-grey","align":"full","className":"is-style-wide"} -->
+	<hr class="wp-block-separator alignfull has-text-color has-background has-light-grey-background-color has-light-grey-color is-style-wide"/>
+	<!-- /wp:separator -->
+
+	<!-- wp:group {"tagName":"section","align":"full"} -->
+	<section class="wp-block-group alignfull">
+		<!-- wp:post-content {"layout":{"inherit":true}} /-->
+	</section>
+	<!-- /wp:group -->
+</article>
+<!-- /wp:group -->

source/wp-content/themes/wporg-news-2021/block-template-parts/post-navigation.html

@@ -0,0 +1,18 @@
+<!-- wp:separator {"color":"light-grey","align":"full","className":"is-style-wide"} -->
+<hr class="wp-block-separator alignfull has-text-color has-background has-light-grey-background-color has-light-grey-color is-style-wide"/>
+<!-- /wp:separator -->
+
+<!-- wp:group {"tagName":"nav","align":"wide","className":"post-navigation"} -->
+<nav class="wp-block-group alignwide post-navigation">
+	<!-- wp:group {"className":"post-navigation-previous"} -->
+	<div class="wp-block-group post-navigation-previous">
+		<!-- wp:post-navigation-link {"type":"previous","showTitle":true,"label":"Previous"} /-->
+	</div>
+	<!-- /wp:group -->
+	<!-- wp:group {"className":"post-navigation-next"} -->
+	<div class="wp-block-group post-navigation-next">
+		<!-- wp:post-navigation-link {"type":"next","showTitle":true,"label":"Next"} /-->
+	</div>
+	<!-- /wp:group -->
+</nav>
+<!-- /wp:group -->

source/wp-content/themes/wporg-news-2021/block-templates/single.html

@@ -0,0 +1,7 @@
+<!-- wp:template-part {"slug":"header","theme":"wporg-news-2021","tagName":"header","className":"site-header-container"} /-->
+
+<!-- wp:template-part {"slug":"content-single","theme":"wporg-news-2021","tagName":"main","className":"site-content-container content-single"} /-->
+
+<!-- wp:template-part {"slug":"post-navigation","theme":"wporg-news-2021","className":"post-navigation-container","layout":{"inherit":true}} /-->
+
+<!-- wp:template-part {"slug":"footer","theme":"wporg-news-2021","tagName":"footer","className":"site-footer-container"} /-->

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

@@ -0,0 +1,24 @@
+@include break-medium {
+	// Use a dynamic margin to ensure that the content column is responsively aligned on the right side, instead of
+	// centered, while still allowing individual blocks with "wide" or "full" alignment to expand appropriately.
+	//
+	// In this case, Flexbox doesn't work because it breaks the layout for things like a left- or right-aligned image
+	// with paragraph text wrapping around it.
+	.single .wp-block-post-content > * {
+		// The first line in min is for when the viewport is narrower than the max wide layout.
+		// The second line in min is for when the viewport is wider than the max wide layout.
+		margin-left: calc(
+			min(
+				100% - var(--wp--custom--layout--content-size),
+				50% - (var(--wp--custom--layout--wide-size) / 2) + (var(--wp--custom--layout--wide-size) - var(--wp--custom--layout--content-size))
+			)
+		) !important;
+
+		&.alignwide {
+			margin-left: auto !important;
+		}
+		&.alignfull {
+			margin-left: inherit !important;
+		}
+	}
+}

source/wp-content/themes/wporg-news-2021/sass/blocks/_post-title.scss

@@ -0,0 +1,3 @@
+.wp-block-post-title {
+	margin-top: 0;
+}

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

@@ -1,7 +1,12 @@
 .wp-block-separator {
 	margin: var(--wp--custom--separator--margin);
 	opacity: var(--wp--custom--separator--opacity); // Mirror controls that Gutenberg theme.css offers: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/separator/theme.scss
+
+	&.is-style-wide {
+		border-top-width: 0;
+	}
+
 	&:not(.is-style-wide){
 		width: var(--wp--custom--separator--width);
 	}
-}
+}

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

@@ -20,6 +20,8 @@
 @import "blocks/paragraph";
 @import "blocks/post-author";
 @import "blocks/post-comments";
+@import "blocks/post-content";
+@import "blocks/post-title";
 @import "blocks/pullquote";
 @import "blocks/query-pagination";
 @import "blocks/quote";
@@ -29,4 +31,6 @@
 @import "blocks/table";
 @import "blocks/video";
 @import "blocks/columns";
-@import "post/meta";
+@import "post/header";
+@import "post/meta";
+@import "post/navigation";

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

@@ -0,0 +1,25 @@
+.entry-header {
+	.wp-block-post-date {
+		line-height: 3.4;
+	}
+
+	.wp-block-post-author,
+	.wp-block-post-terms {
+		display: inline-block;
+	}
+}
+
+@include break-large {
+	.entry-header {
+		display: flex;
+		justify-content: space-between;
+
+		.entry-meta {
+			max-width: calc(var(--wp--custom--layout--wide-size) - var(--wp--custom--layout--content-size) - 2em);
+		}
+
+		.wp-block-post-title {
+			width: var(--wp--custom--layout--content-size);
+		}
+	}
+}

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

@@ -0,0 +1,24 @@
+.post-navigation {
+	display: flex;
+	justify-content: space-between;
+
+	.wp-block-post-navigation-link {
+		display: inline-block;
+
+		&.post-navigation-link-previous {
+			a:before {
+				content: "\00B7\0020";
+			}
+		}
+
+		&.post-navigation-link-next {
+			display: flex;
+			flex-direction: row-reverse;
+
+			a:after {
+				content: "\0020\00B7";
+				padding-right: 0.3em;
+			}
+		}
+	}
+}

source/wp-content/themes/wporg-news-2021/theme.json

@@ -301,12 +301,13 @@
 				}
 			},
 			"layout": {
-				"contentSize": "620px"
+				"contentSize": "680px",
+				"wideSize": "1070px"
 			},
 			"list": {
 				"spacing": {
 					"padding": {
-						"left": "calc( 2 * var(--wp--custom--margin--horizontal) )"
+						"left": "var(--wp--custom--margin--horizontal)"
 					}
 				}
 			},
@@ -390,8 +391,8 @@
 			}
 		},
 		"layout": {
-			"contentSize": "620px",
-			"wideSize": "1000px"
+			"contentSize": "var(--wp--custom--layout--content-size)",
+			"wideSize": "var(--wp--custom--layout--wide-size)"
 		},
 		"spacing": {
 			"customPadding": true,
@@ -496,13 +497,6 @@
 					"fontSize": "var(--wp--preset--font-size--normal)"
 				}
 			},
-			"core/post-title": {
-				"typography": {
-					"fontFamily": "var(--wp--custom--heading--typography--font-family)",
-					"fontSize": "var(--wp--custom--h1--typography--font-size)",
-					"lineHeight": "var(--wp--custom--h1--typography--line-height)"
-				}
-			},
 			"core/post-date": {
 				"color": {
 					"link": "var(--wp--custom--color--foreground)",
@@ -512,6 +506,13 @@
 					"fontSize": "var(--wp--preset--font-size--small)"
 				}
 			},
+			"core/post-title": {
+				"typography": {
+					"fontFamily": "var(--wp--custom--heading--typography--font-family)",
+					"fontSize": "var(--wp--custom--h1--typography--font-size)",
+					"lineHeight": "var(--wp--custom--h1--typography--line-height)"
+				}
+			},
 			"core/pullquote": {
 				"border": {
 					"style": "solid",
@@ -654,6 +655,12 @@
 		{
 			"name": "footer",
 			"area": "footer"
+		},
+		{
+			"name": "content-single"
+		},
+		{
+			"name": "post-navigation"
 		}
 	]
 }