Real-time collaboration: Add CollaborationMode SlotFill for editor toolbar #73196
Conversation
Creates a new SlotFill component similar to EditorPresence that allows plugins to inject collaboration mode indicators (like view/edit state) into the editor toolbar. The slot renders as the first element in editor-document-tools__left, making collaboration status immediately visible to users. This follows the same pattern as EditorPresence and is exported as a private API for use by collaboration plugins.
|
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. |
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @shekharnwagh! In case you missed it, we'd love to have you join us in our Slack community. If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information. |
| */ | ||
| import { createSlotFill } from '@wordpress/components'; | ||
|
|
||
| const { Fill, Slot } = createSlotFill( 'CollaborationMode' ); |
There was a problem hiding this comment.
This SlotFill is still public; when the name is a string, anyone who knows it can use it. Please take a look at #67238 for better examples.
| /** | ||
| * Renders the SlotFill for collaboration mode. | ||
| */ | ||
| export const CollaborationMode = Fill; | ||
|
|
||
| export { Slot }; |
There was a problem hiding this comment.
This exmport can be simplified.
const CollaborationModeSlotFill = createSlotFill( 'CollaborationMode' );
export CollaborationModeSlotFill;
// Somewhere else in the app.
<CollaborationModeSlotFill.Slot></CollaborationModeSlotFill.Slot>
<CollaborationModeSlotFill.Fill></CollaborationModeSlotFill.Fill>|
@Mamaduka - Thanks for the quick review on this PR! This is actually not going into trunk, but into our experimental branch - wpvip/rtc-plugin where we are building out real-time collaboration. Once it goes into that branch, we cherry pick changes and turn them into formal PRs into trunk. It'd be that point that it'd be ready for formal review. We'll def take your comments into consideration, but not all of them may be solved in this PR. They will be before the formal PR 🙏🏾 The corresponding issue is #52593. |
Changes the CollaborationMode SlotFill to use a Symbol instead of a string for the slot name. This makes the slot truly private by ensuring only code with a reference to the exported Fill/Slot components can access it. String-based slot names can be accessed by anyone who knows the name. Using Symbol() prevents unauthorized usage and follows the pattern established in PR WordPress#67238.
ingeniumed
left a comment
There was a problem hiding this comment.
This is good for our wpvip branch. We can work on it a bit more before our PR into trunk.
Add CollaborationMode SlotFill for editor toolbar
What?
Adds a new
CollaborationModeSlotFill that lets plugins display collaboration mode indicators (like view/edit state) in the editor toolbar.Why?
For real-time collaboration, we need to show users their current mode - whether they can edit or are in view-only mode. This follows the same pattern as
EditorPresence.How?
CollaborationModeSlotFill componentTesting Instructions
To test with a plugin:
The indicator should appear as the first item in the left toolbar.
Screenshots or screencast
N/A - Infrastructure only, no visual changes without a Fill.