Sites list: Display only site icons as site thumbnails

client/a8c-for-agencies/components/items-dashboard/item-preview-pane/item-preview-pane-header/index.tsx

@@ -46,7 +46,7 @@ export default function ItemPreviewPaneHeader( {
 			<div className="item-preview__header-content">
 				<SiteFavicon
 					blogId={ itemData.blogId }
-					isDotcomSite={ itemData.isDotcomSite }
+					fallback={ itemData.isDotcomSite ? 'wordpress-logo' : 'color' }
 					color={ itemData.color }
 					className="item-preview__header-favicon"
 					size={ size }

client/a8c-for-agencies/components/items-dashboard/site-favicon/index.tsx

@@ -1,31 +1,49 @@
 import { WordPressLogo } from '@automattic/components';
+import { useI18n } from '@wordpress/react-i18n';
 import classNames from 'classnames';
 import SiteIcon from 'calypso/blocks/site-icon';
+import { getFirstGrapheme } from 'calypso/lib/string';
+import { useSelector } from 'calypso/state';
+import { getSite } from 'calypso/state/sites/selectors';
 
 import './style.scss';
 
 interface SiteFaviconProps {
 	blogId?: number;
-	isDotcomSite?: boolean;
 	color?: string;
 	size?: number;
 	className?: string;
+	fallback?: 'color' | 'wordpress-logo' | 'first-grapheme';
 }
 
 const SiteFavicon = ( {
 	blogId,
 	color,
-	isDotcomSite = false,
 	size = 40,
 	className = '',
+	fallback = 'color',
 }: SiteFaviconProps ) => {
+	const { __ } = useI18n();
 	const siteColor = color ?? 'linear-gradient(45deg, #ff0056, #ff8a78, #57b7ff, #9c00d4)';
+	const site = useSelector( ( state ) => getSite( state, blogId ) );
 
-	const defaultFavicon = isDotcomSite ? (
-		<WordPressLogo className="wpcom-favicon" size={ size * 0.8 } />
-	) : (
-		<div className="no-favicon" style={ { background: siteColor } } />
-	);
+	let defaultFavicon;
+	switch ( fallback ) {
+		case 'wordpress-logo':
+			defaultFavicon = <WordPressLogo className="wpcom-favicon" size={ size * 0.8 } />;
+			break;
+		case 'first-grapheme':
+			defaultFavicon = (
+				<div role="img" aria-label={ __( 'Site Icon' ) }>
+					{ getFirstGrapheme( site?.title ?? '' ) }
+				</div>
+			);
+			break;
+		case 'color':
+		default:
+			defaultFavicon = <div className="no-favicon" style={ { background: siteColor } } />;
+			break;
+	}
 
 	return (
 		<div className={ classNames( 'site-favicon', className ) }>

client/a8c-for-agencies/sections/sites/sites-dataviews/site-data-field.tsx

@@ -16,7 +16,10 @@ const SiteDataField = ( { isLoading, site, onSiteTitleClick }: SiteDataFieldProp
 
 	return (
 		<Button className="sites-dataviews__site" onClick={ () => onSiteTitleClick( site ) } borderless>
-			<SiteFavicon blogId={ site.blog_id } isDotcomSite={ site.is_atomic } />
+			<SiteFavicon
+				blogId={ site.blog_id }
+				fallback={ site.is_atomic ? 'wordpress-logo' : 'color' }
+			/>
 			<div className="sites-dataviews__site-name">
 				{ site.blogname }
 				<div className="sites-dataviews__site-url">{ site.url }</div>

client/lib/string/index.js → client/lib/string/index.ts

@@ -3,7 +3,7 @@
  * @param {string} a the first string
  * @param {string} b the second string
  */
-export function areEqualIgnoringWhitespaceAndCase( a, b ) {
+export function areEqualIgnoringWhitespaceAndCase( a: string, b: string ) {
 	// Are they equal without any manipulation?
 	if ( a === b ) {
 		return true;
@@ -18,3 +18,18 @@ export function areEqualIgnoringWhitespaceAndCase( a, b ) {
 	b = b.replace( /[\s'.\-_"]/g, '' );
 	return a.toLowerCase() === b.toLowerCase();
 }
+
+export function getFirstGrapheme( input: string ) {
+	if ( 'Segmenter' in Intl ) {
+		const segmenter = new Intl.Segmenter();
+		const [ firstSegmentData ] = segmenter.segment( input );
+
+		return firstSegmentData?.segment ?? '';
+	}
+
+	const codePoint = input.codePointAt( 0 );
+	if ( codePoint ) {
+		return String.fromCodePoint( codePoint );
+	}
+	return '';
+}

client/sites-dashboard-v2/dotcom-style.scss

@@ -336,26 +336,25 @@
 			}
 		}
 
-		.sites-site-thumbnail {
-			display: flex;
-		}
-
 		.sites-site-favicon {
-			display: none;
+			margin-right: 0;
+
+			.is-blank {
+				font-size: xx-large !important;
+				text-transform: uppercase;
+				background-color: #f5f7f7;
+				border: 1px solid rgb(238, 238, 238);
+				border-radius: 4px;
+				box-sizing: border-box;
+			}
 		}
 	}
 
 	.sites-dashboard:not(.preview-hidden) {
-		.sites-site-favicon {
-			display: flex;
-			margin-right: 0;
-		}
-
 		.a4a-layout__header {
 			align-items: center !important;
 		}
 
-		.sites-site-thumbnail,
 		.sites-manage-all-domains-button,
 		.a4a-layout__header-subtitle {
 			display: none;

client/sites-dashboard-v2/sites-dataviews/dataviews-fields/site-field.tsx

@@ -8,7 +8,6 @@ import * as React from 'react';
 import SiteFavicon from 'calypso/a8c-for-agencies/components/items-dashboard/site-favicon';
 import SitesMigrationTrialBadge from 'calypso/sites-dashboard/components/sites-migration-trial-badge';
 import SitesP2Badge from 'calypso/sites-dashboard/components/sites-p2-badge';
-import { SiteItemThumbnail } from 'calypso/sites-dashboard/components/sites-site-item-thumbnail';
 import { SiteName } from 'calypso/sites-dashboard/components/sites-site-name';
 import { Truncated } from 'calypso/sites-dashboard/components/sites-site-url';
 import SitesStagingBadge from 'calypso/sites-dashboard/components/sites-staging-badge';
@@ -88,16 +87,11 @@ const SiteField = ( { site, openSitePreviewPane }: Props ) => {
 				leading={
 					<Button className="sites-dataviews__preview-trigger" onClick={ onSiteClick } borderless>
 						<ListTileLeading title={ title }>
-							<SiteItemThumbnail
-								className="sites-site-thumbnail"
-								displayMode="list"
-								showPlaceholder={ false }
-								site={ site }
-							/>
 							<SiteFavicon
 								className="sites-site-favicon"
 								blogId={ site.ID }
-								isDotcomSite={ site.is_wpcom_atomic }
+								fallback="first-grapheme"
+								size={ 56 }
 							/>
 						</ListTileLeading>
 					</Button>

client/sites-dashboard/components/sites-site-item-thumbnail.tsx

@@ -7,6 +7,7 @@ import { addQueryArgs } from '@wordpress/url';
 import classNames from 'classnames';
 import { ComponentProps } from 'react';
 import Image from 'calypso/components/image';
+import { getFirstGrapheme } from 'calypso/lib/string';
 import { P2Thumbnail } from './p2-thumbnail';
 import { SiteComingSoon } from './sites-site-coming-soon';
 import type { SitesDisplayMode } from './sites-display-mode-switcher';
@@ -131,18 +132,3 @@ export const SiteItemThumbnail = ( {
 		</SiteThumbnail>
 	);
 };
-
-function getFirstGrapheme( input: string ) {
-	if ( 'Segmenter' in Intl ) {
-		const segmenter = new Intl.Segmenter();
-		const [ firstSegmentData ] = segmenter.segment( input );
-
-		return firstSegmentData?.segment ?? '';
-	}
-
-	const codePoint = input.codePointAt( 0 );
-	if ( codePoint ) {
-		return String.fromCodePoint( codePoint );
-	}
-	return '';
-}