Real-time collaboration: Add <EditorsPresence> and <BlockCanvasCover> slot fills

packages/block-editor/src/components/block-canvas/index.js

@@ -4,6 +4,7 @@
 import { useMergeRefs, useViewportMatch } from '@wordpress/compose';
 import { useRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
+import { createSlotFill } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -19,6 +20,8 @@ import { useBlockCommands } from '../use-block-commands';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
+export const BlockCanvasCover = createSlotFill( Symbol( 'BlockCanvasCover' ) );
+
 // EditorStyles is a memoized component, so avoid passing a new
 // object reference on each render.
 const EDITOR_STYLE_TRANSFORM_OPTIONS = {
@@ -74,6 +77,27 @@ export function ExperimentalBlockCanvas( {
 				>
 					{ children }
 				</WritingFlow>
+
+				<BlockCanvasCover.Slot fillProps={ { containerRef: localRef } }>
+					{ ( covers ) =>
+						covers.map( ( cover, index ) => (
+							<div
+								key={ index }
+								className="block-canvas-cover"
+								style={ {
+									position: 'absolute',
+									top: 0,
+									left: 0,
+									width: '100%',
+									height: '100%',
+									pointerEvents: 'none',
+								} }
+							>
+								{ cover }
+							</div>
+						) )
+					}
+				</BlockCanvasCover.Slot>
 			</BlockTools>
 		);
 	}
@@ -95,6 +119,26 @@ export function ExperimentalBlockCanvas( {
 			>
 				<EditorStyles styles={ styles } />
 				{ children }
+				<BlockCanvasCover.Slot fillProps={ { containerRef: localRef } }>
+					{ ( covers ) =>
+						covers.map( ( cover, index ) => (
+							<div
+								key={ index }
+								className="block-canvas-cover"
+								style={ {
+									position: 'absolute',
+									top: 0,
+									left: 0,
+									width: '100%',
+									height: '100%',
+									pointerEvents: 'none',
+								} }
+							>
+								{ cover }
+							</div>
+						) )
+					}
+				</BlockCanvasCover.Slot>
 			</Iframe>
 		</BlockTools>
 	);

packages/block-editor/src/private-apis.js

@@ -30,7 +30,10 @@ import DimensionsTool from './components/dimensions-tool';
 import ResolutionTool from './components/resolution-tool';
 import TextAlignmentControl from './components/text-alignment-control';
 import { usesContextKey } from './components/rich-text/format-edit';
-import { ExperimentalBlockCanvas } from './components/block-canvas';
+import {
+	ExperimentalBlockCanvas,
+	BlockCanvasCover,
+} from './components/block-canvas';
 import { getDuotoneFilter } from './components/duotone/utils';
 import { useFlashEditableBlocks } from './components/use-flash-editable-blocks';
 import {
@@ -66,6 +69,7 @@ export const privateApis = {};
 lock( privateApis, {
 	...globalStyles,
 	ExperimentalBlockCanvas,
+	BlockCanvasCover,
 	ExperimentalBlockEditorProvider,
 	getDuotoneFilter,
 	getRichTextValues,

packages/editor/src/components/document-bar/style.scss

@@ -3,6 +3,16 @@
 @use "@wordpress/base-styles/mixins" as *;
 @use "@wordpress/base-styles/variables" as *;
 
+.editor-header__editor-presence {
+	display: flex;
+	align-items: center;
+	height: $button-size-compact;
+	min-width: 0;
+	background: $gray-100;
+	border-radius: $grid-unit-05;
+	flex-shrink: 0;
+}
+
 .editor-document-bar {
 	display: flex;
 	align-items: center;

packages/editor/src/components/editor-presence/index.tsx

@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const { Fill, Slot } = createSlotFill( Symbol( 'EditorPresence' ) );
+
+/**
+ * Renders the SlotFill for editor presence.
+ */
+export const EditorPresence = Fill;
+
+export { Slot };

packages/editor/src/components/header/index.js

@@ -30,6 +30,7 @@ import {
 	NAVIGATION_POST_TYPE,
 } from '../../store/constants';
 import { unlock } from '../../lock-unlock';
+import { Slot as EditorPresenceSlot } from '../editor-presence';
 
 const toolbarVariations = {
 	distractionFreeDisabled: { y: '-50px' },
@@ -149,6 +150,15 @@ function Header( {
 					variants={ toolbarVariations }
 					transition={ { type: 'tween' } }
 				>
+					<EditorPresenceSlot>
+						{ ( fills ) =>
+							fills?.length ? (
+								<div className="editor-header__editor-presence">
+									{ fills }
+								</div>
+							) : null
+						}
+					</EditorPresenceSlot>
 					<DocumentBar />
 				</motion.div>
 			) }

packages/editor/src/components/header/style.scss

@@ -79,6 +79,7 @@
 }
 
 .editor-header__center {
+	gap: $grid-unit-10;
 	grid-column: 3 / 4;
 	display: flex;
 	justify-content: center;

packages/editor/src/dataviews/fields/content-preview/content-preview-view.tsx

@@ -6,6 +6,8 @@ import {
 	// @ts-ignore
 	BlockPreview,
 	// @ts-ignore
+	privateApis as blockEditorPrivateApis,
+	// @ts-ignore
 } from '@wordpress/block-editor';
 import type { BasePost } from '@wordpress/fields';
 import { useSelect } from '@wordpress/data';

packages/editor/src/private-apis.js

@@ -10,6 +10,7 @@ import { lock } from './lock-unlock';
 import { EntitiesSavedStatesExtensible } from './components/entities-saved-states';
 import BackButton from './components/header/back-button';
 import Editor from './components/editor';
+import { EditorPresence } from './components/editor-presence';
 import PluginPostExcerpt from './components/post-excerpt/plugin';
 import PostCardPanel from './components/post-card-panel';
 import PreferencesModal from './components/preferences-modal';
@@ -40,6 +41,8 @@ lock( privateApis, {
 	BackButton,
 	EntitiesSavedStatesExtensible,
 	Editor,
+	EditorContentSlotFill,
+	EditorPresence,
 	PluginPostExcerpt,
 	PostCardPanel,
 	PreferencesModal,