Skip to content
This repository has been archived by the owner on Feb 17, 2025. It is now read-only.

Curator: revise single template #5987

Merged
merged 21 commits into from
Jun 13, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
239513c
Edited curator/templates/single.html to meet the design suggested on …
PeterNdomano May 10, 2022
20f8cb0
Fixing pagination separator width and border size
PeterNdomano May 12, 2022
c34379c
Removing theme slug on included footer and header template parts
PeterNdomano May 12, 2022
7f88336
Fixing pagination font-family
PeterNdomano May 12, 2022
9c791b5
Finalizing requested changes
PeterNdomano May 16, 2022
bc9ef8e
Finalizing requested changes
PeterNdomano May 16, 2022
d34caa4
Remove else if and update cover.
jffng May 26, 2022
2f2420f
Normal case the text.
jffng May 26, 2022
69e4040
Normal case the text.
jffng May 26, 2022
977d214
Implement comments count with headings, refine spacing.
jffng May 26, 2022
5a78414
Use cover within a cover hack, update opacity and height of the cover.
jffng May 26, 2022
574c08b
Style the links using attributes, remove arrows for now.
jffng May 26, 2022
49f1519
Turn on appearanceTools
jffng May 26, 2022
516b60c
Simplify layout so alignment works.
jffng May 26, 2022
5908e74
Added 120px top and bottom padding for the inner Cover block in post-…
PeterNdomano May 27, 2022
561cb42
Modified fontSize for comment-content, edit link and reply link blocks
PeterNdomano May 27, 2022
db361da
Added 20px right and left padding for inner cover block
PeterNdomano May 29, 2022
ad26297
Change post terms to inherit the link color.
jffng Jun 13, 2022
fdadfc0
Apply inverted hover styles to site title, post terms, and post nav l…
jffng Jun 13, 2022
2ce9150
Add back chevrons.
jffng Jun 13, 2022
d6529ca
Use clamp values instead for left right padding.
jffng Jun 13, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 65 additions & 0 deletions curator/patterns/post-comments.php
Original file line number Diff line number Diff line change
@@ -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 -->
20 changes: 20 additions & 0 deletions curator/patterns/post-hero.php
Original file line number Diff line number Diff line change
@@ -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 -->
28 changes: 28 additions & 0 deletions curator/patterns/post-navigation.php
Original file line number Diff line number Diff line change
@@ -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 -->
42 changes: 31 additions & 11 deletions curator/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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 {
Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -143,21 +146,27 @@ 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;
}

: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;
Expand All @@ -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
Expand Down Expand Up @@ -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;
}
39 changes: 20 additions & 19 deletions curator/templates/single.html
Original file line number Diff line number Diff line change
@@ -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"} /-->
3 changes: 2 additions & 1 deletion curator/theme.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
}
],
"settings": {
"appearanceTools": true,
"border": {
"color": true,
"radius": true,
Expand Down Expand Up @@ -235,7 +236,7 @@
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--foreground)"
"text": "inherit"
},
"typography": {
"textDecoration": "none",
Expand Down