Social: Update social media preview mockups to match current platform UIs

Author: ederrengifo

projects/js-packages/charts/src/charts/leaderboard-chart/leaderboard-chart.tsx

@@ -326,7 +326,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 
 								return (
 									<Fragment key={ entry.id }>
-										<Stack direction="column" gap={ labelSpacing }>
+										<Stack direction="column" gap={ labelSpacing as any }>
 											<BarWithLabel
 												entry={ entry }
 												withComparison={ withComparison }

projects/js-packages/number-formatters/.duel-cache/dual.708b8660.tsbuildinfo

@@ -13,11 +13,28 @@ const BlueskyPostCard: React.FC< BlueskyPreviewProps > = ( { title, description,
 				</div>
 			) : null }
 			<div className="bluesky-preview__card-text">
-				<div className="bluesky-preview__card-site">{ baseDomain( url ) }</div>
 				<div className="bluesky-preview__card-title">
 					{ blueskyTitle( title ) || getTitleFromDescription( description ) }
 				</div>
-				<div className="bluesky-preview__card-description">{ stripHtmlTags( description ) }</div>
+				{ description && (
+					<div className="bluesky-preview__card-description">{ stripHtmlTags( description ) }</div>
+				) }
+			</div>
+			<div className="bluesky-preview__card-domain">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					width="14"
+					height="14"
+					aria-hidden="true"
+				>
+					<circle cx="12" cy="12" r="10" />
+					<path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+				</svg>
+				<span>{ baseDomain( url ) }</span>
 			</div>
 		</div>
 	);

projects/js-packages/number-formatters/.duel-cache/primary.708b8660.tsbuildinfo

@@ -5,60 +5,71 @@
 	flex-direction: column;
 	margin-top: 1rem;
 
-	border: solid 1px #d9e1e8;
+	border: solid 1px #d4dbe2;
 	border-radius: 8px;
 	overflow: hidden;
 	color: vars.$bluesky-body-text-color;
 }
 
-.bluesky-preview__card-image img {
-	width: 100%;
-	object-fit: cover;
+.bluesky-preview__card-image {
+	aspect-ratio: 1.91 / 1;
+	overflow: hidden;
+
+	img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		display: block;
+	}
 }
 
 .bluesky-preview__card-text {
-	border-bottom-width: 1px;
-	border-left-width: 1px;
-	border-right-width: 1px;
-	flex: 1 1 0%;
-	padding: 8px 14px;
-	border-color: rgb(212, 219, 226);
-	border-bottom-right-radius: 8px;
-	border-bottom-left-radius: 8px;
+	padding: 14px !important;
 }
 
 .bluesky-preview__card-title {
 	-webkit-box-orient: vertical;
-	-webkit-line-clamp: 3;
+	-webkit-line-clamp: 2;
 	display: -webkit-box;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	color: rgb(11, 15, 20);
 	font-size: 16px;
-	font-weight: 700;
-	letter-spacing: 0.25px;
-}
-
-.bluesky-preview__card-site {
-	font-size: 14px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	color: rgb(66, 87, 108);
-	font-weight: 400;
+	font-weight: 600;
 	letter-spacing: 0.25px;
-	margin-bottom: 2px;
-	margin-top: 2px;
+	line-height: 1.3;
 }
 
 .bluesky-preview__card-description {
 	-webkit-box-orient: vertical;
 	-webkit-line-clamp: 2;
-	color: rgb(11, 15, 20);
+	color: rgb(66, 87, 108);
 	display: -webkit-box;
-	font-size: 15px;
+	font-size: 14px;
 	font-weight: 400;
 	letter-spacing: 0.25px;
 	margin-top: 4px;
 	overflow: hidden;
+	line-height: 1.4;
+}
+
+.bluesky-preview__card-domain {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	padding: 10px 14px;
+	border-top: 1px solid #d4dbe2;
+	font-size: 14px;
+	color: rgb(66, 87, 108);
+
+	svg {
+		flex-shrink: 0;
+		color: rgb(66, 87, 108);
+	}
+
+	span {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
 }

projects/js-packages/social-previews/src/bluesky-preview/post/card/index.tsx

@@ -1,8 +1,8 @@
 @use "./variables" as vars;
 
 .bluesky-preview__section {
-	max-width: 100%;
-	width: vars.$bluesky-preview-width;
+	width: 100%;
+	max-width: vars.$bluesky-preview-width;
 	margin-inline: auto;
 }
 
@@ -25,7 +25,7 @@
 	font-family: vars.$bluesky-preview-font-family;
 	/* stylelint-disable-next-line scales/font-sizes */
 	font-size: 0.9375rem;
-	line-height: 1.47;
+	line-height: 20px !important;
 
 	:any-link {
 		color: vars.$bluesky-preview-accent-color;
@@ -38,6 +38,10 @@
 	margin-top: 8px;
 	min-height: 64px;
 	border-radius: 8px;
+	max-height: 516px;
+	width: fit-content;
+	max-width: 100%;
+	overflow: hidden;
 
 	&.as-grid {
 		display: grid;
@@ -55,8 +59,11 @@
 
 		img,
 		video {
-			width: 100%;
-			object-fit: cover;
+			max-width: 100%;
+			max-height: 516px;
+			width: auto;
+			height: auto;
+			display: block;
 		}
 	}
 }

projects/js-packages/social-previews/src/bluesky-preview/post/card/styles.scss

@@ -1,52 +1,37 @@
 import { __ } from '@wordpress/i18n';
-import { TYPE_ARTICLE, PORTRAIT_MODE } from '../constants';
+import { TYPE_ARTICLE } from '../constants';
 import { baseDomain } from '../helpers';
 import CustomText from './custom-text';
-import { facebookTitle, facebookDescription } from './helpers';
-import useImage from './hooks/use-image-hook';
+import { facebookTitle } from './helpers';
 import FacebookPostActions from './post/actions';
 import FacebookPostHeader from './post/header';
-import FacebookPostIcon from './post/icons';
 import type { FacebookPreviewProps } from './types';
 
 import './style.scss';
 
-export type FacebookLinkPreviewProps = FacebookPreviewProps & {
-	compactDescription?: boolean;
-};
+export type FacebookLinkPreviewProps = Omit< FacebookPreviewProps, 'imageMode' >;
 
 export const FacebookLinkPreview: React.FC< FacebookLinkPreviewProps > = ( {
 	url,
 	title,
-	description,
 	image,
 	user,
 	customText,
 	type,
-	imageMode,
-	compactDescription,
 } ) => {
-	const [ mode, isLoadingImage, imgProps ] = useImage( { mode: imageMode } );
 	const isArticle = type === TYPE_ARTICLE;
-	const portraitMode = ( isArticle && ! image ) || mode === PORTRAIT_MODE;
-	const modeClass = `is-${ portraitMode ? 'portrait' : 'landscape' }`;
 
 	return (
 		<div className="facebook-preview__post">
 			<FacebookPostHeader user={ user } />
 			<div className="facebook-preview__content">
 				{ customText && <CustomText text={ customText } url={ url } /> }
-				<div
-					className={ `facebook-preview__body ${ modeClass } ${
-						image && isLoadingImage ? 'is-loading' : ''
-					}` }
-				>
+				<div className="facebook-preview__body">
 					{ ( image || isArticle ) && (
-						<div
-							className={ `facebook-preview__image ${ image ? '' : 'is-empty' } ${ modeClass }` }
-						>
-							{ /* eslint-disable jsx-a11y/alt-text */ }
-							{ image && <img src={ image } { ...imgProps } /> }
+						<div className="facebook-preview__image is-landscape">
+							{ image && (
+								<img src={ image } alt={ __( 'Facebook Preview Thumbnail', 'social-previews' ) } />
+							) }
 						</div>
 					) }
 					<div className="facebook-preview__text">
@@ -55,20 +40,6 @@ export const FacebookLinkPreview: React.FC< FacebookLinkPreviewProps > = ( {
 							<div className="facebook-preview__title">
 								{ facebookTitle( title ) || baseDomain( url ) }
 							</div>
-							<div
-								className={ `facebook-preview__description ${
-									compactDescription ? 'is-compact' : ''
-								}` }
-							>
-								{ description && facebookDescription( description ) }
-								{ isArticle &&
-									! description &&
-									// translators: Default description for a Facebook post
-									__( 'Visit the post for more.', 'social-previews' ) }
-							</div>
-							<div className="facebook-preview__info">
-								<FacebookPostIcon name="info" />
-							</div>
 						</div>
 					</div>
 				</div>

projects/js-packages/social-previews/src/bluesky-preview/styles.scss

@@ -1,6 +1,4 @@
-import { PORTRAIT_MODE } from '../constants';
 import CustomText from './custom-text';
-import useImage from './hooks/use-image-hook';
 import FacebookPostActions from './post/actions';
 import FacebookPostHeader from './post/header';
 import type { FacebookPreviewProps } from './types';
@@ -12,23 +10,19 @@ export const FacebookPostPreview: React.FC< FacebookPreviewProps > = ( {
 	user,
 	customText,
 	media,
-	imageMode,
 } ) => {
-	const [ mode ] = useImage( { mode: imageMode } );
-	const modeClass = `is-${ mode === PORTRAIT_MODE ? 'portrait' : 'landscape' }`;
-
 	return (
 		<div className="facebook-preview__post">
 			<FacebookPostHeader user={ user } />
 			<div className="facebook-preview__content">
 				{ customText && <CustomText text={ customText } url={ url } forceUrlDisplay /> }
 				<div className="facebook-preview__body">
 					{ media ? (
-						<div className={ `facebook-preview__media ${ modeClass }` }>
+						<div className="facebook-preview__media">
 							{ media.map( ( mediaItem, index ) => (
 								<div
 									key={ `facebook-preview__media-item-${ index }` }
-									className={ `facebook-preview__media-item ${ modeClass }` }
+									className="facebook-preview__media-item"
 								>
 									{ mediaItem.type.startsWith( 'video/' ) ? (
 										<video controls>

projects/js-packages/social-previews/src/facebook-preview/link-preview.tsx

@@ -2,7 +2,8 @@
 
 .facebook-preview__post {
 	overflow-y: hidden;
-	max-width: clamp(#{vars.$facebook-preview-min-width}, 100%, #{vars.$facebook-preview-max-width});
+	width: 100%;
+	max-width: vars.$facebook-preview-max-width;
 	margin-inline: auto;
 
 	display: flex;
@@ -81,16 +82,16 @@
 	/* stylelint-disable-next-line scales/font-sizes */
 	font-size: 0.8125rem; // 13px
 	line-height: 1;
-	text-transform: uppercase;
+	text-transform: lowercase !important;
 }
 
 .facebook-preview__title {
 	margin: 0.25rem 0 0.125rem;
 
 	/* stylelint-disable-next-line scales/font-sizes */
-	font-size: 0.9444rem; // 17px
+	font-size: 0.9375rem !important; // 15px
 	font-weight: 600;
-	line-height: 1.18;
+	line-height: 1.33 !important;
 }
 
 .facebook-preview__description {
@@ -153,25 +154,19 @@
 .facebook-preview__media-item {
 	display: flex;
 	justify-content: center;
+	overflow: hidden;
 
 	width: 100%;
+	// Cap height at 4:5 ratio to match Facebook's mobile feed max
+	max-height: 850px;
 
 	background-color: vars.$facebook-preview-image-background;
 
-	&.is-portrait {
-
-		img {
-			width: 500px;
-			height: 685px;
-		}
-	}
-
-	&.is-landscape {
-
-		img {
-			width: 100%;
-			aspect-ratio: 1.78;
-		}
+	img,
+	video {
+		width: 100%;
+		height: auto;
+		object-fit: cover;
 	}
 }
 

projects/js-packages/social-previews/src/facebook-preview/post-preview.tsx

@@ -0,0 +1,14 @@
+export const Repost: React.FC = () => {
+	return (
+		<svg
+			color="rgb(38, 38, 38)"
+			fill="currentColor"
+			height="24"
+			role="img"
+			viewBox="0 0 24 24"
+			width="24"
+		>
+			<path d="M19.998 9.497a1 1 0 0 0-1 1v4.228a3.274 3.274 0 0 1-3.27 3.27h-5.313l1.791-1.787a1 1 0 0 0-1.412-1.416L7.29 18.287a1.004 1.004 0 0 0-.294.707v.001c0 .023.012.042.013.065a.923.923 0 0 0 .281.643l3.502 3.504a1 1 0 0 0 1.414-1.414l-1.797-1.798h5.318a5.276 5.276 0 0 0 5.27-5.27v-4.228a1 1 0 0 0-1-1Zm-6.41-3.496-1.795 1.795a1 1 0 1 0 1.414 1.414l3.5-3.5a1.003 1.003 0 0 0 0-1.417l-3.5-3.5a1 1 0 0 0-1.414 1.414l1.794 1.794H8.27A5.277 5.277 0 0 0 3 9.271V13.5a1 1 0 0 0 2 0V9.271a3.275 3.275 0 0 1 3.271-3.27Z" />
+		</svg>
+	);
+};