From 67d38600bfa128707c060ef510ce39271542a1d0 Mon Sep 17 00:00:00 2001
From: Thomas Guillot <thomasguillot@users.noreply.github.com>
Date: Thu, 30 May 2024 17:22:53 +0100
Subject: [PATCH] feat: add post-meta pattern (#148)

---
 includes/class-core.php                       |  12 +-
 parts/post-header.html                        |   9 +-
 patterns/post-header.php                      |  36 ------
 patterns/post-meta-multiple-lines-avatar.php  |  63 ++++++++++
 patterns/post-meta-multiple-lines.php         |  47 +++++++
 patterns/post-meta-single-line-avatar.php     |  61 ++++++++++
 patterns/post-meta-single-line.php            |  52 ++++++++
 .../editor/block-styles/separator-styles.js   |   7 ++
 src/js/editor/index.js                        |   1 +
 src/scss/block-styles/_block-styles.scss      |   1 +
 src/scss/block-styles/_separator-styles.scss  |   5 +
 src/scss/blocks/_blocks.scss                  |   3 +-
 src/scss/blocks/_co-authors-plus.scss         |  25 +---
 src/scss/blocks/_homepage-articles.scss       |  13 +-
 ...ost-author-name.scss => _post-author.scss} |  10 ++
 src/scss/blocks/_sharing-buttons.scss         | 115 ++++++++++++++++++
 templates/single.html                         |   2 +-
 theme.json                                    |  28 ++++-
 18 files changed, 415 insertions(+), 75 deletions(-)
 delete mode 100644 patterns/post-header.php
 create mode 100644 patterns/post-meta-multiple-lines-avatar.php
 create mode 100644 patterns/post-meta-multiple-lines.php
 create mode 100644 patterns/post-meta-single-line-avatar.php
 create mode 100644 patterns/post-meta-single-line.php
 create mode 100644 src/js/editor/block-styles/separator-styles.js
 create mode 100644 src/scss/block-styles/_separator-styles.scss
 rename src/scss/blocks/{_post-author-name.scss => _post-author.scss} (51%)
 create mode 100644 src/scss/blocks/_sharing-buttons.scss

diff --git a/includes/class-core.php b/includes/class-core.php
index 16289269..e4b9b8bd 100644
--- a/includes/class-core.php
+++ b/includes/class-core.php
@@ -135,8 +135,16 @@ public static function block_pattern_categories() {
 		register_block_pattern_category(
 			'newspack-block-theme',
 			array(
-				'label'       => __( 'Newspack Block Theme', 'text-domain' ),
-				'description' => __( 'Patterns bundled with the Newspack Block Theme.', 'text-domain' ),
+				'label'       => __( 'Newspack Theme', 'newspack-block-theme' ),
+				'description' => __( 'Patterns bundled with the Newspack Block Theme.', 'newspack-block-theme' ),
+			)
+		);
+
+		register_block_pattern_category(
+			'newspack-block-theme-post-meta',
+			array(
+				'label'       => __( 'Newspack Theme - Post Meta', 'newspack-block-theme' ),
+				'description' => __( 'Patterns bundled with the Newspack Block Theme, specifically built for the post meta.', 'newspack-block-theme' ),
 			)
 		);
 	}
diff --git a/parts/post-header.html b/parts/post-header.html
index 3742685c..d0b26572 100644
--- a/parts/post-header.html
+++ b/parts/post-header.html
@@ -1,13 +1,14 @@
+<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"constrained"}} -->
+<div class="wp-block-group">
 <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","orientation":"vertical"}} -->
 <div class="wp-block-group"><!-- wp:post-terms {"term":"category","style":{"typography":{"fontStyle":"normal","fontWeight":"700","textTransform":"uppercase"}},"fontSize":"medium"} /-->
 
 <!-- wp:post-title {"level":1} /--></div>
 <!-- /wp:group -->
 
-<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20","margin":{"top":"var:preset|spacing|50"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
-<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--50)"><!-- wp:post-author {"showAvatar":false,"byline":"By","isLink":true,"fontSize":"small"} /-->
+<!-- wp:post-excerpt {"fontSize":"large"} /-->
 
-<!-- wp:post-date {"format":"F j, Y, g:i a","isLink":false,"fontSize":"small"} /-->
+<!-- wp:pattern {"slug":"newspack-block-theme/post-meta-multiple-lines-avatar"} /-->
 
-<!-- wp:post-comments-link /--></div>
+</div>
 <!-- /wp:group -->
\ No newline at end of file
diff --git a/patterns/post-header.php b/patterns/post-header.php
deleted file mode 100644
index 1f8d931e..00000000
--- a/patterns/post-header.php
+++ /dev/null
@@ -1,36 +0,0 @@
-<?php
-/**
- * Title: Post Header
- * Slug: newspack-block-theme/post-header
- * Categories: newspack-block-theme
- *
- * @package Newspack_Block_Theme
- */
-
-?>
-<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"constrained"}} -->
-<div class="wp-block-group">
-<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","orientation":"vertical"}} -->
-<div class="wp-block-group"><!-- wp:post-terms {"term":"category","style":{"typography":{"fontStyle":"normal","fontWeight":"700","textTransform":"uppercase"}},"fontSize":"medium"} /-->
-
-<!-- wp:post-title {"level":1} /--></div>
-<!-- /wp:group -->
-
-<!-- wp:post-excerpt {"fontSize":"large"} /-->
-
-<!-- wp:group {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"flex","orientation":"vertical"}} -->
-<div class="wp-block-group">
-
-<?php if ( class_exists( 'CoAuthors_Guest_Authors' ) ) : ?>
-<!-- wp:co-authors-plus/coauthors -->
-<div class="wp-block-co-authors-plus-coauthors">
-<!-- wp:co-authors-plus/name /--></div>
-<!-- /wp:co-authors-plus/coauthors -->
-<?php else : ?>
-<!-- wp:post-author {"showAvatar":false,"byline":"By","isLink":false} /-->
-<?php endif; ?>
-
-<!-- wp:post-date {"format":"F j, Y, g:i a","isLink":false} /--></div>
-<!-- /wp:group -->
-</div>
-<!-- /wp:group -->
diff --git a/patterns/post-meta-multiple-lines-avatar.php b/patterns/post-meta-multiple-lines-avatar.php
new file mode 100644
index 00000000..daa86d8a
--- /dev/null
+++ b/patterns/post-meta-multiple-lines-avatar.php
@@ -0,0 +1,63 @@
+<?php
+/**
+ * Title: Avatar, Byline and Date on multiple lines
+ * Slug: newspack-block-theme/post-meta-multiple-lines-avatar
+ * Categories: newspack-block-theme-post-meta
+ * Viewport Width: 632
+ * Block Types: core/avatar, core/post-author, core/post-date, jetpack/sharing-buttons
+ *
+ * @package Newspack_Block_Theme
+ */
+
+?>
+<!-- wp:group {"metadata":{"name":"Post Meta"},"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"className":"post-meta","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"bottom"}} -->
+<div class="wp-block-group post-meta">
+	
+<!-- wp:group {"lock":{"move":false,"remove":true},"metadata":{"name":"Meta"},"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
+<div class="wp-block-group">
+
+<?php if ( class_exists( 'CoAuthors_Guest_Authors' ) ) : ?>
+	
+	<!-- wp:co-authors-plus/coauthors {"layout":{"type":"flex","orientation":"horizontal","flexWrap":"nowrap"},"lock":{"move":true,"remove":true},"style":{"layout":{"selfStretch":"fit"},"spacing":{"blockGap":"0"}},"className":"cap-avatar"} -->
+	<div class="wp-block-co-authors-plus-coauthors cap-avatar"><!-- wp:co-authors-plus/avatar {"size":48} /--></div>
+	<!-- /wp:co-authors-plus/coauthors -->
+
+<?php else : ?>
+
+	<!-- wp:avatar {"size":48,"lock":{"move":true,"remove":true}} /-->
+
+<?php endif; ?>
+
+<!-- wp:group {"templateLock":"all","lock":{"move":true,"remove":true},"metadata":{"name":"Byline + Date"},"style":{"spacing":{"blockGap":"4px"}},"layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group">
+
+<?php if ( class_exists( 'CoAuthors_Guest_Authors' ) ) : ?>
+
+	<!-- wp:co-authors-plus/coauthors -->
+	<div class="wp-block-co-authors-plus-coauthors"><!-- wp:co-authors-plus/name {"isLink":true} /--></div>
+	<!-- /wp:co-authors-plus/coauthors -->
+
+<?php else : ?>
+
+	<!-- wp:post-author {"showAvatar":false,"byline":"By","isLink":true} /-->
+
+<?php endif; ?>
+
+<!-- wp:post-date {"format":"F j, Y"} /--></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->
+
+<?php if ( function_exists( 'sharing_display' ) ) : ?>
+
+	<!-- wp:jetpack/sharing-buttons {"styleType":"icon","layout":{"type":"flex","justifyContent":"left","flexWrap":"nowrap"}} -->
+	<ul class="wp-block-jetpack-sharing-buttons has-normal-icon-size jetpack-sharing-buttons__services-list" id="jetpack-sharing-serivces-list">
+		<!-- wp:jetpack/sharing-button {"service":"facebook","label":"Facebook"} /-->
+		<!-- wp:jetpack/sharing-button {"service":"x","label":"X"} /-->
+		<!-- wp:jetpack/sharing-button {"service":"mail","label":"Mail"} /-->
+	</ul>
+	<!-- /wp:jetpack/sharing-buttons -->
+
+<?php endif; ?>
+
+</div>
+<!-- /wp:group -->
diff --git a/patterns/post-meta-multiple-lines.php b/patterns/post-meta-multiple-lines.php
new file mode 100644
index 00000000..dbe1734b
--- /dev/null
+++ b/patterns/post-meta-multiple-lines.php
@@ -0,0 +1,47 @@
+<?php
+/**
+ * Title: Byline and Date on multiple lines
+ * Slug: newspack-block-theme/post-meta-multiple-lines
+ * Categories: newspack-block-theme-post-meta
+ * Viewport Width: 632
+ * Block Types: core/post-author, core/post-date, jetpack/sharing-buttons
+ *
+ * @package Newspack_Block_Theme
+ */
+
+?>
+<!-- wp:group {"metadata":{"name":"Post Meta"},"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"className":"post-meta","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"bottom"}} -->
+<div class="wp-block-group post-meta">
+	
+<!-- wp:group {"lock":{"move":false,"remove":true},"metadata":{"name":"Meta"},"style":{"spacing":{"blockGap":"4px"}},"layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group">
+
+<?php if ( class_exists( 'CoAuthors_Guest_Authors' ) ) : ?>
+
+	<!-- wp:co-authors-plus/coauthors {"lock":{"move":true,"remove":true}} -->
+	<div class="wp-block-co-authors-plus-coauthors"><!-- wp:co-authors-plus/name {"isLink":true,"lock":{"move":true,"remove":true}} /--></div>
+	<!-- /wp:co-authors-plus/coauthors -->
+
+<?php else : ?>
+
+	<!-- wp:post-author {"showAvatar":false,"byline":"By","isLink":true,"lock":{"move":true,"remove":true}} /-->
+
+<?php endif; ?>
+
+<!-- wp:post-date {"format":"F j, Y","lock":{"move":true,"remove":true}} /--></div>
+<!-- /wp:group -->
+
+<?php if ( function_exists( 'sharing_display' ) ) : ?>
+
+	<!-- wp:jetpack/sharing-buttons {"styleType":"icon","layout":{"type":"flex","justifyContent":"left","flexWrap":"nowrap"}} -->
+	<ul class="wp-block-jetpack-sharing-buttons has-normal-icon-size jetpack-sharing-buttons__services-list" id="jetpack-sharing-serivces-list">
+		<!-- wp:jetpack/sharing-button {"service":"facebook","label":"Facebook"} /-->
+		<!-- wp:jetpack/sharing-button {"service":"x","label":"X"} /-->
+		<!-- wp:jetpack/sharing-button {"service":"mail","label":"Mail"} /-->
+	</ul>
+	<!-- /wp:jetpack/sharing-buttons -->
+
+<?php endif; ?>
+
+</div>
+<!-- /wp:group -->
diff --git a/patterns/post-meta-single-line-avatar.php b/patterns/post-meta-single-line-avatar.php
new file mode 100644
index 00000000..a6e2bbff
--- /dev/null
+++ b/patterns/post-meta-single-line-avatar.php
@@ -0,0 +1,61 @@
+<?php
+/**
+ * Title: Avatar, Byline and Date on the same line
+ * Slug: newspack-block-theme/post-meta-single-line-avatar
+ * Categories: newspack-block-theme-post-meta
+ * Viewport Width: 632
+ * Block Types: core/avatar, core/post-author, core/post-date, jetpack/sharing-buttons
+ *
+ * @package Newspack_Block_Theme
+ */
+
+?>
+<!-- wp:group {"metadata":{"name":"Post Meta"},"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"className":"post-meta","layout":{"type":"constrained"}} -->
+<div class="wp-block-group post-meta">
+	
+<!-- wp:group {"lock":{"move":false,"remove":true},"metadata":{"name":"Meta"},"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center","verticalAlignment":"center"}} -->
+<div class="wp-block-group">
+	
+<?php if ( class_exists( 'CoAuthors_Guest_Authors' ) ) : ?>
+
+	<!-- wp:group {"templateLock":"all","lock":{"move":true,"remove":true},"metadata":{"name":"Avatar + Byline"},"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+	<div class="wp-block-group">
+	
+	<!-- wp:co-authors-plus/coauthors {"layout":{"type":"flex","orientation":"horizontal"},"prefix":"","style":{"spacing":{"blockGap":"0"}},"className":"cap-avatar"} -->
+	<div class="wp-block-co-authors-plus-coauthors cap-avatar"><!-- wp:co-authors-plus/avatar /--></div>
+	<!-- /wp:co-authors-plus/coauthors -->
+
+	<!-- wp:co-authors-plus/coauthors {"lock":{"move":true,"remove":true}} -->
+	<div class="wp-block-co-authors-plus-coauthors"><!-- wp:co-authors-plus/name {"isLink":true,"lock":{"move":true,"remove":true}} /--></div>
+	<!-- /wp:co-authors-plus/coauthors -->
+
+	</div>
+	<!-- /wp:group -->
+
+<?php else : ?>
+
+	<!-- wp:post-author {"avatarSize":24,"byline":"By","isLink":true,"lock":{"move":true,"remove":true}} /-->
+
+<?php endif; ?>
+
+<!-- wp:separator {"lock":{"move":true,"remove":false},"style":{"layout":{"selfStretch":"fixed","flexSize":"1px"},"spacing":{"margin":{"top":"0","bottom":"0"}}},"className":"is-style-thick"} -->
+<hr class="wp-block-separator has-alpha-channel-opacity is-style-thick" style="margin-top:0;margin-bottom:0"/>
+<!-- /wp:separator -->
+
+<!-- wp:post-date {"lock":{"move":true,"remove":true}} /--></div>
+<!-- /wp:group -->
+
+<?php if ( function_exists( 'sharing_display' ) ) : ?>
+
+<!-- wp:jetpack/sharing-buttons {"styleType":"icon","layout":{"type":"flex","justifyContent":"center"}} -->
+<ul class="wp-block-jetpack-sharing-buttons has-normal-icon-size jetpack-sharing-buttons__services-list" id="jetpack-sharing-serivces-list">
+	<!-- wp:jetpack/sharing-button {"service":"facebook","label":"Facebook"} /-->
+	<!-- wp:jetpack/sharing-button {"service":"x","label":"X"} /-->
+	<!-- wp:jetpack/sharing-button {"service":"mail","label":"Mail"} /-->
+</ul>
+<!-- /wp:jetpack/sharing-buttons -->
+
+<?php endif; ?>
+
+</div>
+<!-- /wp:group -->
diff --git a/patterns/post-meta-single-line.php b/patterns/post-meta-single-line.php
new file mode 100644
index 00000000..a724a8aa
--- /dev/null
+++ b/patterns/post-meta-single-line.php
@@ -0,0 +1,52 @@
+<?php
+/**
+ * Title: Byline and Date on the same line
+ * Slug: newspack-block-theme/post-meta-single-line
+ * Categories: newspack-block-theme-post-meta
+ * Viewport Width: 632
+ * Block Types: core/post-author, core/post-date, jetpack/sharing-buttons
+ *
+ * @package Newspack_Block_Theme
+ */
+
+?>
+<!-- wp:group {"metadata":{"name":"Post Meta"},"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"className":"post-meta","layout":{"type":"constrained"}} -->
+<div class="wp-block-group post-meta">
+	
+<!-- wp:group {"lock":{"move":false,"remove":true},"metadata":{"name":"Meta"},"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center","verticalAlignment":"center"}} -->
+<div class="wp-block-group">
+
+<?php if ( class_exists( 'CoAuthors_Guest_Authors' ) ) : ?>
+
+	<!-- wp:co-authors-plus/coauthors {"lock":{"move":true,"remove":true}} -->
+	<div class="wp-block-co-authors-plus-coauthors"><!-- wp:co-authors-plus/name {"isLink":true,"lock":{"move":true,"remove":true}} /--></div>
+	
+	<!-- /wp:co-authors-plus/coauthors -->
+
+<?php else : ?>
+
+	<!-- wp:post-author {"showAvatar":false,"byline":"By","isLink":true,"lock":{"move":true,"remove":true}} /-->
+
+<?php endif; ?>
+
+<!-- wp:separator {"lock":{"move":true,"remove":false},"style":{"layout":{"selfStretch":"fixed","flexSize":"1px"},"spacing":{"margin":{"top":"0","bottom":"0"}}},"className":"is-style-thick"} -->
+<hr class="wp-block-separator has-alpha-channel-opacity is-style-thick" style="margin-top:0;margin-bottom:0"/>
+<!-- /wp:separator -->
+
+<!-- wp:post-date {"lock":{"move":true,"remove":true}} /--></div>
+<!-- /wp:group -->
+
+<?php if ( function_exists( 'sharing_display' ) ) : ?>
+
+<!-- wp:jetpack/sharing-buttons {"styleType":"icon","layout":{"type":"flex","justifyContent":"center"}} -->
+<ul class="wp-block-jetpack-sharing-buttons has-normal-icon-size jetpack-sharing-buttons__services-list" id="jetpack-sharing-serivces-list">
+	<!-- wp:jetpack/sharing-button {"service":"facebook","label":"Facebook"} /-->
+	<!-- wp:jetpack/sharing-button {"service":"x","label":"X"} /-->
+	<!-- wp:jetpack/sharing-button {"service":"mail","label":"Mail"} /-->
+</ul>
+<!-- /wp:jetpack/sharing-buttons -->
+
+<?php endif; ?>
+
+</div>
+<!-- /wp:group -->
\ No newline at end of file
diff --git a/src/js/editor/block-styles/separator-styles.js b/src/js/editor/block-styles/separator-styles.js
new file mode 100644
index 00000000..6f0684cc
--- /dev/null
+++ b/src/js/editor/block-styles/separator-styles.js
@@ -0,0 +1,7 @@
+// Add style to make the Separator block 'tick' (16px).
+wp.domReady( () => {
+	wp.blocks.registerBlockStyle( 'core/separator', {
+		name: 'thick',
+		label: 'Thick',
+	} );
+} );
diff --git a/src/js/editor/index.js b/src/js/editor/index.js
index 820bf44a..16293ec4 100644
--- a/src/js/editor/index.js
+++ b/src/js/editor/index.js
@@ -1,2 +1,3 @@
 import '../shared/_shared-module';
 import './block-styles/navigation-styles.js';
+import './block-styles/separator-styles.js';
diff --git a/src/scss/block-styles/_block-styles.scss b/src/scss/block-styles/_block-styles.scss
index 401943b3..72a25492 100644
--- a/src/scss/block-styles/_block-styles.scss
+++ b/src/scss/block-styles/_block-styles.scss
@@ -1 +1,2 @@
 @import url('./_navigation-styles.scss');
+@import url('./_separator-styles.scss');
diff --git a/src/scss/block-styles/_separator-styles.scss b/src/scss/block-styles/_separator-styles.scss
new file mode 100644
index 00000000..af0d3295
--- /dev/null
+++ b/src/scss/block-styles/_separator-styles.scss
@@ -0,0 +1,5 @@
+.wp-block-separator {
+	&.is-style-thick {
+		border-bottom-width: var( --wp--preset--spacing--30 );
+	}
+}
diff --git a/src/scss/blocks/_blocks.scss b/src/scss/blocks/_blocks.scss
index a5ddbf3c..51308340 100644
--- a/src/scss/blocks/_blocks.scss
+++ b/src/scss/blocks/_blocks.scss
@@ -6,11 +6,12 @@
 @import url('./_navigation.scss');
 @import url('./_paragraph.scss');
 @import url('./_pagination.scss');
-@import url('./_post-author-name.scss');
+@import url('./_post-author.scss');
 @import url('./_post-comments.scss');
 @import url('./_post-carousel.scss');
 @import url('./_post-terms.scss');
 @import url('./_pullquote.scss');
 @import url('./_query-pagination.scss');
 @import url('./_quote.scss');
+@import url('./_sharing-buttons.scss');
 @import url('./_search.scss');
diff --git a/src/scss/blocks/_co-authors-plus.scss b/src/scss/blocks/_co-authors-plus.scss
index 040db6f6..8c9afbfe 100644
--- a/src/scss/blocks/_co-authors-plus.scss
+++ b/src/scss/blocks/_co-authors-plus.scss
@@ -1,28 +1,9 @@
 @use '../mixins';
 
 .wp-block-co-authors-plus-coauthors {
-
-    &.wp-block-coauthors-is-layout-flow {
-        position: relative;
-
-        &:has(.wp-block-co-authors-plus-avatar) {
-            padding-left: calc( 24px + var(--wp--preset--spacing--20) );
-
-            .wp-block-co-authors-plus-coauthors__prefix {
-                margin-left: var(--wp--preset--spacing--20);
-            }
-
-            @include mixins.cap-avatar( $width: 24px );
-        }
-    
-        .wp-block-co-authors-plus-avatar {
-            left: 0;
-            position: absolute;
-            top: 0;
-    
-            img {
-                display: block;
-            }
+    &.cap-avatar {
+        .wp-block-co-authors-plus-coauthor:not( :first-child ) {
+            margin-left: -8px;
         }
     }
 }
\ No newline at end of file
diff --git a/src/scss/blocks/_homepage-articles.scss b/src/scss/blocks/_homepage-articles.scss
index e96008a6..107996f5 100644
--- a/src/scss/blocks/_homepage-articles.scss
+++ b/src/scss/blocks/_homepage-articles.scss
@@ -290,6 +290,7 @@
 					"date";
 				line-height: var(--wp--custom--line-height--x-small);
 				margin: var(--wp--preset--spacing--20) 0 0;
+				row-gap: calc( var(--wp--preset--spacing--20) / 2);
 
 				.byline {
 					margin: 0;
@@ -306,14 +307,14 @@
 						"avatar byline"
 						"avatar date";
 
-					@include mixins.wpnbha-avatar( $width: 2.5rem );
+					@include mixins.wpnbha-avatar( $width: 48px );
 
 					&:not(:has(.entry-date)) {
-						@include mixins.wpnbha-avatar( $width: 1.5rem );
+						@include mixins.wpnbha-avatar( $width: 24px );
 	
 						.avatar {
-							height: 1.5rem;
-							width: 1.5rem;
+							height:24px;
+							width: 24px;
 						}
 	
 						.byline {
@@ -327,9 +328,9 @@
 					}
 
 					.avatar {
-						height: 2.5rem;
+						height: 48px;
 						margin: 0;
-						width: 2.5rem;
+						width: 48px;
 					}
 				}
 			}
diff --git a/src/scss/blocks/_post-author-name.scss b/src/scss/blocks/_post-author.scss
similarity index 51%
rename from src/scss/blocks/_post-author-name.scss
rename to src/scss/blocks/_post-author.scss
index 15071905..055c69e8 100644
--- a/src/scss/blocks/_post-author-name.scss
+++ b/src/scss/blocks/_post-author.scss
@@ -9,4 +9,14 @@
 		font-size: inherit;
 		margin-right: 0.25em;
 	}
+
+	&__avatar {
+		display: grid;
+		margin-right: var( --wp--preset--spacing--20 );
+		place-items: center;
+
+		img {
+			border-radius: 50%;
+		}
+	}
 }
diff --git a/src/scss/blocks/_sharing-buttons.scss b/src/scss/blocks/_sharing-buttons.scss
new file mode 100644
index 00000000..f81bd333
--- /dev/null
+++ b/src/scss/blocks/_sharing-buttons.scss
@@ -0,0 +1,115 @@
+@use '../sass-utils';
+
+.wp-block-jetpack-sharing-buttons {
+    gap: calc( var( --wp--preset--spacing--20 ) / 2 );
+
+    .jetpack-sharing-button {
+        &__button {
+            margin: 0;
+            @include sass-utils.all-transition;
+
+            &.style-icon {
+                line-height: 1;
+                padding: calc( var( --wp--preset--spacing--20 ) * 0.875 );
+                top: 0;
+
+                svg {
+                    @include sass-utils.all-transition;
+                }
+
+                &:hover {
+                    svg {
+                        transform: scale(1.1111);
+                    }
+                }
+            }
+
+            &.style-icon-text,
+            &.style-text {
+                background: var( --newspack-ui-color-neutral-0, var( --wp--preset--color--base ) );
+                border: 1px solid var( --newspack-ui-color-neutral-30, var( --wp--preset--color--base-3 ) );
+                border-radius: var( --wp--custom--border--radius-small );
+                box-shadow: none;
+                color: var( --newspack-ui-color-neutral-90, var( --wp--preset--color--contrast ) );
+                font-family: var( --newspack-ui-font-family, system-ui, sans-serif );
+                font-size: var( --wp--preset--font-size--x-small );
+                font-weight: 600;
+                gap: calc( var( --wp--preset--spacing--20 ) / 2 );
+                line-height: var( --wp--custom--line-height--x-small );
+                min-height: var( --wp--preset--spacing--50 );
+                min-width: var( --wp--preset--spacing--50 );
+                padding: calc( var( --wp--preset--spacing--20 ) / 2 - 1px ) calc( var( --wp--preset--spacing--20 ) - 1px );
+
+                &:hover {
+                    background: var( --newspack-ui-color-neutral-5, var( --wp--preset--color--base-2 ) );
+                    border-color: var( --newspack-ui-color-neutral-40, var( --wp--preset--color--base-4 ) );
+                }
+
+                &:focus-visible {
+                    outline: 2px solid;
+                    outline-offset: 1px;
+                }
+            }
+        }
+
+        &__service-label {
+            margin: 0;
+        }
+    }
+
+    &.has-normal-icon-size,
+    &.has-large-icon-size,
+    &.has-huge-icon-size {
+        gap: var( --wp--preset--spacing--20 );
+
+        svg {
+            height: var( --wp--preset--spacing--40 );
+            width: var( --wp--preset--spacing--40 );
+        }
+
+        .style-icon {
+            padding: calc( var( --wp--preset--spacing--20 ) * 0.75 );
+
+            &:hover {
+                svg {
+                    transform: scale(1.0833);
+                }
+            }
+        }
+    }
+
+    &.has-large-icon-size,
+    &.has-huge-icon-size {
+        .style-icon-text,
+        .style-text {
+            border-radius: var( --wp--custom--border--radius-medium );
+            font-size: var( --wp--preset--font-size--small );
+            line-height: var( --wp--custom--line-height--small );
+            min-height: calc( var( --wp--preset--spacing--20 ) * 5 );
+            padding-left: var( --wp--preset--spacing--30 );
+            padding-right: var( --wp--preset--spacing--30 );
+        }
+    }
+
+    &.has-huge-icon-size {
+        svg {
+            height: var( --wp--preset--spacing--50 );
+            width: var( --wp--preset--spacing--50 );
+        }
+
+        .style-icon {
+            &:hover {
+                svg {
+                    transform: scale(1.125);
+                }
+            }
+        }
+
+        .style-icon-text,
+        .style-text {
+            min-height: calc( var( --wp--preset--spacing--20 ) * 6 );
+            padding-left: var( --wp--preset--spacing--40 );
+            padding-right: var( --wp--preset--spacing--40 );
+        }
+    }
+}
\ No newline at end of file
diff --git a/templates/single.html b/templates/single.html
index 7295079a..a16c3526 100644
--- a/templates/single.html
+++ b/templates/single.html
@@ -1,6 +1,6 @@
 <!-- wp:template-part {"slug":"header","theme":"newspack-block-theme","tagName":"header"} /-->
 
-<!-- wp:pattern {"slug":"newspack-block-theme/post-header"} /-->
+<!-- wp:template-part {"slug":"post-header","theme":"newspack-block-theme"} /-->
 
 <!-- wp:group {"tagName":"main","lock":{"move":false,"remove":true},"layout":{"type":"constrained"}} -->
 <main class="wp-block-group"><!-- wp:post-featured-image {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|80","top":"var:preset|spacing|80"}}}} /-->
diff --git a/theme.json b/theme.json
index 308d6db2..ea72debf 100644
--- a/theme.json
+++ b/theme.json
@@ -258,6 +258,23 @@
 					"lineHeight": "var( --wp--custom--line-height--x-small )"
 				}
 			},
+			"co-authors-plus/name": {
+				"elements": {
+					"link": {
+						"color": {
+							"text": "var( --wp--preset--color--contrast-3 )"
+						},
+						":hover": {
+							"color": {
+								"text": "var( --wp--preset--color--contrast-3 )"
+							},
+							"typography": {
+								"textDecoration": "none"
+							}
+						}
+					}
+				}
+			},
 			"core/button": {
 				"spacing": {
 					"padding": {
@@ -391,13 +408,13 @@
 			"core/comments-title": {
 				"spacing": {
 					"margin": {
-						"bottom": 0,
+						"bottom": "0",
 						"top": "var( --wp--preset--spacing--80 )"
 					}
 				},
 				"typography": {
 					"fontSize": "var( --wp--preset--font-size--medium )",
-					"fontWeight": 600,
+					"fontWeight": "600",
 					"lineHeight": "var( --wp--custom--line-height--medium )"
 				}
 			},
@@ -491,7 +508,7 @@
 						},
 						":hover": {
 							"color": {
-								"text": "var( --wp--preset--color--contrast )"
+								"text": "var( --wp--preset--color--contrast-3 )"
 							},
 							"typography": {
 								"textDecoration": "none"
@@ -742,6 +759,11 @@
 					"fontSize": "var( --wp--preset--font-size--large )",
 					"lineHeight": "var( --wp--custom--line-height--large )"
 				}
+			},
+			"jetpack/sharing-buttons": {
+				"spacing": {
+					"blockGap": "var( --wp--preset--spacing--20 )"
+				}
 			}
 		},
 		"color": {