Social: Pass down description for Social previews (#35728)

* Pass down description to previews

* changelog

* Fixup versions

* Use new package version

* Uplift social-previews to beta.12

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/8024949880

Author: pablinos

CHANGELOG.md

@@ -12,6 +12,9 @@ This is an alpha version! The changes listed here are not final.
 ### Added
 - Added toggle to Social admin page for the Social Notes
 
+### Changed
+- Added description to social previews for titeless posts
+
 ### Removed
 - Removed a notice to tell users that instagram is new nad can be connected
 

package.json

@@ -22,7 +22,7 @@
 		"@automattic/jetpack-components": "^0.48.4",
 		"@automattic/jetpack-connection": "^0.32.3",
 		"@automattic/jetpack-shared-extension-utils": "^0.14.2",
-		"@automattic/social-previews": "2.0.1-beta.10",
+		"@automattic/social-previews": "2.0.1-beta.12",
 		"@wordpress/annotations": "2.51.0",
 		"@wordpress/api-fetch": "6.48.0",
 		"@wordpress/block-editor": "12.19.0",
@@ -50,7 +50,7 @@
 		"@babel/core": "7.23.5",
 		"@babel/plugin-transform-react-jsx": "7.23.4",
 		"@babel/preset-react": "7.23.3",
-		"@babel/runtime": "7.23.5",
+		"@babel/runtime": "7.23.8",
 		"@testing-library/dom": "9.3.4",
 		"@testing-library/react": "14.2.0",
 		"@testing-library/user-event": "14.5.2",

src/components/social-previews/instagram.js

@@ -11,14 +11,14 @@ import { SOCIAL_STORE_ID, CONNECTION_SERVICE_INSTAGRAM_BUSINESS } from '../../so
  * @returns {React.ReactNode} The Instagram tab component.
  */
 export function Instagram( props ) {
-	const { title, image, media } = props;
+	const { title, image, media, description } = props;
 	const { username: name, profileImage } = useSelect( select =>
 		select( SOCIAL_STORE_ID ).getConnectionProfileDetails( CONNECTION_SERVICE_INSTAGRAM_BUSINESS )
 	);
 
 	const { message: text } = useSocialMediaMessage();
 
-	const caption = text || title;
+	const caption = text || title || description;
 
 	return (
 		<InstagramPreviews

src/components/social-previews/linkedin.js

@@ -12,7 +12,7 @@ import { SOCIAL_STORE_ID, CONNECTION_SERVICE_LINKEDIN } from '../../social-store
  * @returns {React.ReactNode} The linkedin tab component.
  */
 export function LinkedIn( props ) {
-	const { title, url, image, media } = props;
+	const { title, url, image, media, description: postDescription } = props;
 
 	const { displayName: name, profileImage } = useSelect( select =>
 		select( SOCIAL_STORE_ID ).getConnectionProfileDetails( CONNECTION_SERVICE_LINKEDIN )
@@ -21,7 +21,7 @@ export function LinkedIn( props ) {
 	const { message: text } = useSocialMediaMessage();
 
 	// Add the URL to the description if there is media
-	const description = `${ text || title } ${ media.length ? url : '' }`.trim();
+	const description = `${ text || title || postDescription } ${ media.length ? url : '' }`.trim();
 
 	return (
 		<LinkedInPreviews

src/components/social-previews/nextdoor.js

@@ -11,7 +11,7 @@ import { SOCIAL_STORE_ID, CONNECTION_SERVICE_NEXTDOOR } from '../../social-store
  * @returns {React.ReactNode} The linkedin tab component.
  */
 export function Nextdoor( props ) {
-	const { title, url, image, media } = props;
+	const { title, url, image, media, description: postDescription } = props;
 
 	const { displayName: name, profileImage } = useSelect( select =>
 		select( SOCIAL_STORE_ID ).getConnectionProfileDetails( CONNECTION_SERVICE_NEXTDOOR )
@@ -20,7 +20,7 @@ export function Nextdoor( props ) {
 	const { message: text } = useSocialMediaMessage();
 
 	// Add the URL to the description if there is media
-	const description = `${ text || title } ${ media.length ? url : '' }`.trim();
+	const description = `${ text || title || postDescription } ${ media.length ? url : '' }`.trim();
 
 	return (
 		<NextdoorPreviews