Curator: revise single template (#5987)

* Edited curator/templates/single.html to meet the design suggested on issues #5931

* Fixing pagination separator width and border size

* Removing theme slug on included footer and header template parts

* Fixing pagination font-family

* Finalizing requested changes

* Finalizing requested changes

* Remove else if and update cover.

* Normal case the text.

* Normal case the text.

* Implement comments count with headings, refine spacing.

* Use cover within a cover hack, update opacity and height of the cover.

* Style the links using attributes, remove arrows for now.

* Turn on appearanceTools

* Simplify layout so alignment works.

* Added 120px top and bottom padding for the inner Cover block in post-hero

* Modified fontSize for comment-content, edit link and reply link blocks

* Added 20px right and left padding for inner cover block

* Change post terms to inherit the link color.

* Apply inverted hover styles to site title, post terms, and post nav links.

* Add back chevrons.

* Use clamp values instead for left right padding.

Co-authored-by: Jeff Ong <jonger4@gmail.com>

curator/patterns/post-comments.php

@@ -0,0 +1,65 @@
+<?php
+/**
+ * Title: Post Comments
+ * Slug: curator/post-comments
+ * Inserter: no
+ */
+
+?>
+
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group"><!-- wp:post-comments-form /--></div>
+<!-- /wp:group -->
+
+<!-- wp:spacer {"height":"20px"} -->
+<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"0px"}},"layout":{"type":"flex","flexWrap":"nowrap","orientation":"horizontal","justifyContent":"left"}} -->
+<div class="wp-block-group"><!-- wp:heading {"level":3} -->
+<h3>Comments (</h3>
+<!-- /wp:heading -->
+
+<!-- wp:post-comments-count {"fontSize":"x-large"} /-->
+
+<!-- wp:heading {"level":3} -->
+<h3>)</h3>
+<!-- /wp:heading --></div>
+<!-- /wp:group -->
+
+<!-- wp:spacer {"height":"20px"} -->
+<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group"><!-- wp:comments-query-loop -->
+<div class="wp-block-comments-query-loop"><!-- wp:comment-template -->
+<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<div class="wp-block-group"><!-- wp:comment-author-name {"isLink":false,"fontSize":"large","style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} /-->
+
+<!-- wp:comment-date {"isLink":false,"style":{"typography":{"fontStyle":"italic","fontWeight":"200"}},"textColor":"foreground"} /--></div>
+<!-- /wp:group -->
+
+<!-- wp:comment-content {"fontSize":"medium","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"20px"}}}} /-->
+
+<!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"},"padding":{"top":"0px","right":"20px","bottom":"0px","left":"20px"}}},"layout":{"type":"flex"}} -->
+<div class="wp-block-group" style="margin-top:0px;margin-bottom:0px;padding-top:0px;padding-right:20px;padding-bottom:0px;padding-left:20px"><!-- wp:comment-reply-link {"fontSize":"small"} /-->
+
+<!-- wp:comment-edit-link {"fontSize":"small"} /--></div>
+<!-- /wp:group --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->
+<!-- /wp:comment-template -->
+
+<!-- wp:comments-pagination -->
+<!-- wp:comments-pagination-previous /-->
+
+<!-- wp:comments-pagination-numbers /-->
+
+<!-- wp:comments-pagination-next /-->
+<!-- /wp:comments-pagination --></div>
+<!-- /wp:comments-query-loop --></div>
+<!-- /wp:group -->

curator/patterns/post-hero.php

@@ -0,0 +1,20 @@
+<?php
+/**
+ * Title: Single Post Hero
+ * Slug: curator/post-hero
+ * Inserter: no
+ */
+
+?>
+
+<!-- wp:cover {"overlayColor":"foreground","minHeightUnit":"vh","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
+<div class="wp-block-cover" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:cover {"useFeaturedImage":true,"dimRatio":40,"overlayColor":"foreground","minHeight":440,"minHeightUnit":"px","style":{"spacing":{"padding":{"top":"120px","right":"clamp(20px, 4vw, 90px)","bottom":"120px","left":"clamp(20px, 4vw, 90px)"}}}} -->
+<div class="wp-block-cover" style="min-height:440px;padding-top:120px;padding-right:clamp(20px, 4vw, 90px);padding-bottom:120px;padding-left:clamp(20px, 4vw, 90px)"><span aria-hidden="true" class="wp-block-cover__background has-foreground-background-color has-background-dim-40 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
+<div class="wp-block-group"><!-- wp:post-terms {"term":"category","style":{"typography":{"fontStyle":"normal","fontWeight":"700"},"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"textColor":"background","fontSize":"medium"} /-->
+
+<!-- wp:post-date {"textColor":"background","fontSize":"medium"} /--></div>
+<!-- /wp:group -->
+
+<!-- wp:post-title {"textAlign":"center","level":1,"textColor":"background"} /--></div></div>
+<!-- /wp:cover --></div></div>
+<!-- /wp:cover -->

curator/patterns/post-navigation.php

@@ -0,0 +1,28 @@
+<?php
+/**
+ * Title: Post Navigation
+ * Slug: curator/post-navigation
+ * Inserter: no
+ */
+
+?>
+
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","bottom":"30px"}},"border":{"top":{"color":"var:preset|color|foreground","width":"1px"},"bottom":{"color":"var:preset|color|foreground","width":"1px"}}},"className":"alignfull","layout":{"inherit":false}} -->
+<div class="wp-block-group alignfull" style="border-top-color:var(--wp--preset--color--foreground);border-top-width:1px;border-bottom-color:var(--wp--preset--color--foreground);border-bottom-width:1px;padding-top:30px;padding-bottom:30px"><!-- wp:group {"layout":{"inherit":true}} -->
+<div class="wp-block-group"><!-- wp:columns {"isStackedOnMobile":false} -->
+<div class="wp-block-columns is-not-stacked-on-mobile"><!-- wp:column {"width":"50%","layout":{"inherit":true}} -->
+<div class="wp-block-column" style="flex-basis:50%"><!-- wp:group {"style":{"spacing":{"blockGap":"2px"}},"className":"curator-post-navigation","layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<div class="wp-block-group curator-post-navigation">
+
+<!-- wp:post-navigation-link {"type":"previous","label":"← <?php echo esc_html__( 'Previous Post', 'curator' ); ?>","style":{"typography":{"textTransform":"uppercase","textDecoration":"none"},"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}}},"fontSize":"large","fontFamily":"heading-font"} /--></div>
+<!-- /wp:group --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"blockGap":"2px"}},"className":"curator-post-navigation","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
+<div class="wp-block-group curator-post-navigation"><!-- wp:post-navigation-link {"label":"<?php echo esc_html__( 'Next Post', 'curator' ); ?> →","style":{"typography":{"textTransform":"uppercase","textDecoration":"none"},"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}}},"fontSize":"large","fontFamily":"heading-font"} /--></div>
+<!-- /wp:group --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->

curator/style.css

@@ -3,21 +3,23 @@ Theme Name: Curator
 Theme URI: https://wordpress.com/theme/curator
 Author: Automattic
 Author URI: https://automattic.com/
-Description: 
+Description:
 Requires at least: 5.8
 Tested up to: 5.9
 Requires PHP: 5.7
 Version: 0.0.6
 License: GNU General Public License v2 or later
 License URI: https://raw.githubusercontent.com/Automattic/themes/trunk/LICENSE
-Template: 
+Template:
 Text Domain: curator
 Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, rtl-language-support, theme-options, threaded-comments, translation-ready, wide-blocks
-*//*
+*/
+
+/*
  * Font smoothing
  */
 
- body {
+body {
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-font-smoothing: antialiased;
 }
@@ -28,7 +30,7 @@ Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, feature
  * https://github.com/WordPress/gutenberg/issues/27075
  */
 
- .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
+.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
 	padding: 0;
 }
 .wp-block-button__link:visited {
@@ -115,6 +117,7 @@ a:not(
 	.wp-block-button__link
 ) {
 	padding: .4rem 0;
+	text-decoration: inherit; /* Needed so the link styles will be inherited correctly from theme.json */
 	text-underline-offset: .1rem;
 }
 
@@ -143,13 +146,16 @@ a:not(
 }
 
 /*
- * Navigation Link Styles
+ * Navigation and Other Link Styles
  */
 
 :is(
 	.wp-block-pages-list__item .wp-block-pages-list__item__link,
 	.wp-block-navigation-link__content,
-	.wp-block-navigation-item__content
+	.wp-block-navigation-item__content,
+	.wp-block-site-title a,
+	.wp-block-post-navigation-link a,
+	.wp-block-post-terms a
 ):hover {
 	text-decoration: underline;
 }
@@ -157,7 +163,10 @@ a:not(
 :is(
 	.wp-block-pages-list__item .wp-block-pages-list__item__link,
 	.wp-block-navigation-link__content,
-	.wp-block-navigation-item__content
+	.wp-block-navigation-item__content,
+	.wp-block-site-title a,
+	.wp-block-post-navigation-link a,
+	.wp-block-post-terms a
 ):focus {
 	text-decoration-line: underline;
 	text-decoration-style: dotted;
@@ -166,12 +175,14 @@ a:not(
 :is(
 	.wp-block-pages-list__item .wp-block-pages-list__item__link,
 	.wp-block-navigation-link__content,
-	.wp-block-navigation-item__content
+	.wp-block-navigation-item__content,
+	.wp-block-site-title a,
+	.wp-block-post-navigation-link a,
+	.wp-block-post-terms a
 ):active {
 	text-decoration: underline;
 }
 
-
 /*
  * Alignment styles, borrowed from Twenty Twenty-Two.
  * These rules are temporary, and should not be relied on or
@@ -236,4 +247,13 @@ body > .is-root-container > .wp-block-template-part > .wp-block-cover,
 	padding-bottom: var(--wp--custom--gap--vertical);
 	padding-right: var(--wp--custom--gap--horizontal);
 	padding-left: var(--wp--custom--gap--horizontal);
-}
+}
+
+/*
+ * Allows comment count to be displayed in line.
+ * i.e. "Comments (0)"
+ */
+
+.wp-block-post-comments-count {
+	display: inline;
+}

curator/templates/single.html

@@ -1,28 +1,29 @@
 <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
 
-<!-- wp:group {"layout":{"inherit":true}} -->
-<div class="wp-block-group">
-<!-- wp:post-title /-->
-</div>
-<!-- /wp:group -->
+<!-- wp:pattern {"slug":"curator/post-hero"} /-->
+
+<!-- wp:spacer {"height":"60px"} -->
+<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
 
 <!-- wp:group {"tagName":"main"} -->
-<main class="wp-block-group">
-<!-- wp:post-featured-image {"align":"full"} /-->
+<main class="wp-block-group"><!-- wp:post-content {"layout":{"inherit":true}} /--></main>
+<!-- /wp:group -->
 
-<!-- wp:post-content {"layout":{"inherit":true}} /-->
+<!-- wp:spacer {"height":"60px"} -->
+<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
 
-<!-- wp:template-part {"slug":"post-meta"} /-->
-</main>
-<!-- /wp:group -->
+<!-- wp:pattern {"slug":"curator/post-navigation"} /-->
 
-<!-- wp:group {"layout":{"inherit":true}} -->
-<div class="wp-block-group">
-    <!-- wp:spacer {"height":60} -->
-    <div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
-    <!-- /wp:spacer -->
-    <!-- wp:post-comments /-->
-</div>
-<!-- /wp:group -->
+<!-- wp:spacer {"height":"60px"} -->
+<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:pattern {"slug":"curator/post-comments"} /-->
+
+<!-- wp:spacer -->
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
 
 <!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

curator/theme.json

@@ -27,6 +27,7 @@
 		}
 	],
 	"settings": {
+		"appearanceTools": true,
 		"border": {
 			"color": true,
 			"radius": true,
@@ -235,7 +236,7 @@
 				"elements": {
 					"link": {
 						"color": {
-							"text": "var(--wp--preset--color--foreground)"
+							"text": "inherit"
 						},
 						"typography": {
 							"textDecoration": "none",