Real-time Collaboration: Add collaborators presence UI #75065
Conversation
github-actions
bot
added
[Package] Core data
|
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.
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. |
|
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. |
ingeniumed
added
[Feature] Real-time Collaboration
ingeniumed
changed the title
ingeniumed
left a comment
ingeniumed
left a comment
There was a problem hiding this comment.
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.
| ); | ||
|
|
||
| if ( otherActiveUsers.length === 0 ) { | ||
| // Hide avatars when there are no other users |
There was a problem hiding this comment.
It might be worth noting that this ensures that this isn't useable outside the plugin, because RTC would be effectively disabled.
| @@ -0,0 +1,88 @@ | |||
| // import { speak } from '@wordpress/a11y'; | |||
There was a problem hiding this comment.
This should be removed since the cursor registry isn't in place yet.
| className="editor-collaborators-presence__list-item" | ||
| onClick={ () => {} } | ||
| disabled={ ! userState.isConnected } | ||
| aria-label="Clicking scrolls to cursor position in the editor" |
There was a problem hiding this comment.
This label isn't true since the cursor registry isn't in place yet.
|
|
||
| interface CollaboratorsListProps { | ||
| activeUsers: { | ||
| clientId: string; |
There was a problem hiding this comment.
Couldn't the existing type from core-data be potentially used here instead of having this be redefined? We do have access to core-data.
| /** | ||
| * Renders a list showing all active collaborators with their details. | ||
| * Note: activeUsers should already exclude the current user (filtered by parent component). | ||
| * @param root0 |
There was a problem hiding this comment.
Would expand the docs here rather than just leaving them empty.
| const isLargeViewport = useViewportMatch( 'medium' ); | ||
| const isTooNarrowForDocumentBar = useMediaQuery( '(max-width: 403px)' ); | ||
| const { | ||
| postId, |
There was a problem hiding this comment.
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.
2 participants
What?
Adds the collaborators presence UI in the header.
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
useActiveUsershook added in #75009 to populate data in a new<CollaboratorsPresence>component.Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast