FSE post template and style

theme/assets/css/src/components/core-block.css

@@ -0,0 +1,47 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/** WP core block style for FSE pages. */
+
+/* Post author center div. */
+.wp-block-post-author div {
+	display: flex;
+	align-items: center;
+
+	&.wp-block-post-author__avatar {
+		margin-right: 0;
+	}
+
+}
+
+/* Link style. */
+.wp-block-post-navigation-link,
+.wp-block-post-date,
+.wp-block-post-terms {
+
+	a {
+		text-decoration: none;
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+}
+
+/* Comment block - remove auto margin which adds space in left and right. */
+.wp-block-post-comments .comments-area {
+	width: 100%;
+}

theme/assets/css/src/components/index.css

@@ -35,3 +35,4 @@
 @import "./avatar.css";
 @import "./byline.css";
 @import "./tables.css";
+@import "./core-block.css";

theme/block-templates/single.html

@@ -1,47 +1,55 @@
 <!-- wp:template-part {"slug":"header"} /-->
 
-<!-- wp:group {"tagName":"main"} -->
-<main class="wp-block-group">
-
-	<!-- wp:group {"layout":{"inherit":true}} -->
-	<div class="wp-block-group">
-		<!-- wp:post-title {"textAlign":"left","level":1} /-->
-		<!-- wp:post-featured-image /-->
-	</div>
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"7em","right":"0px","bottom":"0px","left":"0px"}}},"layout":{"wideSize":"100vw","contentSize":"840px"}} -->
+<div class="wp-block-group" style="padding-top:7em;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:post-featured-image {"className":"post-thumbnail featured-image"} /-->
+
+	<!-- wp:group -->
+	<div class="wp-block-group"></div>
 	<!-- /wp:group -->
 
-	<!-- wp:post-content {"layout":{"inherit":true}} /-->
-
-	<!-- wp:template-part {"slug":"post-meta-icons","layout":{"inherit":true}} /-->
-
-	<!-- wp:spacer {"height":150} -->
-	<div style="height:150px" aria-hidden="true" class="wp-block-spacer"></div>
-	<!-- /wp:spacer -->
-
-	<!-- wp:group {"layout":{"inherit":true},"style":{"spacing":{"padding":{"top":"30px","right":"20px","bottom":"0px","left":"20px"}}}} -->
-	<div class="wp-block-group" style="padding-top:30px;padding-right:20px;padding-bottom:0px;padding-left:20px">
-		<!-- wp:columns {"align":"wide","className":"next-prev-links"} -->
-		<div class="wp-block-columns alignwide next-prev-links">
-			<!-- wp:column -->
-			<div class="wp-block-column">
-				<!-- wp:post-navigation-link {"type":"previous","label":"←","showTitle":true} /-->
-			</div>
-			<!-- /wp:column -->
-			<!-- wp:column -->
-			<div class="wp-block-column">
-				<!-- wp:post-navigation-link {"textAlign":"right","label":"→","showTitle":true} /-->
-			</div>
-			<!-- /wp:column -->
-		</div>
-		<!-- /wp:columns -->
-		<!-- wp:spacer {"height":150} -->
-		<div style="height:150px" aria-hidden="true" class="wp-block-spacer"></div>
-		<!-- /wp:spacer -->
-		<!-- wp:post-comments /-->
-	</div>
+	<!-- wp:group {"className":"mdc-typography\u002d\u002doverline","layout":{"type":"flex","flexWrap":"wrap"}} -->
+	<div class="wp-block-group mdc-typography--overline"><!-- wp:post-date {"format":"F j, Y","isLink":true} /-->
+
+		<!-- wp:paragraph -->
+		<p>⌙</p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:post-terms {"term":"category"} /--></div>
 	<!-- /wp:group -->
 
-</main>
+	<!-- wp:post-title {"textAlign":"left","level":1,"className":"mdc-typography mdc-typography\u002d\u002dheadline2 entry-title"} /-->
+
+	<!-- wp:post-author {"showBio":false} /--></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
+<main class="wp-block-group" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:post-content {"layout":{"inherit":true}} /--></main>
+<!-- /wp:group -->
+
+<!-- wp:group {"tagName":"footer","style":{"spacing":{"padding":{"top":"3rem","right":"0rem","bottom":"1.5rem","left":"1rem"}}},"layout":{"contentSize":"840px","wideSize":"100vw"}} -->
+<footer class="wp-block-group" style="padding-top:3rem;padding-right:0rem;padding-bottom:1.5rem;padding-left:1rem"><!-- wp:group {"className":"tags-links","layout":{"type":"flex","allowOrientation":false}} -->
+	<div class="wp-block-group tags-links"><!-- wp:paragraph {"style":{"typography":{"fontSize":"24px"}}} -->
+		<p style="font-size:24px"><span class="material-icons">label</span></p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:post-terms {"term":"post_tag"} /--></div>
+	<!-- /wp:group --></footer>
+<!-- /wp:group -->
+
+<!-- wp:group {"tagName":"footer","layout":{"contentSize":"840px","wideSize":"100vw"}} -->
+<footer class="wp-block-group"><!-- wp:columns {"style":{"spacing":{"margin":{"top":"0em","bottom":"1.5em"}}},"className":"next-prev-links post-navigation section-inner"} -->
+	<div class="wp-block-columns next-prev-links post-navigation section-inner" style="margin-top:0em;margin-bottom:1.5em"><!-- wp:column -->
+		<div class="wp-block-column"><!-- wp:post-navigation-link {"type":"previous","label":"←","showTitle":true,"linkLabel":true} /--></div>
+		<!-- /wp:column -->
+
+		<!-- wp:column -->
+		<div class="wp-block-column"><!-- wp:post-navigation-link {"textAlign":"right","label":"→","showTitle":true,"linkLabel":true} /--></div>
+		<!-- /wp:column --></div>
+	<!-- /wp:columns --></footer>
+<!-- /wp:group -->
+
+<!-- wp:group {"layout":{"wideSize":"100vw","contentSize":"840px"}} -->
+<div class="wp-block-group"><!-- wp:post-comments /--></div>
 <!-- /wp:group -->
 
 <!-- wp:template-part {"slug":"footer","className":"site-footer-container"} /-->