diff --git a/packages/editor/README.md b/packages/editor/README.md index d38b37e7a37db4..82ba3c70d23bf9 100644 --- a/packages/editor/README.md +++ b/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. diff --git a/packages/editor/src/components/document-bar/style.scss b/packages/editor/src/components/document-bar/style.scss index 4b84d8b44d39f3..6ca753b0a1764d 100644 --- a/packages/editor/src/components/document-bar/style.scss +++ b/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; diff --git a/packages/editor/src/components/editors-presence/index.js b/packages/editor/src/components/editors-presence/index.js new file mode 100644 index 00000000000000..d44b04bd6f8aa3 --- /dev/null +++ b/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 { children }; +} + +EditorsPresence.Slot = Slot; diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js index 3a3e231259a57b..f9bbb1c0670c6e 100644 --- a/packages/editor/src/components/header/index.js +++ b/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' } } > + + { ( fills ) => + fills.map( ( fill, i ) => ( +
+ { fill } +
+ ) ) + } +
) } diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss index da08825ece3f23..e8546ae42e322e 100644 --- a/packages/editor/src/components/header/style.scss +++ b/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; diff --git a/packages/editor/src/index.js b/packages/editor/src/index.js index 8d31a0b4ed4c4c..20b8435ca64692 100644 --- a/packages/editor/src/index.js +++ b/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';