@automattic/jetpack-components 2.1.1 → 2.2.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [2.2.0] - 2026-08-19
+### Added
+- Gravatar: pick a stable Color Studio background color per email for initials identity avatars via bg_color [#50578]
+
 ## [2.1.1] - 2026-08-06
 ### Changed
 - Update package dependencies. [#50509]
@@ -1901,6 +1905,7 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[2.2.0]: https://github.com/Automattic/jetpack-components/compare/2.1.1...2.2.0
 [2.1.1]: https://github.com/Automattic/jetpack-components/compare/2.1.0...2.1.1
 [2.1.0]: https://github.com/Automattic/jetpack-components/compare/2.0.1...2.1.0
 [2.0.1]: https://github.com/Automattic/jetpack-components/compare/2.0.0...2.0.1

package/build/components/gravatar/index.js

@@ -9,6 +9,51 @@ import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { sha256 } from 'js-sha256';
 import './style.scss';
+/**
+ * Background colors for the "initials" identity avatars, drawn from the
+ * Color Studio palette's 50 shades (https://color-studio.blog/).
+ *
+ * Only the 50-level shades are safe here: the white initials clear WCAG AA
+ * against them, and the warmer ones (orange, yellow, green, celadon) sit right
+ * on the 4.5:1 line. Swapping in a lighter tint would quietly drop below AA.
+ *
+ * Keep in sync with `Feedback_Author::IDENTITY_BG_COLORS` in
+ * projects/packages/forms/src/contact-form/class-feedback-author.php, which
+ * colors the same authors in the response notification emails. The hexes are
+ * spelled out rather than imported from `@automattic/color-studio` on purpose:
+ * PHP can't read node_modules at runtime, so importing here would let the two
+ * halves drift apart invisibly instead of visibly.
+ *
+ * Hex values without the leading `#`, as Gravatar's `bg_color` param expects.
+ */
+const IDENTITY_BG_COLORS = [
+    '3858e9', // Blue 50
+    '984a9c', // Purple 50
+    'c9356e', // Pink 50
+    'd63638', // Red 50
+    'b26200', // Orange 50
+    '9d6e00', // Yellow 50
+    '008a20', // Green 50
+    '008763', // Celadon 50
+];
+/**
+ * Picks a stable background color for an email's identity avatar, so the same
+ * address always renders on the same Color Studio color.
+ *
+ * Uses the first 8 hex chars of the normalized email's SHA-256, matching
+ * `Feedback_Author::get_identity_background_color()` in the Forms package.
+ *
+ * Any stable string works: the Forms dashboard falls back to the visitor's IP
+ * address for responses submitted without an email.
+ *
+ * @param email - Email address the avatar is rendered for.
+ * @return A hex color from IDENTITY_BG_COLORS.
+ */
+function getIdentityBackgroundColor(email) {
+    const hash = sha256(email.trim().toLowerCase());
+    const index = parseInt(hash.slice(0, 8), 16) % IDENTITY_BG_COLORS.length;
+    return IDENTITY_BG_COLORS[index];
+}
 /**
  * Renders a Gravatar profile image with an optional Gravatar profile hovercard.
  *
@@ -64,5 +109,6 @@ export default function Gravatar({ defaultImage = 'initials', displayName, email
     }
     const hashedEmail = sha256(email);
     const hovercardName = displayName ? `&name=${encodeURIComponent(displayName)}` : '';
-    return (_jsx("img", { ref: profileImageRef, className: clsx('jetpack-components-gravatar', className), alt: displayName || '', src: `https://secure.gravatar.com/avatar/${hashedEmail}?d=${defaultImage}${hovercardName}`, width: size, height: size, loading: "lazy" }));
+    const bgColorParam = defaultImage === 'initials' ? `&bg_color=${getIdentityBackgroundColor(email)}` : '';
+    return (_jsx("img", { ref: profileImageRef, className: clsx('jetpack-components-gravatar', className), alt: displayName || '', src: `https://secure.gravatar.com/avatar/${hashedEmail}?d=${defaultImage}${hovercardName}${bgColorParam}`, width: size, height: size, loading: "lazy" }));
 }

package/components/gravatar/index.tsx

@@ -23,6 +23,53 @@ type DefaultImage =
 	| 'robohash'
 	| 'wavatar';
 
+/**
+ * Background colors for the "initials" identity avatars, drawn from the
+ * Color Studio palette's 50 shades (https://color-studio.blog/).
+ *
+ * Only the 50-level shades are safe here: the white initials clear WCAG AA
+ * against them, and the warmer ones (orange, yellow, green, celadon) sit right
+ * on the 4.5:1 line. Swapping in a lighter tint would quietly drop below AA.
+ *
+ * Keep in sync with `Feedback_Author::IDENTITY_BG_COLORS` in
+ * projects/packages/forms/src/contact-form/class-feedback-author.php, which
+ * colors the same authors in the response notification emails. The hexes are
+ * spelled out rather than imported from `@automattic/color-studio` on purpose:
+ * PHP can't read node_modules at runtime, so importing here would let the two
+ * halves drift apart invisibly instead of visibly.
+ *
+ * Hex values without the leading `#`, as Gravatar's `bg_color` param expects.
+ */
+const IDENTITY_BG_COLORS = [
+	'3858e9', // Blue 50
+	'984a9c', // Purple 50
+	'c9356e', // Pink 50
+	'd63638', // Red 50
+	'b26200', // Orange 50
+	'9d6e00', // Yellow 50
+	'008a20', // Green 50
+	'008763', // Celadon 50
+];
+
+/**
+ * Picks a stable background color for an email's identity avatar, so the same
+ * address always renders on the same Color Studio color.
+ *
+ * Uses the first 8 hex chars of the normalized email's SHA-256, matching
+ * `Feedback_Author::get_identity_background_color()` in the Forms package.
+ *
+ * Any stable string works: the Forms dashboard falls back to the visitor's IP
+ * address for responses submitted without an email.
+ *
+ * @param email - Email address the avatar is rendered for.
+ * @return A hex color from IDENTITY_BG_COLORS.
+ */
+function getIdentityBackgroundColor( email: string ): string {
+	const hash = sha256( email.trim().toLowerCase() );
+	const index = parseInt( hash.slice( 0, 8 ), 16 ) % IDENTITY_BG_COLORS.length;
+	return IDENTITY_BG_COLORS[ index ];
+}
+
 export type GravatarProps = {
 	/**
 	 * Style of the placeholder image when the email has no Gravatar profile.
@@ -123,13 +170,15 @@ export default function Gravatar( {
 
 	const hashedEmail = sha256( email );
 	const hovercardName = displayName ? `&name=${ encodeURIComponent( displayName ) }` : '';
+	const bgColorParam =
+		defaultImage === 'initials' ? `&bg_color=${ getIdentityBackgroundColor( email ) }` : '';
 
 	return (
 		<img
 			ref={ profileImageRef }
 			className={ clsx( 'jetpack-components-gravatar', className ) }
 			alt={ displayName || '' }
-			src={ `https://secure.gravatar.com/avatar/${ hashedEmail }?d=${ defaultImage }${ hovercardName }` }
+			src={ `https://secure.gravatar.com/avatar/${ hashedEmail }?d=${ defaultImage }${ hovercardName }${ bgColorParam }` }
 			width={ size }
 			height={ size }
 			loading="lazy"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "2.1.1",
+	"version": "2.2.0",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {