-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
1 parent
c91a868
commit 7241d17
Showing
12 changed files
with
222 additions
and
34 deletions.
There are no files selected for viewing
65 changes: 65 additions & 0 deletions
65
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.
Oops, something went wrong.
27 changes: 27 additions & 0 deletions
27
source/wp-content/themes/wporg-news-2021/block-template-parts/content-single.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 --> |
18 changes: 18 additions & 0 deletions
18
source/wp-content/themes/wporg-news-2021/block-template-parts/post-navigation.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 --> |
7 changes: 7 additions & 0 deletions
7
source/wp-content/themes/wporg-news-2021/block-templates/single.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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"} /--> |
21 changes: 0 additions & 21 deletions
21
source/wp-content/themes/wporg-news-2021/block-templates/singular.html
This file was deleted.
Oops, something went wrong.
24 changes: 24 additions & 0 deletions
24
source/wp-content/themes/wporg-news-2021/sass/blocks/_post-content.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
} | ||
} |
3 changes: 3 additions & 0 deletions
3
source/wp-content/themes/wporg-news-2021/sass/blocks/_post-title.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
.wp-block-post-title { | ||
margin-top: 0; | ||
} |
7 changes: 6 additions & 1 deletion
7
source/wp-content/themes/wporg-news-2021/sass/blocks/_separator.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
25 changes: 25 additions & 0 deletions
25
source/wp-content/themes/wporg-news-2021/sass/post/_header.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | ||
} | ||
} | ||
} |
24 changes: 24 additions & 0 deletions
24
source/wp-content/themes/wporg-news-2021/sass/post/_navigation.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters