feat: add sharing buttons to post-meta

Automattic · May 28, 2024 · 751778f · 751778f
1 parent 2e3d057
commit 751778f
Show file tree

Hide file tree

Showing 7 changed files with 207 additions and 14 deletions.
diff --git a/patterns/post-meta-multiple-lines-avatar.php b/patterns/post-meta-multiple-lines-avatar.php
@@ -4,14 +4,17 @@
  * 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
+ * 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":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
+<!-- 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|30"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
+<div class="wp-block-group">
 
 <?php if ( class_exists( 'CoAuthors_Guest_Authors' ) ) : ?>
 
@@ -43,3 +46,18 @@
 <!-- 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
@@ -4,14 +4,17 @@
  * 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
+ * Block Types: core/post-author, core/post-date, jetpack/sharing-buttons
  *
  * @package Newspack_Block_Theme
  */
 
 ?>
-<!-- wp:group {"metadata":{"name":"Post Meta"},"style":{"spacing":{"blockGap":"4px","padding":{"top":"2px","bottom":"2px"}}},"className":"post-meta","layout":{"type":"flex","orientation":"vertical"}} -->
-<div class="wp-block-group post-meta" style="padding-top:2px;padding-bottom:2px">
+<!-- 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","padding":{"top":"2px","bottom":"2px"}}},"layout":{"type":"flex","orientation":"vertical"}} -->
+<div class="wp-block-group" style="padding-top:2px;padding-bottom:2px">
 
 <?php if ( class_exists( 'CoAuthors_Guest_Authors' ) ) : ?>
 
@@ -27,3 +30,18 @@
 
 <!-- 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
@@ -4,15 +4,18 @@
  * 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
+ * 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":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
+<!-- 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"}} -->
@@ -35,9 +38,24 @@
 
 <?php endif; ?>
 
-<!-- wp:separator {"style":{"layout":{"selfStretch":"fixed","flexSize":"1px"},"spacing":{"margin":{"top":"0","bottom":"0"}}},"className":"is-style-thick"} -->
+<!-- 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
@@ -4,14 +4,17 @@
  * 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
+ * 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","padding":{"top":"2px","bottom":"2px"}}},"className":"post-meta","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
-<div class="wp-block-group post-meta" style="padding-top:2px;padding-bottom:2px">
+<!-- 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' ) ) : ?>
 
@@ -26,9 +29,24 @@
 
 <?php endif; ?>
 
-<!-- wp:separator {"style":{"layout":{"selfStretch":"fixed","flexSize":"1px"},"spacing":{"margin":{"top":"0","bottom":"0"}}},"className":"is-style-thick"} -->
+<!-- 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/src/scss/blocks/_blocks.scss b/src/scss/blocks/_blocks.scss
@@ -13,4 +13,5 @@
 @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/_sharing-buttons.scss 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 );
+        }
+    }
+}
diff --git a/theme.json b/theme.json
@@ -408,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 )"
 				}
 			},
@@ -759,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": {