feat: add post-meta pattern (#148)

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' ),
 			)
 		);
 	}

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 -->

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 -->

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 -->

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 -->

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 -->

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',
+	} );
+} );

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';

src/scss/block-styles/_block-styles.scss

@@ -1 +1,2 @@
 @import url('./_navigation-styles.scss');
+@import url('./_separator-styles.scss');

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 );
+	}
+}

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');

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;
         }
     }
 }