[ciampo]

See #76836 and the implementation suggestion.

What?

Add Avatar.Root, Avatar.Image, and Avatar.Fallback to @wordpress/ui, matching Base UI's parts.

Why?

Provide reusable profile images and fallbacks while consumers own image URLs, user data, and accessible names.

How?

Follow the package's props, refs, styling, and motion conventions. Include five sizes (16/24/32/40/64px), text or icon fallbacks, and native/custom image composition. Keep Base UI's default fallback delay; image examples opt into 300ms. The 100ms fade respects reduced motion, and native images already loaded at the first commit skip it. Mark Avatar as use-with-caution.

AvatarGroup follow-up

Note

AvatarGroup is outside this PR's scope. A separate follow-up could provide overlapping avatars, stacking, separator rings, and an overflow indicator such as +3. Consumers would own participant data, limits, labels, and collaboration rules. Editor adoption is also a follow-up.

Testing Instructions

Storybook and keyboard checks

1. Open Components → @wordpress-ui → Avatar in Storybook. Check the image, text/icon fallback, failed-image, custom-image, and Gravatar examples. Loaded images fill the circle; failed images leave the fallback visible.
2. Check Sizes with images and fallbacks, in light/dark themes, RTL, and WordPress global CSS. Expect 16/24/32/40/64px.
3. Reload Gravatar or Lazy image with network throttling. Fast loads skip the fallback; slower loads show it after 300ms, then fade in the image. Check cached images and reduced motion. Change Default to a slow or failed image URL; the departing image should hide.

Testing Instructions for Keyboard

In Profile button, Tab to the button and confirm the focus ring and tooltip. Escape dismisses the tooltip. Static avatars add no tab stops.

Screenshot

Use of AI Tools

Codex implemented the component and performed local verification.

[github-actions]

🤖 PR meta 🤖

🎉 Props

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Updated as activity occurs, without notifying anyone named here. Add the props-bot label to refresh.

📦 Bundle size

Size Change: -63 B (0%)

Total Size: 8.39 MB

📦 View Changed

Filename	Size	Change
build/modules/boot/index.min.js	57.9 kB	+13 B (+0.02%)
build/modules/workflow/index.min.js	87.1 kB	-18 B (-0.02%)
build/scripts/block-directory/index.min.js	55 kB	-3 B (-0.01%)
build/scripts/block-editor/index.min.js	517 kB	-17 B (0%)
build/scripts/block-library/index.min.js	440 kB	-4 B (0%)
build/scripts/components/index.min.js	337 kB	-25 B (-0.01%)
build/scripts/customize-widgets/index.min.js	60.1 kB	+16 B (+0.03%)
build/scripts/edit-post/index.min.js	53 kB	+10 B (+0.02%)
build/scripts/edit-site/index.min.js	386 kB	+12 B (0%)
build/scripts/edit-widgets/index.min.js	67 kB	+9 B (+0.01%)
build/scripts/editor/index.min.js	623 kB	-10 B (0%)
build/scripts/format-library/index.min.js	41.4 kB	-29 B (-0.07%)
build/scripts/media-utils/index.min.js	227 kB	-20 B (-0.01%)
build/scripts/patterns/index.min.js	12.4 kB	+3 B (+0.02%)

_{a0c6029 Run}

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric	86d684a	trunk	% Change
timeToFirstByte	43 ms +14.53% -5.47%	43.2 ms +4.51% -3.47%	-0.46%
largestContentfulPaint	74 ms +8.11% -8.11%	72 ms +8.33% -0%	2.78%
lcpMinusTtfb	28.6 ms +13.99% -4.37%	29.35 ms +19.25% -6.13%	-2.56%
wpBeforeTemplate	22.09 ms +17.56% -3.03%	22.62 ms +7.6% -3.98%	-2.34%
wpTemplate	16.86 ms +4.51% -4.63%	16.81 ms +3.15% -3.33%	0.3%
wpTotal	39.75 ms +12.81% -5.43%	39.89 ms +5.14% -3.51%	-0.35%
wpMemoryUsage	7.61 MB +0% -0%	7.57 MB +0% -0%	0.46%
wpDbQueries	17 +0% -0%	17 +0% -0%	0%

front-end-classic-theme

Metric	86d684a	trunk	% Change
timeToFirstByte	34.45 ms +9.29% -2.03%	31.45 ms +8.59% -2.07%	9.54%
largestContentfulPaint	80 ms +5% -5%	72 ms +2.78% -5.56%	11.11%
lcpMinusTtfb	43.95 ms +4.66% -3.3%	39.75 ms +2.64% -5.79%	10.57%
wpBeforeTemplate	18.95 ms +10.5% -1.11%	19.22 ms +3.17% -1.61%	-1.4%
wpTemplate	12.46 ms +4.57% -2.65%	9.72 ms +8.74% -2.37%	28.19%
wpTotal	31.59 ms +10.41% -2.09%	28.92 ms +8.99% -2.25%	9.23%
wpMemoryUsage	6.24 MB +0% -0%	6.10 MB +0% -0%	2.4%
wpDbQueries	14 +0% -0%	10 +0% -0%	40%

media-processing

Metric	86d684a	trunk	% Change
mediaProcessingJpeg	321.96 ms +3.27% -0.52%	323.34 ms +3.03% -0.96%	-0.43%
mediaProcessingAvif	4815.35 ms +0.4% -0.22%	4777.74 ms +0.35% -0.02%	0.79%
mediaProcessingJpegToAvif	3349.23 ms +0.21% -0.51%	3360.65 ms +0.2% -0.59%	-0.34%

media-upload

Metric	86d684a	trunk	% Change
jpegUploadProcessing	1415.34 ms +0.46% -0.79%	1400.06 ms +0.98% -1%	1.09%
pngUploadProcessing	202.46 ms +30.62% -9.83%	198.88 ms +21.91% -15.23%	1.8%
largeJpegUploadProcessing	1418.19 ms +0.31% -1.63%	1403.83 ms +0.07% -0.2%	1.02%
multipleImageUploadProcessing	1471.93 ms +1.12% -0.99%	1479.02 ms +0.53% -0.77%	-0.48%

post-editor

Metric	86d684a	trunk	% Change
serverResponse	305.11 ms +12.74% -2.7%	323.89 ms +1.75% -8.61%	-5.8%
firstPaint	220.19 ms +14.67% -9.42%	222.39 ms +9.42% -19.01%	-0.99%
domContentLoaded	881.98 ms +0.49% -2.54%	839.51 ms +1.16% -1.24%	5.06%
loaded	883.05 ms +0.51% -2.5%	840.6 ms +1.17% -1.24%	5.05%
firstContentfulPaint	384.08 ms +1.13% -3.3%	357.26 ms +1.63% -1.46%	7.51%
firstBlock	2608 ms +0.75% -1.08%	2481.16 ms +0.83% -0.41%	5.11%
type	16.3 ms +2.58% -2.7%	15.46 ms +1.16% -2.33%	5.43%
typeWithoutInspector	15.62 ms +8.07% -3.39%	15.41 ms +2.79% -1.88%	1.36%
typeWithTopToolbar	19.67 ms +5.59% -4.52%	19.55 ms +4.3% -2.46%	0.61%
typeContainer	6.96 ms +2.59% -3.45%	7.06 ms +6.37% -4.67%	-1.42%
focus	90.54 ms +3.23% -2.58%	89.63 ms +6.19% -2.72%	1.02%
firstFocus	187.47 ms +0% -0%	186.83 ms +0% -0%	0.34%
selectAll	412.41 ms +4.4% -0.54%	432.67 ms +4.41% -0.17%	-4.68%
listViewOpen	61.33 ms +8.32% -4.37%	63.33 ms +2.34% -8.18%	-3.16%
inserterOpen	33.59 ms +4.17% -6.37%	32.27 ms +4.25% -0.84%	4.09%
inserterHover	10.41 ms +9.03% -8.26%	9.47 ms +9.5% -4.65%	9.93%
inserterSearch	7.28 ms +7.28% -7.14%	7.29 ms +1.65% -13.99%	-0.14%
loadPatterns	511.85 ms +2.05% -5.71%	512.3 ms +1.24% -5.72%	-0.09%
wpTotal	296.4 ms +13.05% -2.83%	315.09 ms +1.83% -8.86%	-5.93%
wpMemoryUsage	13.30 MB +0% -0%	13.27 MB +0% -0%	0.28%
wpDbQueries	54 +0% -0%	54 +0% -0%	0%

site-editor

Metric	86d684a	trunk	% Change
serverResponse	500.22 ms +2.14% -7.56%	493.46 ms +3.26% -5%	1.37%
firstPaint	268.7 ms +14.79% -9.14%	261.32 ms +16.82% -10.61%	2.82%
domContentLoaded	1196.46 ms +0.34% -0.62%	1176.69 ms +1.15% -1.94%	1.68%
loaded	1197.62 ms +0.34% -0.59%	1177.88 ms +1.14% -1.93%	1.68%
firstContentfulPaint	477.15 ms +1.63% -1.18%	470.98 ms +1.7% -1.68%	1.31%
firstBlock	4502.44 ms +1.48% -0.8%	4399.32 ms +1.11% -1.11%	2.34%
type	18.26 ms +12.87% -1.97%	18.36 ms +4.47% -1.14%	-0.54%
navigate	119.98 ms +3.01% -7.45%	115.85 ms +10.17% -2.22%	3.56%
loadPatterns	1270.91 ms +8.93% -2.03%	1241.75 ms +5.71% -1.83%	2.35%
loadPages	1009.21 ms +1.01% -1.36%	1011.75 ms +2.01% -0.49%	-0.25%
wpTotal	489.89 ms +2.26% -7.61%	484.21 ms +3.31% -5.22%	1.17%
wpMemoryUsage	12.33 MB +0% -0%	12.31 MB +0% -0%	0.13%
wpDbQueries	43 +2.33% -0%	43 +2.33% -0%	0%

_{a0c6029 Run}

🏁 Flaky tests

Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

Custom Completer: should allow newlines after multiple option completions in /test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js, passed after 1 failed attempt.

Error: expect(received).toBe(expected) // Object.is equality

- Expected  - 1
+ Received  + 1

@@ -5,11 +5,11 @@
  <!-- wp:paragraph -->
  <p>🫐 test</p>
  <!-- /wp:paragraph -->

  <!-- wp:paragraph -->
- <p>🫐 test</p>
+ <p>🍎 test</p>
  <!-- /wp:paragraph -->

  <!-- wp:paragraph -->
  <p>🫐 test</p>
  <!-- /wp:paragraph -->

Call Log:
- Timeout 5000ms exceeded while waiting on the predicate
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/autocomplete-and-mentions.spec.js:466:6

refuses the drop and uploads nothing in /test/e2e/specs/editor/various/single-file-placeholder-drop.spec.js, passed after 1 failed attempt.

Error: expect(received).toHaveLength(expected)

Expected length: 0
Received length: 2
Received array:  [{"_links": {"about": [{"href": "http://localhost:8889/wp-json/wp/v2/types/attachment"}], "author": [{"embeddable": true, "href": "http://localhost:8889/wp-json/wp/v2/users/1"}], "collection": [{"href": "http://localhost:8889/wp-json/wp/v2/media"}], "curies": [{"href": "https://api.w.org/{rel}", "name": "wp", "templated": true}], "replies": [{"embeddable": true, "href": "http://localhost:8889/wp-json/wp/v2/comments?post=264"}], "self": [{"href": "http://localhost:8889/wp-json/wp/v2/media/264", "targetHints": {"allow": ["GET", "POST", "PUT", "PATCH", "DELETE"]}}], "wp:attached-to": [{"embeddable": true, "href": "http://localhost:8889/wp-json/wp/v2/posts/262", "id": 262, "post_type": "post"}]}, "alt_text": "", "author": 1, "caption": {"rendered": ""}, "class_list": ["post-264", "attachment", "type-attachment", "status-inherit", "hentry", "entry"], "comment_status": "open", "date": "2026-10-09T14:57:35", "date_gmt": "2026-10-09T14:57:35", "description": {"rendered": "<p class=\"attachment\"><a href='http://localhost:8889/wp-content/uploads/2026/10/10x10_e2e_test_image_z9T8jK-1.png'><img loading=\"lazy\" decoding=\"async\" width=\"10\" height=\"10\" src=\"http://localhost:8889/wp-content/uploads/2026/10/10x10_e2e_test_image_z9T8jK-1.png\" class=\"attachment-medium size-medium\" alt=\"\" style=\"width:100%;height:100%;max-width:10px;\" /></a></p>
"}, "featured_media": 0, "filename": "10x10_e2e_test_image_z9T8jK-1.png", "filesize": 80, "guid": {"rendered": "http://localhost:8889/wp-content/uploads/2026/10/10x10_e2e_test_image_z9T8jK-1.png"}, "id": 264, "link": "http://localhost:8889/?attachment_id=264", "media_details": {"file": "2026/10/10x10_e2e_test_image_z9T8jK-1.png", "filesize": 80, "height": 10, "image_meta": {"alt": "", "aperture": "0", "camera": "", "caption": "", "copyright": "", "created_timestamp": "0", "credit": "", "focal_length": "0", "iso": "0", "keywords": [], "orientation": "0", "shutter_speed": "0", "title": ""}, "sizes": {}, "width": 10}, "media_type": "image", "meta": [], "mime_type": "image/png", "modified": "2026-10-09T14:57:35", "modified_gmt": "2026-10-09T14:57:35", "ping_status": "closed", "post": 262, "slug": "10x10_e2e_test_image_z9t8jk-2", "source_url": "http://localhost:8889/wp-content/uploads/2026/10/10x10_e2e_test_image_z9T8jK-1.png", "status": "inherit", "template": "", "title": {"rendered": "10x10_e2e_test_image_z9T8jK"}, "type": "attachment"}, {"_links": {"about": [{"href": "http://localhost:8889/wp-json/wp/v2/types/attachment"}], "author": [{"embeddable": true, "href": "http://localhost:8889/wp-json/wp/v2/users/1"}], "collection": [{"href": "http://localhost:8889/wp-json/wp/v2/media"}], "curies": [{"href": "https://api.w.org/{rel}", "name": "wp", "templated": true}], "replies": [{"embeddable": true, "href": "http://localhost:8889/wp-json/wp/v2/comments?post=263"}], "self": [{"href": "http://localhost:8889/wp-json/wp/v2/media/263", "targetHints": {"allow": ["GET", "POST", "PUT", "PATCH", "DELETE"]}}], "wp:attached-to": [{"embeddable": true, "href": "http://localhost:8889/wp-json/wp/v2/posts/262", "id": 262, "post_type": "post"}]}, "alt_text": "", "author": 1, "caption": {"rendered": ""}, "class_list": ["post-263", "attachment", "type-attachment", "status-inherit", "hentry", "entry"], "comment_status": "open", "date": "2026-10-09T14:57:35", "date_gmt": "2026-10-09T14:57:35", "description": {"rendered": "<p class=\"attachment\"><a href='http://localhost:8889/wp-content/uploads/2026/10/10x10_e2e_test_image_z9T8jK.png'><img loading=\"lazy\" decoding=\"async\" width=\"10\" height=\"10\" src=\"http://localhost:8889/wp-content/uploads/2026/10/10x10_e2e_test_image_z9T8jK.png\" class=\"attachment-medium size-medium\" alt=\"\" style=\"width:100%;height:100%;max-width:10px;\" /></a></p>
"}, "featured_media": 0, "filename": "10x10_e2e_test_image_z9T8jK.png", "filesize": 80, "guid": {"rendered": "http://localhost:8889/wp-content/uploads/2026/10/10x10_e2e_test_image_z9T8jK.png"}, "id": 263, "link": "http://localhost:8889/?attachment_id=263", "media_details": {"file": "2026/10/10x10_e2e_test_image_z9T8jK.png", "filesize": 80, "height": 10, "image_meta": {"alt": "", "aperture": "0", "camera": "", "caption": "", "copyright": "", "created_timestamp": "0", "credit": "", "focal_length": "0", "iso": "0", "keywords": [], "orientation": "0", "shutter_speed": "0", "title": ""}, "sizes": {}, "width": 10}, "media_type": "image", "meta": [], "mime_type": "image/png", "modified": "2026-10-09T14:57:35", "modified_gmt": "2026-10-09T14:57:35", "ping_status": "closed", "post": 262, "slug": "10x10_e2e_test_image_z9t8jk", "source_url": "http://localhost:8889/wp-content/uploads/2026/10/10x10_e2e_test_image_z9T8jK.png", "status": "inherit", "template": "", "title": {"rendered": "10x10_e2e_test_image_z9T8jK"}, "type": "attachment"}]
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/single-file-placeholder-drop.spec.js:71:45

should cut and paste individual blocks with collapsed selection in /test/e2e/specs/editor/various/copy-cut-paste.spec.js, passed after 1 failed attempt.

Error: expect(string).toMatchSnapshot(expected) failed

  @@ -1,3 +1,3 @@
   <!-- wp:paragraph -->
  -<p>2Cut - collapsed selection</p>
  +<p>2</p>
   <!-- /wp:paragraph -->


    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/copy-cut-paste.spec.js:45:49

_{a0c6029 Run}

[Mamaduka]

Oh, this is nice. Happy to start testing with Notes when this is merged.

[mirka]

Do we need to support square avatars too? Looking at the core screenshots in the original issue, the avatars there are square.

[ciampo]

All feedback addressed.

Do we need to support square avatars too? Looking at the core screenshots in the original issue, the avatars there are square.

Added a shape prop to support squared avatars.

---

cc @WordPress/gutenberg-design can you take a look? Do we want to support square avatars?

[jasmussen]

In a few places we've used the silhouette to differentiate between types of avatars. Human: make it a circle. Website (i.e. site icon) make it square or roundrect. In some of the discussions around collaborative editing, there have been conversations around making the avatar silhouettes of grammar agents that add suggestions be another shape, perhaps rounded star shapes. But only really the square site icon and circular human have so far had any real world usage, e.g. admin bar.

[ciampo]

Gotcha, so I assume that the current set of options (circle, square) feels appropriate as a starting point.

[mirka]

Good from my end, if design is good with it 👍

[jasmussen]

What are our options on design tweaks to these images? There are some details on the mystery person that don't feel ideal yet, neck cropped, the scale and position feels slightly off, and although it looks like a WordPress icon, in the particular grid shown above, it's hard to really evaluate in context.

There's a larger design detail here worth pointing out: even if this component is "just an avatar", it cannot be designed in isolation. We have to look at where this avatar will be used. E.g. the order of this, and #84540 (comment) feels reversed to me—that may be just mechanics of GH logistics so to clarify I'm speaking mostly about the design process of it, where the design should start from the latter and then be extracted into this PR. In the latter, the initials are small (I proposed separately to use only a single initial), the grey border conflicts a little bit with some of the coloured avatars (notably the blue one), and the mystery person looks like the default gravatar. That last piece is probably because it is, but then that camouflages the underlying mystery person shown in this PR: where will that show up, and when it does, are we sure the design will work well?

I don't know what the action item is, or if there is any. The above is mostly a reflection after a week off, that AI tooling both affords us to do more, but also increases the review burden. Not sure the answer, but I have a tinge of hope that if we in our prompting, we start adding "what would this look like in A, B, C", the tool itself can help us be better at the big picture. Is that fair?

[simison]

@jasmussen so if I've understood right, earlier design guidance has been to use "site icons" as square and "human avatars" as rounded — is that a sound design guidance for the design system (and should be reflected in Storybook examples) or is it ok to keep more open-ended?

It might also make sense to codify the difference with different components for each purpose.

[jasmussen]

I think that's fair:

• Circular humans
• Square (or slightly rounded squares) for sites

Some of the nuance, and to emphasise this is really in getting the contextual details right:

• In multi-user cases, we can add a coloured border, since we can't always rely on the fallback image being available, e.g. wp users can pick the mystery person by default, or even a generated pictogram, or initials
• Consider a single letter instead of two to scale better to really tiny contexts
• Figure out if the circular border, not the coloured one, should be inset opacity based black rather than a grey, so it works better in stark colour contexts.

[ciampo]

@jasmussen, the icon currently being used looks like this:

In any case, it's a local fallback icon to Avatar

• it only shows when an image is not provided (or fails to load) AND initials are missing;
• we can definitely tweak it as needed.

The component also supports any custom color: added as a ring if a custom image is provided, and otherwise as a background + foreground color pair

Consider a single letter instead of two to scale better to really tiny contexts

Replied here

[jasmussen]

we can definitely tweak it as needed.

Can we fall back to nothing, or just a transparent image? Honestly I think that's better.

The component also supports any custom color: added as a ring if a custom image is provided, and otherwise as a background + foreground color pair

This is entirely disconnected from these, yes?

Noting also that we have a canonical design for avatar+color-ring that was designed for Notes and collaborative editing. Can we move towards that?

Alternatively: those designs are implementations, but if those are implementations IMO we should provide fewer base options, we could even be opinionated and note that the only fallback option in the avatar component itself is the initials version, which I still think can benefit from being just a single initial, not two initials.

[ciampo]

Can we fall back to nothing, or just a transparent image? Honestly I think that's better.

Given that an Avatar is meant to represent a person/entity, I'd find it confusing that the fallback is just nothing. Especially for situations where an image fails to load for any reason.

For better clarity for the end user, I'd also expect us to provide some visual clue that there is (meant to be) an avatar in the UI (even when there is not avatar image), which is why we current still show a border and provide two fallback options: letter(s) and profile icon.

This is entirely disconnected from these, yes?

Avatar here is a purely visual component, and is not currently used anywhere in Gutenberg (nor in the core admin).

Having said that, I'd expect it to slowly replace all instances across the editor and admin where we need to show a user profile picture or a site icon.

Specifically to the screenshot that you posted: Avatar is completely agnostic to the image that it receives, so whatever image is set via admin settings, it should be passed to (and displayed by) Avatar, whether it is an uploaded picture, a raster image of a solid color, or a Gravatar image.

Noting also that we have a canonical design for avatar+color-ring that was designed for Notes and collaborative editing. Can we move towards that?

Keeping avatar groups aside (which would be a different component / feature) and focusing on the single Avatar, the main difference that I notice is around borders:

• the Figma design always shows a colored ring, plus an inset white ring around the profile picture;
• it doesn't cover several aspects that we've already addressed in our design:
  • how the avatar looks like when there's no ring (ie. outside of notes and collaboration): does it show a gray border? What thickness? In terms of outer size, how does an avatar with a "colored ring" look like compared with an avatar without a ring? How does the colored ring interact with a hypothethical focus ring around the avatar?
  • it doesn't have design specs for when an image is not available.

Alternatively: those designs are implementations, but if those are implementations IMO we should provide fewer base options, we could even be opinionated and note that the only fallback option in the avatar component itself is the initials version, which I still think can benefit from being just a single initial, not two initials.

If an initials are not provided and the image fails to load, what will the avatar look like? Will it be clear enough to end users that it's an avatar?

[jasmussen]

I like a fallback to initial(s). I think I'm saying we should provide fewer image-based designs if we possibly can, perhaps to encourage adoption of something with intent. To be reductive, this all boils down to the mystery person design, which I don't think works as-is. If we can do without that one, perhaps everything I shared is moot.

[simison]

it doesn't have design specs for when an image is not available.

One option would be to show initials when those are set, otherwise just a colored circle (e.g. --wpds-color-background-surface-neutral-strong).

That said, an empty circle works well for the "loading" and "failed to load image" edge cases but might not be best for the "no image provided" default, like the initials are.

[simison]

The component also supports any custom color: added as a ring if a custom image is provided, and otherwise as a background + foreground color pair

It would make sense to build initials (and icon) colors from the background color, so that they work well together.

It's a common need to use colours with Avatar components (esp. for initials), and the component could provide them in a way that stays consistent across WP and plugins using the component. Now each user would define their own colors. Colours could also be deterministic in a way that the same username/email/string/user ID always gets the same color.

gutenberg/packages/editor/src/components/collab-sidebar/utils.js

Lines 19 to 31 in b7491c1

	/**
	* Avatar border colors chosen to be visually distinct from each other and from
	* the editor's semantic UI colors (Delta E > 10 between all pairs).
	*/
	const AVATAR_BORDER_COLORS = [
	'#6F42C1', // Purple
	'#D94145', // Red
	'#FBBF24', // Orange
	'#FF35EE', // Magenta
	'#879F11', // Olive
	'#0F766E', // Teal
	'#00CFFF', // Cyan
	];

Colours could be coming from the avatar component itself or some helper utility.

[ciampo]

It would make sense to build initials (and icon) colors from the background color, so that they work well together.

The Avatar component already does that, making sure that the foreground color is a tinted version of the background with enough contrast 👌

Colours could be coming from the avatar component itself or some helper utility.

Currently Avatar accepts any color, and that color will stay separate from theming.

I think it's fine that the consumers of avatar (ie the WordPress/Gutenberg app) stay in charge of deciding which colors are used.

One (non urgent) follow-up is to potentially add this "utility" / functionality into the @wordpress/theme package, although I feel like we currently have bigger fish to fry 🐟