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" } ] }