[MOOSE-80]: Adds block extension for social sharing styles.

wp-content/plugins/core/src/Blocks/Blocks_Definer.php

@@ -27,6 +27,7 @@
 use Tribe\Theme\blocks\core\spacer\Spacer;
 use Tribe\Theme\blocks\core\table\Table;
 use Tribe\Theme\blocks\core\video\Video;
+use Tribe\Theme\blocks\outermost\socialsharing\Social_Sharing;
 
 class Blocks_Definer implements Definer_Interface {
 
@@ -66,6 +67,7 @@ public function define(): array {
 				DI\get( Spacer::class ),
 				DI\get( Table::class ),
 				DI\get( Video::class ),
+				DI\get( Social_Sharing::class ),
 			] ),
 
 			self::PATTERNS        => DI\add( [

wp-content/themes/core/blocks/outermost/socialsharing/Social_Sharing.php

@@ -0,0 +1,21 @@
+<?php declare(strict_types=1);
+
+namespace Tribe\Theme\blocks\outermost\socialsharing;
+
+use Tribe\Plugin\Blocks\Block_Base;
+
+class Social_Sharing extends Block_Base {
+
+	public function get_block_name(): string {
+		return 'outermost/social-sharing';
+	}
+
+	public function get_block_style_handle(): string {
+		return 'outermost-social-sharing-style';
+	}
+
+	public function get_block_path(): string {
+		return 'outermost/socialsharing';
+	}
+
+}

wp-content/themes/core/blocks/outermost/socialsharing/index.js

@@ -0,0 +1,5 @@
+/**
+ * Scripts specific to this block
+ */
+
+import './style.pcss';

wp-content/themes/core/blocks/outermost/socialsharing/style.pcss

@@ -0,0 +1,33 @@
+/**
+ * Styles specific to this block
+ */
+
+body {
+	--ssb-button-color: var(--wp--preset--color--base-black);
+	--ssb-button-hover-color: var(--wp--preset--color--base-white);
+	--ssb-button-background-color: var(--wp--preset--color--base-white);
+	--ssb-button-background-hover-color: var(--wp--preset--color--base-black);
+	--ssb-button-border-color: var(--wp--preset--color--base-black);
+	--ssb-button-border-hover-color: var(--wp--preset--color--base-white);
+}
+
+.wp-block-outermost-social-sharing,
+.editor-styles-wrapper .block-editor-block-list__layout.is-root-container .wp-block-outermost-social-sharing {
+	background: transparent;
+	transition: var(--transition);
+}
+
+.wp-block-outermost-social-sharing:not(.is-style-logos-only) .outermost-social-sharing-link {
+	background-color: var(--ssb-button-background-color);
+	color: var(--ssb-button-color);
+	fill: var(--ssb-button-color);
+	border: 1px solid var(--ssb-button-border-color);
+}
+
+.wp-block-outermost-social-sharing:not(.is-style-logos-only) .outermost-social-sharing-link:hover,
+.wp-block-outermost-social-sharing:not(.is-style-logos-only) .outermost-social-sharing-link:focus-visible {
+	background-color: var(--ssb-button-background-hover-color);
+	color: var(--ssb-button-hover-color);
+	fill: var(--ssb-button-hover-color);
+	border: 1px solid var(--ssb-button-border-hover-color);
+}