Social: Added Bluesky to social previews (#39659)

* Update dependencies

* Add Bluesky to social previews

* Add changelogs

* Update social-previews package to fix the Bluesky URL

* Update pnpm-lock.yaml

* Fix dependencies after rebase

projects/js-packages/publicize-components/changelog/add-bluesky-to-social-previews

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Social: Added Bluesky to social previews

projects/js-packages/publicize-components/package.json

@@ -24,7 +24,7 @@
 		"@automattic/jetpack-script-data": "workspace:*",
 		"@automattic/jetpack-shared-extension-utils": "workspace:*",
 		"@automattic/popup-monitor": "1.0.2",
-		"@automattic/social-previews": "2.1.0-beta.6",
+		"@automattic/social-previews": "2.1.0-beta.8",
 		"@wordpress/annotations": "3.9.0",
 		"@wordpress/api-fetch": "7.9.0",
 		"@wordpress/block-editor": "14.4.0",

projects/js-packages/publicize-components/src/components/social-post-modal/post-preview.tsx

@@ -1,4 +1,5 @@
 import {
+	BlueskyPostPreview,
 	FacebookLinkPreview,
 	FacebookPostPreview,
 	InstagramPostPreview,
@@ -34,6 +35,7 @@ export function PostPreview( { connection }: PostPreviewProps ) {
 		() => ( {
 			displayName: connection.display_name || connection.external_display,
 			profileImage: connection.profile_picture,
+			externalName: connection.external_name,
 		} ),
 		[ connection ]
 	);
@@ -64,6 +66,28 @@ export function PostPreview( { connection }: PostPreviewProps ) {
 	);
 
 	switch ( connection.service_name ) {
+		case 'bluesky': {
+			const firstMediaItem = media?.[ 0 ];
+
+			const customImage = firstMediaItem?.type.startsWith( 'image/' ) ? firstMediaItem.url : null;
+
+			return (
+				<BlueskyPostPreview
+					{ ...commonProps }
+					description={ decodeEntities( excerpt ) }
+					user={ {
+						avatarUrl: user.profileImage,
+						address: user.externalName,
+						displayName: user.displayName,
+					} }
+					customText={ decodeEntities(
+						message || `${ title }\n\n${ excerpt.replaceAll( /[\s\n]/g, ' ' ) }`
+					) }
+					customImage={ customImage }
+				/>
+			);
+		}
+
 		case 'facebook':
 			return hasMedia ? (
 				<FacebookPostPreview

projects/js-packages/publicize-components/src/components/social-previews/bluesky.tsx

@@ -0,0 +1,57 @@
+import { BlueskyPreviews } from '@automattic/social-previews';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { decodeEntities } from '@wordpress/html-entities';
+import useSocialMediaMessage from '../../hooks/use-social-media-message';
+import { store, CONNECTION_SERVICE_BLUESKY } from '../../social-store';
+
+const BlueskyPreview = props => {
+	const { message } = useSocialMediaMessage();
+	const { content, siteName } = useSelect( select => {
+		// @ts-expect-error -- `@wordpress/editor` is a nightmare to work with TypeScript
+		const { getEditedPostAttribute } = select( editorStore );
+		// @ts-expect-error -- It says, "Property 'getUnstableBase' does not exist..." but it does
+		const { getUnstableBase } = select( coreStore );
+
+		return {
+			content: getEditedPostAttribute( 'content' ).split( '<!--more' )[ 0 ],
+			siteName: decodeEntities( getUnstableBase().name ),
+		};
+	}, [] );
+
+	const user = useSelect( select => {
+		const {
+			displayName,
+			profileImage: avatarUrl,
+			username: address,
+		} = select( store ).getConnectionProfileDetails( CONNECTION_SERVICE_BLUESKY );
+
+		return { displayName, avatarUrl, address };
+	}, [] );
+
+	const firstMediaItem = props.media?.[ 0 ];
+
+	const customImage = firstMediaItem?.type.startsWith( 'image/' ) ? firstMediaItem.url : null;
+
+	const blueskyConnections = useSelect(
+		select => select( store ).getConnectionsByService( CONNECTION_SERVICE_BLUESKY ),
+		[]
+	);
+
+	return (
+		<BlueskyPreviews
+			{ ...props }
+			siteName={ siteName }
+			user={ user }
+			description={ decodeEntities( content ) }
+			customText={ decodeEntities(
+				message || `${ props.title }\n\n${ content.replaceAll( /[\s\n]/g, ' ' ) }`
+			) }
+			customImage={ customImage }
+			hidePostPreview={ ! blueskyConnections.length }
+		/>
+	);
+};
+
+export default BlueskyPreview;

projects/js-packages/publicize-components/src/components/social-previews/mastodon.js

@@ -1,7 +1,6 @@
 import { MastodonPreviews } from '@automattic/social-previews';
 import { useSelect } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
-import { usePostMeta } from '../../hooks/use-post-meta';
 import useSocialMediaMessage from '../../hooks/use-social-media-message';
 import { SOCIAL_STORE_ID, CONNECTION_SERVICE_MASTODON } from '../../social-store';
 
@@ -16,7 +15,6 @@ const MastodonPreview = props => {
 			siteName: decodeEntities( getUnstableBase().name ),
 		};
 	} );
-	const { attachedMedia } = usePostMeta();
 
 	const user = useSelect( select => {
 		const {
@@ -40,7 +38,6 @@ const MastodonPreview = props => {
 			description={ content }
 			customText={ message }
 			customImage={ customImage }
-			isSocialPost={ attachedMedia.length > 0 }
 		/>
 	);
 };

projects/js-packages/publicize-components/src/components/social-previews/use-available-services.js

@@ -3,6 +3,7 @@ import { __, _x } from '@wordpress/i18n';
 import React, { useMemo } from 'react';
 import { CONNECTION_SERVICE_THREADS } from '../../social-store';
 import { getSupportedAdditionalConnections } from '../../utils';
+import BlueskyPreview from './bluesky';
 import FacebookPreview from './facebook';
 import GoogleSearch from './google-search';
 import { Instagram } from './instagram';
@@ -85,6 +86,12 @@ export function useAvailableSerivces() {
 					name: 'mastodon',
 					preview: MastodonPreview,
 				},
+				{
+					title: __( 'Bluesky', 'jetpack' ),
+					icon: props => <SocialServiceIcon serviceName="bluesky" { ...props } />,
+					name: 'bluesky',
+					preview: BlueskyPreview,
+				},
 			].filter( Boolean ),
 		[ isThreadsSupported ]
 	);

projects/js-packages/publicize-components/src/social-store/index.js

@@ -23,6 +23,7 @@ export const CONNECTION_SERVICE_FACEBOOK = 'facebook';
 export const CONNECTION_SERVICE_INSTAGRAM_BUSINESS = 'instagram-business';
 export const CONNECTION_SERVICE_LINKEDIN = 'linkedin';
 export const CONNECTION_SERVICE_MASTODON = 'mastodon';
+export const CONNECTION_SERVICE_BLUESKY = 'bluesky';
 export const CONNECTION_SERVICE_NEXTDOOR = 'nextdoor';
 export const CONNECTION_SERVICE_TUMBLR = 'tumblr';
 export const CONNECTION_SERVICE_TWITTER = 'twitter';

projects/js-packages/publicize-components/src/social-store/selectors/connection-data.js

@@ -141,11 +141,22 @@ export function getConnectionProfileDetails( state, service, { forceDefaults = f
 		);
 
 		if ( connection ) {
-			const { display_name, profile_display_name, profile_picture, external_display } = connection;
+			const {
+				display_name,
+				profile_display_name,
+				profile_picture,
+				external_display,
+				external_name,
+			} = connection;
 
 			displayName = 'twitter' === service ? profile_display_name : display_name || external_display;
 			username = 'twitter' === service ? display_name : connection.username;
 			profileImage = profile_picture;
+
+			// Connections schema is a mess
+			if ( 'bluesky' === service ) {
+				username = external_name;
+			}
 		}
 	}
 

projects/js-packages/publicize-components/src/social-store/types.ts

@@ -6,6 +6,7 @@ export type Connection = {
 	display_name: string;
 	external_display?: string;
 	external_id: string;
+	external_name?: string;
 	username: string;
 	enabled: boolean;
 	done: boolean;

projects/plugins/jetpack/changelog/add-bluesky-to-social-previews

@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Social: Added Bluesky to social previews

projects/plugins/jetpack/package.json

@@ -60,7 +60,7 @@
 		"@automattic/jetpack-shared-extension-utils": "workspace:*",
 		"@automattic/popup-monitor": "1.0.2",
 		"@automattic/request-external-access": "1.0.0",
-		"@automattic/social-previews": "2.1.0-beta.6",
+		"@automattic/social-previews": "2.1.0-beta.8",
 		"@automattic/viewport": "1.0.0",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@wordpress/base-styles": "5.9.0",

projects/plugins/social/changelog/add-bluesky-to-social-previews

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Added Bluesky to social previews