diff --git a/source/wp-content/themes/wporg-news-2021/assets/ponyfill.css b/source/wp-content/themes/wporg-news-2021/assets/ponyfill.css
index c667be3a..7039af6f 100644
--- a/source/wp-content/themes/wporg-news-2021/assets/ponyfill.css
+++ b/source/wp-content/themes/wporg-news-2021/assets/ponyfill.css
@@ -659,6 +659,22 @@ p.has-background {
margin-bottom: var(--wp--custom--margin--baseline);
}
+@media (min-width: 782px) {
+ .single .wp-block-post-content > * {
+ 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;
+ }
+ .single .wp-block-post-content > *.alignwide {
+ margin-left: auto !important;
+ }
+ .single .wp-block-post-content > *.alignfull {
+ margin-left: inherit !important;
+ }
+}
+
+.wp-block-post-title {
+ margin-top: 0;
+}
+
.wp-block-pullquote.is-style-solid-color,
.wp-block-pullquote {
text-align: var(--wp--custom--pullquote--typography--text-align);
@@ -854,6 +870,10 @@ p.has-background {
opacity: var(--wp--custom--separator--opacity);
}
+.wp-block-separator.is-style-wide {
+ border-top-width: 0;
+}
+
.wp-block-separator:not(.is-style-wide) {
width: var(--wp--custom--separator--width);
}
@@ -953,6 +973,28 @@ p.has-background {
margin-bottom: unset;
}
+.entry-header .wp-block-post-date {
+ line-height: 3.4;
+}
+
+.entry-header .wp-block-post-author,
+.entry-header .wp-block-post-terms {
+ display: inline-block;
+}
+
+@media (min-width: 960px) {
+ .entry-header {
+ display: flex;
+ justify-content: space-between;
+ }
+ .entry-header .entry-meta {
+ max-width: calc(var(--wp--custom--layout--wide-size) - var(--wp--custom--layout--content-size) - 2em);
+ }
+ .entry-header .wp-block-post-title {
+ width: var(--wp--custom--layout--content-size);
+ }
+}
+
.post-meta {
display: flex;
}
@@ -998,4 +1040,27 @@ p.has-background {
mask-image: url(svg/post-tag.svg);
}
+.post-navigation {
+ display: flex;
+ justify-content: space-between;
+}
+
+.post-navigation .wp-block-post-navigation-link {
+ display: inline-block;
+}
+
+.post-navigation .wp-block-post-navigation-link.post-navigation-link-previous a:before {
+ content: "\00B7\0020";
+}
+
+.post-navigation .wp-block-post-navigation-link.post-navigation-link-next {
+ display: flex;
+ flex-direction: row-reverse;
+}
+
+.post-navigation .wp-block-post-navigation-link.post-navigation-link-next a:after {
+ content: "\0020\00B7";
+ padding-right: 0.3em;
+}
+
/*# sourceMappingURL=ponyfill.css.map */
\ No newline at end of file
diff --git a/source/wp-content/themes/wporg-news-2021/block-template-parts/content-single.html b/source/wp-content/themes/wporg-news-2021/block-template-parts/content-single.html
new file mode 100644
index 00000000..5fdf81da
--- /dev/null
+++ b/source/wp-content/themes/wporg-news-2021/block-template-parts/content-single.html
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/source/wp-content/themes/wporg-news-2021/block-template-parts/post-navigation.html b/source/wp-content/themes/wporg-news-2021/block-template-parts/post-navigation.html
new file mode 100644
index 00000000..ba904bf1
--- /dev/null
+++ b/source/wp-content/themes/wporg-news-2021/block-template-parts/post-navigation.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
diff --git a/source/wp-content/themes/wporg-news-2021/block-templates/single.html b/source/wp-content/themes/wporg-news-2021/block-templates/single.html
new file mode 100644
index 00000000..cfbafd95
--- /dev/null
+++ b/source/wp-content/themes/wporg-news-2021/block-templates/single.html
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
diff --git a/source/wp-content/themes/wporg-news-2021/block-templates/singular.html b/source/wp-content/themes/wporg-news-2021/block-templates/singular.html
deleted file mode 100644
index 39955d08..00000000
--- a/source/wp-content/themes/wporg-news-2021/block-templates/singular.html
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/source/wp-content/themes/wporg-news-2021/sass/blocks/_post-content.scss b/source/wp-content/themes/wporg-news-2021/sass/blocks/_post-content.scss
new file mode 100644
index 00000000..c12d4c71
--- /dev/null
+++ b/source/wp-content/themes/wporg-news-2021/sass/blocks/_post-content.scss
@@ -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;
+ }
+ }
+}
diff --git a/source/wp-content/themes/wporg-news-2021/sass/blocks/_post-title.scss b/source/wp-content/themes/wporg-news-2021/sass/blocks/_post-title.scss
new file mode 100644
index 00000000..3b81c140
--- /dev/null
+++ b/source/wp-content/themes/wporg-news-2021/sass/blocks/_post-title.scss
@@ -0,0 +1,3 @@
+.wp-block-post-title {
+ margin-top: 0;
+}
diff --git a/source/wp-content/themes/wporg-news-2021/sass/blocks/_separator.scss b/source/wp-content/themes/wporg-news-2021/sass/blocks/_separator.scss
index ab91e93f..58c45f12 100644
--- a/source/wp-content/themes/wporg-news-2021/sass/blocks/_separator.scss
+++ b/source/wp-content/themes/wporg-news-2021/sass/blocks/_separator.scss
@@ -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);
}
-}
\ No newline at end of file
+}
diff --git a/source/wp-content/themes/wporg-news-2021/sass/ponyfill.scss b/source/wp-content/themes/wporg-news-2021/sass/ponyfill.scss
index d86fa302..58c87c6d 100644
--- a/source/wp-content/themes/wporg-news-2021/sass/ponyfill.scss
+++ b/source/wp-content/themes/wporg-news-2021/sass/ponyfill.scss
@@ -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";
@@ -29,4 +31,6 @@
@import "blocks/table";
@import "blocks/video";
@import "blocks/columns";
-@import "post/meta";
\ No newline at end of file
+@import "post/header";
+@import "post/meta";
+@import "post/navigation";
diff --git a/source/wp-content/themes/wporg-news-2021/sass/post/_header.scss b/source/wp-content/themes/wporg-news-2021/sass/post/_header.scss
new file mode 100644
index 00000000..f155c215
--- /dev/null
+++ b/source/wp-content/themes/wporg-news-2021/sass/post/_header.scss
@@ -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);
+ }
+ }
+}
diff --git a/source/wp-content/themes/wporg-news-2021/sass/post/_navigation.scss b/source/wp-content/themes/wporg-news-2021/sass/post/_navigation.scss
new file mode 100644
index 00000000..f5946be0
--- /dev/null
+++ b/source/wp-content/themes/wporg-news-2021/sass/post/_navigation.scss
@@ -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;
+ }
+ }
+ }
+}
diff --git a/source/wp-content/themes/wporg-news-2021/theme.json b/source/wp-content/themes/wporg-news-2021/theme.json
index ec27a2bf..21f1565e 100644
--- a/source/wp-content/themes/wporg-news-2021/theme.json
+++ b/source/wp-content/themes/wporg-news-2021/theme.json
@@ -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)"
}
}
},
@@ -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,
@@ -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)",
@@ -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",
@@ -654,6 +655,12 @@
{
"name": "footer",
"area": "footer"
+ },
+ {
+ "name": "content-single"
+ },
+ {
+ "name": "post-navigation"
}
]
}