Fix empty gray circle when site has no logo on template list page (#3…

…7474)

* Refactor and show icon in place of missing site logo

Fix handling of unresolved site

Use globe icon

Enforce single child for tooltip by using ternary

* Fix handling of missing avatar

packages/edit-site/src/components/list/added-by.js

@@ -18,6 +18,7 @@ import {
 	commentAuthorAvatar as authorIcon,
 	layout as themeIcon,
 	plugins as pluginIcon,
+	globe as globeIcon,
 } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
@@ -35,25 +36,57 @@ function CustomizedTooltip( { isCustomized, children } ) {
 	);
 }
 
+function BaseAddedBy( { text, icon, imageUrl, isCustomized } ) {
+	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
+
+	return (
+		<HStack alignment="left">
+			<CustomizedTooltip isCustomized={ isCustomized }>
+				{ imageUrl ? (
+					<div
+						className={ classnames(
+							'edit-site-list-added-by__avatar',
+							{
+								'is-loaded': isImageLoaded,
+							}
+						) }
+					>
+						<img
+							onLoad={ () => setIsImageLoaded( true ) }
+							alt=""
+							src={ imageUrl }
+						/>
+					</div>
+				) : (
+					<div
+						className={ classnames(
+							'edit-site-list-added-by__icon',
+							{
+								'is-customized': isCustomized,
+							}
+						) }
+					>
+						<Icon icon={ icon } />
+					</div>
+				) }
+			</CustomizedTooltip>
+			<span>{ text }</span>
+		</HStack>
+	);
+}
+
 function AddedByTheme( { slug, isCustomized } ) {
 	const theme = useSelect(
 		( select ) => select( coreStore ).getTheme( slug ),
 		[ slug ]
 	);
 
 	return (
-		<HStack alignment="left">
-			<CustomizedTooltip isCustomized={ isCustomized }>
-				<div
-					className={ classnames( 'edit-site-list-added-by__icon', {
-						'is-customized': isCustomized,
-					} ) }
-				>
-					<Icon icon={ themeIcon } />
-				</div>
-			</CustomizedTooltip>
-			<span>{ theme?.name?.rendered || slug }</span>
-		</HStack>
+		<BaseAddedBy
+			icon={ themeIcon }
+			text={ theme?.name?.rendered || slug }
+			isCustomized={ isCustomized }
+		/>
 	);
 }
 
@@ -64,54 +97,25 @@ function AddedByPlugin( { slug, isCustomized } ) {
 	);
 
 	return (
-		<HStack alignment="left">
-			<CustomizedTooltip isCustomized={ isCustomized }>
-				<div
-					className={ classnames( 'edit-site-list-added-by__icon', {
-						'is-customized': isCustomized,
-					} ) }
-				>
-					<Icon icon={ pluginIcon } />
-				</div>
-			</CustomizedTooltip>
-			<span>{ plugin?.name || slug }</span>
-		</HStack>
+		<BaseAddedBy
+			icon={ pluginIcon }
+			text={ plugin?.name || slug }
+			isCustomized={ isCustomized }
+		/>
 	);
 }
 
 function AddedByAuthor( { id } ) {
 	const user = useSelect( ( select ) => select( coreStore ).getUser( id ), [
 		id,
 	] );
-	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
-
-	const avatarURL = user?.avatar_urls?.[ 48 ];
-	const hasAvatar = !! avatarURL;
 
 	return (
-		<HStack alignment="left">
-			<div
-				className={ classnames(
-					hasAvatar
-						? 'edit-site-list-added-by__avatar'
-						: 'edit-site-list-added-by__icon',
-					{
-						'is-loaded': isImageLoaded,
-					}
-				) }
-			>
-				{ hasAvatar ? (
-					<img
-						onLoad={ () => setIsImageLoaded( true ) }
-						alt=""
-						src={ avatarURL }
-					/>
-				) : (
-					<Icon icon={ authorIcon } />
-				) }
-			</div>
-			<span>{ user?.nickname }</span>
-		</HStack>
+		<BaseAddedBy
+			icon={ authorIcon }
+			imageUrl={ user?.avatar_urls?.[ 48 ] }
+			text={ user?.nickname }
+		/>
 	);
 }
 
@@ -121,29 +125,15 @@ function AddedBySite() {
 		const siteData = getEntityRecord( 'root', '__unstableBase' );
 
 		return {
-			name: siteData.name,
+			name: siteData?.name,
 			logoURL: siteData?.site_logo
 				? getMedia( siteData.site_logo )?.source_url
 				: undefined,
 		};
 	}, [] );
-	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
 
 	return (
-		<HStack alignment="left">
-			<div
-				className={ classnames( 'edit-site-list-added-by__avatar', {
-					'is-loaded': isImageLoaded,
-				} ) }
-			>
-				<img
-					onLoad={ () => setIsImageLoaded( true ) }
-					alt=""
-					src={ logoURL }
-				/>
-			</div>
-			<span>{ name }</span>
-		</HStack>
+		<BaseAddedBy icon={ globeIcon } imageUrl={ logoURL } text={ name } />
 	);
 }