Add support for initials avatar parameters

Author: johngodley

web/packages/hovercards/playground/index.html

@@ -38,19 +38,29 @@
 		<main id="main">
 			<div id="vanilla">
 				<img
-					src="https://www.gravatar.com/avatar/c3bb8d897bb538896708195dd9eb162f585654611c50a3a1c9a16a7b64f33270?s=128&d=retro&r=g"
+					src="https://gravatar.com/avatar/c3bb8d897bb538896708195dd9eb162f585654611c50a3a1c9a16a7b64f33270?s=128&d=retro&r=g"
 					width="60"
 					height="60"
 				/>
 				<img
-						src="https://www.gravatar.com/avatar/a8fb08baaca16a8c0c87177d3d54499b"
-						width="60"
-						height="60"
+					src="https://gravatar.com/avatar/a8fb08baaca16a8c0c87177d3d54499b"
+					width="60"
+					height="60"
+				/>
+				<img
+					src="https://gravatar.com/avatar/c3bb8d897bb538896708195dd9eb162f585654611c50a3a1c9a16a7b64f33270111"
+					width="60"
+					height="60"
 				/>
 				<img
-						src="https://www.gravatar.com/avatar/c3bb8d897bb538896708195dd9eb162f585654611c50a3a1c9a16a7b64f33270111"
-						width="60"
-						height="60"
+					src="https://gravatar.com/avatar/c3bb8d897bb538896708195dd9eb162f585654611c50a3a1c9a16a7b64f33270?f=y&d=initials&initials=A8"
+					width="60"
+					height="60"
+				/>
+				<img
+					src="https://gravatar.com/avatar/a3bb8d897bb538896708195dd9eb162f585654611c50a3a1c9a16a7b64f33270?f=y&d=initials&initials=A8"
+					width="60"
+					height="60"
 				/>
 				<div id="attr" data-gravatar-hash="c3bb8d897bb538896708195dd9eb162f585654611c50a3a1c9a16a7b64f33270?s=60&d=retro&r=g">@WellyTest</div>
 			</div>

web/packages/hovercards/src/core.ts

@@ -253,7 +253,22 @@ export default class Hovercards {
 				const d = p.get( 'd' ) || p.get( 'default' );
 				const f = p.get( 'f' ) || p.get( 'forcedefault' );
 				const r = p.get( 'r' ) || p.get( 'rating' );
-				params = [ d && `d=${ d }`, f && `f=${ f }`, r && `r=${ r }` ].filter( Boolean ).join( '&' );
+				const initials = p.get( 'initials' );
+				const name = p.get( 'name' );
+				const txtColor = p.get( 'txt_color' );
+				const bgColor = p.get( 'bg_color' );
+
+				params = [
+					d && `d=${ d }`,
+					f && `f=${ f }`,
+					r && `r=${ r }`,
+					initials && `initials=${ initials }`,
+					name && `name=${ name }`,
+					txtColor && `txt_color=${ txtColor }`,
+					bgColor && `bg_color=${ bgColor }`,
+				]
+					.filter( Boolean )
+					.join( '&' );
 
 				return {
 					id: `gravatar-hovercard-${ hash }-${ idx }`,
@@ -549,11 +564,11 @@ export default class Hovercards {
 
 			return `
 				<li class="gravatar-hovercard__drawer-item">
-					<img 
-						class="gravatar-hovercard__drawer-item-icon" 
-						width="24" 
-						height="24" 
-						src="https://secure.gravatar.com/${ icons[ key ] }" 
+					<img
+						class="gravatar-hovercard__drawer-item-icon"
+						width="24"
+						height="24"
+						src="https://secure.gravatar.com/${ icons[ key ] }"
 						alt=""
 					>
 					<div class="gravatar-hovercard__drawer-item-info">