Add <EditorsPresence> SlotFill

packages/editor/README.md

@@ -393,6 +393,10 @@ _Returns_
 
 -   `React.ReactNode`: The rendered component.
 
+### EditorsPresence
+
+Undocumented declaration.
+
 ### EntitiesSavedStates
 
 Renders the component for managing saved states of entities.

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

@@ -1,3 +1,13 @@
+.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/editors-presence/index.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const { Fill, Slot } = createSlotFill( 'EditorsPresence' );
+
+export const EditorsPresenceFill = Fill;
+
+export function EditorsPresence( { children } ) {
+	return <Fill>{ children }</Fill>;
+}
+
+EditorsPresence.Slot = Slot;

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

@@ -31,6 +31,7 @@ import {
 	NAVIGATION_POST_TYPE,
 } from '../../store/constants';
 import { unlock } from '../../lock-unlock';
+import { EditorsPresence } from '../editors-presence';
 
 const isBlockCommentExperimentEnabled =
 	window?.__experimentalEnableBlockComment;
@@ -148,6 +149,18 @@ function Header( {
 					variants={ toolbarVariations }
 					transition={ { type: 'tween' } }
 				>
+					<EditorsPresence.Slot>
+						{ ( fills ) =>
+							fills.map( ( fill, i ) => (
+								<div
+									className="editor-header__editor-presence"
+									key={ i }
+								>
+									{ fill }
+								</div>
+							) )
+						}
+					</EditorsPresence.Slot>
 					<DocumentBar title={ title } />
 				</motion.div>
 			) }

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

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

packages/editor/src/index.js

@@ -13,3 +13,4 @@ export * from './dataviews/api';
  * Backward compatibility
  */
 export { transformStyles } from '@wordpress/block-editor';
+export { EditorsPresence } from './components/editors-presence';