Skip to content

Commit

Permalink
Single post view (#21)
Browse files Browse the repository at this point in the history
Adds block templates and template parts, tweaks the theme.json file, and adds some rules to the stylesheet to create the single post view.

This includes a responsive layout for the post title/meta area and the main post content column. The post content also accommodates wide and full alignment on individual blocks.

This doesn't include the global header or footer. It also doesn't include the social sharing links or like button shown in the mockup, because those elements are not yet available as site blocks. (There's an issue for the Like button, couldn't find one for social sharing icons.)

The mockup doesn't include a comment section, and it appears that the News site does not currently have comments enabled, so that has also been omitted.

Fixes #17
  • Loading branch information
coreymckrill authored Aug 27, 2021
1 parent c91a868 commit 7241d17
Show file tree
Hide file tree
Showing 12 changed files with 222 additions and 34 deletions.
65 changes: 65 additions & 0 deletions source/wp-content/themes/wporg-news-2021/assets/ponyfill.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
@@ -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 -->
Original file line number Diff line number Diff line change
@@ -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 -->
Original file line number Diff line number Diff line change
@@ -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"} /-->

This file was deleted.

Original file line number Diff line number Diff line change
@@ -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;
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.wp-block-post-title {
margin-top: 0;
}
Original file line number Diff line number Diff line change
@@ -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);
}
}
}
6 changes: 5 additions & 1 deletion source/wp-content/themes/wporg-news-2021/sass/ponyfill.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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";
25 changes: 25 additions & 0 deletions source/wp-content/themes/wporg-news-2021/sass/post/_header.scss
Original file line number Diff line number Diff line change
@@ -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);
}
}
}
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
29 changes: 18 additions & 11 deletions source/wp-content/themes/wporg-news-2021/theme.json
Original file line number Diff line number Diff line change
Expand Up @@ -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)"
}
}
},
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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)",
Expand All @@ -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",
Expand Down Expand Up @@ -654,6 +655,12 @@
{
"name": "footer",
"area": "footer"
},
{
"name": "content-single"
},
{
"name": "post-navigation"
}
]
}

0 comments on commit 7241d17

Please sign in to comment.