Social: Add Threads to social previews (#38003)

* Update dependencies * Wire up Threads preview * Fix color override for facebook icon to fix a regression introduced in #37977 * Add changelog * Add context to Threads i18n * Update dependencies to fix JSX attributes issue * Fix up versions * Fix title not displayed in caption
Automattic · Jun 25, 2024 · 64517a4 · 64517a4
1 parent ca075bb
commit 64517a4
Show file tree

Hide file tree

Showing 15 changed files with 104 additions and 19 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/projects/js-packages/components/changelog/add-social-threads-preview b/projects/js-packages/components/changelog/add-social-threads-preview
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Added social preview for Threads
diff --git a/projects/js-packages/components/components/icons/style.module.scss b/projects/js-packages/components/components/icons/style.module.scss
@@ -15,9 +15,9 @@
 		fill: var( --color-bluesky );
 	}
 	&.facebook {
+		fill: var( --color-facebook );
 		// Add some specificity to override the border-radius on Jetpack settings page
 		&:global(.social-logo) {
-			fill: var( --color-facebook );
 			border-radius: 50%;
 		}
 	}
@@ -40,9 +40,9 @@
 		fill: var( --color-mastodon );
 	}
 	&.nextdoor {
+		fill: var( --color-nextdoor );
 		// Add some specificity to override the border-radius on Jetpack settings page
 		&:global(.social-logo) {
-			fill: var( --color-nextdoor );
 			border-radius: 50%;
 		}
 	}
@@ -53,8 +53,8 @@
 		fill: var( --color-whatsapp );
 	}
 	&.threads {
+		fill: var( --color-threads );
 		&:global(.social-logo) {
-			fill: var( --color-threads );
 			border-radius: 40%;
 		}
 	}

diff --git a/projects/js-packages/components/package.json b/projects/js-packages/components/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.54.1",
+	"version": "0.54.2-alpha",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",

diff --git a/projects/js-packages/publicize-components/changelog/add-social-threads-preview b/projects/js-packages/publicize-components/changelog/add-social-threads-preview
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Added social preview for Threads
diff --git a/projects/js-packages/publicize-components/package.json b/projects/js-packages/publicize-components/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-publicize-components",
-	"version": "0.54.5",
+	"version": "0.54.6-alpha",
 	"description": "A library of JS components required by the Publicize editor plugin",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/publicize-components/#readme",
 	"bugs": {
@@ -23,7 +23,7 @@
 		"@automattic/jetpack-connection": "workspace:*",
 		"@automattic/jetpack-shared-extension-utils": "workspace:*",
 		"@automattic/popup-monitor": "1.0.2",
-		"@automattic/social-previews": "2.0.1",
+		"@automattic/social-previews": "2.1.0-beta.3",
 		"@wordpress/annotations": "3.0.0",
 		"@wordpress/api-fetch": "7.0.0",
 		"@wordpress/block-editor": "13.0.0",

diff --git a/projects/js-packages/publicize-components/src/components/social-previews/threads.js b/projects/js-packages/publicize-components/src/components/social-previews/threads.js
@@ -0,0 +1,49 @@
+import { ThreadsPreviews } from '@automattic/social-previews';
+import { useSelect } from '@wordpress/data';
+import React from 'react';
+import { usePostMeta } from '../../hooks/use-post-meta';
+import { CONNECTION_SERVICE_THREADS, store } from '../../social-store';
+
+/**
+ * The threads tab component.
+ *
+ * @param {object} props - The props.
+ * @param {string} props.title - The post title
+ * @param {string} props.description - The post description/excerpt
+ * @param {object} props.image - The post featured image
+ * @param {string} props.url - The URL of the post
+ * @param {object[]} props.media - Array of attached media
+ * @returns {React.ReactNode} The threads tab component.
+ */
+export function Threads( { title, description, image, url, media } ) {
+	const { shareMessage: text } = usePostMeta();
+
+	const posts = useSelect(
+		select => {
+			const { displayName: name, profileImage } = select( store ).getConnectionProfileDetails(
+				CONNECTION_SERVICE_THREADS
+			);
+
+			return [
+				{
+					name,
+					profileImage,
+					text,
+					title,
+					description,
+					image,
+					media,
+					url,
+				},
+			];
+		},
+		[ title, image, description, media, url, text ]
+	);
+
+	const threadsConnections = useSelect(
+		select => select( store ).getConnectionsByService( CONNECTION_SERVICE_THREADS ),
+		[]
+	);
+
+	return <ThreadsPreviews posts={ posts } hidePostPreview={ ! threadsConnections.length } />;
+}
diff --git a/...js-packages/publicize-components/src/components/social-previews/use-available-services.js b/...js-packages/publicize-components/src/components/social-previews/use-available-services.js
@@ -1,10 +1,11 @@
 import { SocialServiceIcon } from '@automattic/jetpack-components';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import React, { useMemo } from 'react';
 import {
 	CONNECTION_SERVICE_INSTAGRAM_BUSINESS,
 	CONNECTION_SERVICE_MASTODON,
 	CONNECTION_SERVICE_NEXTDOOR,
+	CONNECTION_SERVICE_THREADS,
 } from '../../social-store';
 import { getSupportedAdditionalConnections } from '../../utils';
 import FacebookPreview from './facebook';
@@ -13,6 +14,7 @@ import { Instagram } from './instagram';
 import { LinkedIn } from './linkedin';
 import MastodonPreview from './mastodon';
 import { Nextdoor } from './nextdoor';
+import { Threads } from './threads';
 import TumblrPreview from './tumblr';
 import Twitter from './twitter';
 
@@ -28,6 +30,7 @@ export function useAvailableSerivces() {
 	);
 	const isMastodonSupported = additionalConnections.includes( CONNECTION_SERVICE_MASTODON );
 	const isNextdoorSupported = additionalConnections.includes( CONNECTION_SERVICE_NEXTDOOR );
+	const isThreadsSupported = additionalConnections.includes( CONNECTION_SERVICE_THREADS );
 
 	return useMemo(
 		() =>
@@ -58,6 +61,18 @@ export function useAvailableSerivces() {
 							preview: Instagram,
 					  }
 					: null,
+				isThreadsSupported
+					? {
+							title: _x(
+								'Threads',
+								'The name of the social media network - threads.net',
+								'jetpack'
+							),
+							icon: props => <SocialServiceIcon serviceName="threads" { ...props } />,
+							name: 'threads',
+							preview: Threads,
+					  }
+					: null,
 				{
 					title: __( 'LinkedIn', 'jetpack' ),
 					icon: props => <SocialServiceIcon serviceName="linkedin" { ...props } />,
@@ -87,6 +102,6 @@ export function useAvailableSerivces() {
 					  }
 					: null,
 			].filter( Boolean ),
-		[ isInstagramSupported, isMastodonSupported, isNextdoorSupported ]
+		[ isInstagramSupported, isMastodonSupported, isNextdoorSupported, isThreadsSupported ]
 	);
 }
diff --git a/projects/js-packages/publicize-components/src/social-store/index.js b/projects/js-packages/publicize-components/src/social-store/index.js
@@ -26,6 +26,7 @@ export const CONNECTION_SERVICE_MASTODON = 'mastodon';
 export const CONNECTION_SERVICE_NEXTDOOR = 'nextdoor';
 export const CONNECTION_SERVICE_TUMBLR = 'tumblr';
 export const CONNECTION_SERVICE_TWITTER = 'twitter';
+export const CONNECTION_SERVICE_THREADS = 'threads';
 
 export const store = createReduxStore( SOCIAL_STORE_ID, SOCIAL_STORE_CONFIG );
 register( store );
diff --git a/projects/js-packages/publicize-components/src/social-store/selectors/connection-data.js b/projects/js-packages/publicize-components/src/social-store/selectors/connection-data.js
@@ -120,9 +120,9 @@ export function getConnectionProfileDetails( state, service, { forceDefaults = f
 		);
 
 		if ( connection ) {
-			const { display_name, profile_display_name, profile_picture } = connection;
+			const { display_name, profile_display_name, profile_picture, external_display } = connection;
 
-			displayName = 'twitter' === service ? profile_display_name : display_name;
+			displayName = 'twitter' === service ? profile_display_name : display_name || external_display;
 			username = 'twitter' === service ? display_name : connection.username;
 			profileImage = profile_picture;
 		}

diff --git a/projects/packages/publicize/changelog/add-social-threads-preview b/projects/packages/publicize/changelog/add-social-threads-preview
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Added social preview for Threads
diff --git a/projects/packages/publicize/package.json b/projects/packages/publicize/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-publicize",
-	"version": "0.46.2",
+	"version": "0.46.3-alpha",
 	"description": "Publicize makes it easy to share your site’s posts on several social media networks automatically when you publish a new post.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/publicize/#readme",
 	"bugs": {

diff --git a/projects/packages/publicize/src/class-publicize-base.php b/projects/packages/publicize/src/class-publicize-base.php
@@ -2051,6 +2051,10 @@ public function get_supported_additional_connections() {
 			$additional_connections[] = 'nextdoor';
 		}
 
+		if ( $this->has_connection_feature( 'threads' ) ) {
+			$additional_connections[] = 'threads';
+		}
+
 		return $additional_connections;
 	}
 

diff --git a/projects/plugins/jetpack/changelog/add-social-threads-preview b/projects/plugins/jetpack/changelog/add-social-threads-preview
@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Add Threads preview to Social Previews 
diff --git a/projects/plugins/jetpack/package.json b/projects/plugins/jetpack/package.json
@@ -59,7 +59,7 @@
 		"@automattic/jetpack-shared-extension-utils": "workspace:*",
 		"@automattic/popup-monitor": "1.0.2",
 		"@automattic/request-external-access": "1.0.0",
-		"@automattic/social-previews": "2.0.1",
+		"@automattic/social-previews": "2.1.0-beta.3",
 		"@automattic/viewport": "1.0.0",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@wordpress/base-styles": "5.0.0",