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 */ ?> - +
+ + +
@@ -43,3 +46,18 @@
+ + + + + + + + + + + diff --git a/patterns/post-meta-multiple-lines.php b/patterns/post-meta-multiple-lines.php index ced5a4b0..a179c7f8 100644 --- 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 */ ?> - -
+ +
+ + +
@@ -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 */ ?> - -
+ + + \ 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": {