diff --git a/patterns/post-meta-multiple-lines-avatar.php b/patterns/post-meta-multiple-lines-avatar.php
index 36fd1932..fe57659f 100644
--- 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
*/
?>
-
+
+
+
+
+
+
@@ -27,3 +30,18 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/patterns/post-meta-single-line-avatar.php b/patterns/post-meta-single-line-avatar.php
index 2af1f924..a6e2bbff 100644
--- 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
*/
?>
-
+
+
+
+
@@ -35,9 +38,24 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/patterns/post-meta-single-line.php b/patterns/post-meta-single-line.php
index ad43cb1d..a724a8aa 100644
--- 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
*/
?>
-
-
+
+
+
+
+
@@ -26,9 +29,24 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/scss/blocks/_blocks.scss b/src/scss/blocks/_blocks.scss
index 59969487..51308340 100644
--- 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
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/theme.json b/theme.json
index 482968c8..6caa8687 100644
--- 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": {