Real-time Collaboration: Add collaborators presence UI by maxschmeling · Pull Request #75065 · WordPress/gutenberg

maxschmeling · 2026-01-29T17:26:05Z

What?

Adds the collaborators presence UI in the header. Closes #74708

Why?

When there are other connected collaborators in a real-time collaboration session, the current user needs to be able to know who else is in the post.

How?

Uses the useActiveUsers hook added in #75009 to populate data in a new <CollaboratorsPresence> component.

Testing Instructions

Check out the PR
Open an existing post or create a post and save
Copy the URL and open in another tab
See the collaborators list populated in the header

Testing Instructions for Keyboard

When a collaborator is connected to a session you are in, click the collaborators button in the header
The menu should open
Press the escape key
The menu should close

Screenshots or screencast

github-actions · 2026-01-29T23:15:35Z

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

Required label: Any label starting with [Type].
Labels found: [Package] Core data, [Package] Editor.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

github-actions · 2026-01-29T23:15:37Z

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: maxschmeling <maxschmeling@git.wordpress.org>
Co-authored-by: ingeniumed <ingeniumed@git.wordpress.org>
Co-authored-by: chriszarate <czarate@git.wordpress.org>
Co-authored-by: shekharnwagh <shekharnwagh@git.wordpress.org>

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

ingeniumed

Nice work getting this in place. Most of my comments are about code cleanup and comments, but I do have one concern that needs to be tested to make sure it's not a problem.

ingeniumed · 2026-01-30T00:48:57Z

 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isTooNarrowForDocumentBar = useMediaQuery( '(max-width: 403px)' );
 	const {
+		postId,


Looking at the postType, it looks like there are a lot of possible post types here. We are interested in mainly the postType for posts. We do handle if the awareness instance isn't found, and perhaps the active users would be empty for cases where the post type isn't post. What happens if this is triggered for cases where the post type isn't post? Is there any error or does it work as expected?

This looks like it might have more side effects, and I'm not sure what that'd look like.

It's already using getCurrentPostType() here, I just added getCurrentPostId() which shouldn't be problematic. The hook will always just return the default/empty state if it doesn't find anything.

chriszarate · 2026-01-30T17:35:18Z

+		<div
+			className={ className }
+			style={ avatarStyles }
+			aria-hidden="true"


Why is it marked with aria-hidden? Will we rely on collaborators-list for announceable text?

This was done by @shekharnwagh originally, but I do believe the reason is because you don't want to go through this list and then also the dropdown list. You just want the items in the interactive list to be announced.

Yeah, the text in collaborators-list is enough and this doesn't add meaningful content for screen readers

chriszarate · 2026-01-30T17:38:16Z

+ * @param root0.postType
+ */
+export function CollaboratorsPresence( { postId, postType }: AvatarsProps ) {
+	const activeUsers = useActiveUsers( postId, postType ) as UserState[];


harmful as. can you just rely on the return type, or is the type lost somehow?

Suggested change

const activeUsers = useActiveUsers( postId, postType ) as UserState[];

const activeUsers = useActiveUsers( postId, postType );

The type is lost because of the private API file. If there is a way to preserve it, I'd definitely like to

chriszarate · 2026-01-30T17:43:38Z

+						className="editor-collaborators-presence__list-item"
+						onClick={ () => {} }
+						disabled={ ! userState.isConnected }
+						aria-label="Clicking scrolls to cursor position in the editor"


Does it? This button is a no-op, can it just be removed?

Removed the label and disabled the button per Gopal's review. Wanted to leave the button because the cursor registry stuff is coming back in a follow-up PR

…stry

ingeniumed · 2026-02-04T09:45:25Z

 }

 /**
 * Hook to get the active users for a post editor.


Change users -> collaborators. This applies to the docs, as well as the return type. The return type should be ActiveCollaborator.

ingeniumed · 2026-02-04T09:46:24Z

+	postId,
+	postType,
+}: CollaboratorsPresenceProps ) {
+	const activeUsers = useActiveCollaborators(


users -> collaborators

ingeniumed · 2026-02-04T09:49:05Z

Noting that because auto-merge was enabled, this got merged in. But a follow up PR is needed to change users to collaborators.

Mamaduka · 2026-02-05T13:15:01Z

I was testing the feature and noticed a couple of bugs, or at least unexpected results.

My current user was listed as a collaborator in my session, even though I see a condition in this PR.
Refreshing the browser adds the same user as a collaborator again and again.
Eventually, there's a fun jiggle in the dropdown.

P.S. Let me know if I should create a separate issue.

Screencast

CleanShot.2026-02-05.at.17.06.14.mp4

chriszarate · 2026-02-05T13:22:44Z

I was testing the feature and noticed a couple of bugs, or at least unexpected results.

Hey @Mamaduka , thanks so much for that report. We happen to have just replicated that bug and are tracking down a fix. An issue would be welcome but not necessary.

Mamaduka · 2026-02-05T13:25:45Z

Thanks, @chriszarate!

Feel free to ping me for testing or review.

Co-authored-by: maxschmeling <maxschmeling@git.wordpress.org> Co-authored-by: ingeniumed <ingeniumed@git.wordpress.org> Co-authored-by: chriszarate <czarate@git.wordpress.org> Co-authored-by: shekharnwagh <shekharnwagh@git.wordpress.org>

Add UI components and hook up to real awareness data

45f43e6

github-actions Bot added [Package] Core data /packages/core-data [Package] Editor /packages/editor [Package] Sync /packages/sync labels Jan 29, 2026

maxschmeling added 4 commits January 29, 2026 14:26

Fixed styling of the <CollaboratorsPresence> component

d5a03f0

Close the popover on escape

74a2d49

Remove default provider so it doesn't get merged

5ae243b

Remove commented CursorRegistry code

732450f

github-actions Bot removed the [Package] Sync /packages/sync label Jan 29, 2026

maxschmeling marked this pull request as ready for review January 29, 2026 23:15

maxschmeling requested a review from nerrad as a code owner January 29, 2026 23:15

ingeniumed requested review from chriszarate and ingeniumed January 29, 2026 23:20

ingeniumed added [Feature] Real-time Collaboration Phase 3 of the Gutenberg roadmap around real-time collaboration [Type] Experimental Experimental feature or API. labels Jan 29, 2026

ingeniumed changed the title ~~[Real-time Collaboration] Add collaborators presence UI~~ Real-time Collaboration: Add collaborators presence UI Jan 29, 2026

ingeniumed requested changes Jan 30, 2026

View reviewed changes

Some code cleanup

ecb7ab1