Editor: Show own presence in collaborative editing sessions#76413
Editor: Show own presence in collaborative editing sessions#76413ingeniumed merged 16 commits intoWordPress:trunkfrom
Conversation
Add box-shadow to the selected-block-outline mixin to match the visual treatment used for collaborator block highlights — white inner/outer borders and a subtle elevation shadow. The user's selection retains the theme color while gaining the same polished appearance. Co-authored-by: Claude <noreply@anthropic.com> https://claude.ai/code/session_012mkKooPds1bE1YkRWVF982
When the showCollaborationCursor preference is enabled, the current user now appears in the collaborators-presence avatar group and popover list. The user's avatar is displayed first with the admin theme color border, and their name shows as "You" in the popover. Uses the Avatar component's name prop to preserve the full username in the tooltip. Disconnected collaborators are indicated via the dimmed prop. Co-authored-by: Claude <noreply@anthropic.com> https://claude.ai/code/session_012mkKooPds1bE1YkRWVF982
When a user opts in to showing their own cursor, it was rendered using their assigned collaborator color. The cursor now uses `var(--wp-admin-theme-color)`, matching how the user's own presence is shown in the collaborators list and block highlighting. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… sessions When the user opts in to showing their own cursor, only the avatar label is rendered — not the blinking cursor line. This avoids conflicting with the browser's native caret. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The showCollaborationCursor preference previously gated the current user's avatar from appearing in the AvatarGroup and CollaboratorsList. Own presence in those two surfaces is now always visible — the preference only controls cursor visibility in the editor overlay. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ions Applies the same isMe → theme color pattern already used for the cursor and presence list, so the current user's block highlight outline and avatar badge consistently reflect the admin theme color. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The block highlight overlay was applying to the current user's own selection when the showCollaborationCursor preference was enabled. Own block highlighting is now fully suppressed — the block editor's built-in selection UI handles it. The preference only controls whether the user's avatar label appears over their text cursor. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…t box-shadow The inset box-shadow on .editor-avatar__image was unreliable because CSS paint order renders inset shadows below content — the absolutely- positioned <img> element covers it when the image loads. Replace with a ::after pseudo-element (z-index: 1) that always paints above the image. The initials fallback sets content: none since it doesn't need a contrast ring. Mirrored in avatar-iframe-styles.ts. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Resolve conflicts with selection rect rendering (trunk) and self-presence features (this branch). Both changes are preserved: selection rects render for all cursors, and the self-presence guard (isMe) hides the cursor line while keeping the avatar badge. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…ions The browser already renders the user's native selection highlight, so the overlay selection rects would double up. Skip them for the current user, same as we do for the cursor line. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
packages/editor/src/components/collaborators-presence/styles/collaborators-list.scss
Outdated
Show resolved
Hide resolved
…mentation The test used a non-existent `.list-item-you` class and `(you)` text, but the component renders all users with `.list-item` and displays `You`. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Rename preference label to "Show avatar in blocks" with clearer help text. Fix e2e tests to reflect that the "You" entry in the collaborators list is always visible regardless of the preference — the preference only controls the cursor/highlight overlay, not list membership. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Pass `label="You"` to the Avatar badge for the current user's cursor, so the badge displays "You" instead of the username. The Avatar component automatically shows the real username in a tooltip when a custom label is set. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
There was a conflict while trying to cherry-pick the commit to the wp/7.0 branch. Please resolve the conflict manually and create a PR to the wp/7.0 branch. PRs to wp/7.0 are similar to PRs to trunk, but you should base your PR on the wp/7.0 branch instead of trunk. |
* Editor: Align user block selection highlight with collaborator highlight Add box-shadow to the selected-block-outline mixin to match the visual treatment used for collaborator block highlights — white inner/outer borders and a subtle elevation shadow. The user's selection retains the theme color while gaining the same polished appearance. Co-authored-by: Claude <noreply@anthropic.com> https://claude.ai/code/session_012mkKooPds1bE1YkRWVF982 * Editor: Add current user to collaborators-presence list When the showCollaborationCursor preference is enabled, the current user now appears in the collaborators-presence avatar group and popover list. The user's avatar is displayed first with the admin theme color border, and their name shows as "You" in the popover. Uses the Avatar component's name prop to preserve the full username in the tooltip. Disconnected collaborators are indicated via the dimmed prop. Co-authored-by: Claude <noreply@anthropic.com> https://claude.ai/code/session_012mkKooPds1bE1YkRWVF982 * Show own presence (as a preference) * Editor: Use theme color for own cursor in collaborative sessions When a user opts in to showing their own cursor, it was rendered using their assigned collaborator color. The cursor now uses `var(--wp-admin-theme-color)`, matching how the user's own presence is shown in the collaborators list and block highlighting. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Editor: Suppress blinking cursor line for own cursor in collaborative sessions When the user opts in to showing their own cursor, only the avatar label is rendered — not the blinking cursor line. This avoids conflicting with the browser's native caret. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Editor: Always show own avatar in toolbar and collaborators list The showCollaborationCursor preference previously gated the current user's avatar from appearing in the AvatarGroup and CollaboratorsList. Own presence in those two surfaces is now always visible — the preference only controls cursor visibility in the editor overlay. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Editor: Use theme color for own block highlight in collaborative sessions Applies the same isMe → theme color pattern already used for the cursor and presence list, so the current user's block highlight outline and avatar badge consistently reflect the admin theme color. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Editor: Remove own block highlight from collaborative sessions The block highlight overlay was applying to the current user's own selection when the showCollaborationCursor preference was enabled. Own block highlighting is now fully suppressed — the block editor's built-in selection UI handles it. The preference only controls whether the user's avatar label appears over their text cursor. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Editor: Fix avatar contrast ring using pseudo-element instead of inset box-shadow The inset box-shadow on .editor-avatar__image was unreliable because CSS paint order renders inset shadows below content — the absolutely- positioned <img> element covers it when the image loads. Replace with a ::after pseudo-element (z-index: 1) that always paints above the image. The initials fallback sets content: none since it doesn't need a contrast ring. Mirrored in avatar-iframe-styles.ts. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Update editor CHANGELOG for avatar contrast ring fix Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Editor: Suppress selection rects for own cursor in collaborative sessions The browser already renders the user's native selection highlight, so the overlay selection rects would double up. Skip them for the current user, same as we do for the cursor line. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Editor: Fix self-presence e2e test selectors to match component implementation The test used a non-existent `.list-item-you` class and `(you)` text, but the component renders all users with `.list-item` and displays `You`. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Editor: Update self-presence preference copy and fix e2e tests Rename preference label to "Show avatar in blocks" with clearer help text. Fix e2e tests to reflect that the "You" entry in the collaborators list is always visible regardless of the preference — the preference only controls the cursor/highlight overlay, not list membership. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Editor: Show "You" label on own cursor badge in collaborative overlay Pass `label="You"` to the Avatar badge for the current user's cursor, so the badge displays "You" instead of the username. The Avatar component automatically shows the real username in a tooltip when a custom label is set. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Editor: Remove unused list-item-you CSS rule from collaborators list Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: dabowman <davidabowman@git.wordpress.org> Co-authored-by: chriszarate <czarate@git.wordpress.org> Co-authored-by: maxschmeling <maxschmeling@git.wordpress.org> Co-authored-by: pbearne <pbearne@git.wordpress.org> Co-authored-by: smithjw1 <smithjw1@git.wordpress.org>
* Editor: Align user block selection highlight with collaborator highlight Add box-shadow to the selected-block-outline mixin to match the visual treatment used for collaborator block highlights — white inner/outer borders and a subtle elevation shadow. The user's selection retains the theme color while gaining the same polished appearance. Co-authored-by: Claude <noreply@anthropic.com> https://claude.ai/code/session_012mkKooPds1bE1YkRWVF982 * Editor: Add current user to collaborators-presence list When the showCollaborationCursor preference is enabled, the current user now appears in the collaborators-presence avatar group and popover list. The user's avatar is displayed first with the admin theme color border, and their name shows as "You" in the popover. Uses the Avatar component's name prop to preserve the full username in the tooltip. Disconnected collaborators are indicated via the dimmed prop. Co-authored-by: Claude <noreply@anthropic.com> https://claude.ai/code/session_012mkKooPds1bE1YkRWVF982 * Show own presence (as a preference) * Editor: Use theme color for own cursor in collaborative sessions When a user opts in to showing their own cursor, it was rendered using their assigned collaborator color. The cursor now uses `var(--wp-admin-theme-color)`, matching how the user's own presence is shown in the collaborators list and block highlighting. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Editor: Suppress blinking cursor line for own cursor in collaborative sessions When the user opts in to showing their own cursor, only the avatar label is rendered — not the blinking cursor line. This avoids conflicting with the browser's native caret. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Editor: Always show own avatar in toolbar and collaborators list The showCollaborationCursor preference previously gated the current user's avatar from appearing in the AvatarGroup and CollaboratorsList. Own presence in those two surfaces is now always visible — the preference only controls cursor visibility in the editor overlay. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Editor: Use theme color for own block highlight in collaborative sessions Applies the same isMe → theme color pattern already used for the cursor and presence list, so the current user's block highlight outline and avatar badge consistently reflect the admin theme color. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Editor: Remove own block highlight from collaborative sessions The block highlight overlay was applying to the current user's own selection when the showCollaborationCursor preference was enabled. Own block highlighting is now fully suppressed — the block editor's built-in selection UI handles it. The preference only controls whether the user's avatar label appears over their text cursor. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Editor: Fix avatar contrast ring using pseudo-element instead of inset box-shadow The inset box-shadow on .editor-avatar__image was unreliable because CSS paint order renders inset shadows below content — the absolutely- positioned <img> element covers it when the image loads. Replace with a ::after pseudo-element (z-index: 1) that always paints above the image. The initials fallback sets content: none since it doesn't need a contrast ring. Mirrored in avatar-iframe-styles.ts. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Update editor CHANGELOG for avatar contrast ring fix Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Editor: Suppress selection rects for own cursor in collaborative sessions The browser already renders the user's native selection highlight, so the overlay selection rects would double up. Skip them for the current user, same as we do for the cursor line. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Editor: Fix self-presence e2e test selectors to match component implementation The test used a non-existent `.list-item-you` class and `(you)` text, but the component renders all users with `.list-item` and displays `You`. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Editor: Update self-presence preference copy and fix e2e tests Rename preference label to "Show avatar in blocks" with clearer help text. Fix e2e tests to reflect that the "You" entry in the collaborators list is always visible regardless of the preference — the preference only controls the cursor/highlight overlay, not list membership. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Editor: Show "You" label on own cursor badge in collaborative overlay Pass `label="You"` to the Avatar badge for the current user's cursor, so the badge displays "You" instead of the username. The Avatar component automatically shows the real username in a tooltip when a custom label is set. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Editor: Remove unused list-item-you CSS rule from collaborators list Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: dabowman <davidabowman@git.wordpress.org> Co-authored-by: chriszarate <czarate@git.wordpress.org> Co-authored-by: maxschmeling <maxschmeling@git.wordpress.org> Co-authored-by: pbearne <pbearne@git.wordpress.org> Co-authored-by: smithjw1 <smithjw1@git.wordpress.org>
|
This PR has been manually backported in #76445. |
This updates the pinned hash from the `gutenberg` from `9b8144036fa5faf75de43d4502ff9809fcf689ad` to `8c78d87453509661a9f28f978ba2c242d515563b`. The following changes are included: - Navigation Editor: Allow any blocks to be inserted by gating contentOnly insertion rules to section blocks (WordPress/gutenberg#76189) - Add `fetchpriority=low` to `IMG` tags in collapsed Details blocks (WordPress/gutenberg#76269) - Connectors: Add logo URL support for custom AI providers (WordPress/gutenberg#76190) - Cover Block: Add a playlist parameter to loop YouTube background videos. (WordPress/gutenberg#76004) - Connectors: Memoize getConnectors selector (WordPress/gutenberg#76339) - HTML Block: Fix broken layout (WordPress/gutenberg#76278) - Tests: Skip connector logo URL tests when AI Client is unavailable (WordPress/gutenberg#76343) - Navigation Overlay: Explicitly set fetchpriority for images (WordPress/gutenberg#76208) - Connectors: Show API key source for env vars and wp-config constants (WordPress/gutenberg#76355) - Connectors: Move API key validation and masking to REST dispatch level (WordPress/gutenberg#76327) - Connectors: Replace apiFetch with core-data store selectors (WordPress/gutenberg#76333) - Do not sync local attributes (WordPress/gutenberg#76267) - Add `fetchpriority=low` to `IMG` tags in collapsed Accordion Item blocks (WordPress/gutenberg#76336) - Implement disconnection debounce after initial connection (WordPress/gutenberg#76114) - Allow Post Content to be edited when 'Show template' is active and Post content is nested in a Template Part (WordPress/gutenberg#76305) - Fix: Document Bar: Back button flickers (WordPress/gutenberg#76320) - RTC: Move event hooks from editor to core-data (WordPress/gutenberg#76358) - fix(navigation): prevent right-justified submenu overflow in custom overlays (WordPress/gutenberg#76360) - Connectors: Add connectors registry for extensibility (WordPress/gutenberg#76364) - Connectors: Add empty state when no connectors are registered (WordPress/gutenberg#76375) - Temp: Disable RTC in the site editor (WordPress/gutenberg#76223) - Connectors: Add AI Experiments plugin callout with install/activate functionality (WordPress/gutenberg#76379) - Editor: Polish real-time collaboration presence UI and move Avatar to editor package (WordPress/gutenberg#75652) (WordPress/gutenberg#76365) - RTC: Add collaborator selection highlighting in rich text (WordPress/gutenberg#76107) - Sync changes from `wp_enqueue_global_styles()` to Gutenberg override (WordPress/gutenberg#76127) - [RTC] Fix performance regression on post save (WordPress/gutenberg#76370) - Media: Enable AVIF support for client-side uploads (WordPress/gutenberg#76371) - Connectors: Move plugin status computation to script module data (WordPress/gutenberg#76409) - Revisions: Skip rendered fields in REST API responses (WordPress/gutenberg#76347) - E2E Tests: Add connector setup flow tests with test AI provider (WordPress/gutenberg#76433) - RTC: Place sync connection modal in front of popover (WordPress/gutenberg#76431) - Connectors: Sync PHP code with WordPress Core (WordPress/gutenberg#76443) - Editor: Show own presence in collaborative editing sessions (WordPress/gutenberg#76413) (WordPress/gutenberg#76445) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/9b8144036fa5faf75de43d4502ff9809fcf689ad…8c78d87453509661a9f28f978ba2c242d515563b. Log created with: git log --reverse --format="- %s" 9b8144036fa5faf75de43d4502ff9809fcf689ad..8c78d87453509661a9f28f978ba2c242d515563b | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy See #64595. git-svn-id: https://develop.svn.wordpress.org/trunk@61988 602fd350-edb4-49c9-b593-d223f7449a82
This updates the pinned hash from the `gutenberg` from `9b8144036fa5faf75de43d4502ff9809fcf689ad` to `8c78d87453509661a9f28f978ba2c242d515563b`. The following changes are included: - Navigation Editor: Allow any blocks to be inserted by gating contentOnly insertion rules to section blocks (WordPress/gutenberg#76189) - Add `fetchpriority=low` to `IMG` tags in collapsed Details blocks (WordPress/gutenberg#76269) - Connectors: Add logo URL support for custom AI providers (WordPress/gutenberg#76190) - Cover Block: Add a playlist parameter to loop YouTube background videos. (WordPress/gutenberg#76004) - Connectors: Memoize getConnectors selector (WordPress/gutenberg#76339) - HTML Block: Fix broken layout (WordPress/gutenberg#76278) - Tests: Skip connector logo URL tests when AI Client is unavailable (WordPress/gutenberg#76343) - Navigation Overlay: Explicitly set fetchpriority for images (WordPress/gutenberg#76208) - Connectors: Show API key source for env vars and wp-config constants (WordPress/gutenberg#76355) - Connectors: Move API key validation and masking to REST dispatch level (WordPress/gutenberg#76327) - Connectors: Replace apiFetch with core-data store selectors (WordPress/gutenberg#76333) - Do not sync local attributes (WordPress/gutenberg#76267) - Add `fetchpriority=low` to `IMG` tags in collapsed Accordion Item blocks (WordPress/gutenberg#76336) - Implement disconnection debounce after initial connection (WordPress/gutenberg#76114) - Allow Post Content to be edited when 'Show template' is active and Post content is nested in a Template Part (WordPress/gutenberg#76305) - Fix: Document Bar: Back button flickers (WordPress/gutenberg#76320) - RTC: Move event hooks from editor to core-data (WordPress/gutenberg#76358) - fix(navigation): prevent right-justified submenu overflow in custom overlays (WordPress/gutenberg#76360) - Connectors: Add connectors registry for extensibility (WordPress/gutenberg#76364) - Connectors: Add empty state when no connectors are registered (WordPress/gutenberg#76375) - Temp: Disable RTC in the site editor (WordPress/gutenberg#76223) - Connectors: Add AI Experiments plugin callout with install/activate functionality (WordPress/gutenberg#76379) - Editor: Polish real-time collaboration presence UI and move Avatar to editor package (WordPress/gutenberg#75652) (WordPress/gutenberg#76365) - RTC: Add collaborator selection highlighting in rich text (WordPress/gutenberg#76107) - Sync changes from `wp_enqueue_global_styles()` to Gutenberg override (WordPress/gutenberg#76127) - [RTC] Fix performance regression on post save (WordPress/gutenberg#76370) - Media: Enable AVIF support for client-side uploads (WordPress/gutenberg#76371) - Connectors: Move plugin status computation to script module data (WordPress/gutenberg#76409) - Revisions: Skip rendered fields in REST API responses (WordPress/gutenberg#76347) - E2E Tests: Add connector setup flow tests with test AI provider (WordPress/gutenberg#76433) - RTC: Place sync connection modal in front of popover (WordPress/gutenberg#76431) - Connectors: Sync PHP code with WordPress Core (WordPress/gutenberg#76443) - Editor: Show own presence in collaborative editing sessions (WordPress/gutenberg#76413) (WordPress/gutenberg#76445) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/9b8144036fa5faf75de43d4502ff9809fcf689ad…8c78d87453509661a9f28f978ba2c242d515563b. Log created with: git log --reverse --format="- %s" 9b8144036fa5faf75de43d4502ff9809fcf689ad..8c78d87453509661a9f28f978ba2c242d515563b | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy See #64595. Built from https://develop.svn.wordpress.org/trunk@61988 git-svn-id: http://core.svn.wordpress.org/trunk@61270 1a063a9b-81f0-0310-95a4-ce76da25c4cd
| outline-style: solid; | ||
| outline-width: calc(#{$widthRatio} * (var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1))); | ||
| outline-offset: calc(#{$widthRatio} * ((-1 * var(--wp-admin-border-width-focus) ) / var(--wp-block-editor-iframe-zoom-out-scale, 1))); | ||
| box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus, #{variables.$border-width-focus-fallback}) + #{variables.$border-width}) colors.$white, 0 0 0 variables.$border-width colors.$white, variables.$elevation-x-small; |
There was a problem hiding this comment.
@dabowman this change is quite aggressive for the default editing experience, especially in some darker contexts. Can you expand on the context for this change? I understand that it can be a constrast thing, but I would love for us to find something slightly more balanced/considered, as the hover-border is now about 3px around the whole block:
If we need a halo, can it be 1px at most, on the inside or outside but not both? And can it be semi opaque?
There was a problem hiding this comment.
Yeah, it's definitely bright on dark backgrounds.
We were getting feedback to make the users own presence clearer. The approach we decided on was to include the user in the list of collaborators and make their outline style match the collaborators' to reinforce the pattern and make presence indication consistent.
I think that's a good approach but ... contrast is an issue. I dug into this quite a bit earlier on and there are some potential solutions to make the style and other styles in the UI more responsive to their context so we're not using this belt and braces approach to contrast when we don't need to. But all of them were either super complex or kinda unreliable so I ended up going with the approach you see to make sure we covered our bases. But the contrast can be too much.
On collaborators, the contest is more needed for a11y. But I think that's less of a concern for the highlight style we're talking about here since the user has the block toolbar etc. to show their focus. The issue is just consistency and how we want to align it with the collaborators without introducing other issues.
I'm totally fine just rolling it back if you think that's the right call. I think we'll want to make it all consistent eventually but we might be able to cook up a more clever way of doing that across the UI.
I think we can make the case for doing it either way. Increasing the transparency on the outline might be the way to go. Or just ditching it. Whatever looks good to your eye. I was deep in the a11y requirements and the odd constraints of CSS and the editor canvas' odd way of applying styles when I made this.
There was a problem hiding this comment.
I'm tempted to do without this as it is part of a piece of mixin code whose consequences are a bit hard to predict. But the motivation is nevertheless very good, so I took a stab at a refinement here: #76619
Let me know what you think!
What?
Adds self-presence visibility to the real-time collaboration (RTC) UI, letting users see their own avatar, cursor, and block highlight alongside other collaborators.
Closes #75838
Supersedes #76270
Why?
During collaborative editing, users had no visual indication of their own presence — they could see other collaborators but not themselves. This made it difficult to understand how others perceive them in the session. Showing your own presence provides spatial awareness and confirms that the collaboration connection is active.
How?
Self-presence in toolbar and popover
CollaboratorsPresencetoolbar button (usingAvatarGroup).(you)badge.--wp-admin-theme-color(the admin accent color) instead of the collaborator color palette, visually distinguishing "self" from others.Self cursor and block highlight (opt-in preference)
collaborators-overlay-user-cursor) is hidden for the current user to avoid overlap with the native caret — only the avatar badge label renders.Avatar contrast ring fix
box-shadowbelow content (the absolutely-positioned<img>covered it).::afterpseudo-element (z-index: 1) that always paints above the image. The initials fallback setscontent: nonesince it doesn't need a contrast ring.Block selection highlight alignment
box-shadowto theselected-block-outlinemixin so the user's own block selection has the same white inner ring as collaborator highlights, creating visual consistency.Files changed
packages/editor/src/components/collaborators-presence/index.tsx— self-avatar in toolbar, sorted list with self first.packages/editor/src/components/collaborators-presence/list.tsx— "You" label and(you)badge for current user.packages/editor/src/components/collaborators-overlay/overlay.tsx— hide cursor line for own user.packages/editor/src/components/collaborators-overlay/use-render-cursors.ts— opt-in self cursor viashowCollaborationCursorpreference.packages/editor/src/components/collaborators-overlay/use-block-highlighting.ts— exclude own block highlight (existing behavior preserved).packages/editor/src/components/preferences-modal/index.js— new preference toggle.packages/edit-post/src/index.js,packages/edit-site/src/index.js— register preference default (false).packages/base-styles/_mixins.scss— white inset ring onselected-block-outline.packages/editor/src/components/collaborators-presence/avatar/styles.scss—::afterpseudo-element for contrast ring.packages/editor/src/components/collaborators-overlay/avatar-iframe-styles.ts— mirrored::afterfix for iframe.Testing Instructions
(you)badge.Testing Instructions for Keyboard
Ctrl+Shift+P(orCmd+Shift+Pon Mac) to open Preferences.Spaceto enable it.Escapeto close Preferences.Shift+Tabto the collaborators button in the toolbar, pressEnterto open the popover.(you)annotation.Escapeto close the popover.🤖 Generated with Claude Code