Skip to content

Real-time collaboration: Add CollaborationMode SlotFill for editor toolbar #73196

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 14, 2025
Merged

Real-time collaboration: Add CollaborationMode SlotFill for editor toolbar #73196

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c30da49
Add CollaborationMode SlotFill for editor toolbar
shekharnwagh Nov 12, 2025
1253d25
Use Symbol for CollaborationMode slot name
shekharnwagh Nov 13, 2025
7e6d261
hide CollaborationModeSlot in distraction-free mode
shekharnwagh Nov 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions packages/editor/src/components/collaboration-mode/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
/**
* WordPress dependencies
*/
import { createSlotFill } from '@wordpress/components';

const { Fill, Slot } = createSlotFill( 'CollaborationMode' );
Copy link
Member

@Mamaduka Mamaduka Nov 12, 2025

Choose a reason for hiding this comment

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

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 };
Comment on lines +8 to +13
Copy link
Member

@Mamaduka Mamaduka Nov 12, 2025

Choose a reason for hiding this comment

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

This exmport can be simplified.

const CollaborationModeSlotFill = createSlotFill( 'CollaborationMode' );

export CollaborationModeSlotFill;

// Somewhere else in the app.

<CollaborationModeSlotFill.Slot></CollaborationModeSlotFill.Slot>

<CollaborationModeSlotFill.Fill></CollaborationModeSlotFill.Fill>

10 changes: 10 additions & 0 deletions packages/editor/src/components/document-tools/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import { unlock } from '../../lock-unlock';
import { store as editorStore } from '../../store';
import EditorHistoryRedo from '../editor-history/redo';
import EditorHistoryUndo from '../editor-history/undo';
import { Slot as CollaborationModeSlot } from '../collaboration-mode';

function DocumentTools( { className, disableBlockTools = false } ) {
const { setIsInserterOpened, setIsListViewOpened } =
Expand Down Expand Up @@ -109,6 +110,15 @@ function DocumentTools( { className, disableBlockTools = false } ) {
variant="unstyled"
>
<div className="editor-document-tools__left">
<CollaborationModeSlot>
{ ( fills ) =>
fills?.length ? (
<div className="editor-document-tools__collaboration-mode">
{ fills }
</div>
) : null
}
</CollaborationModeSlot>
{ ! isDistractionFree && (
<ToolbarButton
ref={ inserterSidebarToggleRef }
Expand Down
2 changes: 2 additions & 0 deletions packages/editor/src/private-apis.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import EditorContentSlotFill from './components/editor-interface/content-slot-fi
import BackButton from './components/header/back-button';
import Editor from './components/editor';
import { EditorPresence } from './components/editor-presence';
import { CollaborationMode } from './components/collaboration-mode';
import PluginPostExcerpt from './components/post-excerpt/plugin';
import PostCardPanel from './components/post-card-panel';
import PreferencesModal from './components/preferences-modal';
Expand Down Expand Up @@ -44,6 +45,7 @@ lock( privateApis, {
Editor,
EditorContentSlotFill,
EditorPresence,
CollaborationMode,
GlobalStylesProvider,
mergeBaseAndUserConfigs,
PluginPostExcerpt,
Expand Down
Loading