Skip to content

Editor: Show own presence in collaborative editing sessions#76413

Merged
ingeniumed merged 16 commits intoWordPress:trunkfrom
dabowman:feat/rtc-self-presence
Mar 12, 2026
Merged

Editor: Show own presence in collaborative editing sessions#76413
ingeniumed merged 16 commits intoWordPress:trunkfrom
dabowman:feat/rtc-self-presence

Conversation

@dabowman
Copy link
Copy Markdown
Contributor

@dabowman dabowman commented Mar 11, 2026

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

  • The current user's avatar now always appears first in the CollaboratorsPresence toolbar button (using AvatarGroup).
  • The collaborators list popover includes the current user at the top with a "You" label and a (you) badge.
  • The current user's border color uses --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)

  • A new "Show own collaboration cursor" toggle in Preferences → General controls whether the user's own cursor line and block highlight are rendered.
  • When enabled and at least one other collaborator is present, the user's cursor badge and block highlight appear using the theme accent color.
  • The cursor line (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

  • The inner white contrast ring on avatars with a border color was invisible when a Gravatar image loaded, because CSS paint order renders inset box-shadow below content (the absolutely-positioned <img> covered it).
  • Replaced 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.

Block selection highlight alignment

  • Added an inset box-shadow to the selected-block-outline mixin 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 via showCollaborationCursor preference.
  • 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 on selected-block-outline.
  • packages/editor/src/components/collaborators-presence/avatar/styles.scss::after pseudo-element for contrast ring.
  • packages/editor/src/components/collaborators-overlay/avatar-iframe-styles.ts — mirrored ::after fix for iframe.

Testing Instructions

  1. Open a post in the editor with collaborative editing enabled (requires an RTC-capable environment).
  2. Verify your own avatar appears first in the toolbar collaborators button.
  3. Click the collaborators button to open the popover — confirm you appear at the top with "You" and a (you) badge.
  4. Open Preferences → General and enable "Show own collaboration cursor".
  5. With another collaborator in the session, verify your own cursor badge (avatar pill) appears in the canvas — the cursor line should not appear (only the badge).
  6. With a Gravatar image loaded, verify the white contrast ring is visible between the colored border and the image on all avatars.

Testing Instructions for Keyboard

  1. Press Ctrl+Shift+P (or Cmd+Shift+P on Mac) to open Preferences.
  2. Tab to the General section.
  3. Tab to the "Show own collaboration cursor" toggle and press Space to enable it.
  4. Press Escape to close Preferences.
  5. Shift+Tab to the collaborators button in the toolbar, press Enter to open the popover.
  6. Verify the first item reads "You" with a (you) annotation.
  7. Press Escape to close the popover.

🤖 Generated with Claude Code

dabowman and others added 10 commits March 11, 2026 19:04
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>
@github-actions github-actions bot added [Package] Editor /packages/editor [Package] Edit Post /packages/edit-post [Package] Edit Site /packages/edit-site [Package] Base styles /packages/base-styles labels Mar 11, 2026
@github-actions
Copy link
Copy Markdown

github-actions bot commented Mar 11, 2026

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 props-bot label.

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: 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>

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

dabowman and others added 2 commits March 11, 2026 14:16
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>
@chriszarate chriszarate added [Type] Task Issues or PRs that have been broken down into an individual action to take [Feature] Real-time Collaboration Phase 3 of the Gutenberg roadmap around real-time collaboration labels Mar 11, 2026
dabowman and others added 4 commits March 11, 2026 17:06
…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>
@ingeniumed ingeniumed added the Backport to WP 7.0 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Mar 12, 2026
@ingeniumed ingeniumed merged commit 903cef7 into WordPress:trunk Mar 12, 2026
44 checks passed
@github-actions github-actions bot added this to the Gutenberg 22.8 milestone Mar 12, 2026
@github-actions
Copy link
Copy Markdown

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.

# Checkout the wp/7.0 branch instead of trunk.
git checkout wp/7.0

# Create a new branch for your PR.
git checkout -b my-branch

# Cherry-pick the commit.
git cherry-pick 903cef796600c0f745530e45123cac2178434c0b

# Check which files have conflicts.
git status

# Resolve the conflict...
# Add the resolved files to the staging area.
git status
git add .
git cherry-pick --continue

# Push the branch to the repository
git push origin my-branch

# Create a PR and set the base to the wp/7.0 branch.
# See https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/changing-the-base-branch-of-a-pull-request.

chriszarate pushed a commit that referenced this pull request Mar 12, 2026
* 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>
chriszarate pushed a commit that referenced this pull request Mar 12, 2026
* 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>
@t-hamano
Copy link
Copy Markdown
Contributor

This PR has been manually backported in #76445.

@t-hamano t-hamano added Backported to WP Core Pull request that has been successfully merged into WP Core and removed Backport to WP 7.0 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta labels Mar 12, 2026
pento pushed a commit to WordPress/wordpress-develop that referenced this pull request Mar 12, 2026
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
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Mar 12, 2026
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;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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:

Image

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?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!

@dsas dsas added the [Type] Enhancement A suggestion for improvement. label Mar 18, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Backported to WP Core Pull request that has been successfully merged into WP Core [Feature] Real-time Collaboration Phase 3 of the Gutenberg roadmap around real-time collaboration [Package] Base styles /packages/base-styles [Package] Edit Post /packages/edit-post [Package] Edit Site /packages/edit-site [Package] Editor /packages/editor [Type] Enhancement A suggestion for improvement. [Type] Task Issues or PRs that have been broken down into an individual action to take

Projects

None yet

Development

Successfully merging this pull request may close these issues.

RTC: [Interface] Show local user's avatar by cursor during collaborative sessions

6 participants