Forms: show Gravatar for IP (#45726)

* Forms: load Gravatar also for rows without emails

* explain

* changelog

* Use mystery person for IP & URL

Author: simison

projects/packages/forms/changelog/update-forms-gravatar-for-ip

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Forms: show gravatars also for rows without emails

projects/packages/forms/src/dashboard/components/gravatar/index.tsx

@@ -9,6 +9,16 @@ import { sha256 } from 'js-sha256';
 import './style.scss';
 
 type GravatarProps = {
+	defaultImage?: // https://docs.gravatar.com/sdk/images/#default-image
+	| 'blank'
+		| 'color'
+		| 'identicon'
+		| 'initials'
+		| 'monsterid'
+		| 'mp'
+		| 'retro'
+		| 'robohash'
+		| 'wavatar';
 	displayName?: string;
 	email: string;
 	size?: number;
@@ -25,6 +35,7 @@ type GravatarProps = {
  * @return {JSX.Element} The Gravatar component
  */
 export default function Gravatar( {
+	defaultImage = 'initials',
 	displayName,
 	email,
 	size = 48,
@@ -74,7 +85,7 @@ export default function Gravatar( {
 			alt={ displayName || '' }
 			className="jp-forms__gravatar"
 			ref={ profileImageRef }
-			src={ `https://0.gravatar.com/avatar/${ hashedEmail }?d=initials&name=${ displayName }` }
+			src={ `https://0.gravatar.com/avatar/${ hashedEmail }?d=${ defaultImage }&name=${ displayName }` }
 			width={ size }
 			height={ size }
 		/>

projects/packages/forms/src/dashboard/inbox/dataviews/index.js

@@ -227,6 +227,7 @@ export default function InboxView() {
 					const authorInfo = decodeEntities(
 						item.author_name || item.author_email || item.author_url || item.ip
 					);
+					const defaultImage = item.author_name || item.author_email ? 'initials' : 'mp';
 					return (
 						<div className="jp-forms__inbox__author-field">
 							{ item.is_unread && (
@@ -237,15 +238,14 @@ export default function InboxView() {
 									●
 								</span>
 							) }
-							{ item.author_email && (
-								<Gravatar
-									email={ item.author_email }
-									displayName={ authorInfo }
-									key={ decodeEntities( item.author_email ) }
-									size={ 32 }
-									useHovercard={ false }
-								/>
-							) }
+							<Gravatar
+								email={ item.author_email || item.ip } // With IP we still return placeholder image
+								defaultImage={ defaultImage }
+								displayName={ authorInfo }
+								key={ item.id }
+								size={ 32 }
+								useHovercard={ false }
+							/>
 							{ wrapperUnread( item.is_unread, authorInfo ) }
 						</div>
 					);