Merge branch 'main' into feature/MOOSE-77/create-block-templates

composer.json

@@ -66,11 +66,11 @@
 			"type": "package",
 			"package": {
 				"name": "block-editor-custom-alignments/block-editor-custom-alignments",
-				"version": "1.0.6",
+				"version": "1.0.7",
 				"type": "wordpress-plugin",
 				"dist": {
 					"type": "zip",
-					"url": "https://github.com/moderntribe/block-editor-custom-alignments/releases/download/v1.0.6/block-editor-custom-alignments.1.0.6.zip"
+					"url": "https://github.com/moderntribe/block-editor-custom-alignments/releases/download/v1.0.7/block-editor-custom-alignments.1.0.7.zip"
 				},
 				"require": {
 					"ffraenz/private-composer-installer": "^5.0"
@@ -115,6 +115,7 @@
 		"wpackagist-plugin/limit-login-attempts-reloaded": "2.26.8",
 		"wpackagist-plugin/safe-svg": "2.2.4",
 		"wpackagist-plugin/seo-by-rank-math": "1.0.216",
+		"wpackagist-plugin/social-sharing-block": "^1.0",
 		"wpackagist-plugin/user-switching": "1.7.3",
 		"wpackagist-plugin/wp-tota11y": "^1.2",
 		"wpengine/advanced-custom-fields-pro": "6.2.9"

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/assets/pcss/global/editor.pcss

@@ -13,16 +13,15 @@
 	background-color: var(--color-neutral-20);
 
 	.wp-block-post-title {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		gap: var(--spacer-10);
+		position: relative;
 
 		/* we're defaulting to a different content width here to further
 		   differentiate between this title & the other blocks */
-		max-width: var(--grid-max-width);
+		max-width: var(--grid-max-width) !important;
 		margin-top: 0;
-		padding: var(--spacer-20) var(--spacer-30);
+
+		/* padding * 2 + psuedo "Page Title" element font size */
+		padding: calc((var(--spacer-20) * 2) + var(--font-size-20)) var(--spacer-30) var(--spacer-20);
 		border: 1px solid var(--color-neutral-60);
 		border-left: 6px solid var(--color-neutral-60);
 		background-color: var(--color-white);
@@ -32,6 +31,9 @@
 
 			@mixin t-body;
 			content: "Page Title";
+			position: absolute;
+			top: var(--spacer-20);
+			left: var(--spacer-30);
 			color: var(--color-neutral-60);
 		}
 	}

wp-content/themes/core/assets/pcss/layout/_variables.pcss

@@ -11,5 +11,9 @@
 body {
 	--grid-margin: var(--wp--custom--spacing--grid-margin);
 	--grid-gutter: var(--wp--custom--spacing--grid-gutter);
-	--grid-max-width: var(--wp--style--global--wide-size);
+	--grid-wide-width: var(--wp--style--global--wide-size);
+
+	/* this should match the "Grid" size defined in the
+	   `_experimentalLayout` setting within theme.json */
+	--grid-max-width: var(--tribe--style--global--grid-size, 1680px);
 }

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,45 @@
+/**
+ * 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);
+	--ssb-button-border-size: 1px;
+}
+
+.wp-block-outermost-social-sharing {
+	background: transparent;
+	transition: var(--transition);
+
+	&: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: var(--ssb-button-border-size) solid var(--ssb-button-border-color);
+
+			&:hover,
+			&:focus {
+				background-color: var(--ssb-button-background-hover-color);
+				color: var(--ssb-button-hover-color);
+				fill: var(--ssb-button-hover-color);
+				border: var(--ssb-button-border-size) solid var(--ssb-button-border-hover-color);
+			}
+
+			a:focus-visible {
+				outline: none;
+				outline-offset: 0;
+				background-color: var(--ssb-button-background-hover-color);
+				color: var(--ssb-button-hover-color);
+				fill: var(--ssb-button-hover-color);
+				border-radius: 9999px; /* Value provided by their base CSS for the plugin */
+			}
+		}
+	}
+}